今天实现前端的主页登录和管理员代码
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>
<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}`;
fetch(url, {
method: 'GET',
headers: {
'Content-Type': 'application/json'
}
})
.then(res => res.json())
.then(data => {
if (data.msg === 'success' && data.data != null) {
alert("登录成功");
if (data.data.role === '管理员') {
window.location.href = "ROOT/root.html?username=" + encodeURIComponent(username);
} else if (data.data.role === '员工') {
window.location.href = "STAFF/staff.html?username=" + encodeURIComponent(username);
} else if (data.data.role === '经理') {
window.location.href = "MANAGE/manage.html?username=" + encodeURIComponent(username);
}
} else {
alert("登录失败");
console.log(data);
}
})
.catch(error => {
alert("请求失败，请重试");
console.error(error);
});
});
</script>
</html>
MANAGE.manage.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="select">查看个人信息</button>
</td>
</tr>
<tr>
<td>2</td>
<td>
<button id="update">修改信息</button>
</td>
</tr>
<tr>
<td>3</td>
<td>
<button id="update2">修改个人密码</button>
</td>
</tr>
<tr>
<td>4</td>
<td>
<button id="daily">统计部门考勤情况</button>
</td>
</tr>
<tr>
<td>5</td>
<td>
<button id="low">审批请假</button>
</td>
</tr>
</table>
</div>
</body>
<script>
document.getElementById("select").addEventListener("click", function () {
window.location.href = "../STAFF/select.html?username=" + encodeURIComponent(username);
});
document.getElementById('update').addEventListener('click', function () {
window.location.href = "../ROOT/update2.html?username=" + encodeURIComponent(username);
});
document.getElementById("update2").addEventListener("click", function () {
window.location.href = "../STAFF/update1.html?username=" + encodeURIComponent(username);
});
document.getElementById('daily').addEventListener('click', function () {
window.location.href = "count.html?username=" + encodeURIComponent(username);
});
document.getElementById("low").addEventListener("click", function () {
window.location.href = "pass.html?username=" + encodeURIComponent(username);
});
</script>
</html>
pass.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>审批请假</title>
</head>
<body>
<div id="container">
</div>
<div id="summaryContainer">
</div>
</body>
<script>
var urlParams = new URLSearchParams(window.location.search);
var id = urlParams.get('username');
console.log(id);
const requestUrl = `http://localhost:8080/staff/low`;
fetch(requestUrl,
{
method: 'GET',
headers: {
'Content-Type': 'application/json'
},
})
.then(res => res.json())
.then(data => {
if (data.msg === 'success') {
console.log(data);
generateSummary(data.data);
// generateTable(data.data);
} else {
alert("查询失败 " + data.msg);
}
})
.catch(error => {
alert("请求失败，请重试");
console.error(error);
});
</script>
<script>
function generateSummary(data) {
const summaryContainer = document.getElementById("summaryContainer");
// Clear all child nodes in summaryContainer
while (summaryContainer.hasChildNodes()) {
summaryContainer.removeChild(summaryContainer.firstChild);
}
// Use an object to store employee names as keys and corresponding leave information as values
const employeeLeaveInfo = {};
// Iterate through the original data and group data by employee name
for (let i = 0; i < data.length; i++) {
const employeeName = data[i].name;
if (!employeeLeaveInfo[employeeName]) {
employeeLeaveInfo[employeeName] = {
gender: data[i].sex,
startDate: data[i].attendanceTime,
endDate: data[i].attendanceTime,
leaveType: data[i].attendanceType,
reasons: [data[i].notes],
};
} else {
employeeLeaveInfo[employeeName].endDate = data[i].attendanceTime;
employeeLeaveInfo[employeeName].reasons.push(data[i].notes);
}
}
// Generate summary information and add it to summaryContainer
for (const employeeName in employeeLeaveInfo) {
const summary = document.createElement("div");
summary.innerHTML = `<p>员工姓名: ${employeeName}</p>
<p>性别: ${employeeLeaveInfo[employeeName].gender}</p>
<p>请假开始日期: ${employeeLeaveInfo[employeeName].startDate}</p>
<p>结束日期: ${employeeLeaveInfo[employeeName].endDate}</p>
<p>请假类型: ${employeeLeaveInfo[employeeName].leaveType}</p>
<p>请假事由: ${employeeLeaveInfo[employeeName].reasons.join(', ')}</p>`;
// Create approve and reject buttons
const approveButton = document.createElement("button");
approveButton.textContent = "批准";
approveButton.addEventListener("click", () => handleApproval(employeeName, employeeLeaveInfo[employeeName].leaveType));
const rejectButton = document.createElement("button");
rejectButton.textContent = "驳回";
rejectButton.addEventListener("click", () => handleRejection(employeeName, employeeLeaveInfo[employeeName].leaveType));
// Append buttons to the summary
summary.appendChild(approveButton);
summary.appendChild(rejectButton);
// Append the summary to the container
summaryContainer.appendChild(summary);
}
// Handle approval logic
function handleApproval(name, type) {
// Implement logic for approving leave for the specified employee
console.log(`Leave approved for ${name}`);
const i = 1;
console.log(name + " " + type + " " + i);
const requestUrl = `http://localhost:8080/staff/approve/${name}/${type}/${i}`;
fetch(requestUrl,
{
method: 'GET',
headers: {
'Content-Type': 'application/json'
},
})
.then(res => res.json())
.then(data => {
if (data.msg === 'success') {
console.log(data);
alert("申请批准！")
} else {
alert("查询失败 " + data.msg);
}
})
.catch(error => {
alert("请求失败，请重试");
console.error(error);
});
}
// Handle rejection logic
function handleRejection(name, type) {
// Implement logic for rejecting leave for the specified employee
console.log(`Leave approved for ${name}`);
const i = -1;
console.log(name + " " + type + " " + i);
const requestUrl = `http://localhost:8080/staff/approve/${name}/${type}/${i}`;
fetch(requestUrl,
{
method: 'GET',
headers: {
'Content-Type': 'application/json'
},
})
.then(res => res.json())
.then(data => {
if (data.msg === 'success') {
console.log(data);
alert("申请驳回！")
} else {
alert("查询失败 " + data.msg);
}
})
.catch(error => {
alert("请求失败，请重试");
console.error(error);
});
}
}
</script>
</html>
浙公网安备 33010602011771号