526互联

10.31

发布时间 2023-12-18 20:52:04作者: 看海不为月

今天我们再来实现上述个人信息添加的前端代码。

 1、add.html

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加个人信息</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }

        #root {
            margin: 20px;
        }

        h2 {
            font-size: 18px;
            margin-bottom: 10px;
        }

        label {
            display: block;
            margin-bottom: 5px;
        }

        input, select {
            width: 300px;
            padding: 5px;
            font-size: 16px;
        }

        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>
<div id="root" style="border: 1px solid black">
    <h2>增加人员</h2>
    <form id="addForm">
        <label for="updateId">学号:</label>
        <input type="text" id="updateId" name="id" required oninput="limitInput(this)" maxlength="8">
        <label for="updateName">姓名:</label>
        <input type="text" id="updateName" name="name" required>
        <label for="updateAge">年龄:</label>
        <input type="number" id="updateAge" name="age" min="1" max="150">
        <label>性别:</label>
        <div id="gender">
            <label><input type="radio" name="gender" value="男"> 男</label>
            <label><input type="radio" name="gender" value="女"> 女</label>
        </div>
        <label>兴趣爱好:</label>
        <div id="hobbies">
            <label><input type="checkbox" name="hobbies" value="阅读"> 阅读</label>
            <label><input type="checkbox" name="hobbies" value="音乐"> 音乐</label>
            <label><input type="checkbox" name="hobbies" value="运动"> 运动</label>
            <label><input type="checkbox" name="hobbies" value="旅行"> 旅行</label>
            <label><input type="checkbox" name="hobbies" value="烹饪"> 烹饪</label>
        </div>
        <label for="updateMajor">专业:</label>
        <select id="updateMajor" name="major" required>
            <option value="">请选择</option>
            <option value="计算机科学与技术">计算机科学与技术</option>
            <option value="软件工程">软件工程</option>
            <option value="网络工程">网络工程</option>
            <option value="信息工程">信息工程</option>
            <option value="数字媒体技术">数字媒体与技术</option>
            <option value="人工智能">人工智能</option>
        </select>
        <button type="submit">添加人员</button>

    </form>
    <div>
        <a href="index.html">
            <button>返回主界面</button>
        </a>
    </div>
</div>
</body>
<script>
    document.getElementById("addForm").addEventListener("submit", function (event) {
        event.preventDefault();
        const studentid = document.getElementById("updateId");
        const name = document.getElementById("updateName");
        const age = document.getElementById("updateAge");
        const genderRadios = document.querySelectorAll('input[name="gender"]');
        let gender;

        genderRadios.forEach(radio => {
            if (radio.checked) {
                gender = radio.value;
                alert(gender);
            }
        });

        const hobbies = document.querySelectorAll('input[name="hobbies"]:checked');
        const hobbyList = [];
        for (const hobby of hobbies) {
            hobbyList.push(hobby.value);
        }
        const major = document.getElementById("updateMajor");
        fetch('person/add',
            {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    studentid: studentid.value,
                    name: name.value,
                    age: age.value,
                    gender: gender,
                    hobby: hobbies.value,
                    major: major.value
                })
            })
            .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 limitInput(input) {
        const value = input.value;
        if (value.length > 8) {
            input.value = value.slice(0, 8);
        }
        if (value.length < 4 || value.slice(0, 4) !== '2022') {
            input.setCustomValidity('学号必须是八位且前四位为2022');
        } else {
            input.setCustomValidity('');
        }
    }
</script>
</html>
复制代码

2、delete.html

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>删除个人信息</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }

        .container {
            text-align: center;
            border: 1px solid #ccc;
            padding: 500px;
        }

        button {
            margin-top: 10px;
            padding: 10px;
            background-color: #007bff;
            color: #fff;
            border: none;
            border-radius: 3px;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div class="container">
    <h1 style="text-align: center">删除信息</h1>
    <form id="deleteform">
        <label>学号</label>
        <input type="text" id="studentid" required oninput="limitInput(this)" maxlength=8">
        <br>
        <button type="submit" name="提交">提交</button>
    </form>
    <div>
        <a href="index.html">
            <button>返回主界面</button>
        </a>
    </div>
</div>
</body>
<script>
    document.getElementById("deleteform").addEventListener('submit', function (event) {
        event.preventDefault();
        const studentid = document.getElementById("studentid");
        fetch('person/delete/' + studentid.value, {
            method: 'DELETE',
            headers: {
                'Content-type': 'application.json'
            },
            body: JSON.stringify(
                {
                    studentid: studentid.value
                }
            )
        })
            .then(response => response.json())
            .then(data => {
                if (data.msg == 'success') {
                    alert("删除成功");
                } else {
                    alert("删除失败 " + data.msg);
                }
            })
            .catch(error => {
                alert("请求失败，请重试");
                console.error(error);
            })
    });
</script>
<script>
    function limitInput(input) {
        const value = input.value;
        if (value.length > 8) {
            input.value = value.slice(0, 8);
        }
        if (value.length < 4 || value.slice(0, 4) !== '2022') {
            input.setCustomValidity('学号必须是八位且前四位为2022');
        } else {
            input.setCustomValidity('');
        }
    }
</script>
</html>
复制代码

3、index.html

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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>
<!-- 其余代码不变 -->
<div class="form">
    <table border="1px" cellspacing="0" width="600px">
        <tr>
            <th>编号</th>
            <th>功能</th>
        </tr>
        <tr>
            <td>1</td>
            <td>
                <a href="add.html" target="_blank">
                    <button>添加信息</button>
                </a>
            </td>
        </tr>
        <tr>
            <td>2</td>
            <td><a href="delete.html" target="_blank">
                <button>删除信息</button>
            </a>
            </td>
        </tr>
        <tr>
            <td>3</td>
            <td>
                <a href="update.html" target="_blank">
                    <button>修改信息</button>
                </a>
            </td>
        </tr>
        <tr>
            <td>4</td>
            <td>
                <a href="select.html" target="_blank">
                    <button>查询信息</button>
                </a>
            </td>
        </tr>
    </table>
</div>
</body>
</html>
复制代码

4、select.html

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>查询信息</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }

        .container {
            text-align: center;
            border: 1px solid #ccc;
            padding: 500px;
        }

        button {
            margin-top: 10px;
            padding: 10px;
            background-color: #007bff;
            color: #fff;
            border: none;
            border-radius: 3px;
            cursor: pointer;
        }

        h1 {
            margin-top: 0; /* 防止标题上方的空白 */
        }
    </style>
</head>
<body>'
<div class="container">
    <h1 style="text-align: center">查询信息</h1>
    <form id="selectform">
        <select id="selectway">
            <option value="id">按照学号查询,学号为八位，开头须为2022</option>
            <option value="name">按照姓名查询</option>
            <option value="all">查询所有信息</option>
        </select>
        <br>
        <input type="text" id="information">
        <button type="submit" name="提交" required>提交</button>
    </form>
    <div id="tablecontainer">

    </div>
    <div>
        <a href="index.html">
            <button>返回主界面</button>
        </a>
    </div>
</div>
</body>
<script>
    document.getElementById("selectform").addEventListener('submit', function (event) {
        event.preventDefault();
        const selectway = document.getElementById("selectway").value;
        const information = document.getElementById("information").value;

        fetchAndDisplayData(selectway, information);
    });
</script>
<script>
    function fetchAndDisplayData(selectway, information) {
        if (selectway === "id") {
            fetch(`person/getById/${information}`, {
                method: 'GET',
                headers: {
                    'Content-Type': 'application.json'
                },
            })
                .then(response => response.json())
                .then(data => {
                    if (data.msg === 'success') {
                        generateTable(data.data, 1);
                    } else {
                        alert("此结果不存在");
                    }
                })
                .catch(error => {
                    alert("请求失败，请重试");
                    console.error(error);
                });
        } else if (selectway === "name") {
            fetch(`person/getByName/${information}`, {
                method: 'GET',
                headers: {
                    'Content-Type': 'application.json'
                },
            })
                .then(response => response.json())
                .then(data => {
                    if (data.msg === 'success') {
                        alert(data.data.name);
                        generateTable(data.data, 2);
                    } else {
                        alert("此结果不存在");
                    }
                })
                .catch(error => {
                    alert("请求失败，请重试");
                    console.error(error);
                });
        } else if (selectway === "all") {
            fetch('person/getAll', {
                method: 'GET',
                headers: {
                    'Content-Type': 'application.json'
                },
            })
                .then(response => response.json())
                .then(data => {
                    if (data.msg === 'success') {
                        generateTable(data.data, 3);
                    } else {
                        alert("此结果不存在");
                    }
                })
                .catch(error => {
                    alert("请求失败，请重试");
                    console.error(error);
                });
        }
    }

</script>
<script>
    function generateTable(data, way) {
        const tableContainer = document.getElementById("tablecontainer");

        // 清空 tableContainer 中的所有子节点
        while (tableContainer.hasChildNodes()) {
            tableContainer.removeChild(tableContainer.firstChild);
        }

        // if (way===1||(way===2)) {
        if (data.studentid) {
            // 查询方式是按学号查询
            console.log(11);
            const table = document.createElement("table");
            const tableBody = document.createElement("tbody");

            let row = document.createElement("tr");
            row.innerHTML = '<td>学号</td><td>姓名</td><td>年龄</td><td>性别</td><td>爱好</td><td>专业</td>';
            tableBody.appendChild(row);

            row = document.createElement("tr");
            row.innerHTML = `<td>${data.studentid}</td><td>${data.name}</td><td>${data.age}</td><td>${data.gender}</td><td>${data.hobby}</td><td>${data.major}</td>`;
            tableBody.appendChild(row);

            table.appendChild(tableBody);
            tableContainer.appendChild(table);
        } else {
            // if (data.length>1) {
            const table = document.createElement("table");
            const tableBody = document.createElement("tbody");
            let row = document.createElement("tr");
            row.innerHTML = '<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].studentid}</td><td>${data[i].name}</td><td>${data[i].age}</td><td>${data[i].gender}</td><td>${data[i].hobby}</td><td>${data[i].major}</td>`;
                tableBody.appendChild(row);

                table.appendChild(tableBody);
                tableContainer.appendChild(table);
            }
        }
    }
</script>
</html>
复制代码

5、update.html

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>更新信息</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }

        .container {
            text-align: center;
            border: 1px solid #ccc;
            padding: 500px;
        }

        button {
            margin-top: 10px;
            padding: 10px;
            background-color: #007bff;
            color: #fff;
            border: none;
            border-radius: 3px;
            cursor: pointer;
        }

        h1 {
            margin-top: 0; /* 防止标题上方的空白 */
        }
    </style>
</head>
<body>
<div class="container">
    <h1 style="align-content: center">更新个人信息</h1>
    <form id="addForm">
        <label for="updateId">请输入您要修改信息的学号:</label>
        <br>
        <input type="text" id="updateId" name="id" required oninput="limitInput(this)" maxlength="8">
        <br>
        <label for="updateName">姓名:</label>
        <br>
        <input type="text" id="updateName" name="name" required>
        <br>
        <label for="updateAge">年龄:</label>
        <br>
        <input type="number" id="updateAge" name="age" min="1" max="150">
        <br>
        <label>性别:</label>
        <div id="gender">
            <label><input type="radio" name="gender" value="男"> 男</label>
            <label><input type="radio" name="gender" value="女"> 女</label>
        </div>
        <label>兴趣爱好:</label>
        <div id="hobbies">
            <label><input type="checkbox" name="hobbies" value="阅读"> 阅读</label>
            <label><input type="checkbox" name="hobbies" value="音乐"> 音乐</label>
            <label><input type="checkbox" name="hobbies" value="运动"> 运动</label>
            <label><input type="checkbox" name="hobbies" value="旅行"> 旅行</label>
            <label><input type="checkbox" name="hobbies" value="烹饪"> 烹饪</label>
        </div>
        <label for="updateMajor">专业:</label>
        <select id="updateMajor" name="major" required>
            <option value="">请选择</option>
            <option value="计算机科学与技术">计算机科学与技术</option>
            <option value="软件工程">软件工程</option>
            <option value="网络工程">网络工程</option>
            <option value="信息工程">信息工程</option>
            <option value="数字媒体技术">数字媒体与技术</option>
            <option value="人工智能">人工智能</option>
        </select>
        <br>
        <button type="submit">更改人员</button>
    </form>
    <div>
        <a href="index.html">
            <button>返回主界面</button>
        </a>
    </div>
</div>
</body>
<script>
    document.getElementById("addForm").addEventListener("submit", function (event) {
        event.preventDefault();
        const studentid = document.getElementById("updateId");
        const name = document.getElementById("updateName");
        const age = document.getElementById("updateAge");
        const genderRadios = document.querySelectorAll('input[name="gender"]');
        let gender;

        genderRadios.forEach(radio => {
            if (radio.checked) {
                gender = radio.value;
                alert(gender);
            }
        });

        const hobbies = document.querySelectorAll('input[name="hobbies"]:checked');
        const hobbyList = [];
        for (const hobby of hobbies) {
            hobbyList.push(hobby.value);
        }
        const major = document.getElementById("updateMajor");
        console.log(studentid + " " + name + " " + age + " " + gender + " " + hobbyList + " " + major + "  " + hobbyList.value);
        fetch('person/update',
            {
                method: 'PUT',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    studentid: studentid.value,
                    name: name.value,
                    age: age.value,
                    gender: gender,/**/
                    hobby: hobbyList,
                    major: major.value
                })
            })
            .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 limitInput(input) {
        const value = input.value;
        if (value.length > 8) {
            input.value = value.slice(0, 8);
        }
        if (value.length < 4 || value.slice(0, 4) !== '2022') {
            input.setCustomValidity('学号必须是八位且前四位为2022');
        } else {
            input.setCustomValidity('');
        }
    }
</script>
</html>