12.6
今天实现前端的登录 以及管理员的页面
index.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="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> </div> <div class="centered-buttons"> <button type="submit" style="display: block; margin: 0 auto;">登录</button> <br> </div> </form> </div> </div> </body> <script> 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) { alert("登录成功"); 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 { alert("登录失败"); console.log(data); } }) .catch(error => { alert("请求失败，请重试"); console.error(error); }); }); </script> </html>
ROOT/add1.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="8" maxlength="8" required> <br> <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> document.getElementById('addForm').addEventListener('submit', function (e) { e.preventDefault(); const username = document.getElementById('username'); 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.value + " " + name.value + " " + s + " " + college.value + " " + p); addUser(username.value, "教师"); addTea(username.value, name.value, s, college.value, p); }); </script> <script> function addUser(username, role) { const requestUrl = 'http://localhost:8080/user/addUser'; console.log(role); fetch(requestUrl, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ userName: username, password: "123456", position: role, }) }) .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> <script> function addTea(username, name, s, college, p) { const requestUrl = 'http://localhost:8080/user/addTea'; 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); } else { alert("添加失败 " + data.msg); } }) .catch(error => { alert("请求失败，请重试"); console.error(error); }); } </script> </html>
add2.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="8" maxlength="8" required> <br> <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 for="major">请输入所属专业</label> <input type="text" id="major"> <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 username = document.getElementById('username'); const name = document.getElementById('name'); const sex = document.querySelectorAll('input[name="sex"]'); let s; sex.forEach(radio => { if (radio.checked) { s = radio.value; } }); const college = document.getElementById('college'); const major = document.getElementById('major'); console.log(username.value + " " + name.value + " " + s + " " + college.value + " " + major); addUser(username.value, "学生"); addTea(username.value, name.value, s, college.value, major.value); }); </script> <script> function addUser(username, role) { const requestUrl = 'http://localhost:8080/user/addUser'; console.log(role); fetch(requestUrl, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ userName: username, password: "123456", position: role, }) }) .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> <script> function addTea(username, name, s, college, major) { const requestUrl = 'http://localhost:8080/user/addStu'; fetch(requestUrl, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ studentID: username, studentName: name, studentSex: s, studentClass: college, studentMajor: major, }) }) .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>
administrator.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="add1">添加教师信息</button> </td> </tr> <tr> <td>2</td> <td> <button id="add2">增加学生信息</button> </td> </tr> </table> </div> </body> <script> document.getElementById("add1").addEventListener("click", function () { window.location.href = "add1.html"; }); document.getElementById('add2').addEventListener('click', function () { window.location.href = "add2.html"; }); </script> </html>
