实现简单增删查改表单处理(html/MySQL/Node.js)

学习内容：基于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)
此处根据名字进行数据修改

总结：
以上主要是写后端的逻辑，页面如何实现可以直接拿代码，前端如何从后端拿导数据，以及后端又是如何进行操作数据库。