2.21 主页面的制作

<!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) {
                    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>