学习内容：基于Html/MySQL/node.js技术，实现简单表单增删查改功能demo
注意：运行在本机
1、实现效果（界面效果）
界面代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>实现简单的增删查改表单处理(非前后端分离)</title> <script src="js/jquery-1.11.3.js"></script> <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script> <script src="./server.js"></script> <script src="./index.js"></script> </head> <style> .body { margin: 0; } .box_table { border: 0.5px solid silver; width: 60vw; height: 80vh; margin: 10% auto 10%; border-radius: 5px; /* 三个值 上边 | 左边右边 | 下边 */ /*四个值 上边 | 右边 | 下边 | 左边 */ } .search_box { margin: 3% 10% 3% 10%; display: flex; } #searchInput { border: 0.5px solid silver; border-radius: 5px; margin-left: 3%; } .list_box { margin: 3.5% 5% 5% 5%; border: 0.5px solid slategray; border-radius: 5px; } #name { border: 0.5px solid silver; border-radius: 5px; margin-left: 3%; } #idcard { border: 0.5px solid silver; border-radius: 5px; margin-left: 3%; } #entrydate { border: 0.5px solid silver; border-radius: 5px; margin-left: 3%; } #email { border: 0.5px solid silver; border-radius: 5px; margin-left: 3%; } #cardPassword { border: 0.5px solid silver; border-radius: 5px; margin-left: 3%; } .btn_box { display: flex; margin-top: -4%; margin-left: 15%; /* padding-left: 4%; */ } </style> <body> <div class="box_table"> <!-- 搜索框 --> <div class="search_box"> <div style="font-size: 10px;font-weight: bold;margin-right: 3%;">搜索结果:</div> <input type="text" onblur="search()" id="searchInput"> </div> <hr> <!-- 展示列表 --> <div class="list_box"> <table style="border-collapse:separate; border-spacing:16px 8px;font-size: 12px;" align="center"> <thead> <tr> <th>序号</th> <th>名称</th> <th>工号</th> <th>注册日期</th> <th>邮箱</th> <th>密码</th> </tr> </thead> <tbody id="myTable" align="center"> </tbody> </table> </div> <hr> <!-- 表单 --> <form> <div style="display: flex;margin-left: 5%;"> <div> <div style="font-size: 12px;font-weight: bold;padding: 5%;">Name:</div> <input type="text" name="name" id="name" /> </div> <div style="margin-left: 8%;"> <div style="font-size: 12px;font-weight: bold;padding: 5%;">IdCard:</div> <input type="text" name="idcard" id="idcard" /> </div> <div style="margin-left: 8%;"> <div style="font-size: 12px;font-weight: bold;padding: 5%;margin-bottom: 5px;">Time:</div> <input type="date" class="date-picker" name="entrydate" id="entrydate"> </div> </div> <div style="display: flex;margin-left: 5%;"> <div> <div style="font-size: 12px;font-weight: bold;padding: 5%;">Email:</div> <input type="text" name="email" id="email"> </div> <div style="margin-left: 8%;"> <div style="font-size: 12px;font-weight: bold;padding: 5%;">Password:</div> <input type="password" name="cardPassword" id="cardPassword"> </div> </div> <div style="margin-left: 5%;margin-top: 5%;"> <!-- 重置 --> <input type="reset"> </div> </form> <div class="btn_box"> <!-- 提交 --> <input type="submit" onclick="submit()"> <!-- 更新 --> <button onclick="updata()" style="margin-left: 4%;">更新</button> <!-- 删除 --> <button onclick="deleteData()" style="margin-left: 4%;">删除</button> </div> </div> </body> <script type="text/javascript"> init(); </script> </html>
2、处理接口的JS文件（server.js）
const { response } = require("express"); let idData = 0; function init() {//初始化 // //时间默认 var defaultDate = document.querySelectorAll('.date-picker'); for (var i = 0; i < defaultDate.length; i++) { defaultDate[i].valueAsDate = new Date(); } // 默认列表 list() } function list() { axios.get('http://127.0.0.1:3000/list') .then(function (response) { var tbody = document.getElementById("myTable"); if (response.data.length > 0) { response.data.forEach(function (item, index) {//循环获取的数据 var tr = document.createElement('tr')//创建tr行 for (let key in item) {//循环对象 var td = document.createElement('td');//创建单元格 td.innerHTML = item[key]//赋值 tr.appendChild(td)//行追加单元格 } tbody.appendChild(tr)//表格追加行 }) for(let i = 0;i<tbody.rows.length;i++){//循环表格行数 for (var j = 0; j < tbody.rows[i].cells.length; j++) {//循环每一行的单元格 if (tbody.rows[i].cells[3].innerHTML){//第三格是否有值 changeTime(tbody.rows[i].cells[3].innerHTML).then(res=>{//处理时间格式 tbody.rows[i].cells[3].innerHTML = res }) } // var cell = tbody.rows[i].cells[j]; // console.log("第" + (i + 1) + "行第" + (j + 1) + "格的数字是" + cell.innerHTML); } } } }) .catch(function (error) { console.log(error); }); } function search() { const searchData = document.querySelector('#searchInput').value; if (searchData) { axios.get('http://127.0.0.1:3000/search?name=' + searchData) .then(function (response) { // console.log(response.data); this.idData = response.data[0].id document.querySelector('#name').value = response.data[0].name document.querySelector('#idcard').value = response.data[0].idcard // document.querySelector('#entrydate').value = response.data[0].entrydate document.querySelector('#email').value = response.data[0].email document.querySelector('#cardPassword').value = response.data[0].cardPassword }) .catch(function (error) { console.log(error); }); } else { console.log('没有输入') } } function updata() { console.log('更新表单内容') console.log(document.querySelector('#name').value) let formData = { id: idData, name: document.querySelector('#name').value, idcard: document.querySelector('#idcard').value, email: document.querySelector('#email').value, cardPassword: document.querySelector('#cardPassword').value } console.log(456 + JSON.stringify(formData)) axios.get('http://127.0.0.1:3000/update?formData=' + JSON.stringify(formData)) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); } function submit() { console.log('提交表单') console.log(new Date()) axios.post('http://127.0.0.1:3000/add', { "id": 1, "name": document.querySelector('#name').value, "idcard": document.querySelector('#idcard').value, "entrydate": new Date(), "email": document.querySelector('#email').value, "cardPassword": document.querySelector('#cardPassword').value }).then(response => { console.log('/add', response.data) }, error => { console.log('错误', error.message) }) } function deleteData() { console.log('删除数据') axios.get('http://127.0.0.1:3000/detele', { params: { // 请求参数拼接在url上 id: idData } }).then(res => { console.log(res) }) } function changeTime(time) { return new Promise((resolve,reject)=>{ let date = new Date(time); let year = date.getFullYear() let month = date.getMonth() + 1 let day = date.getDate() let hours = date.getHours() let minutes = date.getMinutes() let seconds = date.getSeconds() resolve(year + ':' + fullDate(month) + ':' + fullDate(day) + ':' + fullDate(hours) + ':' + fullDate(minutes) + ':' + fullDate(seconds)) }) } function fullDate(item){//填充0 return item < 10 ? '0' + item : item }
3、后端操作数据库（index.js）
<1>、前提搭建数据库以及存储表（可以参考其他文章进行搭建）
<2>、先连接数据库，如图所示
连接成功：
运行项目：node index.js（node 命名的js文件）
<3>、获取列表接口—tb_employee是数据库命名的数据表
查询所有数据库语句：SELECT * FROM 表名
<4>、插入数据
插入数据 数据库语句：“INSERT INTO tb_employee ( id, name,idcard,entrydate,email,cardPassword )VALUES” + ‘(’ + item + ‘)’
( id, name,idcard,entrydate,email,cardPassword )：表头
VALUES:后面跟插入的值
‘(’ + item + ‘)’：是处理的值：（1,0101,147856,‘2024-02-220’,‘564152@qq.com’,412368）[例子]
如果有插入报错，检查数据配的类型是否与插入数据的类型符合
<5>、删除数据
删除语句：“DELETE FROM tb_employee WHERE id=” + JSON.stringify(id)
此处根据Id进行删除，可以定义其他的删除条件
<6>、查询数据
查询语句：“SELECT * FROM tb_employee WHERE name=” + JSON.stringify(decodeURIComponent(name))
查询条件此处根据名字，可定义其他
<7>、修改数据
修改语句：‘update tb_employee set id=?,name=?,idcard=?,email=?,cardPassword=? where name=’ + JSON.stringify(form.name)
此处根据名字进行数据修改
总结：
以上主要是写后端的逻辑，页面如何实现可以直接拿代码，前端如何从后端拿导数据，以及后端又是如何进行操作数据库。
