js实现的学生增删改查

想被带飞的鱼

已于 2022-04-06 21:47:42 修改

阅读量2.1k

点赞数 1

分类专栏： Javascript 文章标签： javascript html

于 2022-04-06 21:43:49 首次发布

本文链接：https://blog.csdn.net/m0_62008199/article/details/124000787

版权

Javascript 专栏收录该内容

60 篇文章 2 订阅

订阅专栏

js实现的学生增删改查

jQuery实现学生信息的增删改查
 layui实现学生信息的增删改查
在这里插入图片描述

mock-min.js:下载地址：http://mockjs.com/

studentMock.js:是后端代码

students：是前端代码

ajax增删改查：是页面代码

ajax：是ajax代码

实现效果

在这里插入图片描述

ajax代码

function ajax(config){
    return new Promise(function(resolve){
        let xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function(){
            if(xhr.readyState == 4 && xhr.status == 200){
                let text = JSON.parse(xhr.responseText);
                // config.success(text);
                resolve(text);
            }
        }
        xhr.open(config.type,config.url,config.async);
        xhr.send(config.data);
    });
    
}

ajax增删改查代码

<!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="./ajax.js"></script>
    <script src="./js/studentMock.js"></script>
    <script src="./js/students.js"></script>
</body>

</html>

students.js代码


let tbody = document.getElementById("tbody");
let upDataid = document.getElementById("upDataid");
let deleteData = document.querySelectorAll("deleteData");
let reviseStudents = document.getElementById("reviseStudents");
//添加
let addUsername = document.getElementById("addUsername");
let addAge = document.getElementById("addAge");
let sex = document.forms[0]['reviseGender'];
//修改
let reviseGender = document.querySelectorAll("#reviseGender");
let reviseUsername = document.getElementById("reviseUsername");
let reviseAge = document.getElementById("reviseAge");
//查询
let screenBtn = document.getElementById("screenBtn");
let screenName = document.getElementById("screenName");
let screenStudents = document.getElementById("screenStudents");
//封装查询的添加数据
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.innerHTML = str;
}
//显示数据
async function show(type, value) {
    let res = await ajax({
        type: "post",
        url: "/findStudents",
        data: {
            type,
            value
        }
    });
    data(res.students);
}
show();
//测试随机获取学生数据
document.getElementById("btn").onclick = function () {
    let obj = Mock.mock({
        'students|10': [{
            'id|+1': 1,
            'name': '@cname',
            'age|20-45': 1,
            'gender': /[男女]/
        }]
    })
    console.log(obj.students);
    let oldStudents = JSON.parse(localStorage.getItem('students') || '[]');
    console.log(oldStudents);
    localStorage.setItem('students', JSON.stringify([...oldStudents, ...obj.students]));
    show();
}
//添加学生数据
document.getElementById("addStudents").onclick = async function () {
    let addGender = document.querySelectorAll("#addGender");
    let gender = "";
    for (let i = 0; i < addGender.length; i++) {
        if (addGender[i].checked) {
            gender = addGender[i].value;
        }
    }
    console.log(gender);
    //判断添加数据为空时不添加
    if (addUsername.value == "" && addAge.value == "" && gender == "") {
        alert("不能添加为空的信息");
    } else {
        let res = await ajax({
            type: "post",
            url: "/addStudents",
            data: {
                name: addUsername.value,
                age: addAge.value,
                gender: gender
            }
        })
        alert("增加成功");
        show();
    }

}
//删除学生数据，修改学生数据
//deleBtn全局变量获取我点击修改和删除来获取当前学生信息的所有数据（当不使用form表单提交的时候，我们就可以使用表单事件的隐藏属性来获取）
let deleBtn;
//冒泡事件
tbody.onclick = async function (e) {
    deleBtn = e.target.dataset.id;
    if (e.target.value == "删除") {
        if (confirm("是否删除？")) {
            // console.log(e.target.dataset.id);               
            let res = await ajax({
                type: "post",
                url: "/deleteStudents",
                data: {
                    deleBtn
                }
            })
        }
        show();
    }
    if (e.target.value == "修改") {
        let res = await ajax({
            type: "post",
            url: "/reviseStudents",
            data: {
                deleBtn
            }
        })
        //方法二添加上去修改的内容（通过find来找到你点击的那个学生信息），然后这上传修改的地方
        upDataid.value = res.student.id;
        reviseUsername.value = res.student.name;
        reviseAge.value = res.student.age;
        //上传性别的方法一
        // if (res.student.gender == "女") {
        //     sex[1].checked = true;
        // } else {
        //     sex[0].checked = true;
        // }
        console.log("res:", res.student.gender);
        //上传性别的方法二
        document.querySelector(`[name=reviseGender][value=${res.student.gender}]`).checked = true;
    }
}
//修改成功学生数据
reviseStudents.onclick = async function () {
    let gender = "";
    for (let i = 0; i < reviseGender.length; i++) {
        if (reviseGender[i].checked) {
            gender = reviseGender[i].value;
        }
    }
    let res = await ajax({
        type: "post",
        url: "/reviseStudentsTrue",
        data: {
            name: reviseUsername.value,
            age: reviseAge.value,
            gender: gender,
            //这就是使用表单的隐藏属性获取点击的id属性（就不是使用全局变量了）
            id: upDataid.value
        }
    })
    alert("修改成功");
    show();
}
//查询学生信息
screenBtn.onclick = async function () {
    //select有一个属性options是获取下面的所有option，selectedIndex是获取你点击哪个option的下标，text是获取option里面的文本            
    // let indexText = screenStudents[screenStudents.options.selectedIndex].value;
    let indexText = screenStudents.value;
    let valueName = screenName.value;
    /* let res = await ajax({
        type: "post",
        url: "/screenStudents",
        data: {
            indexText,
            valueName
        }
    })
    console.log(res.temp);
    if (res.temp == '') {
        show();
    } else {
        data(res.temp);
    }
    console.log(screenStudents.value); */
    show(indexText, valueName)
}

studentMock.js代码

//获取学生信息
Mock.mock('/findStudents', 'post', function (options) {
    //搜索传过来的数据
    let indexText = options.body.type;
    let valueName = options.body.value;
    console.log(indexText,valueName);
    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') || '[]');
    // for (let i = 0; i < students.length; i++) {
    //     if (students[i].id == deleBtn) {
    //         students[i] = '';
    //     }
    // }
    // students = students.filter(item => item != '');
    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') || "[]");
    //方法一添加上去修改的内容
    // let reviseUsername = document.getElementById("reviseUsername");
    // let reviseAge = document.getElementById("reviseAge");
    // let sex = document.forms[0]['reviseGender'];    
    // for (let i = 0; i < students.length; i++) {
    //     //通过获取点击的修改按钮获取的id来得到我选中的这个数组的所有数据
    //     if (students[i].id == deleBtn) {
    //         reviseUsername.value = students[i].name;
    //         reviseAge.value = students[i].age;
    //         if (students[i].gender == "女") {
    //             sex[1].checked = true;
    //         } else {
    //             sex[0].checked = true;
    //         }
    //         console.log(students[i]);
    //     }
    // }
    //方法二添加上去修改的内容（通过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
    }
})

//查询学生信息(可以和显示合并在一起，查询的方法也可以用第二种，年龄问题就可以根据把年龄改为字符串来模糊查询)
/* Mock.mock("/screenStudents", 'post', function (options) {
    //indexText是获取下拉列表的所有属性，name是我输入我要查找的东西
    let { indexText, valueName } = options.body;
    console.log(indexText, options.body, valueName);
    let students = JSON.parse(localStorage.getItem('students') || '[]');
    console.log(students);
    //创建模糊查询关键字变量
    let reg = new RegExp(valueName, "g");
    console.log(reg);
    //temp满足条件的就返回符合条件的所有数组，不满足就返回undefined
    let temp = students.filter(item => {
        if (indexText == "age") {
            if (item.age == valueName) {
                console.log(item.age);
                return true;
            }
        } else {
            if (item[indexText].match(reg)) {
                return true;
            }
        }
    });
    console.log(temp);
    return {
        temp
    }
}) */