12.18
ROOT/addAgent.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: 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="id">请输入工号（八位数字：年份+四位序号）</label> <input type="text" id="id" minlength="8" maxlength="8" required> <br> <label for="name">姓名:</label> <input type="text" id="name"> <br> <label for="Position">住址:</label> <input type="text" id="Position" pattern="[\u4e00-\u9fa5]{2,4}(?:省|自治区|市)?[\u4e00-\u9fa5]{2,4}(?:市|自治州)?[\u4e00-\u9fa5]{2,4}(?:区|县|市|旗)?[\u4e00-\u9fa5]{2,20}(?:街道|镇)?[\u4e00-\u9fa5]{2,20}(?:小区)?[\u4e00-\u9fa5\d]{1,10}(?:号楼)?[\u4e00-\u9fa5\d]{1,10}(?:单元)?[\u4e00-\u9fa5\d]{1,10}(?:门牌)?"> <br> <span>家庭住址（地址格式：XX省XX市XX区（县）XX街道XX小区XX号楼XX单元XXX门牌）</span> <br> <label for="phone">请输入手机号</label> <input type="text" id="phone"> <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 id = document.getElementById('id'); const name = document.getElementById('name'); const Position = document.getElementById('Position'); const phone = document.getElementById('phone'); console.log(id.value + " " + name.value + " " + Position.value + " " + phone.value); addAgent(id.value, name.value, Position.value, phone.value); addUser(id.value) }); </script> <script> function addAgent(id, name, position, phone) { const requestUrl = 'http://localhost:8080/user/addAgent'; fetch(requestUrl, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ agentID: id, agentName: name, agentAddress: position, phone: phone }) }) .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> <script> function addUser(stuId) { const requestUrl = `http://localhost:8080/user/addUser`; fetch(requestUrl, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify( { id: stuId, password: "123456", position: "房产经纪", }) }) .then(response => response.json()) .then(data => { if (data.msg === 'success') { alert("已添加用户到数据库"); } else { alert("未通过审核，取消添加入数据库"); } }) .catch(error => { alert("请求失败，请重试"); console.error(error); }); } </script> </html>
ROOT/addHouse.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: 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="id">请输入房产编号（编码规则：年月日（登记入库时间）+四位顺序号）</label> <input type="text" id="id" minlength="12" maxlength="12" required> <br> <label>户型:</label> <div id="type"> <label><input type="radio" name="type" value="四室两厅">四室两厅</label> <label><input type="radio" name="type" value="四室一厅">四室一厅</label> <label><input type="radio" name="type" value="三室两厅">三室两厅</label> <label><input type="radio" name="type" value="三室一厅">三室一厅</label> <label><input type="radio" name="type" value="两室两厅">两室两厅</label> <label><input type="radio" name="type" value="两室一厅">两室一厅</label> </div> <br> <label for="Position">住址:</label> <input type="text" id="Position" pattern="[\u4e00-\u9fa5]{2,4}(?:省|自治区|市)?[\u4e00-\u9fa5]{2,4}(?:市|自治州)?[\u4e00-\u9fa5]{2,4}(?:区|县|市|旗)?[\u4e00-\u9fa5]{2,20}(?:街道|镇)?[\u4e00-\u9fa5]{2,20}(?:小区)?[\u4e00-\u9fa5\d]{1,10}(?:号楼)?[\u4e00-\u9fa5\d]{1,10}(?:单元)?[\u4e00-\u9fa5\d]{1,10}(?:门牌)?"> <span>家庭住址（地址格式：XX省XX市XX区（县）XX街道XX小区XX号楼XX单元XXX门牌）</span> <label for="year">请输入建造年份</label> <input type="text" id="year"> <br> <label for="area">请输入建造面积</label> <input type="text" id="area"> <br> <label for="much">请输入销售报价</label> <input type="text" id="much"> <br> <label for="state">销售状态</label> <select id="state" name="state" required> <option value="请选择">请选择</option> <option value="在售">在售</option> <option value="意向">意向</option> <option value="待售">必修</option> <option value="售出">售出</option> <option value="停售">停售</option> </select> <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 id = document.getElementById('id'); const type = document.querySelectorAll('input[name="type"]'); let s; type.forEach(radio => { if (radio.checked) { s = radio.value; alert(s); } }); const Position = document.getElementById('Position'); const year = document.getElementById('year'); const area = document.getElementById('area'); const much = document.getElementById('much'); const state = document.getElementById('state'); console.log(id.value + " " + s + " " + Position.value + " " + year.value + " " + area.value + " " + much.value + " " + state.value); addHouse(id.value, s, Position.value, year.value, area.value, much.value, state.value); }); </script> <script> function addHouse(id, s, position, year, area, much, state) { const requestUrl = 'http://localhost:8080/user/addHouse'; fetch(requestUrl, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ id: id, type: s, position: position, year: year, area: area, much: much, state: state }) }) .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>
all.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>是否通过</title> <style> .approveButton { 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; } .rejectButton { background-color: #f44336; 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> <div class="centered-form"> <!-- 增加边框--> <div class="bordered-form"> <!-- 调整边框大小--> <div class="form"> <div id="container"> </div> </div> </div> </div> </body> <script> var urlParams = new URLSearchParams(window.location.search); var id = urlParams.get('id'); console.log("用户名为:" + id); const requestUrl = `http://localhost:8080/user/selectid/${id}`; fetch(requestUrl, { method: 'GET', headers: { 'Content-Type': 'application/json' }, }) .then(res => res.json()) .then(data => { if (data.msg === 'success' && data.data != null) { console.log(data); generateTable(data.data); } else { alert("不存在此未审查或被退回的的审批卡"); } }) .catch(error => { alert("请求失败，请重试"); console.error(error); }); <!-- 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>ID</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.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><td><button class="approveButton">审批通过</button></td><td><button class="rejectButton">审批不通过</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 => ["approveButton", "rejectButton"].includes(className))) { target = target.parentNode; } if (target.classList.contains("approveButton")) { // 点击了"审批通过"按钮 const row = target.closest("tr"); const stuId = row.querySelector("td:first-child").textContent; updateStateInDatabase(stuId, 1); // display(); // 重新显示数据 } else if (target.classList.contains("rejectButton")) { // 点击了"审批不通过"按钮 const row = target.closest("tr"); const stuId = row.querySelector("td:first-child").textContent; updateStateInDatabase(stuId, -1); } }); </script> <script> function updateStateInDatabase(stuId, state) { const requestUrl = `http://localhost:8080/user/updateById/${stuId}/${state}`; fetch(requestUrl, { method: 'PUT', headers: { 'Content-Type': 'application/json' }, }) .then(response => response.json()) .then(data => { if (data.msg === 'success') { generateTable(data.data); if (state === 1) { add(stuId); } alert("审核成功") } else { alert("审核失败"); } }) .catch(error => { alert("请求失败，请重试"); console.error(error); }); } </script> <script> function add(stuId) { const requestUrl = `http://localhost:8080/user/addUser`; fetch(requestUrl, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify( { id: stuId, password: "123456", position: "顾客", }) }) .then(response => response.json()) .then(data => { if (data.msg === 'success') { alert("已添加用户到数据库"); } else { alert("未通过审核，取消添加入数据库"); } }) .catch(error => { alert("请求失败，请重试"); console.error(error); }); } </script> </html>
examine.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <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: 20px; /* 可选的内边距 */ background-color: #f0f0f0; /* 可选的背景颜色 */ } </style> </head> <body> <h1 style="text-align: center">审查信息</h1> <div class="centered-form"> <div class="bordered-form"> <div class="form"> <div id="container"> </div> </div> </div> </div> </body> <script> const requestUrl = `http://localhost:8080/user/getAll`; function display() { fetch(requestUrl, { method: 'GET', headers: { 'Content-Type': 'application/json' }, }) .then(response => response.json()) .then(data => { if (data.msg === 'success') { generateTable(data.data); } else { alert("当前不存在未审查的结果"); } }) .catch(error => { alert("请求失败，请重试"); console.error(error); }); } display(); </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>ID</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].id}</td><td><button type="button" id="search" onclick="redirectToSelectAll('${data[i].id}')">${data[i].name}</button><td>${data[i].sex}</td><td>${data[i].idNumber}</td><td>${data[i].phone}</td><td>${data[i].position}</td><td>${data[i].state}</td>`; tableBody.appendChild(row); table.appendChild(tableBody); tableContainer.appendChild(table); } } function redirectToSelectAll(n) { // 修改这里的路径为实际的 selectAll 页面路径 window.location.href = `all.html?id=${n}`; } </script> </html>
reSet.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="id">请输入ID</label> <input type="text" id="id"> <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>ID</td><td>姓名</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><td><button class="reSet">密码重置</button></td>`; tableBody.appendChild(row); table.appendChild(tableBody); tableContainer.appendChild(table); } </script> <script> document.getElementById('select').addEventListener('click', function () { const id = document.getElementById('id').value; const requestUrl = `http://localhost:8080/user/select1/${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 password="123456"; const requestUrl = `http://localhost:8080/user/updatePassword/${id}/${password}` fetch(requestUrl, { method: 'PUT', 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>
root.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="examine">审批顾客注册信息</button> </td> </tr> <tr> <td>2</td> <td> <button id="insert">增加信息</button> </td> </tr> <tr> <td>3</td> <td> <button id="add">增加房产经纪人</button> </td> </tr> <tr> <td>4</td> <td> <button id="update">修改信息</button> </td> </tr> <tr> <td>5</td> <td> <button id="select">查询信息</button> </td> </tr> <tr> <td>6</td> <td> <button id="reset">重置学生密码</button> </td> </tr> </table> </div> </body> <script> document.getElementById("examine").addEventListener("click", function () { window.location.href = "examine.html"; }); document.getElementById('insert').addEventListener('click', function () { window.location.href = "addHouse.html"; }); document.getElementById("add").addEventListener("click", function () { window.location.href = "addAgent.html"; }); document.getElementById('update').addEventListener('click', function () { window.location.href = "update.html"; }); document.getElementById("select").addEventListener("click", function () { window.location.href = "select.html"; }); document.getElementById("reset").addEventListener("click", function () { window.location.href = "reSet.html"; }); </script> </html>
