11.9

发布时间 2023-11-13 20:52:44作者: 七安。

今天我们实现专业教师的前后端代码

后端

TeacherController

package com.example.controller;

import com.example.pojo.Result;
import com.example.pojo.Test;
import com.example.service.TeacherService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

@RestController
@RequestMapping("/teacher")
public class TeacherController {
    @Autowired
    private TeacherService teacherService;

    @GetMapping("/count/{id}")
    public Result count(@PathVariable("id") String id) {
        return Result.success(teacherService.count(id));
    }

    //添加试卷审批卡
    @PostMapping("/add")
    public Result add(@RequestBody Test test) {
        teacherService.add(test);
        return Result.success(teacherService.selectById(test.getCardId()));
    }

    //删除页面
    @GetMapping("/getById/{cardID}")
    public Result selectById(@PathVariable("cardID") String cardID) {
        return Result.success(teacherService.selectById(cardID));
    }

    @DeleteMapping("/deleteById/{cardID}")
    public Result deleteById(@PathVariable("cardID") String cardID) {
        Test test = teacherService.selectById(cardID);
        teacherService.deleteById(cardID);
        return Result.success(test);
    }

    //查询页面
    @GetMapping("/selectName/{username}")
    public Result selectName(@PathVariable("username") String username) {
        return Result.success(teacherService.selectName(username));
    }

    @GetMapping("/selectAll/{name}")
    public Result selectAll(@PathVariable("name") String name) {
        return Result.success(teacherService.selectAll(name));
    }

    //修改试卷信息
    @PostMapping("/update")
    public Result update(@RequestBody Test test) {
        teacherService.update(test);
        return Result.success(teacherService.selectById(test.getCardId()));
    }
}

TeacherService

package com.example.service;

import com.example.mapper.TeacherMapper;
import com.example.pojo.Teacher;
import com.example.pojo.Test;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.time.LocalDateTime;
import java.util.List;

@Service
public class TeacherService {
    @Autowired
    private TeacherMapper teacherMapper;

    public int count(String id) {
        List<Test> testList = teacherMapper.count(id);
        int maxLastTwoDigits = 0;

        for (Test test : testList) {
            String cardId = test.getCardId();
            // 获取卡号的最后两位数字
            String lastTwoDigitsStr = cardId.substring(cardId.length() - 2);
            int lastTwoDigits = Integer.parseInt(lastTwoDigitsStr);
            // 更新最大的两位数字
            maxLastTwoDigits = Math.max(maxLastTwoDigits, lastTwoDigits);
        }
        System.out.println(maxLastTwoDigits);
        // 最大的两位数字加1,赋值给number

        return maxLastTwoDigits;
    }


    public void add(Test test) {
        String cardId = test.getCardId();
        LocalDateTime cardDate = test.getCardDate();
        String courseName = test.getCourseName();
        String courseTeacher = test.getCourseTeacher();
        String courseID = test.getCourseID();
        String courseNature = test.getCourseNature();
        int credit = test.getCredit();
        String courseClass = test.getCourseClass();
        String courseMajor = test.getCourseMajor();
        String courseCollege=test.getCourseCollege();
        String testWay = test.getTestWay();
        LocalDateTime testDate = test.getTestDate();
        int testCount = test.getTestCount();
        String testMethod = test.getTestMethod();
        String testGrade = test.getTestGrade();
        String testEvaluation = test.getTestEvaluation();
        String testAnalysis = test.getTestAnalysis();
        int auditStatus = test.getAuditStatus();
        teacherMapper.add(cardId, cardDate, courseName, courseTeacher, courseID, courseNature, credit, courseClass, courseMajor, courseCollege,testWay, testDate, testCount, testMethod, testGrade, testEvaluation, testAnalysis, auditStatus);
    }

    public Test selectById(String cardId) {
        return teacherMapper.selectById(cardId);
    }

    public void deleteById(String cardID) {
        teacherMapper.deleteById(cardID);
    }

    public Teacher selectName(String username) {
        return teacherMapper.selectName(username);
    }

    public List<Test> selectAll(String name) {
        return teacherMapper.selectAll(name);
    }

    public void update(Test test) {
        String cardId = test.getCardId();
        LocalDateTime cardDate = test.getCardDate();
        String courseName = test.getCourseName();
        String courseTeacher = test.getCourseTeacher();
        String courseID = test.getCourseID();
        String courseNature = test.getCourseNature();
        int credit = test.getCredit();
        String courseClass = test.getCourseClass();
        String courseMajor = test.getCourseMajor();
        String courseCollege=test.getCourseCollege();
        String testWay = test.getTestWay();
        LocalDateTime testDate = test.getTestDate();
        int testCount = test.getTestCount();
        String testMethod = test.getTestMethod();
        String testGrade = test.getTestGrade();
        String testEvaluation = test.getTestEvaluation();
        String testAnalysis = test.getTestAnalysis();
        String professional=test.getProfessional();
        String professionalConclusion=test.getProfessionalConclusion();
        String Reasonable=test.getReasonable();
        String ReasonableConclusion=test.getReasonableConclusion();
        int auditStatus = test.getAuditStatus();
        teacherMapper.update(cardId, cardDate, courseName, courseTeacher, courseID, courseNature, credit, courseClass, courseMajor,courseCollege, testWay, testDate, testCount, testMethod, testGrade, testEvaluation, testAnalysis, professional, professionalConclusion, Reasonable, ReasonableConclusion, auditStatus);
    }
}

TeacherMapper

package com.example.mapper;

import com.example.pojo.Teacher;
import com.example.pojo.Test;
import org.apache.ibatis.annotations.*;

import java.time.LocalDateTime;
import java.util.List;

@Mapper
public interface TeacherMapper {
    @Select("select * from test.test1 where CardId like concat(#{id},'%') ")
    List<Test> count(String id);

    @Insert("insert into test.test1(CardId, CardDate, CourseName, CourseTeacher, CourseID, CourseNature, Credit, CourseClass, CourseMajor,CourseCollege, TestWay, TestDate, TestCount, TestMethod, TestGrade, TestEvaluation, TestAnalysis,  AuditStatus) values(#{cardId},#{cardDate},#{courseName},#{courseTeacher},#{courseID},#{courseNature},#{credit},#{courseClass},#{courseMajor},#{courseCollege},#{testWay},#{testDate}, #{testCount},#{testMethod},#{testGrade},#{testEvaluation},#{testAnalysis},#{auditStatus})")
    void add(String cardId, LocalDateTime cardDate, String courseName, String courseTeacher, String courseID, String courseNature, int credit, String courseClass, String courseMajor, String courseCollege, String testWay, LocalDateTime testDate, int testCount, String testMethod, String testGrade, String testEvaluation, String testAnalysis, int auditStatus);

    @Select("select * from test.test1 where CardId = #{cardId}")
    Test selectById(String cardId);

    @Delete("delete from test.test1 where CardId = #{cardID}")
    void deleteById(String cardID);

    @Select("select * from test.testteacher where TeacherID=#{username}")
    Teacher selectName(String username);

    @Select("select * from test.test1 where CourseTeacher = #{name}")
    List<Test> selectAll(String name);

    @Update("update test.test1 set CardDate=#{cardDate},CourseName=#{courseName},CourseTeacher=#{courseTeacher},CourseID=#{courseID},CourseNature=#{courseNature},Credit=#{credit},CourseMajor=#{courseMajor},CourseCollege=#{courseCollege},TestWay=#{testWay},TestDate=#{testDate},TestCount=#{testCount},TestMethod=#{testMethod},TestGrade=#{testGrade},TestEvaluation=#{testEvaluation},TestAnalysis=#{testAnalysis},Professional=#{professional},ProfessionalConclusion=#{professionalConclusion},Reasonable=#{Reasonable},ReasonableConclusion=#{ReasonableConclusion},AuditStatus=#{auditStatus} where CardId=#{cardId}")
    void update(String cardId, LocalDateTime cardDate, String courseName, String courseTeacher, String courseID, String courseNature, int credit, String courseClass, String courseMajor, String courseCollege, String testWay, LocalDateTime testDate, int testCount, String testMethod, String testGrade, String testEvaluation, String testAnalysis, String professional, String professionalConclusion, String Reasonable, String ReasonableConclusion, int auditStatus);
}

前端

1insert.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加试卷审批卡</title>
    <style>
        .reSet {
            background-color: #4CAF50;
            color: white;
            border: none;
            padding: 10px 20px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 4px 2px;
            cursor: pointer;
        }

        .form {
            width: 600px;
            margin: 0 auto;
            /*border: 1px solid red;*/
        }

        .form table {
            margin: 0 auto;
        }

        .form table tr td {
            width: 100px;
            height: 30px;
            border: 1px solid #000;
            text-align: center;
        }

        button {
            display: block;
            margin-top: 10px;
            padding: 10px;
            background-color: #007bff;
            color: #fff;
            border: none;
            border-radius: 3px;
            cursor: pointer;
        }

        .centered-form {
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 250vh;
        }

        .bordered-form {
            border: 2px solid #000; /* 边框样式 */
            padding: 150px; /* 可选的内边距 */
            background-color: #f0f0f0; /* 可选的背景颜色 */
        }
    </style>
</head>
<script>
    function generatePaperNumber() {
        var currentDate = new Date();
        var year = currentDate.getFullYear();
        var month = (currentDate.getMonth() + 1).toString().padStart(2, '0');
        var day = currentDate.getDate().toString().padStart(2, '0');
        let id = year + month + day;
        let count;
        const requestUrl = `http://localhost:8080/teacher/count/${id}`;
        fetch(requestUrl,
            {
                method: 'GET',
                headers: {
                    'Content-Type': 'application/json'
                },
            })
            .then(response => response.json())
            .then(data => {
                if (data.msg === 'success') {
                    console.log(data);
                    count = data.data;
                    count = count + 1;
                    if (count <= 9 && count >= 1) {
                        document.getElementById('paperNumber').value = year + month + day + "0" + count;
                    } else {
                        document.getElementById('paperNumber').value = year + month + day + count;
                    }
                } else {
                    alert("查询失败");
                }
            })
            .catch(error => {
                alert("请求失败,请重试");
                console.error(error);
            });
    }
</script>
<script>
    var urlParams = new URLSearchParams(window.location.search);
    var username = urlParams.get('username');
    console.log("用户名为:" + username);
</script>
<body>
<h1 style="text-align: center">添加试卷审批卡</h1>
<!--边框居中-->
<div class="centered-form">
    <!--    增加边框-->
    <div class="bordered-form">
        <!--        调整边框大小-->
        <div class="form">
            <form id="addForm">
                <label for="paperNumber">试卷编号:</label>
                <input type="text" id="paperNumber" name="paperNumber" readonly>
                <br>
                <br>

                <button type="button" style="display: block; margin: 0 auto;" onclick="generatePaperNumber()">生成编号
                </button>
                <br>

                <label for="begin">申请时间:</label>
                <input type="datetime-local" id="begin" name="begin">
                <br>

                <label for="courseName">课程名称:</label>
                <input type="text" id="courseName" name="courseName" required>
                <label for="courseTea">任课教师:</label>
                <input type="text" id="courseTea" name="courseTea" required>
                <br>
                <label for="courseID">课程代码</label>
                <input type="text" id="courseID" name="courseID" maxlength="10" minlength="10" required>
                <label for="courseNature">专业:</label>
                <select id="courseNature" name="courseNature" required>
                    <option value="">请选择</option>
                    <option value="必修">必修</option>
                    <option value="选修">选修</option>
                </select>
                <br>
                <label for="credit">学分</label>
                <input type="text" id="credit" name="credit" required>
                <br>
                <label for="courseClass">授课班级</label>
                <input type="text" id="courseClass" name="courseClass" required>
                <br>
                <label for="courseMajor">授课专业</label>
                <input type="text" id="courseMajor" name="courseMajor" required>
                <br>
                <label for="courseCollege">授课学院</label>
                <input type="text" id="courseCollege" name="courseCollege" required>
                <br>
                <label for="testWay">考试方式:</label>
                <div id="testWay">
                    <label><input type="radio" name="testWay" value="闭卷">闭卷</label>
                    <label><input type="radio" name="testWay" value="开卷">开卷</label>
                    <label><input type="radio" name="testWay" value="其他">其他</label>
                </div>
                <label for="testTime">考试时间:</label>
                <input type="datetime-local" id="testTime" name="testTime" required>
                <br>
                <label for="testCount">考试人数:</label>
                <input type="text" id="testCount" name="testCount" required>
                <br>
                命题方式:
                <div id="testMethod">
                    <label>
                        <input type="radio" name="testMethod" value="任课教师个人命题">任课教师个人命题
                        <input type="text" id="teacherName" name="teacherName" placeholder="命题人:">
                    </label>
                    <label><input type="radio" name="testMethod" value="课程组集体命题">课程组集体命题</label>
                    <label><input type="radio" name="testMethod" value="题库命题">题库命题</label>
                </div>
                成绩组成:
                <label for="final">期末[</label>
                <input type="text" id="final" name="final" style="width: 20px" oninput="validateInput()" required>
                <label for="homework">%];作业[</label>
                <input type="text" id="homework" name="homework" style="width: 20px" oninput="validateInput()" required>
                <label for="lab">%];实验[</label>
                <input type="text" id="lab" name="lab" style="width: 20px" oninput="validateInput()" required>%]
                <br>
                <br>
                <label for="testEvaluation">考核与评价方式:</label>
                <br>
                <input type="text" id="testEvaluation" name="testEvaluation" style="width: 300px; height:300px"
                       required>
                <br>
                <br>
                <label for="testAnalysis">考核内容合理性分析</label>
                <br>
                <input type="text" id="testAnalysis" name="testAnalysis" style="width: 300px; height:300px" required>

                <br><br>
                <button type="submit" style="display: block; margin: 0 auto;">添加信息</button>
            </form>
        </div>
    </div>
</div>
</body>
<script>
    document.getElementById('addForm').addEventListener('submit', function (event) {
        event.preventDefault();
        const paperNumber = document.getElementById('paperNumber').value;
        const begin = document.getElementById('begin').value;
        const courseName = document.getElementById('courseName').value;
        const courseTeacher = document.getElementById('courseTea').value;
        const courseID = document.getElementById('courseID').value;
        const courseNature = document.getElementById('courseNature').value;
        const credit = document.getElementById('credit').value;
        const courseClass = document.getElementById('courseClass').value;
        const courseMajor = document.getElementById('courseMajor').value;
        const courseCollege = document.getElementById('courseCollege').value;
        const testWay = document.querySelectorAll('input[name="testWay"]');
        let t;
        testWay.forEach(radio => {
            if (radio.checked) {
                t = radio.value;
                console.log(t);
            }
        });
        const testTime = document.getElementById('testTime').value;
        const testCount = document.getElementById('testCount').value;
        const testMethod = document.querySelectorAll('input[name="testMethod"]');
        let tm;
        testMethod.forEach(radio => {
            if (radio.checked) {
                tm = radio.value;
                console.log(tm);
            }
        });
        let teacherName;
        if (tm === "任课教师个人命题") {
            teacherName = document.getElementById('teacherName');
            tm = "任课教师个人命题,命题教师" + teacherName.value;
            console.log(teacherName.value);
        }
        const final = document.getElementById('final').value;
        const homework = document.getElementById('homework').value;
        const lab = document.getElementById('lab').value;
        const testEvaluation = document.getElementById('testEvaluation').value;
        const testAnalysis = document.getElementById('testAnalysis').value;
        const testGrade = "期末[" + final + "%];作业[" + homework + "%];实验[" + lab + "%];";
        const requestUrl = `http://localhost:8080/teacher/add`;
        fetch(requestUrl,
            {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    cardId: paperNumber,
                    cardDate: begin,
                    courseName: courseName,
                    courseTeacher: courseTeacher,
                    courseID: courseID,
                    courseNature: courseNature,
                    credit: credit,
                    courseClass: courseClass,
                    courseMajor: courseMajor,
                    courseCollege: courseCollege,
                    testWay: t,
                    testDate: testTime,
                    testCount: testCount,
                    testMethod: tm,
                    testGrade: testGrade,
                    testEvaluation: testEvaluation,
                    testAnalysis: testAnalysis,
                    auditStatus: 0,
                })
            })
            .then(res => res.json())
            .then(data => {
                if (data.msg === 'success') {
                    alert("已将信息添加到数据库");
                    console.log(data);
                } else {
                    alert("添加失败  " + data.msg);
                }
            })
            .catch(error => {
                alert("请求失败,请重试");
                console.error(error);
            });
    });
</script>
<script>
    function validateInput() {
        var final = parseInt(document.getElementById('final').value) || 0;
        var homework = parseInt(document.getElementById('homework').value) || 0;
        var lab = parseInt(document.getElementById('lab').value) || 0;
        final = Math.min(100, Math.max(0, final));
        homework = Math.min(100 - final, Math.max(0, homework));
        lab = Math.min(100 - final - homework, Math.max(0, lab));
        document.getElementById('final').value = final;
        document.getElementById("homework").value = homework;
        document.getElementById("lab").value = lab;
    }
</script>
</html>

2delete.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>删除试卷信息</title>
    <style>

        /*.form {*/
        /*    width: 600px;*/
        /*    margin: 0 auto;*/
        /*    !*border: 1px solid red;*!*/
        /*}*/

        /*.form table {*/
        /*    margin: 0 auto;*/
        /*}*/

        .form table tr td {
            width: 100px;
            height: 30px;
            border: 1px solid #000;
            text-align: center;
        }

        button {
            display: block;
            margin-top: 10px;
            padding: 10px;
            background-color: #007bff;
            color: #fff;
            border: none;
            border-radius: 3px;
            cursor: pointer;
        }

    </style>
</head>
<body>
<h1 style="text-align: center">删除试卷审批卡</h1>
<!--边框居中-->
<div class="centered-form">
    <!--    增加边框-->
    <div class="bordered-form">
        <!--        调整边框大小-->
        <div class="form">
            <form id="deleteForm">
                <label for="cardID">审批卡编号</label>
                <input type="text" id="cardID" name="cardID" placeholder="审批卡编号">
                <br>
                <br>
                <button type="submit" style="display: block; margin: 0 auto;">提交编号</button>
                <div id="container">

                </div>
            </form>
        </div>
    </div>
</div>
</body>
<script>
    document.getElementById('deleteForm').addEventListener('submit',function (event)
    {
        event.preventDefault();
        const cardID=document.getElementById('cardID').value;
        const requestUrl=`http://localhost:8080/teacher/getById/${cardID}`;
        fetch(requestUrl,
            {
                method: 'GET',
                headers: {
                    'Content-Type': 'application/json'
                },
            })
            .then(res => res.json())
            .then(data => {
                if (data.msg === 'success'&&data.data!=null) {
                    console.log(data);
                    generateTable(data.data);
                } else {
                    alert("不存在此未审查或被退回的的审批卡");
                }
            })
            .catch(error => {
                alert("请求失败,请重试");
                console.error(error);
            });
    })
</script>
<script>
    function generateTable(data) {
        const tableContainer = document.getElementById("container");
        // 清空 tableContainer 中的所有子节点
        while (tableContainer.hasChildNodes()) {
            tableContainer.removeChild(tableContainer.firstChild);
        }
        const table = document.createElement("table");
        const tableBody = document.createElement("tbody");
        let row = document.createElement("tr");
        if(data.auditStatus===0||data.auditStatus===-1)
        {
            let s;
            if(data.auditStatus===0)
            {
                s="待审核";
            }
            else
            {
                s="未通过";
            }
            row.innerHTML = '<td>试卷审批卡编号</td><td>申请日期</td><td>课程名称</td><td>任课教师</td><td>课程编号</td><td>课程性质</td><td>学分</td><td>授课班级</td><td>授课专业</td><td>授课学院</td><td>考试方式</td><td>考试日期</td><td>考试人数</td><td>出题方式</td><td>成绩组成</td><td>考核与评价方式</td><td>考核内容合理性分析</td><td>专业审查意见</td><td>专业审查结论</td><td>合理性审查意见</td><td>合理性审查结果</td><td>审核状态</td><td>删除</td>';
            tableBody.appendChild(row);
            row = document.createElement("tr");
            row.innerHTML = `<td>${data.cardId}</td><td>${data.cardDate}</td><td>${data.courseName}</td><td>${data.courseTeacher}</td><td>${data.courseID}</td><td>${data.courseNature}</td><td>${data.credit}</td><td>${data.courseClass}</td><td>${data.courseMajor}</td><td>${data.courseCollege}</td><td>${data.testWay}</td><td>${data.testDate}</td><td>${data.testCount}</td><td>${data.testMethod}</td><td>${data.testGrade}</td><td>${data.testEvaluation}</td><td>${data.testAnalysis}</td><td>${data.professional}</td><td>${data.professionalConclusion}</td><td>${data.Reasonable}</td><td>${data.ReasonableConclusion}</td><td>${s}</td><td><button class="deleteButton">删除</button></td>`;
            tableBody.appendChild(row);
            table.appendChild(tableBody);
            tableContainer.appendChild(table);
        }
        else {
            let s;
            if(data.auditStatus===1)
            {
                s="已符合";
            }
            else
            {
                s="已通过";
            }
            row.innerHTML = '<td>试卷审批卡编号</td><td>申请日期</td><td>课程名称</td><td>任课教师</td><td>课程编号</td><td>课程性质</td><td>学分</td><td>授课班级</td><td>授课专业</td><td>授课学院</td><td>考试方式</td><td>考试日期</td><td>考试人数</td><td>出题方式</td><td>成绩组成</td><td>考核与评价方式</td><td>考核内容合理性分析</td><td>专业审查意见</td><td>专业审查结论</td><td>合理性审查意见</td><td>合理性审查结果</td><td>审核状态</td>';
            tableBody.appendChild(row);
            row = document.createElement("tr");
            row.innerHTML = `<td>${data.cardId}</td><td>${data.cardDate}</td><td>${data.courseName}</td><td>${data.courseTeacher}</td><td>${data.courseID}</td><td>${data.courseNature}</td><td>${data.credit}</td><td>${data.courseClass}</td><td>${data.courseMajor}</td>${data.courseCollege}<td>${data.testWay}</td><td>${data.testDate}</td><td>${data.testCount}</td><td>${data.testMethod}</td><td>${data.testGrade}</td><td>${data.testEvaluation}</td><td>${data.testAnalysis}</td><td>${data.professional}</td><td>${data.professionalConclusion}</td><td>${data.Reasonable}</td><td>${data.ReasonableConclusion}</td><td>${s}</td>`;
            tableBody.appendChild(row);
            table.appendChild(tableBody);
            tableContainer.appendChild(table);
            alert("已通过或者已符合要求,无需删除");
        }
    }
</script>
<script>
    const tableContainer = document.getElementById("container");
    tableContainer.addEventListener("click", function (event) {
        // 获取到点击事件的目标元素
        let target = event.target;
        // 向上遍历DOM树,找到具有相应类名的祖先元素
        while (target !== tableContainer && ![...target.classList].some(className => ["deleteButton"].includes(className))) {
            target = target.parentNode;
        }
        if (target.classList.contains("deleteButton")) {
            // 点击了"审批通过"按钮
            const row = target.closest("tr");
            const cardID = row.querySelector("td:first-child").textContent;
            updateStateInDatabase(cardID);
            // display(); // 重新显示数据
        }
    });
</script>
<script>
    function updateStateInDatabase(cardID)
    {
        const requestUrl=`http://localhost:8080/teacher/deleteById/${cardID}`
        fetch(requestUrl,
            {
                method: 'DELETE',
                headers: {
                    'Content-Type': 'application/json'
                },
            })
            .then(res => res.json())
            .then(data => {
                if (data.msg === 'success') {
                    console.log(data);
                    alert("删除成功")
                } else {
                    alert("删除失败");
                }
            })
            .catch(error => {
                alert("请求失败,请重试");
                console.error(error);
            });
    }
</script>
</html>

3update.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修改试卷审批卡</title>
    <style>
        .reSet {
            background-color: #4CAF50;
            color: white;
            border: none;
            padding: 10px 20px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 4px 2px;
            cursor: pointer;
        }

        .form {
            width: 600px;
            margin: 0 auto;
            /*border: 1px solid red;*/
        }

        .form table {
            margin: 0 auto;
        }

        .form table tr td {
            width: 100px;
            height: 30px;
            border: 1px solid #000;
            text-align: center;
        }

        button {
            display: block;
            margin-top: 10px;
            padding: 10px;
            background-color: #007bff;
            color: #fff;
            border: none;
            border-radius: 3px;
            cursor: pointer;
        }

        .centered-form {
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 250vh;
        }

        .bordered-form {
            border: 2px solid #000; /* 边框样式 */
            padding: 150px; /* 可选的内边距 */
            background-color: #f0f0f0; /* 可选的背景颜色 */
        }
    </style>
</head>
<script>
    var urlParams = new URLSearchParams(window.location.search);
    var username = urlParams.get('username');
    console.log("用户名为:" + username);
</script>
<body>
<h1 style="text-align: center">修改试卷审批卡</h1>
<!--边框居中-->
<div class="centered-form">
    <!--    增加边框-->
    <div class="bordered-form">
        <!--        调整边框大小-->
        <div class="form">
            <form id="updateForm">
                <label for="paperNumber">要修改的试卷编号:</label>
                <input type="text" id="paperNumber" name="paperNumber">
                <br>
                <label for="begin">申请时间:</label>
                <input type="datetime-local" id="begin" name="begin">
                <br>
                <label for="courseName">课程名称:</label>
                <input type="text" id="courseName" name="courseName" required>
                <label for="courseTea">任课教师:</label>
                <input type="text" id="courseTea" name="courseTea" required>
                <br>
                <label for="courseID">课程代码</label>
                <input type="text" id="courseID" name="courseID" maxlength="10" minlength="10" required>
                <label for="courseNature">专业:</label>
                <select id="courseNature" name="courseNature" required>
                    <option value="">请选择</option>
                    <option value="必修">必修</option>
                    <option value="选修">选修</option>
                </select>
                <br>
                <label for="credit">学分</label>
                <input type="text" id="credit" name="credit" required>
                <br>
                <label for="courseClass">授课班级</label>
                <input type="text" id="courseClass" name="courseClass" required>
                <br>
                <label for="courseMajor">授课专业</label>
                <input type="text" id="courseMajor" name="courseMajor" required>
                <br>
                <label for="courseCollege">授课学院</label>
                <input type="text" id="courseCollege" name="courseCollege" required>
                <br>
                <label for="testWay">考试方式:</label>
                <div id="testWay">
                    <label><input type="radio" name="testWay" value="闭卷">闭卷</label>
                    <label><input type="radio" name="testWay" value="开卷">开卷</label>
                    <label><input type="radio" name="testWay" value="其他">其他</label>
                </div>
                <label for="testTime">考试时间:</label>
                <input type="datetime-local" id="testTime" name="testTime" required>
                <br>
                <label for="testCount">考试人数:</label>
                <input type="text" id="testCount" name="testCount" required>
                <br>
                命题方式:
                <div id="testMethod">
                    <label>
                        <input type="radio" name="testMethod" value="任课教师个人命题">任课教师个人命题
                        <input type="text" id="teacherName" name="teacherName" placeholder="命题人:">
                    </label>
                    <label><input type="radio" name="testMethod" value="课程组集体命题">课程组集体命题</label>
                    <label><input type="radio" name="testMethod" value="题库命题">题库命题</label>
                </div>
                成绩组成:
                <label for="final">期末[</label>
                <input type="text" id="final" name="final" style="width: 20px" oninput="validateInput()" required>
                <label for="homework">%];作业[</label>
                <input type="text" id="homework" name="homework" style="width: 20px" oninput="validateInput()" required>
                <label for="lab">%];实验[</label>
                <input type="text" id="lab" name="lab" style="width: 20px" oninput="validateInput()" required>%]
                <br>
                <br>
                <label for="testEvaluation">考核与评价方式:</label>
                <br>
                <input type="text" id="testEvaluation" name="testEvaluation" style="width: 300px; height:300px"
                       required>
                <br>
                <br>
                <label for="testAnalysis">考核内容合理性分析</label>
                <br>
                <input type="text" id="testAnalysis" name="testAnalysis" style="width: 300px; height:300px" required>

                <br><br>
                <button type="submit" style="display: block; margin: 0 auto;">添加信息</button>
            </form>
        </div>
    </div>
</div>
</body>
<script>
    document.getElementById('updateForm').addEventListener('submit', function (event) {
        event.preventDefault();
        const paperNumber = document.getElementById('paperNumber').value;
        const begin = document.getElementById('begin').value;
        const courseName = document.getElementById('courseName').value;
        const courseTeacher = document.getElementById('courseTea').value;
        const courseID = document.getElementById('courseID').value;
        const courseNature = document.getElementById('courseNature').value;
        const credit = document.getElementById('credit').value;
        const courseClass = document.getElementById('courseClass').value;
        const courseMajor = document.getElementById('courseMajor').value;
        const courseCollege = document.getElementById('courseCollege').value;
        const testWay = document.querySelectorAll('input[name="testWay"]');
        let t;
        testWay.forEach(radio => {
            if (radio.checked) {
                t = radio.value;
                console.log(t);
            }
        });
        const testTime = document.getElementById('testTime').value;
        const testCount = document.getElementById('testCount').value;
        const testMethod = document.querySelectorAll('input[name="testMethod"]');
        let tm;
        testMethod.forEach(radio => {
            if (radio.checked) {
                tm = radio.value;
                console.log(tm);
            }
        });
        let teacherName;
        if (tm === "任课教师个人命题") {
            teacherName = document.getElementById('teacherName');
            tm = "任课教师个人命题,命题教师" + teacherName.value;
            console.log(teacherName.value);
        }
        const final = document.getElementById('final').value;
        const homework = document.getElementById('homework').value;
        const lab = document.getElementById('lab').value;
        const testEvaluation = document.getElementById('testEvaluation').value;
        const testAnalysis = document.getElementById('testAnalysis').value;
        const testGrade = "期末[" + final + "%];作业[" + homework + "%];实验[" + lab + "%];";
        const requestUrl = `http://localhost:8080/teacher/update`;
        fetch(requestUrl,
            {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    cardId: paperNumber,
                    cardDate: begin,
                    courseName: courseName,
                    courseTeacher: courseTeacher,
                    courseID: courseID,
                    courseNature: courseNature,
                    credit: credit,
                    courseClass: courseClass,
                    courseMajor: courseMajor,
                    courseCollege: courseCollege,
                    testWay: t,
                    testDate: testTime,
                    testCount: testCount,
                    testMethod: tm,
                    testGrade: testGrade,
                    testEvaluation: testEvaluation,
                    testAnalysis: testAnalysis,
                    professional: null,
                    professionalConclusion: null,
                    Reasonable: null,
                    ReasonableConclusion: null,
                    auditStatus: 0,
                })
            })
            .then(res => res.json())
            .then(data => {
                if (data.msg === 'success') {
                    alert("修改成功");
                    console.log(data);
                } else {
                    alert("修改失败  " + data.msg);
                }
            })
            .catch(error => {
                alert("请求失败,请重试");
                console.error(error);
            });
    });
</script>
<script>
    function validateInput() {
        var final = parseInt(document.getElementById('final').value) || 0;
        var homework = parseInt(document.getElementById('homework').value) || 0;
        var lab = parseInt(document.getElementById('lab').value) || 0;
        final = Math.min(100, Math.max(0, final));
        homework = Math.min(100 - final, Math.max(0, homework));
        lab = Math.min(100 - final - homework, Math.max(0, lab));
        document.getElementById('final').value = final;
        document.getElementById("homework").value = homework;
        document.getElementById("lab").value = lab;
    }
</script>
</html>

4select.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>查询审批卡</title>
    <style>
        .reSet {
            background-color: #4CAF50;
            color: white;
            border: none;
            padding: 10px 20px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 4px 2px;
            cursor: pointer;
        }

        .form table tr td {
            width: 100px;
            height: 30px;
            border: 1px solid #000;
            text-align: center;
        }

        button {
            display: block;
            margin-top: 10px;
            padding: 10px;
            background-color: #007bff;
            color: #fff;
            border: none;
            border-radius: 3px;
            cursor: pointer;
        }
    </style>
</head>
<body>
<h1 style="text-align: center">查询试卷审批卡</h1>
<!--边框居中-->
<div class="centered-form">
    <!--    增加边框-->
    <div class="bordered-form">
        <!--        调整边框大小-->
        <div class="form">
            <div id="container">

            </div>
        </div>
    </div>
</div>
</body>
<script>
    var urlParams = new URLSearchParams(window.location.search);
    var username = urlParams.get('username');
    console.log("用户名为:" + username);
    const requestU = `http://localhost:8080/teacher/selectName/${username}`;
    fetch(requestU,
        {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json'
            },
        })
        .then(res => res.json())
        .then(data => {
            if (data.msg === 'success' && data.data != null) {
                console.log("查询到的用户信息为");
                console.log(data);
                deleteTest(data.data.name);
            } else {
                alert("未查询到此教师信息");
            }
        })
        .catch(error => {
            alert("请求失败,请重试");
            console.error(error);
        });
</script>
<script>
    function deleteTest(name) {
        const requestUrl = `http://localhost:8080/teacher/selectAll/${name}`;
        fetch(requestUrl,
            {
                method: 'GET',
                headers: {
                    'Content-Type': 'application/json'
                },
            })
            .then(res => res.json())
            .then(data => {
                if (data.msg === 'success' && data.data != null) {
                    console.log(data);
                    generate(data.data, name);
                } else {
                    alert("不存在此未审查或被退回的的审批卡");
                }
            })
            .catch(error => {
                alert("请求失败,请重试");
                console.error(error);
            });
    }
</script>
<script>
    function generate(data, name) {
        const tableContainer = document.getElementById("container");
        // 清空 tableContainer 中的所有子节点
        while (tableContainer.hasChildNodes()) {
            tableContainer.removeChild(tableContainer.firstChild);
        }
        const table = document.createElement("table");
        const tableBody = document.createElement("tbody");
        let row = document.createElement("tr");
        row.innerHTML = '<td>申请日期</td><td>课程名称</td><td>授课班级</td><td>授课专业</td><td>审核状态</td>';

        tableBody.appendChild(row);
        // 查询方式是按姓名查询或多条查询
        for (let i = 0; i < data.length; i++) {
            let s;
            console.log("222   " + data[i].auditStatus);
            if (data[i].auditStatus === 0) {
                s = "待审核";
            } else if (data[i].auditStatus === -1) {
                s = "未通过";
            } else if (data[i].auditStatus === 1) {
                s = "已符合";
            } else if (data[i].auditStatus === 2) {
                s = "已通过";
            }
            row = document.createElement("tr");
            let p1 = data[i].professional;
            let p2 = data[i].professionalConclusion;
            if (data[i].professional === null) {
                p1 = "未进行";
                p2 = "未进行";
            }
            let r1 = data[i].Reasonable;
            let r2 = data[i].ReasonableConclusion;
            if (data[i].Reasonable === undefined) {
                r1 = "未进行";
                r2 = "未进行";
            }
            let d = data[i].cardDate;
            row.innerHTML = `<td><button type="button" id="search" onclick="redirectToSelectAll('${name}')">${d}</button></td><td>${data[i].courseName}</td><td>${data[i].courseClass}</td><td>${data[i].courseMajor}</td><td>${s}</td>`;
            tableBody.appendChild(row);
            table.appendChild(tableBody);
            tableContainer.appendChild(table);
        }
    }

    function redirectToSelectAll(n) {
        // 修改这里的路径为实际的 selectAll 页面路径
        window.location.href = `7selectAll.html?name=${n}`;
    }
</script>
</html>

5reSet.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修改密码</title>
    <style>
        button {
            display: block;
            margin-top: 10px;
            padding: 10px;
            background-color: #007bff;
            color: #fff;
            border: none;
            border-radius: 3px;
            cursor: pointer;
        }

        .centered-form {
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
        }

        .bordered-form {
            border: 2px solid #000; /* 边框样式 */
            padding: 20px; /* 可选的内边距 */
            background-color: #f0f0f0; /* 可选的背景颜色 */
        }
    </style>
</head>
<body>
<h1 style="text-align: center">修改密码</h1>
<div class="centered-form">
    <div class="bordered-form">

        <label for="old">旧密码</label>
        <input type="text" id="old" required>
        <br>
        <label for="new1">新密码</label>
        <input type="text" id="new1" required>
        <br>
        <label for="new2">确认新密码</label>
        <input type="text" id="new2" required>
        <div id="match"></div>
        <br>
        <button id="update" style="display: block; margin: 0 auto;">更改密码</button>
    </div>
</div>
</body>
<script>
    const newPassword1 = document.getElementById("new1");
    const newPassword2 = document.getElementById("new2");
    const passwordMatchMessage = document.getElementById("match");

    function checkPasswordMatch() {
        const password1 = newPassword1.value;
        const password2 = newPassword2.value;

        if (password1 === password2) {
            passwordMatchMessage.textContent = "两次密码一致";
            passwordMatchMessage.style.color = "green";
        } else {
            passwordMatchMessage.textContent = "两次密码不一致";
            passwordMatchMessage.style.color = "red";
        }
    }

    newPassword1.addEventListener("input", checkPasswordMatch);
    newPassword2.addEventListener("input", checkPasswordMatch);
</script>
<script>
    var urlParams = new URLSearchParams(window.location.search);
    var username = urlParams.get('username');
    console.log("用户名为:" + username);
    document.getElementById('update').addEventListener('click', function () {
        const requestUrl = `http://localhost:8080/user/getUser/${username}`;
        fetch(requestUrl, {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json'
            },
        })
            .then(response => response.json())
            .then(data => {
                if (data.msg === 'success') {
                    console.log(data);
                    deal(data.data);
                } else {
                    alert("此结果不存在");
                }
            })
            .catch(error => {
                alert("请求失败,请重试");
                console.error(error);
            });
    })
</script>
<script>
    function deal(data) {
        const old = document.getElementById('old').value;
        const new1 = document.getElementById('new1').value;
        const new2 = document.getElementById('new2').value;
        const password = data.password;
        console.log("密码为   " + password);
        if (old !== password) {
            alert("您输入的旧密码有误");
        } else if (old !== password && new1 !== new2) {
            alert("输入的两次密码不一致");
        } else if (old === password && new1 === new2) {
            const requestUrl = `http://localhost:8080/user/update/${username}/${new1}`;
            fetch(requestUrl, {
                method: 'PUT',
                headers: {
                    'Content-Type': 'application/json'
                },
            })
                .then(response => response.json())
                .then(data => {
                    if (data.msg === 'success') {
                        console.log(data + "   111");
                        alert("修改成功,请您重新登陆");
                        window.location.href = "http://localhost:8080/index.html";
                    } else {
                        alert("修改失败");
                    }
                })
                .catch(error => {
                    alert("请求失败,请重试");
                    console.error(error);
                });
        }
    }
</script>
</html>

7selectAll.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全部信息</title>
    <style>
        .reSet {
            background-color: #4CAF50;
            color: white;
            border: none;
            padding: 10px 20px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 4px 2px;
            cursor: pointer;
        }

        .form table tr td {
            width: 100px;
            height: 30px;
            border: 1px solid #000;
            text-align: center;
        }

        button {
            display: block;
            margin-top: 10px;
            padding: 10px;
            background-color: #007bff;
            color: #fff;
            border: none;
            border-radius: 3px;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div class="centered-form">
    <!--    增加边框-->
    <div class="bordered-form">
        <!--        调整边框大小-->
        <div class="form">
            <div id="container">

            </div>
        </div>
    </div>
</div>
</body>
<script>
    var urlParams = new URLSearchParams(window.location.search);
    var name = urlParams.get('name');
    console.log("用户名为:" + name);
    const requestUrl = `http://localhost:8080/teacher/selectAll/${name}`;
    fetch(requestUrl,
        {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json'
            },
        })
        .then(res => res.json())
        .then(data => {
            if (data.msg === 'success' && data.data != null) {
                console.log(data);
                generateTable(data.data);
            } else {
                alert("不存在此未审查或被退回的的审批卡");
            }
        })
        .catch(error => {
            alert("请求失败,请重试");
            console.error(error);
        });
</script>
<script>
    function generateTable(data) {
        const tableContainer = document.getElementById("container");
        // 清空 tableContainer 中的所有子节点
        while (tableContainer.hasChildNodes()) {
            tableContainer.removeChild(tableContainer.firstChild);
        }
        const table = document.createElement("table");
        const tableBody = document.createElement("tbody");
        let row = document.createElement("tr");
        row.innerHTML = '<td>试卷审批卡编号</td><td>申请日期</td><td>课程名称</td><td>任课教师</td><td>课程编号</td><td>课程性质</td><td>学分</td><td>授课班级</td><td>授课专业</td><td>授课学院</td><td>考试方式</td><td>考试日期</td><td>考试人数</td><td>出题方式</td><td>成绩组成</td><td>考核与评价方式</td><td>考核内容合理性分析</td><td>专业审查意见</td><td>专业审查结论</td><td>合理性审查意见</td><td>合理性审查结果</td><td>审核状态</td>';
        tableBody.appendChild(row);
        // 查询方式是按姓名查询或多条查询
        for (let i = 0; i < data.length; i++) {
            let s;
            console.log("222   " +data[i].auditStatus);
            if (data[i].auditStatus === 0) {
                s = "待审核";
            } else if (data[i].auditStatus === -1) {
                s = "未通过";
            } else if (data[i].auditStatus === 1) {
                s = "已符合";
            } else if (data[i].auditStatus === 2) {
                s = "已通过";
            }
            row = document.createElement("tr");
            let p1=data[i].professional;
            let p2=data[i].professionalConclusion;
            if(data[i].professional===null)
            {
                p1="未进行";
                p2="未进行";
            }
            let r1=data[i].reasonable;
            let r2=data[i].reasonableConclusion;
            console.log(r1+"  "+r2);
            console.log(data[i].reasonable);
            if(data[i].reasonable===undefined)
            {
                r1="未进行";
                r2="未进行";
            }
            row.innerHTML = `<td>${data[i].cardId}</td><td>${data[i].cardDate}</td><td>${data[i].courseName}</td><td>${data[i].courseTeacher}</td><td>${data[i].courseID}</td><td>${data[i].courseNature}</td><td>${data[i].credit}</td><td>${data[i].courseClass}</td><td>${data[i].courseMajor}</td><td>${data[i].courseCollege}</td><td>${data[i].testWay}</td><td>${data[i].testDate}</td><td>${data[i].testCount}</td><td>${data[i].testMethod}</td><td>${data[i].testGrade}</td><td>${data[i].testEvaluation}</td><td>${data[i].testAnalysis}</td><td>${p1}</td><td>${p2}</td><td>${r1}</td><td>${r2}</td><td>${s}</td>`;
            tableBody.appendChild(row);
            table.appendChild(tableBody);
            tableContainer.appendChild(table);
        }
    }
</script>
</html>

teacher.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>教师管理页面</title>
    <style>
        .form {
            width: 600px;
            margin: 0 auto;
            /*border: 1px solid red;*/
        }

        .form table {
            margin: 0 auto;
        }

        .form table tr td {
            width: 100px;
            height: 30px;
            border: 1px solid #000;
            text-align: center;
        }

        button {
            display: block;
            margin-top: 10px;
            padding: 10px;
            background-color: #007bff;
            color: #fff;
            border: none;
            border-radius: 3px;
            cursor: pointer;
        }
    </style>
</head>
<body>
<h1 style="text-align: center">教师信息管理</h1>
<div class="form">
    <table border="1px" cellspacing="0" width="600px">
        <tr>
            <th>编号</th>
            <th>功能</th>
        </tr>
        <tr>
            <td>1</td>
            <td>
                <button id="insert">新增试卷审批卡</button>
            </td>
        </tr>
        <tr>
            <td>2</td>
            <td>
                <button id="delete">删除试卷审批卡</button>
            </td>
        </tr>
        <tr>
            <td>3</td>
            <td>
                <button id="update">修改试卷审批卡</button>
            </td>
        </tr>
        <tr>
            <td>4</td>
            <td>
                <button id="select">查询试卷审批卡</button>
            </td>
        </tr>
        <tr>
            <td>5</td>
            <td>
                <button id="reSet">重置密码</button>
            </td>
        </tr>
        <tr>
            <td>6</td>
            <td>
                <button id="selectInformation">查询考试信息</button>
            </td>
        </tr>
    </table>
</div>
</body>
<script>
    var urlParams = new URLSearchParams(window.location.search);
    var username = urlParams.get('username');
    console.log(username);
    document.getElementById("insert").addEventListener("click", function () {
        window.location.href = "1insert.html?username=" + encodeURIComponent(username);
    });
    document.getElementById("delete").addEventListener("click", function () {
        window.location.href = "2delete.html?username=" + encodeURIComponent(username);
    });
    document.getElementById('update').addEventListener('click', function () {
        window.location.href = "3update.html?username=" + encodeURIComponent(username);
    });
    document.getElementById("select").addEventListener("click", function () {
        window.location.href = "4select.html?username=" + encodeURIComponent(username);
    });
    document.getElementById("reSet").addEventListener("click", function () {
        window.location.href = "5reSet.html?username=" + encodeURIComponent(username);
    });
    document.getElementById('selectInformation').addEventListener('click', function () {
        window.location.href = "../STUDENT/student3.html";
    });
</script>
</html>