数据结构实验——年级学生成绩管理系统

╰半夏微凉° 2022-12-17 15:55 175阅读 0赞

## 实验需求 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlb3dhaGFoYQ_size_16_color_FFFFFF_t_70_pic_center]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlb3dhaGFoYQ_size_16_color_FFFFFF_t_70_pic_center 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlb3dhaGFoYQ_size_16_color_FFFFFF_t_70_pic_center 2]

## index.html ##

<!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>学生管理系统</title>
        <link rel="stylesheet" href="index.css">
    </head>
    <body>
    
    <div class="header">
        <div class="log">
            <span>班级管理系统</span>
        </div>
    </div>
    
    <div class="left-menu">
        <dl id="student-menu">
            <dt>学生管理</dt>
            <dd class="active" data-id="student-list">学生列表</dd>
            <dd data-id="student-add">新增学生</dd>
        </dl>
        <dl id="class-menu" class="show">
            <dt>班级管理</dt>
            <dd class="active" data-id="class-list">班级列表</dd>
            <dd data-id="class-add">新增班级</dd>
        </dl>
        <dl id="course-menu">
            <dt>课程成绩管理</dt>
            <dd class="active" data-id="course-list">课程成绩列表</dd>
            <dd data-id="course-add">新增课程及成绩</dd>
        </dl>
    </div>
    
    <div class="right-content" data-view="students">
        
        <div id="student-list" class="student-list content show-content">
            <table>
                <thead>
                <tr>
                    <th>学号</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>年龄</th>
                    <th>手机号</th>
                    <th>编辑</th>
                    <th>查看成绩</th>
                    <th>删除</th>
                </tr>
                </thead>
                <tbody id="student-tbody">
                <tr>
                    <td>2019339964013</td>
                    <td>陈榆</td>
                    <td>男</td>
                    <td>19</td>
                    <td>13586994166</td>
                    <td>
                        <button class="btn edit">编辑</button>
                    </td>
                    <td>
                        <button class="btn score">查看成绩</button>
                    </td>
                    <td>
                        <button class="btn remove">删除</button>
                    </td>
                </tr>
                </tbody>
            </table>
            <div class="dialog" id="student-edit-dialog">
                <div class="dialog-content">
                    <h3>编辑信息</h3>
                    <form action="" id="student-edit-form">
                        <div>
                            <label for="edit-number">学号</label>
                            <input type="text" id="edit-number" name="studentId" readonly>
                        </div>
                        <div>
                            <label for="edit-name">姓名</label>
                            <input type="text" id="edit-name" name="studentName">
                        </div>
                        <div>
                            <label>性别</label>
                            <input type="radio" name="studentSex" id="edit-male" value="0" checked="checked">
                            <label class="sex" for="edit-male">男</label>
                            <input type="radio" name="studentSex" id="edit-female" value="1">
                            <label class="sex" for="edit-female">女</label>
                        </div>
                        <div>
                            <label for="edit-birth">出生年</label>
                            <input type="text" id="edit-birth" name="studentAge">
                        </div>
                        <div>
                            <label for="edit-phone">手机号</label>
                            <input type="text" id="edit-phone" name="studentPhone">
                        </div>
                        <div>
                            <label></label>
                            <input type="submit" class="btn" id="student-edit-form-btn">
                        </div>
                    </form>
                </div>
            </div>
        </div>
        
        <div id="student-add" class="student-add content">
            <form action="" id="student-add-form">
                <div>
                    <label for="add-number">学号</label>
                    <input type="text" id="add-number" name="sId">
                </div>
                <div>
                    <label for="add-name">姓名</label>
                    <input type="text" id="add-name" name="name">
                </div>
                <div>
                    <label>性别</label>
                    <input type="radio" name="sex" id="add-male" value="0" checked="checked">
                    <label class="sex" for="add-male">男</label>
                    <input type="radio" name="sex" id="add-female" value="1">
                    <label class="sex" for="add-female">女</label>
                </div>
                <div>
                    <label for="add-age">年龄</label>
                    <input type="text" id="add-age" name="age">
                </div>
                <div>
                    <label for="add-phone">手机号</label>
                    <input type="text" id="add-phone" name="phone">
                </div>
                <div>
                    <label></label>
                    <input type="submit" class="btn" id="addStudent-form-btn">
                    <input type="reset" class="btn">
                </div>
            </form>
        </div>
    </div>
    
    <div class="right-content  show" data-view="class">
        
        <div id="class-list" class="class-list content show-content">
            <table>
                <thead>
                <tr>
                    <td>班级名称</td>
                    <td>班级人数上限</td>
                    <td>当前学生人数</td>
                    <td>编辑</td>
                    <td>删除</td>
                </tr>
                </thead>
                <tbody id="class-tbody">
                </tbody>
            </table>
        </div>
        
        <div id="class-add" class="class-add content">
            <form action="" id="class-add-form">
                <div>
                    <label for="classId">班级名称</label>
                    <input type="text" id="classId" name="classId">
                </div>
                <div>
                    <label for="studentsNum">班级人数</label>
                    <input type="text" id="studentsNum" name="studentsNum">
                </div>
                <div>
                    <label></label>
                    <input type="submit" class="btn" id="addClass-form-btn">
                    <input type="reset" class="btn">
                </div>
            </form>
        </div>
    </div>
    
    <div class="right-content" data-view="course">
        
        <div id="course-list" class="course-list content show-content">
            <table>
                <thead>
                <tr>
                    <td>课程名称</td>
                    <td>课程分数</td>
                    <td>修改成绩</td>
                    <td>删除课程</td>
                </tr>
                </thead>
                <tbody id="course-tbody">
                </tbody>
            </table>
            <div class="dialog" id="course-edit-dialog">
                <div class="dialog-content">
                    <h3>编辑信息</h3>
                    <form action="" id="course-edit-form">
                        <div>
                            <label for="edit-courseName">课程</label>
                            <input type="text" id="edit-courseName" name="courseName" readonly>
                        </div>
                        <div>
                            <label for="edit-courseGrades">成绩</label>
                            <input type="text" id="edit-courseGrades" name="courseGrades">
                        </div>
                        <div>
                            <label></label>
                            <input type="submit" class="btn" id="course-edit-form-btn">
                        </div>
                    </form>
                </div>
            </div>
        </div>
        
        <div id="course-add" class="course-add content">
            <form action="" id="course-add-form">
                <div>
                    <label for="courseName">课程名称</label>
                    <input type="text" id="courseName" name="courseName">
                </div>
                <div>
                    <label for="courseGrades">课程成绩</label>
                    <input type="text" id="courseGrades" name="courseGrades">
                </div>
                <div>
                    <label></label>
                    <input type="submit" class="btn" id="addCourse-form-btn">
                    <input type="reset" class="btn">
                </div>
            </form>
        </div>
    </div>
    <script src="JS/utils.js"></script>
    <script src="JS/Student.js"></script>
    <script src="JS/ClassStructure.js"></script>
    <script src="JS/index.js"></script>
    </body>
    </html>

## index.css ##

html,
    body {
        
        height: 100%;
        /* 但是 body 的100% 相对于的是 html 所以，我们要设置 html 的高度为100% */
        /* 为了让下列的 left-menu 使用 calc 设置 高度，需要让父级有高度 */
    }
    body,
    dl,
    dd {
        
        margin: 0;
        height: 100%;
    }
    body::after {
        
        content: "";
        display: block;
        clear: both;
    }
    .header {
        
        height: 70px;
        line-height: 70px;
        background-color: #354457;
    }
    .left-menu {
        
        width: 200px;
        height: calc(100% - 70px);
        background-color: #4d5e70;
        float: left;
    }
    .right-content {
        
        float: left;
        width: calc(100% - 200px);
        height: calc(100% - 70px);
        background-color: #eee;
        position: relative;
        overflow: scroll;
        /*  数据过多或者过长，在 tbody 中 产生滚动条 */
    }
    .header .log {
        
        padding-left: 20px;
        color: #b3bcc5;
        font-size: 14px;
    }
    .header .log span[data-id] {
        
        cursor: pointer;
    }
    .left-menu dl {
        
        line-height: 40px;
        font-size: 14px;
        color: #b3bcc5;
        display: none;
    }
    .left-menu dl dt {
        
        padding-left: 10px;
    }
    .left-menu dl dd {
        
        height: 40px;
        padding-left: 40px;
        cursor: pointer;
    }
    .left-menu dl dd:hover {
        
        background-color: rgba(255, 255, 255, 0.5);
        color: #354457;
    }
    .left-menu dl dd.active {
        
        background-color: #ddd;
        color: #354457;
    }
    .left-menu dl.show {
        
        display: block;
    }
    div.right-content {
        
        display: none;
    }
    div.right-content.show {
        
        display: block;
    }
    .right-content .content {
        
        position: absolute;
        width: 100%;
        display: none;
    }
    .right-content .content.show-content {
        
        display: block;
    }
    .right-content .class-add {
        
        height: 300px;
    }
    form {
        
        width: 400px;
        margin: 20px auto;
        height: 150px;
        /* margin 想要居中，就要让父元素有宽度才行 */
    }
    form div {
        
        margin: 10px 0;
    }
    form div label:not(.sex) {
        
        width: 80px;
        text-align: right;
        display: inline-block;
        margin-right: 10px;
    }
    form .btn {
        
        padding: 5px 27px;
    }
    .content.class-list table {
        
        width: 100%;
        text-align: center;
        height: 30px;
        line-height: 30px;
        font-size: 14px;
    }
    .content.class-list thead {
        
        background-color: #e3e8ee;
        color: #646987;
    }
    .content.class-list tbody {
        
        background-color: #fff;
    }
    .content.class-list tbody .btn {
        
        border: none;
        outline: none;
        color: #fff;
        padding: 5px 10px;
        cursor: pointer;
    }
    .class-list table .btn.edit {
        
        background-color: #5cb85c;
    }
    .class-list table .btn.remove {
        
        background-color: #d9534f;
    }
    .content.student-list table {
        
        width: 100%;
        text-align: center;
        height: 30px;
        line-height: 30px;
        font-size: 14px;
    }
    .content.student-list thead {
        
        background-color: #e3e8ee;
        color: #646987;
    }
    .content.student-list tbody {
        
        background-color: #fff;
    }
    .content.student-list tbody .btn {
        
        border: none;
        outline: none;
        color: #fff;
        padding: 5px 10px;
        cursor: pointer;
    }
    .student-list table .btn.edit {
        
        background-color: #5cb85c;
    }
    .student-list table .btn.remove {
        
        background-color: #d9534f;
    }
    .student-list table .btn.score {
        
        background-color: #4f9dd9;
    }
    .content.course-list table {
        
        width: 100%;
        text-align: center;
        height: 30px;
        line-height: 30px;
        font-size: 14px;
    }
    .content.course-list thead {
        
        background-color: #e3e8ee;
        color: #646987;
    }
    .content.course-list tbody {
        
        background-color: #fff;
    }
    .content.course-list tbody .btn {
        
        border: none;
        outline: none;
        color: #fff;
        padding: 5px 10px;
        cursor: pointer;
    }
    .course-list table .btn.edit {
        
        background-color: #5cb85c;
    }
    .course-list table .btn.remove {
        
        background-color: #d9534f;
    }
    .dialog {
        
        position: fixed;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        background-color: rgba(0, 0, 0, 0.5);
        display: none;
    }
    .dialog .dialog-content {
        
        width: 500px;
        height: 400px;
        background-color: #fff;
        position: fixed;
        left: 50%;
        top: 50%;
        margin-left: -250px;
        margin-top: -200px;
    }
    .dialog.show {
        
        display: block;
    }
    .dialog .dialog-content h3 {
        
        padding-left: 30px;
    }

## utils.js ##

## Student.js ##

// studentId        学号      String
    // studentName      姓名      String
    // studentSex       性别      String
    // studentAge       年龄      Number
    // studentPhone     电话      String
    // studentCourse    课程      Array
    function Student(studentId, studentName, studentSex, studentAge, studentPhone, studentCourse) {
        
        this.studentId = studentId;
        this.studentName = studentName;
        this.studentSex = studentSex;
        this.studentAge = studentAge;
        this.studentPhone = studentPhone;
        this.studentCourse = studentCourse;
        this.courseNum = 0;
    }
    // 添加课程
    function insertStudentCourse(course) {
        
        var len = this.studentCourse.length;
        var insertFlag = true;
        for (var i = 0; i < len; i++) {
        
            if (this.studentCourse[i]['courseName'] == course['courseName']) {
        
                alert(this.studentName + ' 学生已学课程内 已经含有 ' + course['courseName'] + ' 这门课程');
                insertFlag = false;
                return;
            }
        }
        if (insertFlag) {
        
            this.studentCourse.push({
        
                courseName: course['courseName'],
                courseGrades: course['courseGrades'],
                courseIndex: this.courseNum
            });
            this.courseNum++;
            setLocal('allClass', classList.allClass);
        }
    }
    // 删除课程
    function delStudentCourse(course) {
        
        var isDel = confirm('确认删除课程名称为' + course['courseName'] + ' 的课程信息 以及 其成绩吗？');
        if (isDel) {
        
            var len = this.studentCourse.length;
            for (var i = 0; i < len; i++) {
        
                if (this.studentCourse[i]['courseName'] == course['courseName']) {
        
                    this.studentCourse.splice(i, 1);
                    break;
                }
            }
            this.courseNum = this.studentCourse.length;
            alert('删除成功');
            for (var i = 0; i < this.courseNum; i++) {
        
                this.studentCourse[i].courseIndex = i;
            }
            setLocal('allClass', classList.allClass);
        } else {
        
            return;
        }
    }
    // 渲染 课程页面
    function renderStudentCourse() {
        
        console.log(this);
        var str = ''
        var tBody = document.getElementById('course-tbody');
        for (var i = 0; i < this.studentCourse.length; i++) {
        
            str += `
            <tr>
            <td>${
          this.studentCourse[i]['courseName']}</td>
            <td>${
          this.studentCourse[i]['courseGrades']}</td>
            <td><button class="btn edit" data-id="${
          this.studentCourse[i]['courseIndex']}">编辑</button></td>
            <td><button class="btn remove" data-id="${
          this.studentCourse[i]['courseIndex']}">删除</button></td>
        </tr>`
        }
        tBody.innerHTML = str;
    }

## ClassStructure.js ##

// 班级List 构造函数
    // classID      班级名称         String
    // studentsNum  班级学生上限      Number
    // studentsList 班级学生信息      Array
    // classIndex   班级的索引       Number
    function ClassStructure(classId, maxStudentsNum, nowStudentsNum, studentsList, classIndex) {
        
        this.classId = classId;
        this.maxStudentsNum = maxStudentsNum;
        this.nowStudentsNum = nowStudentsNum;
        this.studentsList = studentsList ? studentsList : [];
        this.classIndex = classIndex;
    }
    // 添加学生
    function insertStudent(student) {
        
        var insertFlag = true;
        if (this.maxStudentsNum == this.studentsList.length) {
        
            alert('该班人数已达上限,请勿添加学生');
            return;
            // return 防止产生 关系户
        }
        this.studentsList.forEach(function (value) {
        
            if (value.studentId == student.studentId) {
        
                alert('学号为' + student.studentId + '的学生已存在');
                insertFlag = false;
            }
        })
        if (insertFlag) {
        
            this.studentsList.push(student);
            this.nowStudentsNum = this.studentsList.length;
        }
    }
    // 删除学生
    function delStudent(student) {
        
        // 弹窗判断是否删除
        var isDel = confirm('确认删除学号为' + student.studentId + '的这个学生吗？');
        if (isDel) {
        
            var len = this.studentsList.length;
            for (var i = 0; i < len; i++) {
        
                if (this.studentsList[i].studentId == student.studentId) {
        
                    this.studentsList.splice(i, 1);
                    break;
                }
            }
            this.nowStudentsNum = this.studentsList.length;
            alert('删除成功');
            studentsSort.call(this);
        } else {
        
            return;
        }
    }
    // 班级成员排序（按照学号排序）
    function studentsSort() {
        
        this.studentsList.sort(function (a, b) {
        
            return a.studentId - b.studentId;
        });
        for (var i = 0; i < this.nowStudentsNum; i++) {
        
            this.studentsList[i].studentIndex = i;
        }
        setLocal('allClass', classList.allClass);
    }
    // 渲染班级成员列表
    function renderStudentsList() {
        
        var str = ''
        var tBody = document.getElementById('student-tbody');
        for (var i = 0; i < this.studentsList.length; i++) {
        
            str += `
            <tr>
            <td>${
          this.studentsList[i]['studentId']}</td>
            <td>${
          this.studentsList[i]['studentName']}</td>
            <td>${
          this.studentsList[i]['studentSex']}</td>
            <td>${
          this.studentsList[i]['studentAge']}</td>
            <td>${
          this.studentsList[i]['studentPhone']}</td>
            <td><button class="btn edit" data-id="${
          this.studentsList[i].studentIndex}">编辑</button></td>
            <td><button class="btn score" data-id="${
          this.studentsList[i].studentIndex}">查看成绩</button></td>
            <td><button class="btn remove" data-id="${
          this.studentsList[i].studentIndex}">删除</button></td>
        </tr>`
        }
        tBody.innerHTML = str;
    }

## index.js ##

// ClassList  班级链表类
    var classList = {
        
        allClass: getLocal('allClass') ? getLocal('allClass') : [],
        insertClass: function (tempObj) {
        
            // insertFlag 表示 能否添加这个班级
            var insertFlag = true;
            var classObj = new ClassStructure(tempObj.classId, tempObj.studentsNum, tempObj.nowStudentsNum, tempObj.studentsList, tempObj.classIndex);
            this.allClass.forEach(function (value) {
        
                if (value['classId'] == classObj['classId']) {
        
                    alert(classObj['classId'] + ' 这个班级已经存在，添加失败');
                    insertFlag = false;
                }
            })
            if (insertFlag) {
        
                this.allClass.push(classObj);
                setLocal('allClass', this.allClass);
                return true;
            } else {
        
                return false;
            }
        },
        delClass: function (calssObj) {
        
            // 弹窗判断是否删除
            var isDel = confirm('确认删除' + calssObj.classId + '这个班级吗？');
            if (isDel) {
        
                // 删除相应索引位的班级
                this.allClass.splice(calssObj.classIndex, 1);
            }
            var len = this.allClass.length;
            classNum = len;
            for (var i = 0; i < len; i++) {
        
                this.allClass[i]['classIndex'] = i;
            }
            setLocal('allClass', this.allClass);
            setLocal('classNum', classNum);
        }
    };
    // classNum 为 班级数量
    var classNum = getLocal('classNum') ? Number(getLocal('classNum')) : 0;
    // 事件绑定函数
    function bindEvent() {
        
        var class_index;
        var student_index;
        var course_index;
        var student_list_content = document.getElementsByClassName('right-content')[0];
        var class_list_content = document.getElementsByClassName('right-content')[1];
        var course_list_content = document.getElementsByClassName('right-content')[2];
        // 班级菜单列表点击按钮操作
        var classMenuDl = document.querySelector('.left-menu > #class-menu ');
        changeLeftMenu(classMenuDl);
        // 学生菜单列表点击按钮操作
        var studentMenuDl = document.querySelector('.left-menu > #student-menu');
        changeLeftMenu(studentMenuDl);
        // 成绩菜单列表点击按钮操作
        var courseMenuDl = document.querySelector('.left-menu > #course-menu');
        changeLeftMenu(courseMenuDl);
        // 班级信息 添加按钮 点击操作
        var classAddBtn = document.getElementById('addClass-form-btn');
        var classAddForm = document.getElementById('class-add-form');
        classAddBtn.onclick = function (e) {
        
            // 取消点击提交按钮的默认事件
            e.preventDefault();
            // 获取提交表单的数据
            var tempObj = getClassFormData(classAddForm);
            if (tempObj.classId == '') {
        
                alert('请输入班级名称');
                return;
            }
            if (!Number(tempObj.studentsNum)) {
        
                alert('请输入正确的班级人数（数字）');
                return;
            }
            if (classList.insertClass({
        
                classId: tempObj.classId,
                studentsNum: Number(tempObj.studentsNum),
                nowStudentsNum: 0,
                studentsList: [],
                classIndex: classNum
            })) {
        
                // 更新班级数目
                classNum++;
                setLocal('classNum', classNum);
                // 改变 左侧菜单栏样式 以及 右侧 content 内容 以及清除 add表单 中的内容
                switchPagesByAddBtn('class', classMenuDl, classAddForm);
                renderClassListContent();
            }
        }
        //  点击 班级管理 视图页面 的 按钮 (编辑 + 删除)
        var classTableBody = document.getElementById('class-tbody');
        classTableBody.onclick = function (e) {
        
            if (!e.target.classList.contains('btn')) {
        
                return false;
            }
            // 点击的是 编辑 按钮
            if (e.target.classList.contains('edit')) {
        
                class_index = e.target.dataset.index;
                var siblings = getSiblings(studentMenuDl);
                changeStyle(siblings, 'show', studentMenuDl);
                student_list_content.classList.add('show');
                class_list_content.classList.remove('show');
                renderStudentHeadLog(class_index);
                renderStudentsList.call(classList.allClass[class_index]);
            } else {
        
                // 点击的是删除按钮
                var index = e.target.dataset.index;
                classList.delClass(classList.allClass[index]);
                renderClassListContent();
            }
        }
        // 学生表单 提交按钮 点击事件
        var studentAddForm = document.getElementById('student-add-form');
        var addStudentFormBtn = document.getElementById('addStudent-form-btn');
        addStudentFormBtn.onclick = function (e) {
        
            e.preventDefault();
            var tempObj = getStudentFormData(studentAddForm);
            if (isValidStudentForm(tempObj)) {
        
                var student = new Student(tempObj.studentId, tempObj.studentName, tempObj.studentSex, tempObj.studentAge, tempObj.studentPhone, []);
                insertStudent.call(classList.allClass[class_index], student);
                studentsSort.call(classList.allClass[class_index]);
                renderStudentsList.call(classList.allClass[class_index]);
                // 改变 左侧菜单栏样式 以及 右侧 content 内容 以及清除 add表单 中的内容
                switchPagesByAddBtn('student', studentMenuDl, studentAddForm);
            }
        }
        var student_edit_dialog = document.getElementById('student-edit-dialog');
        var course_edit_dialog = document.getElementById('course-edit-dialog');
        // 学生表单 按钮点击事件
        var studentTableBody = document.getElementById('student-tbody');
        studentTableBody.onclick = function (e) {
        
            if (!e.target.classList.contains('btn')) {
        
                return false;
            }
            // 点击的是编辑按钮
            if (e.target.classList.contains('edit')) {
        
                student_index = e.target.dataset.id;
                studentDataReset(classList.allClass[class_index].studentsList[student_index]);
                student_edit_dialog.classList.add('show');
            } else if (e.target.classList.contains('remove')) {
        
                // 点击的是 删除 按钮
                student_index = e.target.dataset.id;
                delStudent.call(classList.allClass[class_index], classList.allClass[class_index].studentsList[student_index]);
                renderStudentsList.call(classList.allClass[class_index]);
            } else {
        
                // 点击的是 查看成绩 按钮
                student_index = e.target.dataset.id;
                // console.log(classList.allClass[class_index].studentsList[student_index]);
                renderCourseHeadLog(class_index, student_index);
                var siblings = getSiblings(courseMenuDl);
                changeStyle(siblings, 'show', courseMenuDl);
                course_list_content.classList.add('show');
                student_list_content.classList.remove('show');
                renderStudentCourse.call(classList.allClass[class_index].studentsList[student_index]);
            }
        }
        // 当编辑区域展示出来的时候，我们点击编辑区域以外的内容，编辑区域消失 以及 编辑弹窗的点击按钮事件
        student_edit_dialog.onclick = function (e) {
        
            if (e.target === this) {
        
                student_edit_dialog.classList.remove('show');
                return;
            }
            // 编辑弹窗的 点击 按钮
            if (e.target.classList.contains('btn')) {
        
                e.preventDefault();
                var form = document.getElementById('student-edit-form');
                var editStudent = classList.allClass[class_index].studentsList[student_index];
                console.log(editStudent);
                editStudent.studentName = form['studentName'].value;
                editStudent.studentAge = form['studentAge'].value;
                editStudent.studentSex = form['studentSex'].value == '0' ? '男' : '女';
                editStudent.studentPhone = form['studentPhone'].value;
                renderStudentsList.call(classList.allClass[class_index]);
                student_edit_dialog.classList.remove('show');
                setLocal('allClass', classList.allClass);
            }
        }
        // 课程表单提交按钮 点击事件
        var addCourseFormBtn = document.getElementById('addCourse-form-btn');
        var courseAddForm = document.getElementById('course-add-form');
        addCourseFormBtn.onclick = function (e) {
        
            // 阻止点击 submit 按钮 页面刷新
            e.preventDefault();
            if (!courseAddForm['courseGrades']) {
        
                alert('请输入课程名称');
                return;
            }
            if (courseAddForm['courseGrades'] == '' || !Number(courseAddForm['courseGrades'].value)) {
        
                alert('请正确输入成绩');
                return;
            }
            if (Number(courseAddForm['courseGrades'].value) < 0 || Number(courseAddForm['courseGrades'].value) > 100) {
        
                alert('请输入 0 ~ 100 分的成绩');
                return;
            }
            var tempObj = {
        
                courseName: courseAddForm['courseName'].value,
                courseGrades: Number(courseAddForm['courseGrades'].value)
            };
            insertStudentCourse.call(classList.allClass[class_index].studentsList[student_index], tempObj);
            // 改变 左侧菜单栏样式 以及 右侧 content 内容 以及清除 add表单 中的内容
            switchPagesByAddBtn('course', courseMenuDl, courseAddForm);
            renderStudentCourse.call(classList.allClass[class_index].studentsList[student_index]);
        }
        // 成绩 列表 按钮点击事件
        var courseTbody = document.getElementById('course-tbody');
        courseTbody.onclick = function (e) {
        
            if (!e.target.classList.contains('btn')) {
        
                return;
            }
            if (e.target.classList.contains('edit')) {
        
                // 编辑按钮 点击
                course_index = e.target.dataset.id;
                var course_edit_form = document.getElementById('course-edit-form');
                // 弹窗中的 表单回填
                course_edit_form['courseName'].value = classList.allClass[class_index].studentsList[student_index].studentCourse[course_index].courseName;
                course_edit_form['courseGrades'].value = classList.allClass[class_index].studentsList[student_index].studentCourse[course_index].courseGrades;
                course_edit_dialog.classList.add('show');
            } else {
        
                // 删除按钮的点击
                course_index = e.target.dataset.id;
                delStudentCourse.call(classList.allClass[class_index].studentsList[student_index], classList.allClass[class_index].studentsList[student_index].studentCourse[course_index]);
                renderStudentCourse.call(classList.allClass[class_index].studentsList[student_index]);
            }
        }
        // 成绩 编辑表单 点击事件
        course_edit_dialog.onclick = function (e) {
        
            if (e.target === this) {
        
                course_edit_dialog.classList.remove('show');
                return;
            }
            if (e.target.classList.contains('btn')) {
        
                e.preventDefault();
                var course_edit_form = document.getElementById('course-edit-form');
                if (course_edit_form['courseGrades'].value > 100 || course_edit_form['courseGrades'].value < 0) {
        
                    alert('请输入 0 ~ 100 分的成绩');
                    return;
                }
                // 将编辑成绩弹窗中的 成绩 赋值给 数组中
                var editCourse = classList.allClass[class_index].studentsList[student_index].studentCourse[course_index];
                editCourse.courseGrades = course_edit_form['courseGrades'].value;
                // 重新渲染页面
                renderStudentCourse.call(classList.allClass[class_index].studentsList[student_index]);
                course_edit_dialog.classList.remove('show');
                setLocal('allClass', classList.allClass);
            }
        }
        //  点击 header 上 的 log 返回  上一级
        var log = document.getElementsByClassName('log')[0].getElementsByTagName('span')[0];
        log.onclick = function () {
        
            var data_id = this.dataset.id;
            if (!data_id) {
        
                return;
            }
            if (data_id == 'student') {
        
                // 当前是 学生管理 页面
                // 左侧菜单切换
                classMenuDl.classList.add('show');
                studentMenuDl.classList.remove('show');
                // 右侧菜单切换
                student_list_content.classList.remove('show');
                class_list_content.classList.add('show');
                log.innerHTML = '班级管理系统';
                log.removeAttribute('data-id');
                renderClassListContent();
            } else {
        
                // 当前是 课程成绩管理 页面
                // 左侧菜单切换
                studentMenuDl.classList.add('show');
                courseMenuDl.classList.remove('show');
                // 右侧菜单切换
                student_list_content.classList.add('show');
                course_list_content.classList.remove('show');
                renderStudentHeadLog(class_index);
            }
        }
    }
    // 切换样式效果
    function changeStyle(siblings, className, target) {
        
        for (var i = 0; i < siblings.length; i++) {
        
            siblings[i].classList.remove(className);
        }
        target.classList.add(className);
    }
    // 查找兄弟元素节点
    function getSiblings(node) {
        
        var children = node.parentNode.children;
        var result = [];
        for (var i = 0; i < children.length; i++) {
        
            if (children[i] != node) {
        
                result.push(children[i]);
            }
        }
        return result;
    }
    // 三个添加页面内 提交按钮 点击事件
    function switchPagesByAddBtn(target, menuDom, addForm) {
        
        // traget 传入的参数是 字符串 可以为 'class' 'student' 'course'
        // menu 为 左侧 菜单的父级
        // addForm 为 表单
        // 左侧menu 更改
        var list_menu = menuDom.getElementsByTagName('dd')[0];
        var siblings = getSiblings(list_menu);
        changeStyle(siblings, 'active', list_menu);
        // 右侧content 更改
        var list_content = document.getElementById(target + '-list');
        siblings = getSiblings(list_content);
        changeStyle(siblings, 'show-content', list_content);
        addForm.getElementsByClassName('btn')[1].click();
    }
    // 改变左侧菜单样式 以及 右侧对应内容相应的样式
    function changeLeftMenu(dom) {
        
        dom.onclick = function (e) {
        
            if (e.target.tagName === 'DD') {
        
                var siblings = getSiblings(e.target);
                changeStyle(siblings, 'active', e.target);
                var id = e.target.dataset.id;
                var content = document.getElementById(id);
                var contentSiblings = getSiblings(content);
                changeStyle(contentSiblings, 'show-content', content);
            }
        }
    }
    // 获取班级表单信息
    function getClassFormData(form) {
        
        return {
        
            classId: form['classId'].value,
            studentsNum: form['studentsNum'].value
        }
    }
    // 渲染班级列表的内容区域
    function renderClassListContent() {
        
        var tBody = document.getElementById('class-tbody');
        var str = '';
        for (var i = 0; i < classNum; i++) {
        
            str += `<tr>
        <td>${
          classList.allClass[i]['classId']}</td>
        <td>${
          classList.allClass[i]['maxStudentsNum']}</td>
        <td>${
          classList.allClass[i]['nowStudentsNum']}</td>
        <td><button class="btn edit" data-index=${
          classList.allClass[i]['classIndex']}>编辑</button></td>
        <td><button class="btn remove" data-index=${
          classList.allClass[i]['classIndex']}>删除</button></td>
    </tr>`;
        }
        tBody.innerHTML = str;
    }
    // 获取学生表单信息
    function getStudentFormData(form) {
        
        return {
        
            studentId: form['sId'].value,
            studentName: form['name'].value,
            studentSex: form['sex'].value == '0' ? '男' : '女',
            studentAge: Number(form['age'].value),
            studentPhone: form['phone'].value,
        }
    }
    // 学生添加表单的规则校验
    function isValidStudentForm(data) {
        
        var errorObj = {
        
            studentName: ["请填写学生姓名"],
            studentId: ["请填写学生学号", "学号由4-16位的数字组成"],
            studentAge: ["请填写年龄"],
            studentPhone: ["请填写手机号", "手机号格式不正确"],
        };
        for (var prop in data) {
        
            if (data.hasOwnProperty(prop)) {
        
                // 判断当前属性是否有值， 如果没有则报出异常
                if (!data[prop]) {
        
                    alert(errorObj[prop][0]);
                    return false;
                }
            }
        }
        // 4 - 16 位的 数字，以数字开头，以数字结尾
        var regSId = /^\d{4,16}$/;
        if (!regSId.test(data.studentId)) {
        
            alert(errorObj.studentId[1]);
            return false;
        }
        return true;
    }
    // 学生编辑表单的数据回填
    function studentDataReset(data) {
        
        var form = document.getElementById('student-edit-form');
        // 循环学生信息，判断在表单当中是否含有输入的位置，如果有的话，修改其值
        // form[name] 表示 form 结构中， name 属性的 属性 值 是 name 的 dom 结构
        for (var prop in data) {
        
            if (form[prop]) {
        
                if (prop == 'studentSex') {
        
                    form[prop].value = data[prop] == '男' ? 0 : 1;
                } else {
        
                    form[prop].value = data[prop];
                }
            }
        }
    }
    // 渲染学生页面 head 视图
    function renderStudentHeadLog(index) {
        
        var log = document.getElementsByClassName('log')[0].getElementsByTagName('span')[0];
        log.innerHTML = classList.allClass[index]['classId'] + '  学生管理系统 (点击返回上一页面)';
        log.setAttribute('data-id', 'student');
    }
    // 渲染成绩管理 head 视图
    function renderCourseHeadLog(class_index, student_index) {
        
        var log = document.getElementsByClassName('log')[0].getElementsByTagName('span')[0];
        log.innerHTML = classList.allClass[class_index].studentsList[student_index]['studentName'] + ' 学生成绩管理系统 (点击返回上一页面)';
        log.setAttribute('data-id', 'course');
    }
    bindEvent();
    renderClassListContent();

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlb3dhaGFoYQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221122/627713f9abbe4e978e588869e92c1040.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlb3dhaGFoYQ_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221122/457691c036f74771b886e5d334d7e51b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlb3dhaGFoYQ_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221122/f2c561c37c394185abb196e3aecdd718.png