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>>
浙公网安备 33010602011771号