XAMPP + Webstorm访问本地数据
- 准备工作（此处不展开介绍）
-
- webstorm 下载 安装
- XAMPP 下载 安装
- jQuery 库下载和安装
- 简单的 PHP、SQL语句
- 访问本地数据
-
- 打开XAMMP
- Javascript部分
- PHP 部分
- HTML 部分
注：本教程只给了简略步骤，具体内容可查阅相关资料。
准备工作（此处不展开介绍）
webstorm 下载 安装
官网即可下载
XAMPP 下载 安装
注： 需要配置部分文件。
jQuery 库下载和安装
直接引用即可。
简单的 PHP、SQL语句
php语句基本的语法数组对象等内容
SQL语句打开数据库（参数）查询插入删除关闭等
访问本地数据
打开XAMMP
1，启动 Apache
2， MySQL服务器
Javascript部分
<script>//index.js/*利用服务器打开利用服务器打开利用服务器打开重要的问题说三遍不行再说三遍*/let oBtn = document.getElementById('btn'); //let ES6 命名语法oBtn.onclick = function(){$.ajax({'url':'index.php','type':'GET','async':true,'dataType':'json','data':{"username":$('#username').val(),"age":$('#age').val()},'success':function(data){$('#username').val('');$('#age').val('');if(!data.data[1]){alert("服务器空间有限，暂不支持账户注册，请用默认的账户。");}else{alert("你以为进入了另一个世界？ 不，你还在我的世界之外。");window.open('https://www.baidu.com','_blank');}},'error':function(data){console.log('数据库连接失败');},});}
</script>
PHP 部分
<?php//index.phpheader('Content-Type: application/json');header('Content-Type: text/html;charset=utf-8');//接受客户账户信息$username = $_GET['username'];$age = $_GET['age'];$dbhost = 'localhost:3306';$dbuser = 'root';//用户名$dbpass = '';//密码$database ="test";//数据库名//echo "建立连接";$conn = new mysqli($dbhost, $dbuser, $dbpass,$database);if ($conn->connect_error) {die("连接失败: " . $conn->connect_error);}//基本的SQL查询语句//$sql = "DELETE FROM test WHERE username=''";//$sql = "DELETE FROM test WHERE age='0'";//$result = $conn->query($sql);//$sql = "DELETE FROM test WHERE username='kankan_ol'";// = $conn->query($sql);//$sql = "SELECT id,username, age FROM test ";//$result = $conn->query($sql);//$sql = "INSERT INTO test (id,username, age) VALUES ('".$result->num_rows."', '".$username."', '".$age."')";//$result = $conn->query($sql);$sql = "SELECT id,username,age FROM test ";$result = $conn->query($sql);//对象class Pdata{var $id;var $name;var $age;function Pdata($id,$name,$age){$this->id = $id;$this->name = $name;$this->age= $age;}//return {$this->id,$this->name,$this->age};}$dataC = array();if ($result->num_rows > 0) {// 输出数据$flag = $result->num_rows;while($row = $result->fetch_assoc()) {$item = new Pdata($row["id"],$row["username"],$row["age"]);array_push($dataC ,$item);if($row["username"]== $username && $row["age"]==$age){$flag = 1;array_push($dataC ,$flag);}else{$flag = 0;array_push($dataC ,$flag);}}}else {echo "0 结果";}$response = array("msg"=> '连接成功',"data" => $dataC);header('Content-Type: text/json');//返回json数据格式echo json_encode($response);mysqli_close($conn);?>
HTML 部分
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><div class="login"><p class="loginTittle">登录</p><span class="loginspan">帐号：<input type="text" id="username" placeholder="默认:knakan_ol" value="kankan_ol"><br>密码：<input type="text" id="age" placeholder="默认：love0214" value="love0214"><br><span></span></span><input type="button" value="登 录" id="btn"></div>
<script src="./jquery-1.12.4.js"></script>
<script src="./index.js"></script>
</body>
</html>
个人github账户：https://github.com/kankanol1
感兴趣可以 star 一下，嘻嘻。
明天的你一定会感谢现在拼命的自己！