11.7

今天我们来实现管理员登陆与学生登录及功能等的前后端代码

首先是我的配置图

1、管理员

①后端

UserController

package com.example.controller;

import com.example.pojo.Result;
import com.example.pojo.User;
import com.example.pojo.student;
import com.example.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.*;

import java.util.List;

@RestController
@RequestMapping("/user")
public class UserController {
    @Autowired
    private UserService userService;

    //登陆验证
    @GetMapping("/getByUser")
    public ResponseEntity<Integer> getByUser(String username, String password, String position) {
        int re = userService.getByUser(username, password, position);
        return ResponseEntity.ok(re);
    }

    //学生注册
    @PostMapping("/add")
    public Result add(@RequestBody student s) {
        userService.add(s);
        return Result.success(s);
    }

    //登陆用户信息添加
    @PostMapping("addUser")
    public Result addUser(@RequestBody User user) {
        userService.addUser(user);
        return Result.success(user);
    }

    //查询登录数据
    @GetMapping("getUser/{username}")
    public Result getUser1(@PathVariable String username) {
        User user = userService.getUser(username);
        if (user != null) {
            return Result.success(user);
        } else {
            return Result.error("查询失败");
        }
    }

    //查询个人信息
    @GetMapping("/person/{username}")
    public Result getPerson(@PathVariable String username) {
        student s = userService.getPerson(username);
        if (s != null) {
            return Result.success(s);
        } else {
            return Result.error("查询失败");
        }
    }

    //修改用户密码
    @PutMapping("/update/{username}/{password}")
    public Result update(@PathVariable String username, @PathVariable String password) {
        userService.update(username, password);
        User user = userService.getUser(username);
        if (user != null) {
            return Result.success(user);
        } else {
            return Result.error("修改失败");
        }
    }


    //    获取全部申请注册的信息
    @GetMapping("/getAll")
    public Result getAll() {
        List<student> students = userService.getAll();
        if (students != null) {
            return Result.success(students);
        } else {
            return Result.error("当前不存在未审查的信息");
        }
    }

    //修改审批状态
    @PutMapping("/updateById/{stuId}/{state}")
    public Result updateById(@PathVariable String stuId, @PathVariable int state) {
        userService.updateById(stuId, state);
        List<student> s = userService.getAll();
        if (s != null) {
            return Result.success(s);
        } else {
            return Result.error("审批失败");
        }
    }

    //查询考试信息
    @GetMapping("/selectTest/{courseName}/{courseClass}/{courseMajor}")
    public Result selectTest(@PathVariable("courseName") String courseName, @PathVariable("courseClass") String courseClass, @PathVariable("courseMajor") String courseMajor) {
        return Result.success(userService.selectTest(courseName, courseClass, courseMajor));
    }
}

UserService

package com.example.service;

import com.example.mapper.UserMapper;
import com.example.pojo.Test;
import com.example.pojo.User;
import com.example.pojo.student;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

@Service
public class UserService {
    @Autowired
    private UserMapper userMapper;

    //登陆验证
    public int getByUser(String username, String password, String position) {
        return userMapper.getByUser(username, password, position);
    }

    //注册学生数据
    public void add(student s) {
        String stuID = s.getStuId();
        String stuName = s.getStuName();
        String grade = s.getGrade();
        String sex = s.getSex();
        String college = s.getCollege();
        String professionals = s.getProfessionals();
        String phone = s.getPhone();
        String position = s.getPosition();
        int state = s.getState();
        userMapper.add(stuID, stuName, grade, sex, college, professionals, phone, position, state);
    }
    public void addUser(User user) {
        String username=user.getUsername();
        String password=user.getPassword();
//        String[] position= user.getPosition().toArray(new String[0]);
        String position=String.join(",",user.getPosition());
        userMapper.addUser(username,password, position);
    }
    //查询个人详细信息
    public student getPerson(String username) {
        return userMapper.getPerson(username);
    }

    public User getUser(String username) {
        return userMapper.getUser(username);
    }

    public void update(String username, String password) {
        userMapper.update(username, password);
    }

    public List<student> getAll() { return userMapper.getAll();
    }

    public void updateById(String stuId,int state) { userMapper.updateById(stuId,state);

    }

    public List<Test> selectTest(String courseName, String courseClass, String courseMajor) {
        return userMapper.selectTest(courseName, courseClass, courseMajor);
    }
}

UserMapper

package com.example.mapper;

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

import java.util.List;

@Mapper
public interface UserMapper {
    //根据用户名和密码查询用户

    //根据用户名和密码查询用户，并返回用户所在部门
    @Select("select count(*) from user where username = #{username} and password = #{password} and position like concat('%', #{position}, '%')")
    int getByUser(@Param("username") String username, @Param("password") String password, @Param("position") String position);

    @Insert("insert into student(StuID, StuName, grade, sex, College, Professionals, Phone, Position, State) VALUES (#{id},#{StuName},#{grade},#{sex},#{College},#{Professionals},#{Phone},#{Position},#{State})")
    void add(String id, String StuName, String grade, String sex, String College, String Professionals, String Phone, String Position, int State);

    @Select("select * from student where StuID=#{username}")
    student getPerson(String username);

    @Select("select  * from user where username=#{username}")
    User getUser(String username);

    @Update("update user set password=#{password} where username=#{username}")
    void update(@Param("username") String username, @Param("password") String password);

    @Select("SELECT * from student where State=0")
    List<student> getAll();

    @Update("update student set State=#{state} where StuID=#{stuId}")
    void updateById(String stuId, int state);

    @Insert("insert into user(username,password,position) VALUES (#{username},#{password},#{position})")
    void addUser(String username, String password, String position);

    @Select("select * from test1 where AuditStatus=2 and CourseName=#{courseName} and CourseClass=#{courseClass} and CourseMajor=#{courseMajor} ")
    List<Test> selectTest(String courseName, String courseClass, String courseMajor);
}

②前端

主页面index.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>
<div class="centered-form">
    <div class="bordered-form">
        <h1>用户登录</h1>
        <form id="login">
            <label for="username">用户名:</label><input type="text" id="username">
            <br>
            <label for="password">密码:</label><input type="password" id="password">
            <br>
            <label>职位:</label>
            <div id="loginUser">
                <label><input type="radio" name="loginUser" value="专业教师">专业教师</label>
                <label><input type="radio" name="loginUser" value="专业负责人">专业负责人</label>
                <label><input type="radio" name="loginUser" value="教学副院长">教学副院长</label>
                <label><input type="radio" name="loginUser" value="学生">学生</label>
                <label><input type="radio" name="loginUser" value="系统管理员">系统管理员</label>
            </div>
            <div class="centered-buttons">
                <button type="submit" style="display: block; margin: 0 auto;">登录</button>
                <br>
                <button id="register" type="button" style="display: block; margin: 0 auto;">学生注册</button>
            </div>
        </form>
    </div>
</div>
</body>
<script>
    const register = document.getElementById("register");
    register.addEventListener("click", function () {
        window.location.href = "http://localhost:8080/STUDENT/register.html";
    });
    document.getElementById("login").addEventListener("submit", function (event) {
        event.preventDefault();
        const username = document.getElementById("username").value;
        const password = document.getElementById("password").value;
        const loginUser = document.querySelectorAll('input[name="loginUser"]');
        let l;

        loginUser.forEach(radio => {
            if (radio.checked) {
                l = radio.value;
            }
        });
        const url = `user/getByUser?username=${username}&password=${password}&position=${l}`;
        fetch(url, {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json'
            }
        })
            .then(res => res.json())
            .then(data => {
                if (data === 1) {
                    alert("登录成功");
                    if (l === '系统管理员') {
                        window.location.href = "ROOT/administrator.html?username=" + encodeURIComponent(username);
                    } else if (l === '学生') {
                        window.location.href = "STUDENT/student.html?username=" + encodeURIComponent(username);
                    } else if (l === '专业教师') {
                        window.location.href = "TEACHER/teacher.html?username=" + encodeURIComponent(username);
                    } else if (l === '专业负责人') {
                        window.location.href = "HEAD/head.html?username=" + encodeURIComponent(username);
                    } else if (l === '教学副院长') {
                        window.location.href = "PRESIDENT/president.html?username=" + encodeURIComponent(username);
                    }
                } else {
                    alert("登录失败");
                    console.log(data);
                }
            })
            .catch(error => {
                alert("请求失败，请重试");
                console.error(error);
            });
    });
</script>
</html>

administrator.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>
<script>
    // 获取URL中的用户名参数
    var urlParams = new URLSearchParams(window.location.search);
    var username = urlParams.get('username');
    console.log(username);
</script>
<div class="form">
    <table border="1px" cellspacing="0" width="600px">
        <tr>
            <th>编号</th>
            <th>功能</th>
        </tr>
        <tr>
            <td>1</td>
            <td>
                <button id="examine">审批学生注册信息</button>
            </td>
        </tr>
        <tr>
            <td>2</td>
            <td>
                <button id="insert">增加信息</button>
            </td>
        </tr>
        <tr>
            <td>3</td>
            <td>
                <button id="delete">删除信息</button>
            </td>
        </tr>
        <tr>
            <td>4</td>
            <td>
                <button id="update">修改信息</button>
            </td>
        </tr>
        <tr>
            <td>5</td>
            <td>
                <button id="select">查询信息</button>
            </td>
        </tr>
        <tr>
            <td>6</td>
            <td>
                <button id="reset">重置学生密码</button>
            </td>
        </tr>
    </table>
</div>
</body>
<script>
    document.getElementById("examine").addEventListener("click", function () {
        window.location.href = "examine.html";
    });
    document.getElementById('insert').addEventListener('click', function () {
        window.location.href = "insert.html";
    });
    document.getElementById("delete").addEventListener("click", function () {
        window.location.href = "delete.html";
    });
    document.getElementById('update').addEventListener('click', function () {
        window.location.href = "update.html";
    });
    document.getElementById("select").addEventListener("click", function () {
        window.location.href = "select.html";
    });
    document.getElementById("reset").addEventListener("click", function () {
        window.location.href = "reSet.html";
    });
</script>
</html>

insert.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: 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">
        <div class="form">
            <form id="addForm">
                <label for="username">请输入用户名</label>
                <input type="text" id="username" minlength="8" maxlength="8" required>
                <br>
                <label for="name">请输入姓名</label>
                <input type="text" id="name">
                <br>
                <label for="college">请输入所属学院</label>
                <input type="text" id="college">
                <br>
                <label for="pro">请输入所属专业</label>
                <input type="text" id="pro">
                <br>
                <label for="position">请输入职位，001表示普通教师、010表示专业负责人、011表示即是教师又是专业负责人，111表示三种角色兼具</label>
                <input type="text" id="position">
                <button type="submit" style="display: block; margin: 0 auto;">添加</button>
            </form>
        </div>
    </div>
</div>
</body>
<script>
    document.getElementById('addForm').addEventListener('submit', function (e) {
        e.preventDefault();
        const username = document.getElementById('username');
        const name = document.getElementById('name');
        const college = document.getElementById('college');
        const pro = document.getElementById('pro');
        const role = document.getElementById('position');
        console.log(username.value + "   " + name.value + "   " + college.value + "  " + pro.value + "  " + role.value);
        addUser(username.value, role.value);
        addTea(username.value, name.value, college.value, pro.value, role.value);
    });
</script>
<script>
    function addUser(username, role) {
        const requestUrl = 'http://localhost:8080/root/add';
        const roleToPoList = {
            '111': ["专业教师", "专业负责人", "教学副院长"],
            '011': ["专业教师", "专业负责人"],
            '001': ["专业教师"],
            '100': ["教学副院长"],
            '010': ["专业负责人"],
            '110': ["专业负责人", "教学副院长"],
            '101': ["专业教师", "教学副院长"],
        };

        const poList = roleToPoList[role] || [];
        console.log(poList);
        fetch(requestUrl,
            {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    username: username,
                    password: "123456",
                    position: poList,
                })
            })
            .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 addTea(username, name, college, pro, role) {
        const requestUrl = 'http://localhost:8080/root/addTea';
        fetch(requestUrl,
            {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    teacherID: username,
                    name: name,
                    college: college,
                    professionals: pro,
                    role: role,
                })
            })
            .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>
</html>

delete.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;
        }

        .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">
        <!--        调整边框大小-->
        <div class="form">
            <form id="deleteForm">
                <label for="username">请输入您要删除的用户名</label>
                <input type="text" id="username" minlength="8" maxlength="8" required>
                <br>
                <button type="submit" style="display: block; margin: 0 auto;">查询</button>
                <div id="container">

                </div>
            </form>
        </div>
    </div>
</div>
</body>
<script>
    function getTea(username) {
        const requestUrl = `http://localhost:8080/root/getTea/${username}`;
        fetch(requestUrl,
            {
                method: 'GET',
                headers: {
                    'Content-Type': 'application/json'
                },
            })
            .then(response => response.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>
    document.getElementById('deleteForm').addEventListener('submit', function (event) {
        event.preventDefault();
        const username = document.getElementById('username').value;
        console.log(username);
        getTea(username);
    });
</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>';
        tableBody.appendChild(row);
        const roleToPoList = {
            '111': ["专业教师", "专业负责人", "教学副院长"],
            '011': ["专业教师", "专业负责人"],
            '001': ["专业教师"],
            '100': ["教学副院长"],
            '010': ["专业负责人"],
            '110': ["专业负责人", "教学副院长"],
            '101': ["专业教师", "教学副院长"],
        };
        const poList = roleToPoList[data.role] || [];
        row = document.createElement("tr");
        row.innerHTML = `<td>${data.teacherID}</td><td>${data.name}</td><td>${data.college}</td><td>${data.professionals}</td><td>${poList}</td><td><button class="deleteButton">删除信息</button></td>`;
        tableBody.appendChild(row);
        table.appendChild(tableBody);
        tableContainer.appendChild(table);
    }
</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 username = row.querySelector("td:first-child").textContent;
            deleteTea(username);
            deleteUser(username);
            // display(); // 重新显示数据
        }
    });
</script>
<script>
    function deleteTea(username) {
        const requestUrl = `http://localhost:8080/root/deleteTea/${username}`;
        fetch(requestUrl,
            {
                method: 'DELETE',
                headers: {
                    'Content-Type': 'application/json'
                },
            })
            .then(response => response.json())
            .then(data => {
                if (data.msg === 'success' && data.data != null) {
                    alert("删除教师信息成功");
                } else {
                    alert("删除失败,或是未查找到该教师");
                }
            })
            .catch(error => {
                alert("请求失败，请重试");
                console.error(error);
            });
    }
</script>
<script>
    function deleteUser(username) {
        const requestUrl = `http://localhost:8080/root/deleteUser/${username}`;
        fetch(requestUrl,
            {
                method: 'DELETE',
                headers: {
                    'Content-Type': 'application/json'
                },
            })
            .then(response => response.json())
            .then(data => {
                if (data.msg === 'success' && data.data != null) {
                    console.log(data);
                    alert("删除登录信息成功");
                } else {
                    alert("删除失败,或是未查找到该信息");
                }
            })
            .catch(error => {
                alert("请求失败，请重试");
                console.error(error);
            });
    }
</script>
</html>

update.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;
        }

        .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">
        <!--        调整边框大小-->
        <div class="form">
            <form id="deleteForm">
                <label for="username">请输入您要修改的用户名</label>
                <input type="text" id="username" minlength="8" maxlength="8" required>
                <br>
                <button type="submit" style="display: block; margin: 0 auto;">查询</button>
                <div id="container">

                </div>
            </form>
            <form id="updateForm">
                <label for="userid">请输入用户名</label>
                <input type="text" id="userid" minlength="8" maxlength="8" required>
                <br>
                <label for="name">请输入姓名</label>
                <input type="text" id="name">
                <br>
                <label for="college">请输入所属学院</label>
                <input type="text" id="college">
                <br>
                <label for="pro">请输入所属专业</label>
                <input type="text" id="pro">
                <br>
                <label for="position">请输入职位，001表示普通教师、010表示专业负责人、011表示即是教师又是专业负责人，111表示三种角色兼具</label>
                <input type="text" id="position">
                <button type="submit" style="display: block; margin: 0 auto;">添加</button>
            </form>
        </div>
    </div>
</div>
</body>
<script>
    document.getElementById('updateForm').addEventListener('submit', function (e) {
        e.preventDefault();
        const username = document.getElementById('userid');
        const name = document.getElementById('name');
        const college = document.getElementById('college');
        const pro = document.getElementById('pro');
        const role = document.getElementById('position');
        console.log(username.value + "   " + name.value + "   " + college.value + "  " + pro.value + "  " + role.value);
        updateTea(username.value, name.value, college.value, pro.value, role.value);
    });
</script>
<script>
    function updateTea(username, name, college, pro, role) {
        const requestUrl = `http://localhost:8080/root/updateTea/${username}/${name}/${college}/${pro}/${role}`;
        fetch(requestUrl,
            {
                method: 'PUT',
                headers: {
                    'Content-Type': 'application/json'
                },
            })
            .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 getTea(username) {
        const requestUrl = `http://localhost:8080/root/getTea/${username}`;
        fetch(requestUrl,
            {
                method: 'GET',
                headers: {
                    'Content-Type': 'application/json'
                },
            })
            .then(response => response.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>
    document.getElementById('deleteForm').addEventListener('submit', function (event) {
        event.preventDefault();
        const username = document.getElementById('username').value;
        console.log(username);
        getTea(username);
    });
</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>';
        tableBody.appendChild(row);
        const roleToPoList = {
            '111': ["专业教师", "专业负责人", "教学副院长"],
            '011': ["专业教师", "专业负责人"],
            '001': ["专业教师"],
            '100': ["教学副院长"],
            '010': ["专业负责人"],
            '110': ["专业负责人", "教学副院长"],
            '101': ["专业教师", "教学副院长"],
        };
        const poList = roleToPoList[data.role] || [];
        row = document.createElement("tr");
        row.innerHTML = `<td>${data.teacherID}</td><td>${data.name}</td><td>${data.college}</td><td>${data.professionals}</td><td>${poList}</td>`;
        tableBody.appendChild(row);
        table.appendChild(tableBody);
        tableContainer.appendChild(table);
    }
</script>
</html>

select.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;
        }

        .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">
        <!--        调整边框大小-->
        <div class="form">
            <form id="deleteForm">
                <label for="username">请输入您要查询的用户名</label>
                <input type="text" id="username" minlength="8" maxlength="8" required>
                <br>
                <button type="submit" style="display: block; margin: 0 auto;">查询</button>
                <div id="container">

                </div>
            </form>
        </div>
    </div>
</div>
</body>
<script>
    function getTea(username)
    {
        const requestUrl=`http://localhost:8080/root/getTea/${username}`;
        fetch(requestUrl,
            {
                method: 'GET',
                headers: {
                    'Content-Type': 'application/json'
                },
            })
            .then(response => response.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>
    document.getElementById('deleteForm').addEventListener('submit',function (event)
    {
        event.preventDefault();
        const username=document.getElementById('username').value;
        console.log(username);
        getTea(username);
    });
</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>';
        tableBody.appendChild(row);
        const roleToPoList = {
            '111': ["专业教师", "专业负责人", "教学副院长"],
            '011': ["专业教师", "专业负责人"],
            '001': ["专业教师"],
            '100': ["教学副院长"],
            '010': ["专业负责人"],
            '110': ["专业负责人", "教学副院长"],
            '101': ["专业教师", "教学副院长"],
        };
        const poList = roleToPoList[data.role] || [];
        row = document.createElement("tr");
        row.innerHTML = `<td>${data.teacherID}</td><td>${data.name}</td><td>${data.college}</td><td>${data.professionals}</td><td>${poList}</td>`;
        tableBody.appendChild(row);
        table.appendChild(tableBody);
        tableContainer.appendChild(table);
    }
</script>
</html>

exmine.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>审查学生信息</title>
    <style>
        .approveButton {
            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;
        }

        .rejectButton {
            background-color: #f44336;
            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: 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">
        <div class="form">
            <div id="container">

            </div>
        </div>
    </div>
</div>
<script>
    const tableContainer = document.getElementById("container");
    tableContainer.addEventListener("click", function (event) {
        // 获取到点击事件的目标元素
        let target = event.target;
        // 向上遍历DOM树，找到具有相应类名的祖先元素
        while (target !== tableContainer && ![...target.classList].some(className => ["approveButton", "rejectButton"].includes(className))) {
            target = target.parentNode;
        }
        if (target.classList.contains("approveButton")) {
            // 点击了"审批通过"按钮
            const row = target.closest("tr");
            const stuId = row.querySelector("td:first-child").textContent;
            updateStateInDatabase(stuId, 1);
            // display(); // 重新显示数据
        } else if (target.classList.contains("rejectButton")) {
            // 点击了"审批不通过"按钮
            const row = target.closest("tr");
            const stuId = row.querySelector("td:first-child").textContent;
            updateStateInDatabase(stuId, -1);
        }
    });
</script>
</body>
<script>
    const requestUrl = `http://localhost:8080/user/getAll`;
    function display() {
        fetch(requestUrl, {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json'
            },
        })
            .then(response => response.json())
            .then(data => {
                if (data.msg === 'success') {
                    generateTable(data.data);
                } else {
                    alert("当前不存在未审查的结果");
                }
            })
            .catch(error => {
                alert("请求失败，请重试");
                console.error(error);
            });
    }
    display();
</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>';
        tableBody.appendChild(row);
        // 查询方式是按姓名查询或多条查询
        for (let i = 0; i < data.length; i++) {
            row = document.createElement("tr");
            row.innerHTML = `<td>${data[i].stuId}</td><td>${data[i].stuName}</td><td>${data[i].grade}</td><td>${data[i].sex}</td><td>${data[i].college}</td><td>${data[i].professionals}</td><td>${data[i].phone}</td><td>${data[i].position}</td><td>${data[i].state}</td><td><button class="approveButton">审批通过</button></td><td><button class="rejectButton">审批不通过</button></td>`;
            tableBody.appendChild(row);
            table.appendChild(tableBody);
            tableContainer.appendChild(table);
        }
    }
</script>
<script>
    function add(stuId) {
        const requestUrl = `http://localhost:8080/user/addUser`;
        fetch(requestUrl,
            {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(
                    {
                        username: stuId,
                        password: "123456",
                        position: ["学生"],
                    })
            })
            .then(response => response.json())
            .then(data => {
                if (data.msg === 'success') {
                    alert("已添加学生用户到数据库");
                } else {
                    alert("未通过审核，取消添加入数据库");
                }
            })
            .catch(error => {
                alert("请求失败，请重试");
                console.error(error);
            });
    }
</script>
<script>
    function updateStateInDatabase(stuId, state) {
        const requestUrl = `http://localhost:8080/user/updateById/${stuId}/${state}`;
        fetch(requestUrl, {
            method: 'PUT',
            headers: {
                'Content-Type': 'application/json'
            },
        })
            .then(response => response.json())
            .then(data => {
                if (data.msg === 'success') {
                    generateTable(data.data);
                    if(state===1)
                    {
                        add(stuId);
                    }
                    alert("审核成功")
                } else {
                    alert("审核失败");
                }
            })
            .catch(error => {
                alert("请求失败，请重试");
                console.error(error);
            });
    }
</script>
</html>

reSet.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: 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">
        <div class="form">
                <label for="name">请输入学生姓名</label>
                <input type="text" id="name">
                <button id="select" style="display: block; margin: 0 auto;">查询</button>
            <div id="container">

            </div>
        </div>
    </div>
</div>
</body>
<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>';
        tableBody.appendChild(row);
        let s="审核中";
        if(data.state===1)
        {
            s="审核通过";
        }else if(data.state===-1)
        {
            s="审核未通过";
        }
        if(data.state===0||data.state===-1)
        {
            row = document.createElement("tr");
            row.innerHTML = `<td>${data.stuId}</td><td>${data.stuName}</td><td>${data.grade}</td><td>${data.sex}</td><td>${data.college}</td><td>${data.professionals}</td><td>${data.phone}</td><td>${data.position}</td><td>${s}</td>`;
            tableBody.appendChild(row);

            table.appendChild(tableBody);
            tableContainer.appendChild(table);
            alert("当前学生并未通过审核或者还未进行审核，无法进行重置密码操作")
        }
        else {
            row = document.createElement("tr");
            row.innerHTML = `<td>${data.stuId}</td><td>${data.stuName}</td><td>${data.grade}</td><td>${data.sex}</td><td>${data.college}</td><td>${data.professionals}</td><td>${data.phone}</td><td>${data.position}</td><td>${s}</td><td><button class="reSet">密码重置</button></td>`;
            tableBody.appendChild(row);

            table.appendChild(tableBody);
            tableContainer.appendChild(table);
        }
    }
</script>
<script>
    document.getElementById('select').addEventListener('click', function () {
        const name = document.getElementById('name').value;

        const requestUrl = `http://localhost:8080/root/getByName/${name}`;
        fetch(requestUrl,
            {
                method: 'GET',
                headers: {
                    'Content-Type': 'application/json'
                },
            })
            .then(response => response.json())
            .then(data => {
                if (data.msg === 'success') {
                    console.log(data);
                    generateTable(data.data);
                } else {
                    alert("学生信息不存在");
                }
            })
            .catch(error => {
                alert("请求失败，请重试");
                console.error(error);
            });
    });
</script>
<script>
    const tableContainer = document.getElementById("container");
    tableContainer.addEventListener("click", function (event) {
        // 获取到点击事件的目标元素
        let target = event.target;
        // 向上遍历DOM树，找到具有相应类名的祖先元素
        while (target !== tableContainer && ![...target.classList].some(className => ["reSet"].includes(className))) {
            target = target.parentNode;
        }
        if (target.classList.contains("reSet")) {
            // 点击了"审批通过"按钮
            const row = target.closest("tr");
            const id = row.querySelector("td:first-child").textContent;
            const requestUrl = `http://localhost:8080/root/updatePassword/${id}`
            fetch(requestUrl,
                {
                    method: 'PUT',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                })
                .then(response => response.json())
                .then(data => {
                    if (data.msg === 'success') {
                        console.log(data);
                        alert("重置成功")
                    } else {
                        alert("重置失败");
                    }
                })
                .catch(error => {
                    alert("请求失败，请重试");
                    console.error(error);
                });
        }
    });
</script>
</html>