12.7-526互联

TEACHER/teacher.html

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

        .form table {
            margin: 0 auto;
        }

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

        button {
            display: block;
            margin-top: 10px;
            padding: 10px;
            background-color: #007bff;
            color: #fff;
            border: none;
            border-radius: 3px;
            cursor: pointer;
        }
    </style>
</head>
<body>
<h1 style="text-align: center">教师信息管理</h1>
<div class="form">
    <table border="1px" cellspacing="0" width="600px">
        <tr>
            <th>编号</th>
            <th>功能</th>
        </tr>
        <tr>
            <td>1</td>
            <td>
                <button id="insert">添加课程</button>
            </td>
        </tr>
        <tr>
            <td>2</td>
            <td>
                <button id="update">修改个人信息</button>
            </td>
        </tr>
        <tr>
            <td>3</td>
            <td>
                <button id="select">浏览选课学生信息</button>
            </td>
        </tr>
    </table>
</div>
</body>
<script>
    var urlParams = new URLSearchParams(window.location.search);
    var username = urlParams.get('username');
    console.log(username);
    document.getElementById("insert").addEventListener("click", function () {
        window.location.href = "1insert.html?username=" + encodeURIComponent(username);
    });
    document.getElementById('update').addEventListener('click', function () {
        window.location.href = "2update.html?username=" + encodeURIComponent(username);
    });
    document.getElementById("select").addEventListener("click", function () {
        window.location.href = "3select.html?username=" + encodeURIComponent(username);
    });

</script>
</html>

1insert.html

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

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

        .form table {
            margin: 0 auto;
        }

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

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

        .centered-form {
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 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="6" maxlength="6" required>
                <br>
                <label for="name">请输入课程名称</label>
                <input type="text" id="name">
                <br>
                <label for="count">请输入选课人数</label>
                <input type="text" id="count">
                <br>
                <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 classname = document.getElementById('username');
        const name = document.getElementById('name');
        const count = document.getElementById('count');
        console.log(classname.value + "   " + name.value + "   " + count.value);
        var urlParams = new URLSearchParams(window.location.search);
        var username = urlParams.get('username');
        console.log(username);
        const requestUrl = `http://localhost:8080/teacher/getName/${username}`;
        fetch(requestUrl,
            {
                method: 'GET',
                headers: {
                    'Content-Type': 'application/json'
                },
            })
            .then(res => res.json())
            .then(data => {
                if (data.msg === 'success') {
                    addCourse(classname.value, name.value, count.value, data.data.teacherName);
                    console.log(data);
                } else {
                    alert("查找失败  " + data.msg);
                }
            })
            .catch(error => {
                alert("请求失败，请重试");
                console.error(error);
            });
    });
</script>
<script>
    function addCourse(classname, name, count, teacherName) {
        const requestUrl = 'http://localhost:8080/teacher/addCourse';
        fetch(requestUrl,
            {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    courseID: classname,
                    courseName: name,
                    courseCount: count,
                    courseTeacher: teacherName,
                    count: 0,
                })
            })
            .then(res => res.json())
            .then(data => {
                if (data.msg === 'success') {
                    alert("已将课程信息添加到数据库");
                    console.log(data);
                } else {
                    alert("添加失败  " + data.msg);
                }
            })
            .catch(error => {
                alert("请求失败，请重试");
                console.error(error);
            });
    }
</script>
</html>

2update.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>
<script>
    var urlParams = new URLSearchParams(window.location.search);
    var username = urlParams.get('username');
    console.log(username+"  1");
    const requestUrl=`http://localhost:8080/teacher/getName/${username}`;
    fetch(requestUrl,
        {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json'
            },})
        .then(res => res.json())
        .then(data => {
            if (data.msg === 'success') {
                generateTable(data.data,username);
                console.log(data);
            } else {
                alert("查找失败  " + data.msg);
            }
        })
        .catch(error => {
            alert("请求失败，请重试");
            console.error(error);
        });
</script>
<script>
    function update(username,name,s,college,p) {
        const requestUrl = 'http://localhost:8080/teacher/updateTea';
        fetch(requestUrl,
            {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    teacherID: username,
                    teacherName:name,
                    teacherSex:s,
                    teacherCollege:college,
                    position:p,
                })
            })
            .then(res => res.json())
            .then(data => {
                if (data.msg === 'success') {
                    alert("修改角色成功");
                    console.log(data);
                    generateTable(data.data,username);
                } else {
                    alert("添加失败  " + data.msg);
                }
            })
            .catch(error => {
                alert("请求失败，请重试");
                console.error(error);
            });
    }
</script>
<script>
    function generateTable(data, username) {
        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);
        row = document.createElement("tr");
        row.innerHTML = `<td>${username}</td><td>${data.teacherName}</td><td>${data.teacherSex}</td><td>${data.teacherCollege}</td><td>${data.position}</td>`;
        tableBody.appendChild(row);
        table.appendChild(tableBody);
        tableContainer.appendChild(table);
    }
</script>
<body>
<h1 style="text-align: center"></h1>
<div id="container">

</div>
<div class="centered-form">
    <div class="bordered-form">
        <div class="form">
            <form id="addForm">
                <label for="name">请输入姓名</label>
                <input type="text" id="name">
                <br>
                <label>性别:</label>
                <div id="sex">
                    <label><input type="radio" name="sex" value="男">男</label>
                    <label><input type="radio" name="sex" value="女">女</label>
                </div>
                <br>
                <label for="college">请输入所属学院</label>
                <input type="text" id="college">
                <br>
                <label>职位:</label>
                <div id="position">
                    <label><input type="radio" name="position" value="教授">教授</label>
                    <label><input type="radio" name="position" value="副教授">副教授</label>
                    <label><input type="radio" name="position" value="讲师">讲师</label>
                    <label><input type="radio" name="position" value="助教">助教</label>
                </div>
                <button type="submit"  style="display: block; margin: 0 auto;" >添加</button>
            </form>
        </div>
    </div>
</div>
</body>
<script>
    var urlParams = new URLSearchParams(window.location.search);
    var username = urlParams.get('username');
    console.log(username+"  2");
    document.getElementById('addForm').addEventListener('submit', function (e) {
        e.preventDefault();
        const name=document.getElementById('name');
        const college=document.getElementById('college');
        const sex = document.querySelectorAll('input[name="sex"]');
        let s;
        sex.forEach(radio => {
            if (radio.checked) {
                s = radio.value;
            }
        });
        const position = document.querySelectorAll('input[name="position"]');
        let p;
        position.forEach(radio => {
            if (radio.checked) {
                p = radio.value;
            }
        });
        console.log(username+"   "+name.value+"   "+s+"  "+college.value+"  "+p);
        update(username,name.value,s,college.value,p);
    });
</script>
</html>

3select.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">
            <div id="container">

            </div>
        </div>
    </div>
</div>
</body>
<script>
    function display() {
        var urlParams = new URLSearchParams(window.location.search);
        var username = urlParams.get('username');
        console.log(username + "  1");
        const requestUrl = `http://localhost:8080/teacher/getAll/${username}`;
        fetch(requestUrl,
            {
                method: 'GET',
                headers: {
                    'Content-Type': 'application/json'
                },
            })
            .then(res => res.json())
            .then(data => {
                if (data.msg === 'success') {
                    c(data.data.teacherName);
                    console.log(data);
                } else {
                    alert("查找失败  " + data.msg);
                }
            })
            .catch(error => {
                alert("请求失败，请重试");
                console.error(error);
            });
    }

    display();
</script>
<script>
    function c(name) {
        const requestUrl = `http://localhost:8080/teacher/getCourse/${name}`;
        fetch(requestUrl,
            {
                method: 'GET',
                headers: {
                    'Content-Type': 'application/json'
                },
            })
            .then(res => res.json())
            .then(data => {
                if (data.msg === 'success') {
                    generateTable(data.data);
                    console.log(data);
                } else {
                    alert("查找失败  " + data.msg);
                }
            })
            .catch(error => {
                alert("请求失败，请重试");
                console.error(error);
            });
    }
</script>
<script>
    function generateTable(data) {
        const tableContainer = document.getElementById("container");
        // 清空 tableContainer 中的所有子节点
        while (tableContainer.hasChildNodes()) {
            tableContainer.removeChild(tableContainer.firstChild);
        }
        const table = document.createElement("table");
        const tableBody = document.createElement("tbody");
        let row = document.createElement("tr");
        row.innerHTML = '<td>课程编号</td><td>课程名称</td><td>选课人数</td><td>任课教师</td><td>已选人数</td>';
        tableBody.appendChild(row);
        // 查询方式是按姓名查询或多条查询
        for (let i = 0; i < data.length; i++) {
            row = document.createElement("tr");
            row.innerHTML = `<td>${data[i].courseID}</td><td><button type="button" id="search" onclick="redirectToSelectAll('${data[i].courseID}')">${data[i].courseName}</button></td><td>${data[i].courseCount}</td><td>${data[i].courseTeacher}</td><td>${data[i].count}</td>`;
            tableBody.appendChild(row);
            table.appendChild(tableBody);
            tableContainer.appendChild(table);
        }
    }

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

4student.html

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

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

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

            </div>
        </div>
    </div>
</div>
</body>
<script>
    var urlParams = new URLSearchParams(window.location.search);
    var name = urlParams.get('name');
    console.log("用户名为:" + name);
    const requestUrl = `http://localhost:8080/student/getInformation/${name}`;
    fetch(requestUrl,
        {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json'
            },
        })
        .then(res => res.json())
        .then(data => {
            if (data.msg === 'success' && data.data != null) {
                console.log(data);
                //查询到选课表中的数据 然后根据学生学号查找学生信息，显示在页面
                a(data.data);
            } else {
                alert("查找失败");
            }
        })
        .catch(error => {
            alert("请求失败，请重试");
            console.error(error);
        });
</script>
<script>
    function a(data) {
        let students = []; // 创建一个空数组来存储学生数据
        let promises = []; // 创建一个空数组来存储请求的Promise

        for (let i = 0; i < data.length; i++) {
            let promise = getStudent(data[i].studentID); // 获取学生数据并返回一个Promise
            promises.push(promise); // 将Promise添加到数组中
        }
        Promise.all(promises) // 等待所有Promise完成
            .then(results => {
                results.forEach(result => {
                    students.push(result); // 将每个学生的数据添加到students数组中
                });
                generateTable(students); // 调用generateTable函数并传递students数组
            })
            .catch(error => {
                console.error("Error fetching student data:", error);
            });
    }

</script>
<script>
    // function getStudent(id)
    // {
    //     const requestUrl = `http://localhost:8080/student/getName/${id}`;
    //     fetch(requestUrl,
    //         {
    //             method: 'GET',
    //             headers: {
    //                 'Content-Type': 'application/json'
    //             },
    //         })
    //         .then(res => res.json())
    //         .then(data => {
    //             if (data.msg === 'success' && data.data != null) {
    //                return data.data;
    //             } else {
    //                 alert("查找失败");
    //             }
    //         })
    //         .catch(error => {
    //             alert("请求失败，请重试");
    //             console.error(error);
    //         });
    // }
    async function getStudent(id) {
        const requestUrl = `http://localhost:8080/student/getName/${id}`;

        try {
            const response = await fetch(requestUrl, {
                method: 'GET',
                headers: {
                    'Content-Type': 'application/json'
                },
            });

            const data = await response.json();

            if (data.msg === 'success' && data.data != null) {
                return data.data;
            } else {
                alert("查找失败");
            }
        } catch (error) {
            alert("请求失败，请重试");
            console.error(error);
        }
    }

</script>
<script>
    function generateTable(data) {
        const tableContainer = document.getElementById("container");

        // 清空 tableContainer 中的所有子节点
        while (tableContainer.hasChildNodes()) {
            tableContainer.removeChild(tableContainer.firstChild);
        }
        const table = document.createElement("table");
        const tableBody = document.createElement("tbody");

        let row = document.createElement("tr");
        row.innerHTML = '<td>学生学号</td><td>学生姓名</td><td>学生性别</td><td>学生所在班级</td><td>学生所在专业</td>';
        tableBody.appendChild(row);

        for (let i = 0; i < data.length; i++) {
            row = document.createElement("tr");
            row.innerHTML = `<td>${data[i].studentID}</td><td>${data[i].studentName}</td><td>${data[i].studentSex}</td><td>${data[i].studentClass}</td><td>${data[i].studentMajor}</td>`;
            tableBody.appendChild(row);
            table.appendChild(tableBody);
            tableContainer.appendChild(table);
        }
    }
</script>
</html>