12.14

标签：username const alert 12.14 error document data

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>

标签：username,const,alert,12.14,error,document,data
From： https://www.cnblogs.com/zzqq1314/p/17910947.html

相关文章

赞助商

阅读排行