web实验5

最新推荐文章于 2024-09-13 23:32:49 发布

73560

最新推荐文章于 2024-09-13 23:32:49 发布

阅读量138

点赞数

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/chengj73/article/details/130309348

版权

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

请求头未携带登录成功所返回的token

header请求头携带变量：Authorization

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

header请求头携带变量：Authorization

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

header请求头携带变量：Authorization

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

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

<!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>login</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <script src="./js/jquery-3.6.3.min.js"></script>
    <script src="./js/axios.js"></script>
    <style>
        .login {
            width: 500px;
            height: 300px;
            margin: 100px auto;
        }

        .login h2 {
            text-align: center;
            margin-bottom: 30px;
        }

        .form-group {
            margin-bottom: 30px;
        }

        .btn {
            display: block;
            width: 100px;
            text-align: center;
            margin: 50px auto;
        }
    </style>
</head>

<body>
    <div class="login">
        <h2>用户登录</h2>
        <hr>
        <form>
            <div class="form-group">
                <label for="name">用户名</label>
                <input type="text" class="form-control" id="name" placeholder="请输入用户名">
            </div>
            <div class="form-group">
                <label for="pwd">密码</label>
                <input type="password" class="form-control" id="pwd" placeholder="请输入密码">
            </div>

            <button type="submit" class="btn btn-primary" id="subInfo">提交</button>
        </form>
    </div>
    <script>
        // $(function () {
        //     $("#subInfo").click(function (e) {
        //         e.preventDefault();
        //         var name = $("#name").val();
        //         var pwd = $("#pwd").val();
        //         $.post('http://114.67.241.121:8088/user/login', {
        //             password: pwd,
        //             username: name
        //         }, function (res) {
        //             console.log(res);
        //             if (res.code !== 200)
        //                 return alert("账号或密码错误");
        //             var token = res.data.token;
        //             window.open('StuMan.html')
        //             window.localStorage.setItem('Authorization', token);
        //         })
        //     })
        // })

        $(function () {
            $('#subInfo').click(function (e) {
                e.preventDefault()
                const name = $('#name').val()
                // console.log(name);
                const pwd = $('#pwd').val()
                axios({
                    method: 'post',
                    url: 'http://114.67.241.121:8088/user/login',
                    params: {
                        password: pwd,
                        username: name
                    }
                }).then(function (res) {
                    console.log(res);
                    if (res.status !== 200)
                        return alert("账号或密码错误");
                    const token = res.data.data.token
                    // console.log(token);
                    window.open('StuMan.html');
                    window.localStorage.setItem('Authorization', token);
                })
                // .catch(function (errror) {
                //     return alert("账号或密码错误");
                // })

            })
        })


    </script>
</body>

</html>

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

接口地址：http:// 114.67.241.121:8088/stu/list
请求方式：get
请求头：
接口参数：无
返回数据

<!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>StuMan</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <script src="./js/axios.js"></script>
    <script src="./js/jquery-3.6.3.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        h2 {
            text-align: center;
        }

        a {
            text-decoration: none;
            color: #ccc;
        }

        .btn {
            margin-left: 20px;
            margin-bottom: 20px;
        }

        .panel {
            width: 1200px;
            margin-left: 20px;
        }

        a {
            text-decoration: none;
        }

        .panel td {
            height: 50px;
        }
    </style>
</head>

<body>
    <h2>学生管理界面</h2>
    <hr>
    <button type="button" class="btn btn-primary">
        <a href="StuAdd.html" target="_blank">添加学生</a>
    </button>

    <div class="panel panel-default" id="stuInfo">
        <!-- Default panel contents -->
        <div class="panel-heading">学生信息</div>
        <!-- Table -->
        <table class="table table-bordered table-hover">
            <thead>
                <tr>
                    <th></th>
                    <th>学号</th>
                    <th>姓名</th>
                    <th>专业</th>
                    <th>性别</th>
                    <th>年级</th>
                    <th>电话号码</th>
                    <th>详细地址</th>
                    <th>出生地</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>

            </tbody>
        </table>
    </div>
    <script>
        $(function () {
            var token = window.localStorage.getItem('Authorization');
            axios({
                method: "GET",
                url: "http://114.67.241.121:8088/stu/list",
                headers: {
                    'Authorization': token
                }
            }).then(function (res) {
                console.log(res);
                if (res.status === 200) {
                    if (res.data.code === 105) {
                        return alert("未登录或登录已过期");
                    }
                    if (res.data.code === 200) {
                        var stus = res.data.data;
                        $.each(stus, function (i, item) {
                            var student = JSON.stringify(item)
                            var str = ` <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 type="button" class="btn btn-info" style="margin-bottom: 5px;">
                                                    <a href='StuAlter.html?stu=${student}'>修改</a>
                                                </button>
                                                <button type="button" class="btn btn-info">
                                                    <a href="javascript:;" id="delete">删除</a>
                                                </button>
                                            </td>
                                        </tr>`;
                            $("tbody").append(str);
                        })
                    }
                }
            },)

            //删除
            $("tbody").on('click', '#delete', function () {
                var tr = $(this).parents('tr');
                var stuid = tr.children('td:first').html();
                axios({
                    method: 'POST',
                    url: 'http://114.67.241.121:8088/stu/del',
                    headers: {
                        'Authorization': token
                    },
                    params: {
                        stuid: stuid
                    }
                }).then(function (res) {
                    if (res.status === 200) {
                        if (res.data.code === 105) {
                            return alert("未登录或登录已过期");
                        }
                        if (res.data.code === 200) {
                            alert("删除成功");
                            window.location.href = "StuMan.html";
                        }
                    }
                })
            })
        })
    </script>
</body>

</html>

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

接口地址：http:// 114.67.241.121:8088/stu/add
请求方式：post

请求头

<!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>StuAdd</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <script src="./js/axios.js"></script>
    <script src="./js/jquery-3.6.3.min.js"></script>
    <style>
        .container {
            width: 500px;
        }

        h3 {
            text-align: center;
        }

        .container .btn {
            display: block;
            margin: 20px auto;
            width: 100px;
        }
    </style>
</head>

<body>
    <h3>添加学生</h3>
    <hr>
    <div class="container">
        <form>
            <div class="form-group">
                <label for="no"> 学号</label>
                <input type="text" class="form-control" id="no" placeholder="请输入学号">
            </div>
            <div class="form-group">
                <label for="name">姓名</label>
                <input type="text" class="form-control" id="name" placeholder="请输入姓名">
            </div>
            <div class="form-group">
                <label for="major">专业</label>
                <input type="text" class="form-control" id="major" placeholder="请输入专业">
            </div>
            <div class="form-group">
                <label for="sex">性别</label>
                <input type="text" class="form-control" id="sex" placeholder="请输入性别">
            </div>
            <div class="form-group">
                <label for="grade">年级</label>
                <input type="text" class="form-control" id="grade" placeholder="请输入年级">
            </div>
            <div class="form-group">
                <label for="tel">电话号码</label>
                <input type="text" class="form-control" id="tel" placeholder="请输入电话号码">
            </div>
            <div class="form-group">
                <label for="address">详细地址</label>
                <input type="text" class="form-control" id="address" placeholder="请输入详细地址">
            </div>
            <div class="form-group">
                <label for="native">出生地</label>
                <input type="text" class="form-control" id="native" placeholder="请输入出生地">
            </div>

            <button type="submit" class="btn btn-primary" id="addStu">提交</button>
        </form>
    </div>
    <script>
        $(function () {
            $("#addStu").click(function (e) {
                e.preventDefault();
                var stu = new Object();
                stu.stuaddess = $("#address").val();
                stu.stugender = $('#sex').val();
                stu.stugrade = $("#grade").val();
                stu.stumajor = $('#major').val();
                stu.stuname = $("#name").val();
                stu.stunative = $("#native").val();
                stu.stuno = $('#no').val();
                stu.stuphone = $('#tel').val();
                var token = window.localStorage.getItem('Authorization');
                axios({
                    method: 'POST',
                    url: 'http://114.67.241.121:8088/stu/add',
                    headers: {
                        'Authorization': token
                    },
                    data: stu
                }).then(function (res) {
                    console.log(res);
                    if (res.status === 200) {
                        if (res.data.code === 105) {
                            return alert("未登录或登录已过期");
                        }
                        if (res.data.code === 200) {
                            alert("添加成功");
                            window.location.href = "StuMan.html";
                        }
                    }
                })
            })
        })

    </script>
</body>

</html>

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

<!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>实验三-作业四</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <script src="./js/axios.js"></script>
    <script src="./js/jquery-3.6.3.min.js"></script>
    <style>
        /* body {
            margin-left: 50px;
        }

        .container {
            width: 500px;
            height: 635px;
            padding: 10px;
            border: 1px solid #ccc;
            margin-left: 0;
        }

        form {
            width: 450px;
            height: 420px;
        } */
        .container {
            width: 500px;
        }

        h3 {
            text-align: center;
        }

        .container .btn {
            display: block;
            margin: 20px auto;
            width: 100px;
        }
    </style>
</head>

<body>
    <h3>修改学生信息</h3>
    <hr />
    <div class="container">
        <form>
            <div class="form-group">
                <label for="no"> 学号</label>
                <input type="text" class="form-control" id="no" placeholder="请输入学号">
            </div>
            <div class="form-group">
                <label for="name">姓名</label>
                <input type="text" class="form-control" id="name" placeholder="请输入姓名">
            </div>
            <div class="form-group">
                <label for="major">专业</label>
                <input type="text" class="form-control" id="major" placeholder="请输入专业">
            </div>
            <div class="form-group">
                <label for="sex">性别</label>
                <input type="text" class="form-control" id="sex" placeholder="请输入性别">
            </div>
            <div class="form-group">
                <label for="grade">年级</label>
                <input type="text" class="form-control" id="grade" placeholder="请输入年级">
            </div>
            <div class="form-group">
                <label for="tel">电话号码</label>
                <input type="text" class="form-control" id="tel" placeholder="请输入电话号码">
            </div>
            <div class="form-group">
                <label for="address">详细地址</label>
                <input type="text" class="form-control" id="address" placeholder="请输入详细地址">
            </div>
            <div class="form-group">
                <label for="native">出生地</label>
                <input type="text" class="form-control" id="native" placeholder="请输入出生地">
            </div>
            <button type="submit" class="btn btn-primary" id="modifyStu">提交</button>
        </form>
    </div>


    <script>
        $(function () {
            var s = window.location.search.substring(window.location.search.indexOf("=") + 1);
            var stu = JSON.parse(decodeURI(s));
            var stuid = stu.stuid;

            $("#address").val(stu.stuaddess);
            $('#sex').val(stu.stugender);
            $("#grade").val(stu.stugrade);
            $('#major').val(stu.stumajor);
            $("#name").val(stu.stuname);
            $("#native").val(stu.stunative);
            $('#no').val(stu.stuno);
            $('#tel').val(stu.stuphone);

            $("#modifyStu").click(function (e) {
                e.preventDefault();
                var newStu = new Object();
                newStu.stuaddess = $("#address").val();
                newStu.stugender = $('#sex').val();
                newStu.stugrade = $("#grade").val();
                newStu.stumajor = $('#major').val();
                newStu.stuname = $("#name").val();
                newStu.stunative = $("#native").val();
                newStu.stuid = stuid;
                newStu.stuno = $('#no').val();
                newStu.stuphone = $('#tel').val();
                var token = window.localStorage.getItem('Authorization');

                axios({
                    method: 'POST',
                    url: 'http://114.67.241.121:8088/stu/edit',
                    headers: {
                        'Authorization': token
                    },
                    data: newStu
                }).then(function (res) {
                    console.log(res);
                    if (res.status === 200) {
                        if (res.data.code === 105) {
                            return alert("未登录或登录已过期");
                        }
                        if (res.data.code === 200) {
                            alert("修改成功");
                            window.location.href = "StuMan.html";
                        }
                    }
                })

            })

        })

    </script>
</body>

</html>