web实验五

好多头发

已于 2023-04-23 16:53:04 修改

阅读量88

点赞数

文章标签： http 网络协议网络

于 2023-04-19 16:36:22 首次发布

本文链接：https://blog.csdn.net/m0_56993984/article/details/130247494

版权

实验内容：

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

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

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

接口地址：http:// 114.67.241.121:8088/stu/list
请求方式：get
请求头：

header请求头携带变量：Authorization

header请求头携带变量的值：登录成功所记录下的token身份令牌

接口参数：无
返回数据

请求头未携带登录成功所返回的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身份令牌

接口参数

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

接口地址：http:// 114.67.241.121:8088/stu/del
请求方式：Post
请求头

header请求头携带变量：Authorization

header请求头携带变量的值：登录成功所记录下的token身份令牌

接口参数

login部分代码

<!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>Document</title>
    <style>
        .user {
            width: 400px;
            height: 200px;
            margin: 0 auto;
        }

        .user div {
            margin-top: 20px;
        }

        .user input {
            width: 200px;
            height: 30px;
        }
    </style>
</head>

<body>
    <form action="">
        <div class="user">
            <div>
                <input type="text" id="username" placeholder="请输入用户名" value="admin">
            </div>
            <div>
                <input type="password" id="password" placeholder="请输入密码" value="123456">
            </div>

            <div>
                <input type="button" value="登录" id="login">
            </div>
        </div>
    </form>

    <script src="./实验六/js/jquery-3.6.3.min.js"></script>
    <script src="./实验六/js/axios.js"></script>
    <script>
        $("#login").click(function () {
            let username = $("#username").val()
            let password = $("#password").val()


            $.ajax({
                method: "post",
                url: "http://114.67.241.121:8088/user/login",
                data: {
                    username: username,
                    password: password
                }
            }).then(res => {
                let token = res.data.token
                localStorage.setItem("token", token)
                location.href = "./实验五student.html"
            })

            // $.post("http://114.67.241.121:8088/user/login", {
            //     username: username,
            //     password: password
            // }).then(res => {

            // })
        })
    </script>
</body>

</html>

student部分代码

<!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>Document</title>
    <style>
        table {
            width: 600px;
            border-collapse: collapse;
        }

        th,
        td {
            border: 1px solid black;
            text-align: center;
            line-height: 30px;
        }

        #add {
            width: 100px;
            margin: 30px auto;
        }
    </style>
</head>

<body>

    <div>
        <button id="add">新增</button>
    </div>
    <table>
        <tr>
            <th>编号</th>
            <th>学号</th>
            <th>姓名</th>
            <th>专业</th>
            <th>性别</th>
            <th>年级</th>
            <th>电话</th>
            <th>住址</th>
            <th>籍贯</th>
            <th>操作</th>

        </tr>
        
    </table>

    <script src="./实验六/js/jquery-3.6.3.min.js"></script>
    <script src="./实验六/js/axios.js"></script>
    <script>

        //获取学生列表
        $(function () {

            // $(function () {
            //     let token = localStorage.getItem("token")
            //     $.ajax({
            //         method: "get",
            //         url: "http://114.67.241.121:8088/stu/list",
            //         headers: {
            //             "Authorization": token
            //         }
            //     }).then(res => {
            //         console.log(res)
            //     })
            // })

            let token = localStorage.getItem("token")
            axios({
                method: "get",
                url: "http://114.67.241.121:8088/stu/list",
                headers: {
                    "Authorization": token
                }
            }).then(res => {
                //console.log(res.data.data)
                let stu = res.data.data
                
                $.each(stu, function (i, item) {
                    let student =
                        `<tr>
                            <td>${item.stuid}</td>
                            <td>${item.stuno}</td>
                            <td>${item.stuname}</td>
                            <td>${item.stumajor}</td>
                            <td>${item.stugender}</td>
                            <td>${item.stugrade}</td>
                            <td>${item.stuphone}</td>
                            <td>${item.stuaddess}</td>
                            <td>${item.stunative}</td>
                            <td><button id="remove">删除</button> <button id="modify">修改</button></td>
                        </tr>`

                    $("table").append(student)

                })
            })
        })

        //新增学生
        $("#add").click(function () {
            location.href = "./实验五add.html"
        })

        //删除学生
        $("table").on("click", "#remove", function () {
            let token = localStorage.getItem("token")
            let id = $(this).parents("tr").children("td:first").html()
            //let id = $(this).parents("tr").children("td:first").html()
            axios({
                method: "post",
                url: "http://114.67.241.121:8088/stu/del",
                headers: {
                    "Authorization": token
                },
                params: {
                    stuid: id
                }
            }).then(res => {
                alert("删除成功！")
            })
        })

        //修改学生
        $("table").on("click", "#modify", function () {
            location.href = "./实验五modify.html"
        })
       
    </script>
</body>

</html>

add部分

<!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>Document</title>
    <style>
        div {
            height: 50px;
        }

        input {
            width: 200px;
            height: 30px;
        }

        span {
            font-weight: bold;
        }
    </style>
</head>

<body>
    <form action="">
        <div>
            <span>学号：</span><input type="text" placeholder="请输入学号" id="stuno">
        </div>
        <div>
            <span>姓名：</span><input type="text" placeholder="请输入姓名" id="stuname">
        </div>
        <div>
            <span>专业：</span><input type="text" placeholder="请输入专业" id="stumajor">
        </div>
        <div>
            <span>性别：</span><input type="text" placeholder="请输入性别" id="stugender">
        </div>
        <div>
            <span>年级：</span><input type="text" placeholder="请输入年级" id="stugrade">
        </div>
        <div>
            <span>电话：</span><input type="text" placeholder="请输入电话" id="stuphone">
        </div>
        <div>
            <span>住址：</span><input type="text" placeholder="请输入住址" id="stuaddess">
        </div>
        <div>
            <span>籍贯：</span><input type="text" placeholder="请输入籍贯" id="stunative">
        </div>

        <input type="button" id="save" value="保存">
    </form>

    <script src="./实验六/js/jquery-3.6.3.min.js"></script>
    <script src="./实验六/js/axios.js"></script>
    <script>
        $("#save").click(function () {
            let token = localStorage.getItem("token")
            
            axios({
                method: "post",
                url: "http://114.67.241.121:8088/stu/add",
                headers: {
                    "Authorization": token
                },
                data: {
                    stuno: $("#stuno").val(),
                    stuname: $("#stuname").val(),
                    stumajor: $("#stumajor").val(),
                    stugender: $("#stugender").val(),
                    stugrade: $("#stugrade").val(),
                    stuphone: $("#stuphone").val(),
                    stuaddess: $("#stuaddess").val(),
                    stunative: $("#stunative").val(),
                }
            }).then(res => {
                location.href = "./实验五student.html"
            })
        })
    </script>
</body>


</html>

好多头发

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web实验五

1、设计登录界面，输入账号、密码（测试账号：admin 密码：123456）后调用服务端Api接口进行身份验证验证。登录成功记录所返回的身份令牌，登录失败给出相应反馈提示。http://2.登录成功进入学生管理界面，调用Api接口获取所有学生信息，并设计界面加载显示数据。http://header请求头携带变量：Authorizationheader请求头携带变量的值：登录成功所记录下的token身份令牌请求头未携带登录成功所返回的token请求头中携带当前登录用户的token身份令牌。
复制链接

扫一扫