11.27
delete2.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>删除部门</title> </head> <body> <div id="container"> </div> </body> <script> display(); function display() { const requestUrl = 'http://localhost:8080/user/selectCount'; 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>'; tableBody.appendChild(row); // 查询方式是按姓名查询或多条查询 for (let i = 0; i < data.length; i++) { row = document.createElement("tr"); row.innerHTML = `<td>${data[i].departmentID}</td><td>${data[i].departmentName}</td><td><button class="deleteButton">删除</button></td>`; tableBody.appendChild(row); table.appendChild(tableBody); tableContainer.appendChild(table); } } </script> <script> const tableContainer = document.getElementById("container"); tableContainer.addEventListener("click", function (event) { // 获取到点击事件的目标元素 let target = event.target; // 向上遍历DOM树，找到具有相应类名的祖先元素 while (target !== tableContainer && ![...target.classList].some(className => ["deleteButton"].includes(className))) { target = target.parentNode; } if (target.classList.contains("deleteButton")) { // 点击了"审批通过"按钮 const row = target.closest("tr"); const cardID = row.querySelector("td:first-child").textContent; cDep(cardID); // display(); // 重新显示数据 } }); </script> <script> function cDep(id) { const requestUrl = `http://localhost:8080/user/cDep/${id}`; fetch(requestUrl, { method: 'GET', headers: { 'Content-Type': 'application/json' }, }) .then(res => res.json()) .then(data => { if (data === 0) { deleteDep(id); } else { alert("仍有员工处于此部门中 无法删除"); } }) .catch(error => { alert("请求失败，请重试"); console.error(error); }); } </script> <script> function deleteDep(id) { const requestUrl = `http://localhost:8080/user/deleteDep/${id}`; fetch(requestUrl, { method: 'DELETE', headers: { 'Content-Type': 'application/json' }, }) .then(res => res.json()) .then(data => { if (data.msg === 'success') { alert("删除成功") } else { alert("删除失败 " + data.msg); } }) .catch(error => { alert("请求失败，请重试"); console.error(error); }); } </script> </html>
re.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"> <label for="name">请输入工号</label> <input type="text" id="name"> <button id="select" style="display: block; margin: 0 auto;">查询</button> <div id="container"> </div> </div> </div> </div> </body> <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>'; tableBody.appendChild(row); row = document.createElement("tr"); row.innerHTML = `<td>${data.jobID}</td><td>${data.name}</td><td>${data.sex}</td><td>${data.birthday}</td><td>${data.department}</td><td>${data.role}</td><td>${data.password}</td><td><button class="reSet">密码重置</button>`; tableBody.appendChild(row); table.appendChild(tableBody); tableContainer.appendChild(table); } </script> <script> document.getElementById('select').addEventListener('click', function () { const id = document.getElementById('name').value; const requestUrl = `http://localhost:8080/user/selectById/${id}`; fetch(requestUrl, { method: 'GET', headers: { 'Content-Type': 'application/json' }, }) .then(response => response.json()) .then(data => { if (data.msg === 'success') { console.log(data); generateTable(data.data); } else { alert("学生信息不存在"); } }) .catch(error => { alert("请求失败，请重试"); console.error(error); }); }); </script> <script> const tableContainer = document.getElementById("container"); tableContainer.addEventListener("click", function (event) { // 获取到点击事件的目标元素 let target = event.target; // 向上遍历DOM树，找到具有相应类名的祖先元素 while (target !== tableContainer && ![...target.classList].some(className => ["reSet"].includes(className))) { target = target.parentNode; } if (target.classList.contains("reSet")) { // 点击了"审批通过"按钮 const row = target.closest("tr"); const id = row.querySelector("td:first-child").textContent; const new1 = "123456"; const requestUrl = `http://localhost:8080/user/update/${id}/${new1}` fetch(requestUrl, { method: 'GET', headers: { 'Content-Type': 'application/json' }, }) .then(response => response.json()) .then(data => { if (data.msg === 'success') { console.log(data); alert("重置成功") } else { alert("重置失败"); } }) .catch(error => { alert("请求失败，请重试"); console.error(error); }); } }); </script> </html>
set.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>角色设置</title> </head> <body> <div id="container"> </div> </body> <script> const requestUrl = 'http://localhost:8080/user/getStaff'; fetch(requestUrl, { method: 'GET', headers: { 'Content-Type': 'application/json' }, }) .then(res => res.json()) .then(data => { if (data.msg === 'success') { console.log(data); generateTable(data.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><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].jobID}</td><td>${data[i].name}</td><td>${data[i].sex}</td><td>${data[i].birthday}</td><td>${data[i].department}</td><td>${data[i].role}</td><td>${data[i].password}</td><td><button class="deleteButton">定为经理</button></td>`; tableBody.appendChild(row); table.appendChild(tableBody); tableContainer.appendChild(table); } } </script> <script> const tableContainer = document.getElementById("container"); tableContainer.addEventListener("click", function (event) { // 获取到点击事件的目标元素 let target = event.target; // 向上遍历DOM树，找到具有相应类名的祖先元素 while (target !== tableContainer && ![...target.classList].some(className => ["deleteButton"].includes(className))) { target = target.parentNode; } if (target.classList.contains("deleteButton")) { // 点击了"审批通过"按钮 const row = target.closest("tr"); const cardID = row.querySelector("td:first-child").textContent; dDep(cardID); // display(); // 重新显示数据 } }); </script> <script> function dDep(id) { const requestUrl = `http://localhost:8080/user/dDep`; fetch(requestUrl, { method: 'GET', headers: { 'Content-Type': 'application/json' }, }) .then(res => res.json()) .then(data => { if (data===0) { updateRole(id); } else { alert("当前已存在经理，无法更改"); } }) .catch(error => { alert("请求失败，请重试"); console.error(error); }); } </script> <script> function updateRole(id) { const requestUrl = `http://localhost:8080/user/updateRole/${id}`; fetch(requestUrl, { method: 'GET', headers: { 'Content-Type': 'application/json' }, }) .then(res => res.json()) .then(data => { if (data.msg === 'success') { alert("修改成功") } else { alert("修改失败 " + data.msg); } }) .catch(error => { alert("请求失败，请重试"); console.error(error); }); } </script> </html>
update1.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="jobID">请输入要修改的ID:</label> <input type="text" id="jobID" name="jobID" minlength="8" maxlength="8" required> <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="birthday">请输入出生日期</label> <input type="date" id="birthday"> <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 jobID = document.getElementById('jobID'); const name = document.getElementById('name'); const sex = document.querySelectorAll('input[name="sex"]'); let s; sex.forEach(radio => { if (radio.checked) { s = radio.value; } }); const birthday = document.getElementById('birthday'); console.log(jobID.value + " " + name.value + " " + s + " " + birthday.value + " "); updateStaff(jobID.value, name.value, s, birthday.value); }); </script> <script> function updateStaff(jobID, name, s, birthday) { const requestUrl = 'http://localhost:8080/user/updateStaff'; fetch(requestUrl, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ jobID: jobID, name: name, sex: s, birthday: birthday, }) }) .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>>
update2.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="jobID">请输入要修改的部门编号:</label> <input type="text" id="jobID" name="jobID" minlength="2" maxlength="2"> <br> <label for="name">请输入名称</label> <input type="text" id="name"> <br> <div id="container"> </div> <button type="submit" style="display: block; margin: 0 auto;">添加</button> </form> </div> </div> </div> </body> <script> display(); function display() { const requestUrl = 'http://localhost:8080/user/selectCount'; 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>'; tableBody.appendChild(row); // 查询方式是按姓名查询或多条查询 for (let i = 0; i < data.length; i++) { row = document.createElement("tr"); row.innerHTML = `<td>${data[i].departmentID}</td><td>${data[i].departmentName}</td>`; tableBody.appendChild(row); table.appendChild(tableBody); tableContainer.appendChild(table); } } </script> <script> document.getElementById('addForm').addEventListener('submit', function (e) { e.preventDefault(); const jobID = document.getElementById('jobID'); const name = document.getElementById('name'); console.log(jobID.value + " " + name.value ); cDep(jobID.value, name.value); }); </script> <script> function cDep(id,name) { const requestUrl = `http://localhost:8080/user/aDep/${id}`; fetch(requestUrl, { method: 'GET', headers: { 'Content-Type': 'application/json' }, }) .then(res => res.json()) .then(data => { if (data===0) { alert("不存在此部门，请检查编号"); } else if(data===1){ dDep(id,name); } }) .catch(error => { alert("请求失败，请重试"); console.error(error); }); } </script> <script> function dDep(id,name) { const requestUrl = `http://localhost:8080/user/bDep/${name}`; fetch(requestUrl, { method: 'GET', headers: { 'Content-Type': 'application/json' }, }) .then(res => res.json()) .then(data => { if (data===0) { addDep(id,name); } else { alert("已存在所填名称 " ); } }) .catch(error => { alert("请求失败，请重试"); console.error(error); }); } </script> <script> function addDep(jobID, name) { const requestUrl = 'http://localhost:8080/user/updateDep'; fetch(requestUrl, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ departmentID:jobID, departmentName:name }) }) .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>>
