P2-28学生信息管理，前后端联动

学生信息管理，前后端联动

使用到 node.js，bootstrap.min…css，jquery.min.js，

student0114.html(主页面，数据在数据库中）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生信息管理</title>
    <link rel="stylesheet" href="bootstrap.min.css">
    <style>
        #template {
            display: none;
        }
        
        .box input {
            margin: 4px 6px;
        }
        
        .box p {
            float: right;
            /* margin-left: 50px; */
            margin-right: 150px;
        }
        
        #mask {
            width: 100%;
            height: 100%;
            position: fixed;
            background-color: rgba(0, 0, 0, .7);
            top: 0;
            left: 0;
            display: none;
        }
        
        #popup {
            width: 400px;
            padding: 30px 10px;
            position: fixed;
            background-color: #fff;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            border-radius: 10px;
            display: none;
        }
        
        #popup .error {
            color: red;
        }
        
        #chazhao111 {
            height: 26px;
        }
    </style>
</head>

<body>
    <h3>学生信息表</h3>
    <div class="box">
        <p>
            <button class="btn btn-primary" id="add">+ 新增学生</button>
        </p>

        <p>
            <select name="" id="chazhao111">
                <option value="id">学号</option>
                <option value="name">姓名</option>
                <option value="sex">性别</option>
                <option value="age">年龄</option>
                <option value="city">籍贯</option>
                <option value="joinDate">入学时间</option>
                <option value="" style="color: orangered;">所有信息</option>
            </select>
            <input type="text" id="input1">
            <button class="btn btn-info" id="chazhao">Q 查找学生</button>
        </p>



    </div>

    <table class="table table-hover">
        <thead>
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>籍贯</th>
                <th>入学时间</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody id="studentsList">
            <tr id="template">
                <td class="data-id"></td>
                <td class="data-name"></td>
                <td class="data-sex"></td>
                <td class="data-age"></td>
                <td class="data-city"></td>
                <td class="data-joinDate"></td>
                <td>
                    <button class="btn btn-primary bianji">编辑</button>
                    <button class="btn btn-danger data-del">删除</button>
                </td>
            </tr>
        </tbody>
    </table>

    <!--遮罩层/弹出框 -->
    <div id="mask"></div>
    <div id="popup">
        <p>
            <label for="id">学号</label>
            <input type="text" id="id">
            <p class="error" style="display: none;">此学号已存在!!!</p>
        </p>
        <p>
            <label for="name">姓名</label>
            <input type="text" id="name">
        </p>
        <p>
            <label>性别</label>
            <input type="radio" name="sex" id="male" checked>男
            <input type="radio" name="sex">女
        </p>
        <p>
            <label for="age">年龄</label>
            <input type="number" id="age">
        </p>
        <p>
            <label for="city">籍贯</label>
            <input type="text" id="city">
        </p>
        <p>
            <label for="joinDate">入学时间</label>
            <input type="date" id="joinDate">
        </p>
        <button id="cancel" class="btn btn-default" style="float:right;">取消</button>
        <button id="confirm" class="btn btn-primary" style="float:right;margin-right:15px;">确认</button>
    </div>

</body>

</html>
<script src="jquery.min.js"></script>
<script>
    //对接 展示数据
    //原生//ajax请求 也可以
    function f1() {
        let http = new XMLHttpRequest();
        http.open("get", `http://127.0.0.1:8080/zhanshi`);
        http.send();
        http.onreadystatechange = function() {
            if (http.readyState === 4) {
                let data = JSON.parse(http.responseText);
                data.forEach(item => {
                    //克隆
                    let newItem = $("#template").clone(true).attr("id", "");
                    $("#studentsList").append(newItem);
                    newItem.find(".data-id").html(item.id)
                    newItem.find(".data-name").html(item.name)
                    newItem.find(".data-sex").html(item.sex ? "男" : "女")
                    newItem.find(".data-age").html(item.age)
                    newItem.find(".data-city").html(item.city)
                    newItem.find(".data-joinDate").html(item.joinDate)

                })
            }
        }
    }
    f1();

    //删除
    $(".data-del").click(function() {
        let id = $(this).closest("tr").find(".data-id").html();
        let name = $(this).closest("tr").find(".data-name").html();
        if (confirm(`确定要删除${name}的数据吗？删除后无法恢复`)) {
            let http = new XMLHttpRequest();
            http.open("get", `http://127.0.0.1:8080/del?id=${id}`);
            http.send();
            http.onreadystatechange = function() {
                if (http.readyState === 4) {
                    if (http.responseText === "success") {
                        alert("删除成功");
                        history.go(0)
                    } else {
                        alert("删除失败");
                    }
                }
            }
        }
    })

    // 操作弹出层de 显示隐藏
    let popup = {
        show() {
            $("#mask").show();
            $("#popup").slideDown();
        },
        hide() {
            $("#mask").hide();
            $("#popup").hide();
        }
    }


    //增加
    $("#add").click(function() {
        popup.show();
        //失焦
        $("#id").blur(function() {
            let id = $("#id").val();
            if (id) {
                let http = new XMLHttpRequest();
                http.open("get", `http://127.0.0.1:8080/zhanshi?id=${id}`);
                http.send();
                http.onreadystatechange = function() {
                    if (http.readyState === 4) {
                        let data = JSON.parse(http.responseText)
                        if (data.length) {
                            $("#popup .error").show();

                        } else {
                            $("#popup .error").hide();
                        }
                    }
                }
            }


        });

        //增加学生，点击确定按钮
        $("#confirm").click(function() {
            let id = $("#id").val();
            let name = $("#name").val();
            let male = $("#male")[0].checked ? 1 : 0;
            let age = $("#age").val();
            let city = $("#city").val();
            let joinDate = $("#joinDate").val();
            if (id && name && male && age && city && joinDate) {
                let http = new XMLHttpRequest();
                http.open("get", `http://127.0.0.1:8080/adds?id=${id}&name=${name}&male=${male}&age=${age}&city=${city}&joinDate=${joinDate}`);
                http.send();
                http.onreadystatechange = function() {
                    if (http.readyState === 4) {
                        if (http.responseText === "success") {
                            alert("添加成功");
                            history.go(0)
                        }
                    }
                }
            } else {
                alert("所有选项不可为空,请检查后提交")
            }
        })
    })

    //取消增加
    $("#cancel").click(function() {
        // popup.hide();
        $("#id")[0].disabled = "";
        history.go(0);
    })

    //编辑
    $(".bianji").click(function() {
        popup.show();
        $("#id").attr("disabled", "true");

        $("#id").val($(this).closest("tr").find(".data-id").html());
        $("#name").val($(this).closest("tr").find(".data-name").html());
        $("#male").val($(this).closest("tr").find(".data-sex").html());
        $("#age").val($(this).closest("tr").find(".data-age").html());
        $("#city").val($(this).closest("tr").find(".data-city").html());
        $("#joinDate").val($(this).closest("tr").find(".data-joinDate").html());

        $("#confirm").click(function() {
            let id = $("#id").val();
            let name = $("#name").val();
            let male = $("#male")[0].checked ? 1 : 0;
            let age = $("#age").val();
            let city = $("#city").val();
            let joinDate = $("#joinDate").val();
            if (id && name && male && age && city && joinDate) {
                let http = new XMLHttpRequest();
                http.open("get", `http://127.0.0.1:8080/addsss?id=${id}&name=${name}&male=${male}&age=${age}&city=${city}&joinDate=${joinDate}`);
                http.send();
                http.onreadystatechange = function() {
                    if (http.readyState === 4) {
                        if (http.responseText === "success") {
                            alert("添加成功");
                            history.go(0)
                        }
                    }
                }
            } else {
                alert("所有选项不可为空,请检查后提交")
            }
        })
    })

    //查找
    $("#chazhao").click(function() {
        //获取字段名
        let key = $("select").val();
        //获取值
        let value = $("#input1").val();
        if (value == "男") {
            value = "1";
        } else {
            if (value == "女") {
                value = "0";
            }
        }
        let newtr = $("#template").clone(true);
        if (key) {
            let http = new XMLHttpRequest();
            http.open("get", `http://127.0.0.1:8080/cha?key=${key}&value=${value}`);
            http.send();
            http.onreadystatechange = function() {
                if (http.readyState === 4) {
                    // let newItem = $("#template").clone(true).attr("id", "");
                    $("#studentsList").html("");
                    $("#studentsList").append(newtr);
                    let data = JSON.parse(http.responseText);
                    data.forEach(item => {
                        //克隆
                        let newItem = newtr.clone(true).attr("id", "");
                        $("#studentsList").append(newItem);
                        newItem.find(".data-id").html(item.id)
                        newItem.find(".data-name").html(item.name)
                        newItem.find(".data-sex").html(item.sex ? "男" : "女")
                        newItem.find(".data-age").html(item.age)
                        newItem.find(".data-city").html(item.city)
                        newItem.find(".data-joinDate").html(item.joinDate)
                    })
                }
            }
        } else {
            f1();
            history.go(0)
        }
    })
</script>

zhuce.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        .box {
            width: 210px;
            margin: 50px;
            border: 1px solid #eee;
        }
        
        h2 {
            padding-left: 10px;
            background-color: paleturquoise;
        }
        
        p {
            margin: 10px;
        }
        
        button {
            margin-left: 40px;
        }
    </style>
</head>

<body>
    <div class="box">
        <h2>用户注册</h2>
        <p><input type="email" name="" id="username" placeholder="请设置用户名"></p>
        <p><input type="password" id="password" placeholder="请设置密码"></p>
        <button type="submit" id="register">注册</button>
        <a href="denglu.html"><button type="submit">去登陆</button></a>
    </div>
    <script src="jquery.min.js"></script>
    <script>
        $("#register").click(function() {
            if ($("#username").val().length === 0 || $("#password").val().length === 0) {
                alert("请输入用户名或密码")
            } else {
                let http = new XMLHttpRequest();
                http.open("get", `http://127.0.0.1:8080/zhuce?username=${$("#username").val()}&password=${$("#password").val()}`);
                http.send();
                http.onreadystatechange = function() {
                    if (http.readyState === 4) {
                        if (http.responseText == "success") {
                            alert("注册成功,点击可直接登录或点击去登陆按钮");
                            location.href = "http://127.0.0.1/270113/denglu.html";
                        } else {
                            alert("注册失败")
                        }
                    }
                }
            }

        })
    </script>
</body>

</html>

denglu.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        .box {
            width: 210px;
            margin: 50px;
            border: 1px solid #eee;
        }
        
        h2 {
            padding-left: 10px;
            background-color: paleturquoise;
        }
        
        p {
            margin: 10px;
        }
        
        button {
            margin-left: 40px;
        }
    </style>
</head>

<body>
    <div class="box">
        <h2>用户登录</h2>
        <p><input type="email" name="" id="username" placeholder="请输入用户名"></p>
        <p><input type="password" id="password" placeholder="请输入密码"></p>
        <p><input type="checkbox" id="che">30天内免登录</p>
        <button type="submit" id="login">登录</button>
        <a href="zhuce.html"><button type="submit">注册</button></a>
    </div>

    <script src="jquery.min.js"></script>

    <script>
        //登录
        $("#login").click(function() {
            if ($("#username").val().length === 0 || $("#password").val().length === 0) {
                alert("请输入用户名或密码")
            } else {
                let http = new XMLHttpRequest();
                http.open("get", `http://127.0.0.1:8080/shouye?username=${$("#username").val()}&password=${$("#password").val()}`)
                http.send();
                http.onreadystatechange = function() {
                    if (http.readyState === 4) {
                        if (http.responseText == "success") {
                            alert("登陆成功")
                        } else {
                            alert("用户名或密码错误")
                        }
                    }
                }
            }
        });
        let cookie = {
            // 写入/修改cookie
            set(key, value, expires) {
                if (typeof expires === "number") {
                    let date = new Date();
                    date.setDate(date.getDate() + expires)
                    document.cookie = `${key}=${value};expires=${date}`;
                } else {
                    let d = new Date(expires);
                    document.cookie = `${key}=${value};expires=${d}`;
                    //  }
                }
            },
            // 读取cookie
            get(key) {
                let arr = document.cookie.split("; ")
                var result = {}
                arr.forEach(item => {
                    let key = item.split("=")[0];
                    let value = item.split("=")[1];
                    result[key] = value;
                })
                return key ? result[key] : result;
            },
            // 删除cookie
            remove(key) {
                if (this.get(key)) {
                    document.cookie = key + "=18;expires=" + new Date('1999-09-09');
                    return true;
                } else {
                    return false;
                }
            }
        }


        $("#login").click(function() {
            if ($("#che")[0].checked) {
                cookie.set("username", $("#username").val(), 30);
                cookie.set("password", $("#password").val(), 30)
            }
        })

        if (cookie.get("username") && cookie.get("password")) {
            $("#username").val(cookie.get("username"));
            $("#password").val(cookie.get("password"))

        }
    </script>
</body>

</html>

server.js(后端)

let express = require("express")();
let mysql = require("mysql");
const port = 8080;

//解决跨域
express.all("/*", function(req, res, next) {
    // 跨域处理
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "X-Requested-With");
    res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
    res.header("X-Powered-By", ' 3.2.1');
    res.header("Content-Type", "application/json;charset=utf-8");
    next(); // 执行下一个路由
});
//规划mysql链接
let sql = mysql.createConnection({
    host: "localhost",
    user: "root",
    password: "123456",
    database: "student1",
    timezone: "08:00"
});
//尝试连接
sql.connect();


//登录：接收来自前端的请求并查找数据库并向前端返回查找结果
express.get("/shouye", (request, response) => {
    let username = request.query.username;
    let password = request.query.password;
    // console.log(username, password);
    sql.query(`SELECT * FROM usernames WHERE username="${username}" AND password="${password}"`, (error, data) => {
        if (error) {
            console.log(error);
            response.send("error")
        } else {
            if (!data.length) {
                response.send("error");
                console.log("error")
            } else {
                response.send("success")
                console.log(data)
            }
        }
    })
})

//注册：接收来自前端的请求查找数据库对比用户名并向前端返回结果
express.get("/zhuce", (request, response) => {
    let username = request.query.username;
    let password = request.query.password;
    //查询用户名是否已被注册
    sql.query(`SELECT * FROM usernames WHERE username="${username}"`, (error, data) => {
        //如果语法有误
        if (error) {
            console.log(error);
            response.send("error")
        } else {
            //如果数据库没有,则可以注册
            if (!data.length) {
                sql.query(`INSERT INTO usernames (username,password) VALUES ("${username}","${password}")`, (error) => {
                    if (error) {
                        response.send("error")
                    } else {
                        response.send("success")
                    }
                })
            } else {
                //已经被注册
                response.send("cuo")
            }
        }
    })


})


//学生管理页面增删查改
//对数据----
express.get("/zhanshi", (request, response) => {
    let id = request.query.id;
    let s = id ? `SELECT * FROM students WHERE id="${id}"` : `SELECT * FROM students ORDER BY id`;
    sql.query(s, (error, data) => {
        if (error) {
            console.log(error);
            response.send("error")
        } else {
            response.send(data)
        }

    })
})

//删除id
express.get("/del", (request, response) => {
    let id = request.query.id;
    sql.query(`DELETE FROM students WHERE id=${id}`, (error, data) => {
        if (error) {
            console.log(error);
            response.send("error")
        } else {
            response.send("success")
        }
    })
})

//增加
express.get("/adds", (request, response) => {
    let id = request.query.id;
    let name = request.query.name;
    let male = request.query.male;
    let age = request.query.age;
    let city = request.query.city;
    let joinDate = request.query.joinDate;

    sql.query(`INSERT INTO students (id, name, sex, age, city, joinDate) VALUES ("${id}", "${name}", ${male}, "${age}","${city}","${joinDate}")`, (error, data) => {
        if (error) {
            console.log(error);
            response.send("error")
        } else {
            response.send("success")
        }
    })
})

//编辑/更改
express.get("/addsss", (request, response) => {
    let id = request.query.id;
    let name = request.query.name;
    let male = request.query.male;
    let age = request.query.age;
    let city = request.query.city;
    let joinDate = request.query.joinDate;

    sql.query(`UPDATE students SET name="${name}",sex=${male},age="${age}",city="${city}",joinDate="${joinDate}" WHERE id="${id}"`, (error, data) => {
        if (error) {
            console.log(error);
            response.send("error")
        } else {
            response.send("success")
        }
    })
})

//查找
express.get("/cha", (request, response) => {
    let key = request.query.key;

    let value = request.query.value;
    console.log(key, value)
    sql.query(`SELECT * FROM students WHERE ${key}="${value}"`, (error, data) => {
        if (error) {
            console.log(error);
            response.send("error")
        } else {
            response.send(data)
        }
    })
})

//监听
express.listen(port);
console.log(port + "端口连接成功");