Jquery实现学生信息的增删改查

Jquery实现学生信息的增删改查

js实现学生信息的增删改查
layui实现学生信息的增删改查

jquery-1.12.4.min.js:https://jquery.com/

studentMock.js:是后端代码

students：是前端代码

ajax增删改查：是页面代码

ajax：是ajax代码

实现效果

ajax.js代码

//用jquery封装ajax
async function ajax(config){
    return await new Promise(function(resolve){
        $.ajax({
            dataType:"json",  //预期的服务器响应的数据类型。
            processData: false,  //布尔值，规定通过请求发送的数据是否转换为查询字符串。默认是 true。
            ...config,
            success(res){
                resolve(res);
            }
        });
    });
}

studentMock.js代码

//获取学生信息
Mock.mock('/findStudents', 'post', function (options) {
    //搜索传过来的数据
    let indexText = options.body.type;
    let valueName = options.body.value;
    let students = JSON.parse(localStorage.getItem('students') || '[]');
    if(indexText){
        students = students.filter(item=>item[indexText].toString().search(valueName) >= 0)
    }
    return {
        students
    };

})
//添加学生
Mock.mock('/addStudents', 'post', function (options) {
    let { name, age, gender } = options.body;
    console.log(options.body, name, age, gender);
    let students = JSON.parse(localStorage.getItem('students') || '[]');
    let id = 1;
    //判断studens的长度是否大于0，大于0的话，就把students的最后一个元素的id加1
    if (students.length > 0) {
        id = students[students.length - 1].id + 1;
    }
    students.push({
        name,
        age,
        gender,
        id
    })
    localStorage.setItem("students", JSON.stringify(students));
    return {
        msg: "添加成功"
    };
})
//删除学生数据
Mock.mock('/deleteStudents', 'post', function (options) {
    console.log(options.body.deleBtn);
    let { deleBtn } = options.body;
    //获取我点击删除按钮的id
    let students = JSON.parse(localStorage.getItem('students') || '[]');
    students = students.filter(item => item.id != deleBtn);
    console.log(students);
    localStorage.setItem("students", JSON.stringify(students));
    return {
        msg: "删除成功"
    }
})
//修改学生数据
Mock.mock("/reviseStudents", 'post', function (options) {
    let { deleBtn } = options.body;
    let students = JSON.parse(localStorage.getItem('students') || "[]");
    //方法二添加上去修改的内容（通过find来找到你点击的那个学生信息）
    let student = students.find(item => item.id == deleBtn);
    console.log(student);
    return {
        student
        // msg: "修改上传成功"
    }
})
//把修改的学生数据传入新的students
Mock.mock("/reviseStudentsTrue", 'post', function (options) {
    let { name, age, gender, id } = options.body;
    let students = JSON.parse(localStorage.getItem('students') || '[]');
    //可以使用方法一，那边调用就使用返回的student用res.信息就行了
    let student = students.find(item => item.id == id);
    console.log(student);  //可以通过find来查找你点击获取的学生数据，因为find为ture返回当前信息，false返回undefined
    for (let i = 0; i < students.length; i++) {
        //id使用的是全局变量
        if (students[i].id == id) {
            students[i].name = name;
            students[i].age = age;
            students[i].gender = gender;
            console.log(students[i]);
        }
    }
    localStorage.setItem("students", JSON.stringify(students));
    return {
        student
    }
})

students.js代码

//封装查询的添加数据
function data(data) {
    let str = "";
    for (let i = 0; i < data.length; i++) {
        str += `
                    <tr>
                        <td>${data[i].name}</td> 
                        <td>${data[i].age}</td>   
                        <td>${data[i].gender}</td>
                        <td>
                            <input type="button" value="修改" data-id="${data[i].id}">
                            <input type="button" value="删除" data-id="${data[i].id}">
                        </td>
                    </tr>
                `
    }
    $("tbody").html(str);
}
//显示数据
async function show(type, value) {
    let res = await ajax({
        type: "post",
        url: "/findStudents",
        data: {
            type,
            value
        }
    });
    data(res.students);
}
show();
//测试随机获取学生数据
$("#btn").click(function () {
    let obj = Mock.mock({
        'students|10': [{
            'id|+1': 1,
            'name': '@cname',
            'age|20-45': 1,
            'gender': /[男女]/
        }]
    })
    let oldStudents = JSON.parse(localStorage.getItem('students') || '[]');
    localStorage.setItem('students', JSON.stringify([...oldStudents, ...obj.students]));
    show();
})
//添加学生数据
$("#addStudents").click(async function () {
    let gender = $("#addGender:checked").val();
    let name = $("#addUsername").val();
    let age = $("#addAge").val();
    console.log(name, age, gender);
    //判断添加数据为空时不添加
    if ((name == "" && age == "" && gender == "")) {
        alert("不能添加为空的信息");
    } else {
        await ajax({
            type: "post",
            url: "/addStudents",
            data: {
                name,
                age,
                gender
            }
        })
        alert("增加成功");
        show();
    }

})
//删除学生数据，修改学生数据
//deleBtn全局变量获取我点击修改和删除来获取当前学生信息的所有数据（当不使用form表单提交的时候，我们就可以使用表单事件的隐藏属性来获取）
let deleBtn;
//冒泡事件
$("tbody").click(async function (e) {
    // deleBtn = e.target.dataset.id;
    deleBtn = $(e.target).attr("data-id");
    console.log(deleBtn);
    if ($(e.target).val() == "删除") {
        if (confirm("是否删除？")) {
            let res = await ajax({
                type: "post",
                url: "/deleteStudents",
                data: {
                    deleBtn
                }
            })
        }
        show();
    }
    if ($(e.target).val() == "修改") {
        let res = await ajax({
            type: "post",
            url: "/reviseStudents",
            data: {
                deleBtn
            }
        });
        console.log(res.student.id);
        $("#upDataid").val(res.student.id);
        $("#reviseUsername").val(res.student.name);
        $("#reviseAge").val(res.student.age);
        $(`[name=reviseGender][value=${res.student.gender}]`).attr("checked", true);
    }
})
//修改成功学生数据
$("#reviseStudents").click(async function () {
    let name = $("#reviseUsername").val();
    let age = $("#reviseAge").val();
    let gender = $("#reviseGender:checked").val();
    let id = $("#upDataid").val();
    console.log(gender);
    let res = await ajax({
        type: "post",
        url: "/reviseStudentsTrue",
        data: {
            name,
            age,
            gender,
            //这就是使用表单的隐藏属性获取点击的id属性（就不是使用全局变量了）
            id
        }
    })
    alert("修改成功");
    show();
})
//查询学生信息
$("#screenBtn").click(async function () {
    //select有一个属性options是获取下面的所有option，selectedIndex是获取你点击哪个option的下标，text是获取option里面的文本     
    let indexText = $("#screenStudents").val();
    let valueName = $("#screenName").val();
    show(indexText, valueName)
})

ajax增删改查.html代码

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ajax增删改查</title>
    <style>
        table,
        td,
        th {
            /* 设置边框 */
            border: 1px solid;
            /* 边框塌陷 */
            border-collapse: collapse;
            width: 700px;
            height: 25px;
            text-align: center;
        }
    </style>
</head>

<body>
    <form action="">
        <h1>学生管理</h1>
        <h4>增加学生</h4>
        <div>
            <label for="addUsername">姓名：</label>
            <input type="text" name="" id="addUsername">
            <label for="addAge">年龄：</label>
            <input type="text" name="" id="addAge">
            <label for="addGender">性别：</label>
            <input type="radio" name="addGender" id="addGender" value="男"><label for="">男</label>
            <input type="radio" name="addGender" id="addGender" value="女"><label for="">女</label>
            <input type="button" value="增加" id="addStudents">
        </div>
        <h4>修改学生</h4>
        <div>
            <input type="hidden" id="upDataid">
            <label for="reviseUsername">姓名：</label>
            <input type="text" name="" id="reviseUsername">
            <label for="reviseAge">年龄：</label>
            <input type="text" name="" id="reviseAge">
            <label for="reviseGender">性别：</label>
            <input type="radio" name="reviseGender" id="reviseGender" value="男"><label for="">男</label>
            <input type="radio" name="reviseGender" id="reviseGender" value="女"><label for="">女</label>
            <input type="button" value="修改" id="reviseStudents">
        </div>
        <h4>查询信息</h4>
        <div>
            <select name="" id="screenStudents">
                <option value="name">姓名</option>
                <option value="age">年龄</option>
                <option value="gender">性别</option>
            </select>
            <input type="text" id="screenName">
            <input type="button" value="查询" id="screenBtn">
        </div>
        <h4>学生信息</h4>
        <table>
            <thead>
                <tr>
                    <td>姓名</td>
                    <td>年龄</td>
                    <td>性别</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody id="tbody"></tbody>
        </table>
        <button id="btn">点击随机数据</button>
    </form>

    <script src="./js/mock-min.js"></script>
    <script src="./js/jquery-1.12.4.min.js"></script>
    <script src="./js/ajax.js"></script>
    <script src="./js/studentMock.js"></script>
   <script src="./js/students.js"></script>
</body>

</html>