TEACHER/teacher.html
![复制代码](https://common.cnblogs.com/images/copycode.gif)
<!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>
![复制代码](https://common.cnblogs.com/images/copycode.gif)
1insert.html
![复制代码](https://common.cnblogs.com/images/copycode.gif)
<!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>
![复制代码](https://common.cnblogs.com/images/copycode.gif)
2update.html
![复制代码](https://common.cnblogs.com/images/copycode.gif)
<!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>
![复制代码](https://common.cnblogs.com/images/copycode.gif)
3select.html
![复制代码](https://common.cnblogs.com/images/copycode.gif)
<!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>
![复制代码](https://common.cnblogs.com/images/copycode.gif)
4student.html
![复制代码](https://common.cnblogs.com/images/copycode.gif)
<!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>标签:username,const,border,12.7,error,document,data From: https://www.cnblogs.com/gjsgjs/p/17912309.html