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