12.14
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> <button id="register" type="button" style="display: block; margin: 0 auto;">注册</button> </div> </form> </div> </div> </body> <script> const register = document.getElementById("register"); register.addEventListener("click", function () { window.location.href = "http://localhost:8080/CUSTOMER/register.html"; }); document.getElementById("login").addEventListener("submit", function (event) { event.preventDefault(); const username = document.getElementById("username").value; const password = document.getElementById("password").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') { console.log(data); if (data.data.position === '系统管理员') { window.location.href = "ROOT/root.html?username=" + encodeURIComponent(username); } else if (data.data.position === '顾客') { window.location.href = "CUSTOMER/customer.html?username=" + encodeURIComponent(username); } else if (data.data.position === '房产经纪') { window.location.href = "AGENT/agent.html?username=" + encodeURIComponent(username); } alert("登陆成功"); } else { alert("登录失败"); console.log(data); } }) .catch(error => { alert("密码或账号错误"); console.error(error); }); }); </script> </html>
selectID.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; } .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: 150px; /* 可选的内边距 */ background-color: #f0f0f0; /* 可选的背景颜色 */ } </style> </head> <script> var urlParams = new URLSearchParams(window.location.search); var username = urlParams.get('username'); console.log(username); const requestUrl = `http://localhost:8080/user/selectUsers/${username}`; fetch(requestUrl, { method: 'GET', headers: { 'Content-Type': 'application/json' }, }) .then(res => res.json()) .then(data => { if (data.msg === 'success') { if (data.data.position === "房产经纪") { select1(username); } else if (data.data.position === "顾客") { select2(username); } } else { alert("添加失败 " + data.msg); } }) .catch(error => { alert("请求失败，请重试"); console.error(error); }); </script> <body> <div class="centered-form"> <!-- 增加边框--> <div class="bordered-form"> <!-- 调整边框大小--> <div class="form"> <div id="container"> </div> </div> </div> </div> </body> <script> function select1(id) { const requestUrl = `http://localhost:8080/user/select1/${id}`; fetch(requestUrl, { method: 'GET', headers: { 'Content-Type': 'application/json' }, }) .then(res => res.json()) .then(data => { if (data.msg === 'success') { generateTable1(data.data); } else { alert("添加失败 " + data.msg); } }) .catch(error => { alert("请求失败，请重试"); console.error(error); }); } function select2(id) { const requestUrl = `http://localhost:8080/user/select2/${id}`; fetch(requestUrl, { method: 'GET', headers: { 'Content-Type': 'application/json' }, }) .then(res => res.json()) .then(data => { if (data.msg === 'success') { generateTable2(data.data); } else { alert("添加失败 " + data.msg); } }) .catch(error => { alert("请求失败，请重试"); console.error(error); }); } </script> <script> function generateTable2(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>ID</td><td>姓名</td><td>性别</td><td>身份证号</td><td>手机号</td><td>家庭住址</td><td>审核状态</td>'; tableBody.appendChild(row); // 查询方式是按姓名查询或多条查询 row = document.createElement("tr"); row.innerHTML = `<td>${data.id}</td><td>${data.name}</td><td>${data.sex}</td><td>${data.idNumber}</td><td>${data.phone}</td><td>${data.position}</td><td>${data.state}</td>`; tableBody.appendChild(row); table.appendChild(tableBody); tableContainer.appendChild(table); } function generateTable1(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>ID</td><td>姓名</td><td>手机号</td><td>家庭住址</td>'; tableBody.appendChild(row); // 查询方式是按姓名查询或多条查询 row = document.createElement("tr"); row.innerHTML = `<td>${data.agentID}</td><td>${data.agentName}</td><td>${data.phone}</td><td>${data.agentAddress}</td>`; tableBody.appendChild(row); table.appendChild(tableBody); tableContainer.appendChild(table); } </script> </html>
updatePassword.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> <h1 style="text-align: center">修改密码</h1> <div class="centered-form"> <div class="bordered-form"> <label for="old">旧密码</label> <input type="text" id="old" required> <br> <label for="new1">新密码</label> <input type="text" id="new1" required> <br> <label for="new2">确认新密码</label> <input type="text" id="new2" required> <div id="match"></div> <br> <button id="update" style="display: block; margin: 0 auto;">更改密码</button> </div> </div> </body> <script> const newPassword1 = document.getElementById("new1"); const newPassword2 = document.getElementById("new2"); const passwordMatchMessage = document.getElementById("match"); function checkPasswordMatch() { const password1 = newPassword1.value; const password2 = newPassword2.value; if (password1 === password2) { passwordMatchMessage.textContent = "两次密码一致"; passwordMatchMessage.style.color = "green"; } else { passwordMatchMessage.textContent = "两次密码不一致"; passwordMatchMessage.style.color = "red"; } } newPassword1.addEventListener("input", checkPasswordMatch); newPassword2.addEventListener("input", checkPasswordMatch); </script> <script> var urlParams = new URLSearchParams(window.location.search); var username = urlParams.get('username'); console.log("用户名为:" + username); document.getElementById('update').addEventListener('click', function () { const requestUrl = `http://localhost:8080/user/selectUsers/${username}`; fetch(requestUrl, { method: 'GET', headers: { 'Content-Type': 'application/json' }, }) .then(response => response.json()) .then(data => { if (data.msg === 'success') { console.log(data); deal(data.data); } else { alert("此结果不存在"); } }) .catch(error => { alert("请求失败，请重试"); console.error(error); }); }) </script> <script> function deal(data) { const old = document.getElementById('old').value; const new1 = document.getElementById('new1').value; const new2 = document.getElementById('new2').value; const password = data.password; console.log("密码为 " + password); if (old !== password) { alert("您输入的旧密码有误"); } else if (old !== password && new1 !== new2) { alert("输入的两次密码不一致"); } else if (old === password && new1 === new2) { const requestUrl = `http://localhost:8080/user/updatePassword/${username}/${new1}`; fetch(requestUrl, { method: 'PUT', headers: { 'Content-Type': 'application/json' }, }) .then(response => response.json()) .then(data => { if (data.msg === 'success') { alert("修改成功,请您重新登陆"); window.location.href = "http://localhost:8080/index.html"; } else { alert("修改失败"); } }) .catch(error => { alert("请求失败，请重试"); console.error(error); }); } } </script> </html>
