2023年11月2日
今天我们实现学生的前端信息,学生部分的前端代码,学生部分的后端代码在User的后端代码中
register.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="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>