Web前端实验五

最新推荐文章于 2023-12-10 23:23:32 发布

Koiwan

最新推荐文章于 2023-12-10 23:23:32 发布

阅读量365

点赞数 2

文章标签：前端 java 开发语言

本文链接：https://blog.csdn.net/qq_64381400/article/details/130310377

版权

服务器接口测试地址：

http://114.67.241.121:8088/swagger-ui.html

接口使用说明：

点开“用户管理”下“用户登录”，“try it out”

输入接口参数 username:admin password:123456。点击execute

查看返回结果，token为当前用户的身份令牌

复制身份令牌，点击页面右上角的“Authorization”，粘贴后点击按钮“Authorize”

点击“Close”关闭弹窗。

测试其他接口，输入相关参数，点击“execute”即可正常运行。

实验内容：

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身份令牌

接口参数

返回结果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        #box{
            width: 600px;
            margin: 50px auto;
        }
        form{
            width: 500px;
            margin: 50px auto;
        }
        #register{
            width: 500px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            font-weight: 700;
            font-size: 22px;
            color: white;
            background-color: skyblue;
        }
        .content{
            width: 500px;   
            height: 400px;
            padding: 50px 100px;
            border: 1px solid grey;
            background-color: rgba(32, 168, 198, 0.373);
        }
        input{
            width: 300px;
            height: 50px;
        }
        .Info_1,.Info_2{
            height: 50px;
            color: red;
            font-size: 13px;
            line-height: 50px;
        }
        .submit{
            width: 300px;
            height: 50px;
            color: white;
            background-color: skyblue;
            text-decoration: none;
            font-size: 15px;
            font-weight: 700;
            border: 1px solid grey;
        }

        #Table{
            display:none;
        }
        #Table{
            width: 1000px;
            height: 50px;
            margin: 10px auto;
        }
        #Table .button{
            float: left;
            width: 100px;
            height: 30px;
            margin: 75px 50px;
        }
        #Table .find_name{
            width: 1000px;
            height: 50px;
            margin: 0 auto;
            clear: both;
            text-align: center;
            font-size: 20px;
        }
        #Table .find_name input{
            height: 30px;
        }
        #table{
            width: 1000px;
            margin:50px auto;
            border-collapse: collapse;
        }
        #table tr{
            text-align: center;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>

    <script>
         let token;

        $(document).ready(function()
        {
            var ip = document.getElementById("ip");
            var password = document.getElementById("password");
            var Info_1 =  document.querySelector(".Info_1");
            var Info_2 =  document.querySelector(".Info_2");

            ip.onblur=function(){
                var firstWord=ip.value.charCodeAt(0);
                if(ip.value.length<4 || ip.value.length>18){
                    Info_1.innerHTML="用户名长度必须为4~18位!";
                }else if(firstWord<65 || (firstWord>90 && firstWord<97) || firstWord>122){
                    Info_1.innerHTML="用户名必须以英文字母开头"
                }else{
                    Info_1.innerHTML = "";
                }
            }
            password.onblur=function(){
                if(password.value.length<4){
                    Info_2.innerHTML = "密码不能小于4位!";
                }else{
                    Info_2.innerHTML = "";
                }
        }

            $(".submit").on("click",function()
            {
                var name = $("input[id='ip']").val();
                var pword = $("input[id='password']").val();
                $.ajax({
                    url:"http://114.67.241.121:8088/user/login",
                    type:"post",
                    data:{
                        username:name,
                        password:pword
                    },

                    success(response)
                    {
                        console.log(response);

                        if(response.success){

                        localStorage.setItem("token",response.data.token)

                        token = localStorage.getItem("token")
                        
                        $('#box').hide()
                        $('#Table').show()
                        window.alert("登陆成功！")
                        }else{
                            window.alert("账号或密码错误!")
                        }
                    },

                })
            })

        })
        
        var stu = [];
        function get(){
             $.ajax({
                url: "http://114.67.241.121:8088/stu/list",
                type: 'get',
                headers: {
                    Authorization:token
                },  
                success:function(result) {
                    console.log(result);
                    if(result.success){
                        stu.length = 0

                        for(var i =0; i < result.data.length; i++){
                            stu.push(result.data[i])
                        }

                        alert("获取数据成功！")
                    }else{
                        alert("获取数据失败！")
                    }
                }
            });
        }

        function add(){
            var person = {
                "stuaddess": "swpu",
                    "stugender": "男",
                    "stugrade": "2021",
                    "stuid": stuid,
                    "stumajor": "计科",
                    "stuname": "啦啦",
                    "stunative": "四川",
                    "stuno": "110",
                    "stuphone": "10086"
            }

            $.ajax({

                url:"http://114.67.241.121:8088/stu/add",
                type:"post",
                headers:{
                    Authorization:token
                },
                contentType: "application/json",
                data:JSON.stringify(person),  
                success:function(result)
                {
                    console.log(result);
                    alert("添加成功！");
                },
                error:function(result)
                {
                    alert("添加出错！！！")  
                },
            })
        }

        function print(){

            const table = $('#table')

            table.find('tr:not("tr:first")').html('')

            for(let i = 0 ;i < stu.length ;i++){
                table.append(`
                    <tr>
                        <td>${stu[i].stuid}</td>
                        <td>${stu[i].stuname}</td>
                        <td>${stu[i].stugender}</td>t
                        <td>${stu[i].stumajor}</td>
                        <td>${stu[i].stugrade}</td>
                        <td>${stu[i].stuaddess}</td>
                        <td>${stu[i].stuphone}</td>
                    </tr>
                `)
            }
           
        }

        function del(){
            var num = prompt("请输入需要删除的学号:");

            $.ajax({
                url: `http://114.67.241.121:8088/stu/del?stuid=${num}`,
                type:"post",
                headers: {
                    Authorization:token
                },
                success:function(result)
                {
                    $("#table tr td").filter(function(){
                        return $(this).text() == num
                    }).parent().remove();
                    alert("删除成功！");
                },
                error:function(){
                    alert("删除出错！！！")
                }
            })
        }

        var stuid = 0;
        function edit()
        {
            stuid = prompt("请输入你要修改的学生学号");
           var newPerson = {
                    "stuaddess": "swpu",
                    "stugender": "男",
                    "stugrade": "2021",
                    "stuid": stuid,
                    "stumajor": "计科",
                    "stuname": "啦啦",
                    "stunative": "四川",
                    "stuno": "110",
                    "stuphone": "10086"
           }

            $.ajax({
                url:"http://114.67.241.121:8088/stu/edit",
                type:"post",
                headers: {
                    Authorization:token
                },
                
                contentType: "application/json",
                data:JSON.stringify(newPerson),  

                success:function()
                {

                    alert("修改成功！");
                }
            })
        }
    </script>
</head>
<body>
    <div id="box">

        <div id="register">登录</div>
    
        <div class="content">
            <input type="text" id="ip" placeholder="请输入用户名"><br/>
            <div class="Info_1"></div>
            <input type="password" id="password" placeholder="请输入密码">
            <div class="Info_2"></div>
            <button class="submit">提交</button>
        </div>

    </div>
      

    <div  id = "Table">
        <div>
            <input class = "button" type="button" value="获取" onclick="get()">
            <input class = "button" type="button" value="添加" onclick="add()">
            <input class = "button" type="button" value="删除" onclick="del()">
            <input class = "button" type="button" value="修改" onclick="edit()">
            <input class = "button" type="button" value="打印" onclick="print()">
        </div>
        <div class = "find_name">查询:<input type="text" id = "find"></div>
        <table id = "table" border = '1'>
            <thead height = '30px'>
                <tr id = "table-title">
                    <th>学号</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>专业</th>
                    <th>年级</th>
                    <th>家庭住址</th>
                    <th>身份证号</th>
                </tr>
            </thead>
        </table>
    </div>

</body>
</html>

Koiwan

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
Web前端实验五

复制身份令牌，点击页面右上角的“Authorization”，粘贴后点击按钮“Authorize”5.点击“删除”按钮请求服务端删除数据接口，在服务端数据成功删除后，移除表格中数据行。header请求头携带变量的值：登录成功所记录下的token身份令牌。header请求头携带变量的值：登录成功所记录下的token身份令牌。header请求头携带变量的值：登录成功所记录下的token身份令牌。header请求头携带变量的值：登录成功所记录下的token身份令牌。请求头中携带当前登录用户的token身份令牌。
复制链接

扫一扫