使用html测试数据库连接与操作（含界面）
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了使用html测试数据库连接与操作（含界面），小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含7155字，纯文字阅读大概需要11分钟。
内容图文
前面写的那篇文章，只是实现了页面刷新就读取数据库的过程，还不能有人工干预，还不像一个正式的东东，这可能和我以前写c#养成的习惯似的，总想弄的完美点，第一步先吧界面弄出来，说实话，具体怎么通过按钮出发php中的特定函数，到现在还没搞明白呢，先把界面的放到这里，弄明白了在补充过来，如果有哪个好心的大神，给我补充下如何调用php函数的部分，就多谢谢了。
界面部分代码如下：
<!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="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://unpkg.com/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">
<h3>服务器信息</h3><br>
<h3>IP地址：<input v-model="IP" id="id-ip" value="127.0.0.1"/> </h3>
<h3>用户名：<input v-model="username" value="root" id="username"/> </h3>
<h3>口 令：<input v-model="password" value="root" id="password"/> </h3>
<button class="button1" οnclick="Linkdb()">连接数据库</button>
<h3>留一个位置，当单击连接数据库的按钮的时候，将数据库连接的结果显示到这里。</h3>
<!-- 画一条线 -->
<hr />
<h3>用户数据库信息</h3><br>
<h3>请输入数据库名称：<input v-model="dbname" value="test"/> </h3>
<div class="button1" οnclick="testdb">
检测数据库是否存在
</div>
<div class="button1" οnclick="deldb" >
删除数据库
</div>
<div class="button1" οnclick="createdb">
创建数据库
</div>
</div>
<!-- 显示第二列信息 -->
<div class="main">
<h3>表单及数据信息</h3><br>
<h3>请输入表名称：<input v-model="tablename" /> </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" οnclick="addonrecord">增加一条记录</button>
<button class="button1" οnclick="addrecords">增加多条记录</button>
<button class="button1" οnclick="removerecords">清空记录</button>
<button class="button1" οnclick="shourecords">显示表数据</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>
</div>
</div>
<!-- 显示底部信息 -->
<div class="footer">
<h2 align="center">保定飞淩嵌入式技术有限公司</h2>
<h2 align="right">Six-Classics-note-Me出品 2021.3.21</h2>
</div>
</body>
<script type="text/javascript">
//"{"id":"1","firstname":"John","lastname":"Doe","email":"john@example.com"}{"id":"2","firstname":"Mary","lastname":"Moe","email":"mary@example.com"}{"id":"3","firstname":"Julie","lastname":"Dooley","email":"julie@example.com"}{"id":"4","firstname":"John","lastname":"Doe","email":"john@example.com"}{"id":"5","firstname":"Mary","lastname":"Moe","email":"mary@example.com"}{"id":"6","firstname":"Julie","lastname":"Dooley","email":"julie@example.com"}{"id":"7","firstname":"John","lastname":"Doe","email":"john@example.com"}{"id":"8","firstname":"Mary","lastname":"Moe","email":"mary@example.com"}{"id":"9","firstname":"Julie","lastname":"Dooley","email":"julie@example.com"}{"id":"10","firstname":"John","lastname":"Doe","email":"john@example.com"}{"id":"11","firstname":"Mary","lastname":"Moe","email":"mary@example.com"}{"id":"12","firstname":"Julie","lastname":"Dooley","email":"julie@example.com"}"
/* $.ajax({
type: 'POST',
url: 'testdb.php',
data: {"id":"1","firstname":"John","lastname":"Doe","email":"john@example.com"},
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")
function testdb(){
}
/*连接数据库*/
function Linkdb(){
var ip = document.getElementById('id-ip')
var username = document.getElementById('username')
var password = document.getElementById('password')
$.post("testdb.php",connectdb(ip,username,password,'test'){
$("#html_data").html(data);
});
alert(ip.value+' '+username.value+' '+password.value)
}
function createdb(){
}
function deldb()
{
}
function testtable(){
}
function deltable(){
}
function createtable(){
}
function showtablestru()
{
}
function addonrecord(){
}
function addrecords(){
}
function removerecords(){
}
function shourecords(){
}
</script>
</html>
以上还有好多注释掉的部分，初学过程，惭愧。
内容总结
以上是互联网集市为您收集整理的使用html测试数据库连接与操作（含界面）全部内容，希望文章能够帮你解决使用html测试数据库连接与操作（含界面）所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。