接第一步/mainmaster/article/details/115323517
对界面进行简单修改，如下：
下面为界面的代码：
<!DOCTYPE html>
<html ng-app = 'test'>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-type=text/html;charset=utf-8"/>
<!-- jQuery -->
<script type="text/javascript" src="http://code.changer.hk/jquery/1.11.2/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="/vue@next" ></script>
<link rel="stylesheet" type="text/css" href="./css/mystyle.css"/> <!-- 单独定义了一个样式的文件，在这里直接引用 -->
<!-- <script type="text/javascript" src="testdb.php">
</script> -->
<title>MySQL数据库测试</title>
</head>
<body>
<div id="app"></div>
<!-- 定义头信息 -->
<div class="header">
<h3>MySQL数据库连接操作</h3>
</div>
<!-- 定义主信息为2列 -->
<div class="row">
<!-- 显示第一列信息 -->
<div class="side">
<form action="conn.php" method="post" name="connectdb">
<h3>服务器信息</h3><br>
<!-- <label><div class="leftbar">IP地址：</div><input v-model="IP" id="id-ip" value="127.0.0.1" name="IP"/></label><br> -->
<label><div class="leftbar">用户名 </div><input v-model="username" value="root" id="username" name="username"/></label><br>
<label><div class="leftbar">口 令：</div><input v-model="password" value="root" id="password" name="password"/></label><br>
<label><div class="leftbar">数据库名称：</div><input v-model="dbname" value="test" id="dbname" name="dbname"/></label><br>
<!-- <input type="submit" name="link" value="连接数据库" /><br> -->
<button class="button1" name="link">连接数据库</button>
<textarea rows="3" cols="50" name="info">
留一个位置，当单击连接数据库的按钮的时候，将数据库连接的结果显示到这里。
</textarea>
<!-- 画一条线 -->
<hr />
<div class="button1" οnclick="deldb" >
删除数据库
</div>
<div class="button1" οnclick="createdb">
创建数据库
</div>
<!-- <input type="submit" value=""/> -->
</form>
</div>
<!-- 显示第二列信息 -->
<div class="main">
<form action="addonerecord.php" method="post">
<h3>表单及数据信息</h3><br>
<h3>请输入表名称：<input v-model="tablename" name="tablename" value="myguests" /> </h3>
<button class="button1" οnclick="testtable" >检测表</button>
<button class="button1" οnclick="deltable">删除表</button>
<button class="button1" οnclick="createtable">创建表</button>
<button class="button1" οnclick="showtablestru">显示表结构</button><br><br>
<button class="button1" name="addonrecord">增加一条记录</button>
<button class="button1" name="addrecords">增加多条记录</button>
<button class="button1" name="removerecords">清空记录</button>
<button class="button1" name="showrecords">显示表数据</button>
<hr >
<div class="">
<center>
<table class="table table-bordered table-striped">
<thead>
<tr>
<td align="center">学号</td>
<td align="center">姓</td>
<td align="center">名</td>
<td align="center">邮件地址</td>
</tr>
</thead>
<tbody id="tbody"></tbody>
</table>
</center>
</div>
</form>
</div>
</div>
<!-- 显示底部信息 -->
<div class="footer">
<h2 align="center">保定***技术有限公司</h2>
<h2 align="right">Six-Classics-note-Me出品 .3.21</h2>
</div>
</body>
<script type="text/javascript">
//"{"id":"1","firstname":"John","lastname":"Doe","email":"john@"}{"id":"2","firstname":"Mary","lastname":"Moe","email":"mary@"}{"id":"3","firstname":"Julie","lastname":"Dooley","email":"julie@"}{"id":"4","firstname":"John","lastname":"Doe","email":"john@"}{"id":"5","firstname":"Mary","lastname":"Moe","email":"mary@"}{"id":"6","firstname":"Julie","lastname":"Dooley","email":"julie@"}{"id":"7","firstname":"John","lastname":"Doe","email":"john@"}{"id":"8","firstname":"Mary","lastname":"Moe","email":"mary@"}{"id":"9","firstname":"Julie","lastname":"Dooley","email":"julie@"}{"id":"10","firstname":"John","lastname":"Doe","email":"john@"}{"id":"11","firstname":"Mary","lastname":"Moe","email":"mary@"}{"id":"12","firstname":"Julie","lastname":"Dooley","email":"julie@"}"
/* $.ajax({
type: 'POST',
url: 'testdb.php',
data: {"id":"1","firstname":"John","lastname":"Doe","email":"john@"},
success: function (data) {
//这里采用了一个非常笨的方法，有哪位大神有好的方法，后
//使用正则表达式 将其中的 '｝' 更换成 '｝ ' ,增加了一个空格，
var reg = new RegExp('}',"g");
var data = data.replace(reg,'} ');
//根据 空格 分割成多个对象，
var a = data.split(' ');
var trStr = '';//动态拼接table
for (var i = 0; i < a.length-1; i++) {
//a[i]=a[i].replace('{','');
trStr += '<tr class="example">';
trStr += '<td width="15%">' + JSON.parse(a[i]).id + '</td>';
trStr += '<td width="15%">' + JSON.parse(a[i]).firstname + '</td>';
trStr += '<td width="15%">' + JSON.parse(a[i]).lastname + '</td>';
trStr += '<td>' + JSON.parse(a[i]).email + '</td>';
//trStr += '<td>' + JSON.parse(a[i]).reg_date + '</td>';
trStr += '</tr>';
}
$("#tbody").html(trStr);
}
}); */
var app = Vue.createApp({
data(){
return {
message:'',
ip:'127.0.0.1',
username:'root',
password:'root',
dbname:'scada',
tablename:'db'
}
},
template:"<h2>{{message}}</h2>"
})
var vm = app.mount("#app")
</script>
</html>
从代码中可以看到，连接数据库的按钮调用了conn.php,并且传递了4个参数（username,password,dbname,link);
conn.php文件如下：
<?php
//将php设定为utf8模式，否则当打印汉字的时候会出现乱码
header("Content-type:text/html;charset=utf-8");
//echo $_POST;
//此处link对应htm的函数名称,可以在test.html中搜索link，注意也是和name对应，由于其他的按钮也调用这个文件，所以就不能控制link了，暂时注释掉
/* if(!isset($_POST['link'])){
exit('非法访问');
} */
//从html获得参数，这个和html中控件的nam有关系，必须一一对应
$username = $_POST['username'];
$password = $_POST['password'];
/* echo $username;
echo $password; */
//根据得到的用户名和密码连接数据库
$conn = @mysql_connect("localhost","$username","$password");
if(!$conn){
die("连接数据库失败：".mysql_error());
}
// 如果连接成功，进一步连接数据库中的表test
mysql_select_db("test",$conn);
mysql_query("set names utf8");
echo '连接成功 <a href = "javascript:history.back(-1);">返回</a>';
/* if(!$result)
{
die("连接数据库失败：".mysql_error());
//die("连接数据库test成功");
}else{
mysql_query("set names utf8");
}
//设置字符集 */
?>
界面中单击按钮 连接数据库 可以看到返回数据库的连接信息；
从界面代码中可以看到，还有多个按钮，在这里，我只写了几个按钮的功能 增加一条记录，清空记录，显示记录
当单击按钮的时候，调用 addonerecord.php文件，消息name为 addonerecord,removerecords,showrecords;
addonerecord.php如下
<?php
//将php设定为utf8模式，否则当打印汉字的时候会出现乱码
header("Content-type:text/html;charset=utf-8");
//echo $_POST;
//从html获得参数，这个和html中控件的nam有关系，必须一一对应
//$username = $_POST['username'];
//$password = $_POST['password'];
//$tablename = $_POST['tablename'];
//$dbname = $_POST['dbname'];
//echo $tablename;
/* echo $username;
echo $password; */
//根据得到的用户名和密码连接数据库
$conn = @mysql_connect("localhost","root","root");
if(!$conn){
die("连接数据库失败：".mysql_error());
exit();
}
// 如果连接成功，进一步连接数据库中的表test
mysql_select_db("test",$conn);
//echo $tablename;
//mysql_query("set names utf8");
//echo "1";
if(isset($_POST['addonrecord'])){
$sql = "insert into myguests(firstname,lastname,email) value('john','doe','john@')";
$res = mysql_query($sql,$conn);
//echo $res;
if(!$res){
echo '对不起，插入记录失败！'.mysql_error(),'<br/>';
echo '点击这里重新注册<a href = "javascript:history.back(-1);">返回重试</a>';
}
else{
echo '插入记录成功 <a href = "javascript:history.back(-1);">返回</a>';
}
}
if(isset($_POST['addrecords'])){
/* $sql = "insert into myguests(firstname,lastname,email) value('john','doe','john@')";
$sql .= "insert into myguests(firstname,lastname,email) value('jack','home','jack@')";
if($conn->multi_query($sql)==true)
//$res = mysql_query($sql,$conn);
//echo $res;
{
echo '对不起，插入记录失败！'.mysql_error(),'<br/>';
echo '点击这里重新注册<a href = "javascript:history.back(-1);">返回重试</a>';
}
else{
echo '插入记录成功 <a href = "javascript:history.back(-1);">返回</a>';
}
*/
}
if(isset($_POST['removerecords'])){
$sql = "DELETE FROM `myguests` WHERE 1";
$res = mysql_query($sql,$conn);
//echo $res;
if(!$res){
echo '对不起，清空记录失败！'.mysql_error(),'<br/>';
echo '点击这里重新操作<a href = "javascript:history.back(-1);">返回重试</a>';
}
else{
echo '清空记录成功 <a href = "javascript:history.back(-1);">返回</a>';
}
}
if(isset($_POST['showrecords'])){
$sql = "select * FROM myguests WHERE 1";
$res = mysql_query($sql,$conn);
echo "<table border=\"1px\" align=\"center\">
<tr>
<td>firstname</td>
<td>lastname</td>
<td>email</td>
</tr>";
while($result = mysql_fetch_array($res))
{
echo "<tr>
<td>".$result["firstname"]."</td>
<td>".$result["lastname"]."</td>
<td>".$result["email"]."</td>
</tr>";
}
echo "</table>";
echo '<a href = "javascript:history.back(-1);">返回</a>';
}
?>
完成后，执行结果如下：
其他的按钮，暂时还没有写完，等下次一起发布吧。
