今天实现前端的主页登录和管理员代码
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>