前端学习笔记之学生管理系统增删查改

* {
    margin: 0;
    padding: 0;
}

header, .main, .main_informationDisplay>div {
    padding: 20px;
}

header {
    background-color: rgb(53, 138, 136);
    color: #fff;
    letter-spacing: 5px;
}

.main {
    display: flex;
}

.main_menu:hover {
    cursor: pointer;
}

.main_informationDisplay {
    display: flex;
    flex-grow: 1;
    margin-left: 20px;
}

.main_informationDisplay>div {
    flex-grow: 1;
    border-width: 2px;
    border-style: solid;
    border-color: transparent;
}

table, th, td {
    border: 1px solid #ccc;
}

table {
    width: 100%;
}

.studentsList>caption {
    font: 1.17em bolder;
}


/* h2 样式 */

.main_menu {
    padding: 10px 20px;
    background-color: rgb(32, 82, 80);
    margin-bottom: 4px;
    color: rgb(53, 138, 136);
}


/* 效果 */

.menu_checked {
    background-color: rgb(53, 138, 136);
    color: #fff;
}

.main_informationDisplay_checked {
    border-color: #006363 !important;
}

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>student system 3.0</title>
    <link rel="stylesheet" href="./style.css">
</head>

<body>
    <div class="container">
        <header>
            <h1>学生管理系统</h1>
        </header>
        <div class="main">
            <section>
                <h2 class="main_menu menu_checked">学生列表</h2>
                <h2 class="main_menu">新增学生</h2>
                <h2 class="main_menu">修改学生</h2>
                <h2 class="main_menu">查询学生</h2>
            </section>
            <div class="main_informationDisplay">
                <div class="main_informationDisplay_checked">
                    <table class="studentsList">
                        <caption>学生列表</caption>
                        <thead>
                            <tr>
                                <th>学号</th>
                                <th>姓名</th>
                                <th>年龄</th>
                                <th>性别</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                    <span id="tips"></span>
                </div>
                <div>
                    <h3>新增学生</h3>
                    <form action="#" id="addForm">
                        <div>
                            <label for="addname">姓名</label>
                            <input type="text" id="addname" class="name">
                        </div>
                        <div>
                            <label for="addage">年龄</label>
                            <input type="text" id="addage" class="age">
                        </div>
                        <div>
                            <span>性别</span>
                            <label for="addmale">男</label>
                            <input type="radio" name="gender" id="addmale" value="男">
                            <label for="addfemale">女</label>
                            <input type="radio" name="gender" id="addfemale" value="女">
                        </div>
                        <input type="button" value="确认新增" id="addBtn">
                    </form>
                </div>
                <div>
                    <h3>修改学生</h3>
                    <form action="#" id="modifyForm">
                        <div>
                            <label for="modifyname">姓名</label>
                            <input type="text" id="modifyname" class="name">
                        </div>
                        <div>
                            <label for="modifyage">年龄</label>
                            <input type="text" id="modifyage" class="age">
                        </div>
                        <div>
                            <span>性别</span>
                            <label for="modifymale">男</label>
                            <input type="radio" name="gender" id="modifymale" value="男">
                            <label for="modifyfemale">女</label>
                            <input type="radio" name="gender" id="modifyfemale" value="女">
                        </div>
                        <input type="button" value="确认修改" id="modifyBtn" disabled>
                    </form>
                </div>
                <div>
                    <h3>查询学生</h3>
                    <form action="#" id="queryForm">
                        <select name="" id="">
                            <option value="name">姓名</option>
                            <option value="age">年龄</option>
                            <option value="gender">性别</option>
                        </select>
                        <input type="text" placeholder="查询内容">
                        <input type="button" value="搜索" id="queryBtn">
                    </form>
                </div>
            </div>
        </div>
    </div>
    <script src="./common.js"></script>
</body>

</html>

let studentsData = [
    { id: 1, name: '汪印星', age: '24', gender: '男' },
    { id: 2, name: '李寅峰', age: '22', gender: '男' },
    { id: 3, name: '钟鑫茂', age: '22', gender: '女' },
    { id: 4, name: '张胜江', age: '24', gender: '男' },
    { id: 5, name: '徐阳', age: '25', gender: '男' },
    { id: 6, name: '杨烨', age: '26', gender: '男' },
    { id: 7, name: '杨恩', age: '25', gender: '女' },
    { id: 8, name: '夏琪琦', age: '22', gender: '女' },
    { id: 9, name: '罗雷', age: '26', gender: '男' },
    { id: 10, name: '陈阳吉', age: '22', gender: '男' }
];
let lastId = studentsData[studentsData.length - 1].id;

// ------------ 右侧 div 点击、input 点击 添加效果
let main_info_arr = document.querySelectorAll(".main_informationDisplay>div");  // 所有 div
let h2_arr = document.querySelectorAll(".main>section>h2"); // 所有 h2

main_info_arr.forEach((item, index) => {
    item.onclick = function () {
        main_info_arr.forEach(item => item.classList.remove("main_informationDisplay_checked"));    // 去掉所有 div 框
        item.classList.add("main_informationDisplay_checked"); // 某一个 div 添加边框
        h2_arr.forEach(item => item.classList.remove("menu_checked"));// 去掉所有 h2 样式
        h2_arr[index].classList.add("menu_checked");
    }
});
// ------ h2 点击改变样式
h2_arr.forEach((item, index) => {
    item.addEventListener("click", () => {
        h2_arr.forEach(item => item.classList.remove("menu_checked"));
        item.classList.add("menu_checked");
        main_info_arr.forEach(item => item.classList.remove("main_informationDisplay_checked"));
        main_info_arr[index].classList.add("main_informationDisplay_checked");
    });
});

// --------------- 渲染学生数据
let tbody = document.querySelector(".studentsList>tbody");
function render(arr = studentsData) {
    tbody.innerHTML = arr.map(item =>
        `<tr>
            <td>${item.id}</td>
            <td>${item.name}</td>
            <td>${item.age}</td>
            <td>${item.gender}</td>
            <td>
                <input type="button" value="修改" data-func="modify" data-index='${item.id}'>
                <input type="button" value="删除" data-func="delete" data-index='${item.id}'>
            </td>
        </tr>`
    ).join("");
}
render();

// ------ 公用元素
let name, age, gender;
let tips = document.getElementById("tips");

// -------------- 新增学生
let add_btn = document.getElementById("addBtn");
add_btn.onclick = function () {
    name = document.querySelector("#addForm .name");
    age = document.querySelector("#addForm .age");
    gender = document.getElementById("addForm").gender.value;
    if (name.value && age.value) {
        studentsData.push({ id: lastId + 1, name: name.value, age: age.value, gender: gender ? gender : "男" });
        lastId++;
        render();
    }
    name.value = "";
    age.value = "";
}
// -------------- 修改学生 从表格里点击 修改
let modify_btn = document.getElementById("modifyBtn");  // 右侧 确认修改 按钮
let student;
tbody.onclick = function (event) {
    if (event.target.nodeName == "INPUT") {
        if (event.target.dataset.func == "modify") {    // 点击修改
            modify_btn.disabled = false;
            name = document.querySelector("#modifyForm .name");
            age = document.querySelector("#modifyForm .age");
            gender_Arr = document.querySelectorAll("#modifyForm [type='radio']");
            [student] = studentsData.filter(item => item.id == event.target.dataset.index); // 获得需要修改的学生对象
            name.value = student.name;
            age.value = student.age;
            student.gender == "男" ? gender_Arr[0].checked = true : gender_Arr[1].checked = true;
        } else if (event.target.dataset.func == "delete") {  // 点击删除
            studentsData.forEach((item, index) => {
                if (item.id == event.target.dataset.index) {
                    let result = confirm("是否删除：" + item.name + "?");
                    result ? studentsData.splice(index, 1) : "";
                }
            });
            render();
        }
    }
}
// ----------  点击修改学生
modify_btn.onclick = function () {
    name = document.querySelector("#modifyForm .name").value;
    age = document.querySelector("#modifyForm .age").value;
    gender = document.getElementById("modifyForm").gender.value;

    for (let i = 0; i < studentsData.length; i++) {
        if (studentsData[i].id == student.id) {
            studentsData.splice(i, 1, { id: student.id, name, age, gender });
            break;
        }
    }
    render();
}

// -------- 查询学生
let query_btn = document.getElementById("queryBtn");
query_btn.onclick = function () {
    let type = document.querySelector("#queryForm>select").value;
    let content = document.querySelector("#queryForm [type='text']").value;
    let arr;
    if (content) {
        arr = studentsData.filter(item => item[type] == content);
    }
    arr.length ? tips.innerText = "" : tips.innerText = "无数据";
    render(arr);
}

// ---------- 点击左侧 学生列表 刷新显示区域
let student_list = document.querySelector(".main>section>h2:first-child");
student_list.addEventListener("click", () => {
    render();
    tips.innerText = "";
})

相关阅读:
Gray Code
Search a 2D Matrix
Find Minimum in Rotated Sorted Array
Feign理解
 Ribbon描述
 eureka自定义instance Id
eureka开启用户认证
 idea创建Eureka consumer入门实例
 eureka描述
 activeMq的安全机制
原文地址：https://www.cnblogs.com/Yangyecool/p/13171736.html