2023年11月2日

标签：11 const border value getElementById 2023 document data

今天我们实现学生的前端信息，学生部分的前端代码，学生部分的后端代码在User的后端代码中

<!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="register">
            <label for="College">所属学院:</label><input type="text" id="College">
            <br>
            <label for="Professionals">所属专业:</label><input type="text" id="Professionals">
            <br>
            <label for="Class">所属班级:</label><input type="text" id="Class">
            <br>
            <label for="id">学号:</label><input type="text" id="id">
            <br>
            <label for="StuName">姓名:</label><input type="text" id="StuName">
            <br>
            <label>性别:</label>
            <div id="sex">
                <label><input type="radio" name="sex" value="男"> 男</label>
                <label><input type="radio" name="sex" value="女"> 女</label>
            </div>
            <label for="Phone">手机号:</label><input type="text" id="Phone">
            <br>
            <label for="Position">职位:</label>
            <select id="Position" name="Position" required>
                <option value="">请选择</option>
                <option value="班长">班长</option>
                <option value="副班长">副班长</option>
                <option value="团支书">团支书</option>
                <option value="学习委员">学习委员</option>
                <option value="宿舍长">宿舍长</option>
                <option value="无">无</option>
            </select>
            <div class="centered-buttons">
                <button type="submit" style="display: block; margin: 0 auto;">注册</button>
            </div>
        </form>
    </div>
</div>
</body>
<script>
    document.getElementById('register').addEventListener('submit', function (event) {
        event.preventDefault();
        const id = document.getElementById('id');
        const StuName = document.getElementById('StuName');
        const grade = document.getElementById('Class');
        const sex = document.querySelectorAll('input[name="sex"]');
        let s;
        sex.forEach(radio => {
            if (radio.checked) {
                s = radio.value;
                alert(s);
            }
        });
        const College = document.getElementById('College');
        const Professionals = document.getElementById('Professionals');
        const Phone = document.getElementById('Phone');
        const Position = document.getElementById('Position');
        console.log(id.value + StuName.value + s + grade.value + College.value + Professionals.value + Phone.value + Position.value);
        const requestUrl = 'http://localhost:8080/user/add';
        fetch(requestUrl, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(
                {
                    stuId: id.value,
                    stuName: StuName.value,
                    grade: grade.value,
                    sex: s,
                    college: College.value,
                    professionals: Professionals.value,
                    phone: Phone.value,
                    position: Position.value,
                    state: 0
                })
        })
            .then(res => res.json())
            .then(data => {
                if (data.msg === 'success') {
                    alert("添加成功,请等待审核");
                    console.log(data.data.grade);
                } else {
                    alert("添加失败  " + data.msg);
                }
            })
            .catch(error => {
                alert("请求失败，请重试");
                console.error(error);
            });
    })
</script>
</html>

student.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="select1">查询学生个人信息</button>
            </td>
        </tr>
        <tr>
            <td>2</td>
            <td>
                <button id="update">修改密码</button>
            </td>
        </tr>
        <tr>
            <td>3</td>
            <td>
                <button id="select2">查询考试信息</button>
            </td>
        </tr>
    </table>
</div>
</body>
<script>
    document.getElementById("select1").addEventListener("click", function () {
        window.location.href = "student1.html?username=" + encodeURIComponent(username);
    });
    document.getElementById('update').addEventListener('click', function () {
        window.location.href = "student2.html?username=" + encodeURIComponent(username);
    })
    document.getElementById("select2").addEventListener("click", function () {
        window.location.href = "student3.html?username=" + encodeURIComponent(username);
    })
</script>
</html>

student1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生信息</title>
    <style>
        .form {
            width: 600px;
            margin: 0 auto;
            /*border: 1px solid red;*/
        }

        .form table {
            margin: 0 auto;
        }

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

        button {
            display: block;
            margin-top: 10px;
            padding: 10px;
            background-color: #007bff;
            color: #fff;
            border: none;
            border-radius: 3px;
            cursor: pointer;
        }
    </style>
</head>
<body>
<h1 style="text-align: center">个人信息</h1>
<div class="form">
    <div id="container">
    </div>
</div>
</body>
<script>
    // 获取URL中的用户名参数
    var urlParams = new URLSearchParams(window.location.search);
    var username = urlParams.get('username');
    console.log("用户名为:" + username);
    const requestUrl = `http://localhost:8080/user/person/${username}`;

    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>';
        tableBody.appendChild(row);
        let s = "审核中";
        if (data.state === 1) {
            s = "审核通过";
        } else if (data.state === -1) {
            s = "审核未通过";
        }
        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);
    }
</script>
</html>

student2.html

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

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

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

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

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

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

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

student3.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: 150px; /* 可选的内边距 */
            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="selectForm">
                <label for="courseName">课程名称:</label>
                <input type="text" id="courseName" name="courseName" required>
                <br>
                <label for="courseClass">授课班级</label>
                <input type="text" id="courseClass" name="courseClass" required>
                <br>
                <label for="courseMajor">授课专业</label>
                <input type="text" id="courseMajor" name="courseMajor" required>
                <br>
                <button type="submit" style="display: block; margin: 0 auto;">查询</button>
            </form>
            <div id="container">

            </div>
        </div>
    </div>
</div>
</body>
<script>
    document.getElementById('selectForm').addEventListener('submit', function (event) {
        event.preventDefault();
        const courseName = document.getElementById('courseName').value;
        const courseClass = document.getElementById('courseClass').value;
        const courseMajor = document.getElementById('courseMajor').value;
        const requestUrl = `http://localhost:8080/user/selectTest/${courseName}/${courseClass}/${courseMajor}`;
        fetch(requestUrl,
            {
                method: 'GET',
                headers: {
                    'Content-Type': 'application/json'
                },
            })
            .then(response => response.json())
            .then(data => {
                if (data.msg === 'success') {
                    alert("查询成功");
                    generate(data.data, courseName, courseClass, courseMajor);
                } else {
                    alert("查询失败");
                }
            })
            .catch(error => {
                alert("请求失败，请重试");
                console.error(error);
            });
    });
</script>
<script>
    function generate(data, courseName, courseClass, courseMajor) {
        const tableContainer = document.getElementById("container");
        // 清空 tableContainer 中的所有子节点
        while (tableContainer.hasChildNodes()) {
            tableContainer.removeChild(tableContainer.firstChild);
        }
        const table = document.createElement("table");
        const tableBody = document.createElement("tbody");
        let row = document.createElement("tr");
        row.innerHTML = '<td>申请日期</td><td>课程名称</td><td>授课班级</td><td>授课专业</td><td>审核状态</td>';

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

    function redirectToSelectAll(parameters) {
        var [courseName, courseClass, courseMajor] = parameters.split(',');

        // 对每个参数进行处理，比如 URL 编码
        var encodedCourseName = encodeURIComponent(courseName.trim());
        var encodedCourseClass = encodeURIComponent(courseClass.trim());
        var encodedCourseMajor = encodeURIComponent(courseMajor.trim());

        // 构建 URL
        var targetURL = `../All/test.html?courseName=${encodedCourseName}&courseClass=${encodedCourseClass}&courseMajor=${encodedCourseMajor}`;

        // 重定向
        window.location.href = targetURL;
    }
</script>
</html>

标签：11,const,border,value,getElementById,2023,document,data
From： https://www.cnblogs.com/Christmas77/p/17918225.html

相关文章

赞助商

阅读排行