首页 > 其他分享 >11.7

11.7

时间：2023-12-18 21:02:50浏览次数：20  
标签：username const String 11.7 error document data

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

首先是我的配置图

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>

标签：username,const,String,11.7,error,document,data
From： https://www.cnblogs.com/gjsgjs/p/17912239.html

相关文章

  • 11.7随笔
    执行没有WHERE子句的UPDATE要慎重，再慎重。在MySQL中可以通过设置 sql_safe_updates 这个自带的参数来解决，当该参数开启的情况下，必须在update语句后携带where条件，否则就会报错。setsql_safe_updates=1; 表示开启该参数SQL DELETE 语句DELETE语句用于删除表中......
  • 11.7
    4、编写将n个数从小到大排序的函数，要求该函数返回排序过程中交换的次数，并设计main函数，验证算法正确与否。      intsort(intarr[],intn){……….}程序代码：  程序代码：#include<stdio.h> intsort(intarray[],intn){   inti,j,temp,count=0;......
  • 11.7
    今日学习内容<%--CreatedbyIntelliJIDEA.TochangethistemplateuseFile|Settings|FileTemplates.--%><%@pagecontentType="text/html;charset=UTF-8"language="java"%><html><head><title>教师功能页</ti......
  • 11.7
    今天我们来实现管理员登陆与学生登录及功能等的前后端代码首先是我的配置图1、管理员①后端UserControllerpackagecom.example.controller;importcom.example.pojo.Result;importcom.example.pojo.User;importcom.example.pojo.student;importcom.example.serv......
  • 11.7
    听说好的东西都得要一张头图：\(\mathit{Only\by\leaving\footprints\can\others\know\that\you\have\been\there}\)（学的谁我不说）写在前面：其实本来我是不咋打算写博客的，感觉写这些东西没啥大用，游记啥的都不想写（以保龄开头写博客感觉确实不太合适）。但是吧看到一个退......
  • 11.7
    今天的英语课就是阅读技巧，回来我就把口语作业做了，但是感觉我的口语真的很差劲，emo情绪从现在开始发展，下午想找个人教教我Javaweb结果学的我很烦，我比教我的都烦，此时觉得自己不适合软件工程的心达到了顶峰，我真的想去考公务员了，......
  • 记录2023.11.7算法分析与应用课程学习
    题目-迷宫scanner是键盘录入底下的n=sc.nextInt（）；是输入内容；可以在地下输入东西录入进去的意思java中的next和nextline的区别简单的java键盘输入代码起别名sc可以任意取名字将键盘的数据赋值给变量sc.next就是相对于Scanner(System.in).next输入的名称=定义的名称 输入的密码=定......
  • 11.7 模拟赛小记
    摘要：三道原，比较之前的难，发挥不好，八点半从机房外面过去的帅哥真的真的真的好帅我一下子无心大模拟赛了一整个惊艳到。A.油田(oil)P3888GDOI2014拯救莫莉斯状压dp，据说爆搜也能过。本蒟蒻不会写剪枝，喜提20pts。状压dp思路：首先\(n*m<=50\)，\(m<=n\)，则\(n,m<8\)，状压去做是......
  • 11.7打卡
    1.N皇后II（52）返回N皇后的解集数量classSolution{publicinttotalNQueens(intn){int[]queeens=newint[n];Arrays.fill(queeens,-1);Set<Integer>cols=newHashSet<>(n);Set<Integer>dia1=newHashSet<>......
  • 2023.11.7值得推荐的一款服务器空间
    ,已经体验一个月咯，非常不错的免费资源，适合大家去了解了解~！他们家的免费空间，免费服务器，非常稳定，非常靠谱，值得拥有，价格厚道~！免备案服务，域名管理等等服务，应有尽有，2023年你值得了解，他们家的免费云服务器还是独立IP的哦，非常非常好，非常NICE~！官网地址：https://www.sanfengyun.com......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99