Web前端平时练习

最新推荐文章于 2024-07-14 18:10:31 发布

Sealgost

最新推荐文章于 2024-07-14 18:10:31 发布

阅读量167

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/sealfight/article/details/130208848

版权

平时练习五

1、设计登录界面，输入账号、密码（测试账号：admin 密码：123456）后调用服务端Api接口进行身份验证验证。登录成功记录所返回的身份令牌，登录失败给出相应反馈提示。

接口地址：http:// 114.67.241.121:8088/user/login
请求方式：post
接口参数 username password

2.登录成功进入学生管理界面，调用Api接口获取所有学生信息，并设计界面加载显示数据。

接口地址：http:// 114.67.241.121:8088/stu/list
请求方式：get
请求头：
header请求头携带变量：Authorization
header请求头携带变量的值：登录成功所记录下的token身份令牌
接口参数：无
返回数据
请求头未携带登录成功所返回的token

3.点击“添加”按钮进入添加界面，完成相关信息输入后，调用Api接口保存数据信息。

接口地址：http:// 114.67.241.121:8088/stu/add
请求方式：post
请求头
header请求头携带变量：Authorization
header请求头携带变量的值：登录成功所记录下的token身份令牌

4.点击“修改”按钮进入修改界面，读取当前学生信息，输入修改后数据后保存完成数据信息更新。

接口地址：http:// 114.67.241.121:8088/stu/edit
请求方式：post
请求头
header请求头携带变量：Authorization
header请求头携带变量的值：登录成功所记录下的token身份令牌
接口参数 stuid

5.点击“删除”按钮请求服务端删除数据接口，在服务端数据成功删除后，移除表格中数据行。

接口地址：http:// 114.67.241.121:8088/stu/del
请求方式：Post
请求头
header请求头携带变量：Authorization
header请求头携带变量的值：登录成功所记录下的token身份令牌
接口参数 stuid

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>E5</title>
</head>

<body>
    <div id="login">
        <p>账号: <input type="text" id="username" /></p>
        <p>密码: <input type="text" id="password" /></p>
        <div><button>登录</button></div>
    </div>

    <div id="studentINFO"></div>
    <div id="addStudent"></div>
    <div id="modifyStudent"></div>
    <div id="deleteStudent"></div>
</body>

</html>

<script src="./jquery-3.6.4.js"></script>
<script></script>
<script>

    $(document).ready(function () {
        login();
        addStudedntINFO();
        modifyStudedntINFO();
        goBack();
        deleteStudentINFO();
    })

    function login() {
        $("#login div button").click(function () {
            var username = $("#username").val();
            var password = $("#password").val();

            $.ajax({
                type: "post",
                url: "http://114.67.241.121:8088/user/login?" + "username=" + username + "&password=" + password,
                async: false,
                complete: function (data) {
                    if (data.responseJSON.msg == "账号或密码错误") {
                        alert("账号或密码错");
                    }
                    else {
                        var token = data.responseJSON.data.token;
                        window.localStorage.setItem("token", token);

                        $("#login").hide();
                        $("#studentINFO").append("<table><tr><td>stuaddess</td><td>stugender</td><td>stugrade</td><td>stuid</td><td>stumajor</td><td>stuname</td><td>stunative</td><td>stuno</td><td>stuphone</td><td>操作</td></tr></table>");
                        refreshStudentINFO();
                        $("#studentINFO").before("<button id='add'>添加</button>");
                    }
                },
            })
        })
    }


    function refreshStudentINFO() {
        $.ajax({
            type: "get",
            url: "http://114.67.241.121:8088/stu/list",
            headers: {
                'Authorization': window.localStorage.getItem("token"),
            },
            async: false,
            complete: function (data) {
                var studentList = data.responseJSON.data;

                $("#studentINFO tr").not(":first").remove();
                for (var i = 0; i < studentList.length; i++) {
                    $("#studentINFO table").append(
                        "<tr>"
                        + "<td>" + studentList[i].stuaddess + "</td>"
                        + "<td>" + studentList[i].stugender + "</td>"
                        + "<td>" + studentList[i].stugrade + "</td>"
                        + "<td>" + studentList[i].stuid + "</td>"
                        + "<td>" + studentList[i].stumajor + "</td>"
                        + "<td>" + studentList[i].stuname + "</td>"
                        + "<td>" + studentList[i].stunative + "</td>"
                        + "<td>" + studentList[i].stuno + "</td>"
                        + "<td>" + studentList[i].stuphone + "</td>"
                        + "<td>" + "<button>修改</button> <button>删除</button>" + "</td>"
                        + "</tr>"
                    );
                }
                $("table").css({ "height":"80%", "border-collapse": "collapse", });
                $("td").css({ "border": "1px solid black", "width": "80px", "text-align": "center",});
                $("tr td").last().css({"display":"inline-block", })
            }
        })

    }

    function addStudedntINFO() {
        $("body").on("click", "#add", function () {
            console.log("!");
            $("#studentINFO").hide();
            $("#addStudent").show();
            $("#addStudent").append(
                "<p>stuaddess: <input type='text' id='stuaddess' /></p>"
                + "<p>stugender: <input type='text' id='stugender' /></p>"
                + "<p>stugrade: <input type='text' id='stugrade' /></p>"
                + "<p>stuid: <input type='text' id='stuid' /></p>"
                + "<p>stumajor: <input type='text' id='stumajor' /></p>"
                + "<p>stuname: <input type='text' id='stuname' /></p>"
                + "<p>stunative: <input type='text' id='stunative' /></p>"
                + "<p>stuno: <input type='text' id='stuno' /></p>"
                + "<p>stuphone: <input type='text' id='stuphone' /></p>"
                + "<p><button id='confirmAdd'>确定添加</button> <button class='goBack'>返回</button></p>"
            );
            $("p").css({ "width": "200px" });

            $("#confirmAdd").click(function () {
                $.ajax({
                    type: "post",
                    url: "http://114.67.241.121:8088/stu/add",
                    headers: {
                        'Authorization': window.localStorage.getItem("token"),
                        "Content-Type": "application/json",
                    },
                    async: false,
                    data:
                        JSON.stringify({
                            "stuaddess": $("#stuaddess").val(),
                            "stugender": $("#stugender").val(),
                            "stugrade": $("#stugrade").val(),
                            "stuid": $("#stuid").val(),
                            "stumajor": $("#stumajor").val(),
                            "stuname": $("#stuname").val(),
                            "stunative": $("#stunative").val(),
                            "stuno": $("#stuno").val(),
                            "stuphone": $("#stuphone").val(),
                        }),
                })
            })

        })
    }

    function modifyStudedntINFO() {
        $("body").on("click", "#studentINFO td button:nth-child(1)", function () {
            var currentRow = $(this).closest("tr");

            var currentstuaddess = currentRow.find("td:eq(0)").text();
            var currentstugender = currentRow.find("td:eq(1)").text();
            var currentstugrade = currentRow.find("td:eq(2)").text();
            var currentstuid = currentRow.find("td:eq(3)").text();
            var currentstumajor = currentRow.find("td:eq(4)").text();
            var currentstuname = currentRow.find("td:eq(5)").text();
            var currentstunative = currentRow.find("td:eq(6)").text();
            var currentstuno = currentRow.find("td:eq(7)").text();
            var currentstuphone = currentRow.find("td:eq(8)").text();
            console.log(currentstuid);

            $("#studentINFO").hide();
            $("#modifyStudent").show();
            $("#modifyStudent").append(
                "<p>stuaddess: <input type='text' id='nstuaddess' /></p>"
                + "<p>stugender: <input type='text' id='nstugender' /></p>"
                + "<p>stugrade: <input type='text' id='nstugrade' /></p>"
                + "<p>stuid: " + currentstuid + "</p>"
                + "<p>stumajor: <input type='text' id='nstumajor' /></p>"
                + "<p>stuname: <input type='text' id='nstuname' /></p>"
                + "<p>stunative: <input type='text' id='nstunative' /></p>"
                + "<p>stuno: <input type='text' id='nstuno' /></p>"
                + "<p>stuphone: <input type='text' id='nstuphone' /></p>"
                + "<p><button id='confirmModify'>确定修改</button> <button class='goBack'>返回</button></p>"
            );
            $("p").css({ "width": "200px" });

            $("#confirmModify").click(function () {
                $.ajax({
                    type: "post",
                    url: "http://114.67.241.121:8088/stu/edit",
                    headers: {
                        'Authorization': window.localStorage.getItem("token"),
                        "Content-Type": "application/json",
                    },
                    async: false,
                    data:
                        JSON.stringify({
                            "stuaddess": $("#nstuaddess").val(),
                            "stugender": $("#nstugender").val(),
                            "stugrade": $("#nstugrade").val(),
                            "stuid": currentstuid,
                            "stumajor": $("#nstumajor").val(),
                            "stuname": $("#nstuname").val(),
                            "stunative": $("#nstunative").val(),
                            "stuno": $("#nstuno").val(),
                            "stuphone": $("#nstuphone").val(),
                        }),
                })
            })
        })
    }

    function goBack() {
        $("body").on("click", ".goBack", function () {
            $("#addStudent").hide();
            $("#addStudent").empty();
            $("#modifyStudent").hide();
            $("#modifyStudent").empty();
            $("#deleteStudent").hide();
            $("#deleteStudent").empty();
            refreshStudentINFO();
            $("#studentINFO").show();
        })
    }

    function deleteStudentINFO() {
        $("body").on("click", "#studentINFO td button:nth-child(2)", function () {
            var currentRow = $(this).closest("tr");
            var deleteStuid = currentRow.find("td:eq(3)").text();

            $("#studentINFO").hide();
            $("#deleteStudent").show();
            $("#deleteStudent").append("<p>确定删除？</p><p id='confirmDelete'><button>确定</button><button class='goBack'>返回</button></p>");
            $("#confirmDelete").css({ "margin-right": "25px", });

            $("#confirmDelete button:nth-child(1)").on("click", function () {
                console.log("1");
                $.ajax({
                    type: "post",
                    url: "http://114.67.241.121:8088/stu/del?stuid=" + deleteStuid,
                    headers: {
                        'Authorization': window.localStorage.getItem("token"),
                    },
                    async: false,
                })
                $("#deleteStudent").hide();
                $("#deleteStudent").empty();
                refreshStudentINFO();
                $("#studentINFO").show();
            })

        })
    }

</script>

<style>
    #login,
    #studentINFO,
    #addStudent,
    #modifyStudent,
    #deleteStudent {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    #login div {
        text-align: center;
    }
</style>