web前端实验5

编程语言 2023-08-18 21:11:04 阅读次数: 0

实 验 报 告
课 程 Web前端应用开发 实验项目 Jquery AJAX编程 成 绩
专业班级 班内序号 指导教师
姓 名 学 号 实验日期
实验目的及要求：
（1） 理解和掌握Jquery AJAX的get方式请求
（2） 理解和掌握Jquery AJAX的post方式提交
（3） 理解和掌握vue axios的前后端数据交互请求

服务器接口测试地址：
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身份令牌
 接口参数

 返回结果

运行截图

代码：

此次实验年利用了jquery、ajax以及bootstrap,项目目录结构如下:
在这里插入图片描述
登录页面:

<!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>01登录界面</title>
    <link rel="stylesheet" href="bootstrap.min.css">
    <script src="jquery.min.js"></script>
    <style>
        .login {
    
    
            width: 600px;
            margin: 120px auto;
        }
    </style>

    <script>
        $(function () {
    
    
            // 登录
            login()

            function login() {
    
    
                $('#formLogin').on('submit', function (e) {
    
    
                    e.preventDefault()
                    const data = $(this).serialize()
                    $.ajax({
    
    
                        type: 'POST',
                        url: 'http://114.67.241.121:8088/user/login',
                        data: data,
                        success: function (reg) {
    
    
                            console.log(reg)
                            if (reg.code === 200) {
    
    
                                // console.log(reg.data.token)
                                location.href = './02学生管理界面.html'
                                localStorage.setItem('token', reg.data.token)
                                return reg.data.token//登录成功返回身份令牌

                            } else {
    
    
                                alert('登录失败！')
                                return null


                            }
                        }
                    })
                })
            }
        })


    </script>
</head>

<body>

    <div class="login">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">用户登录</h3>
            </div>
            <form class="panel-body" id="formLogin">
                <div class="input-group">
                    <div class="input-group-addon">账号</div>
                    <input type="text" class="form-control" name="username" placeholder="请输入账号">
                </div>
                <div class="input-group">
                    <div class="input-group-addon">密码</div>
                    <input type="password" class="form-control" name="password" placeholder="请输入密码">
                </div>
                <button type="submit" class="btn btn-primary">登录</button>

            </form>
        </div>
    </div>


</body>

</html>

学生管理页面:

<!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>02学生管理界面</title>
    <link rel="stylesheet" href="bootstrap.min.css">
    <script src="jquery.min.js"></script>
    <script src="bootstrap.min.js"></script>
    <style>
        th,
        td {
    
    
            text-align: center;
        }
    </style>
    <script>
        $(function () {
    
    
            // 渲染页面
            getStuList()

            // 获取身份令牌
            const token = localStorage.getItem('token')


            // 点击添加学生(模态框这里用的有问题！！！)
            $('#btnAdd').on('click', function () {
    
    
                $('#myModalAdd').modal()
                //获取表单数据(新增学生信息data)
                $('#formAdd').on('submit', function (e) {
    
    
                    e.preventDefault()
                    // 还可以对用户的输入进行限制(不能为空等)
                    const data = {
    
    
                        stuaddess: $('#formAdd input[name=stuaddess]').val(),
                        stugender: $('#formAdd input[name=stugender]').val(),
                        stugrade: $('#formAdd input[name=stugrade]').val(),
                        stumajor: $('#formAdd input[name=stumajor]').val(),
                        stuname: $('#formAdd input[name=stuname]').val(),
                        stunative: $('#formAdd input[name=stunative]').val(),
                        stuno: $('#formAdd input[name=stuno]').val(),
                        stuphone: $('#formAdd input[name=stuphone]').val(),
                    }//data这时是JS对象
                    // 要转成JSON字符串
                    const t = JSON.stringify(data)
                    $.ajax({
    
    
                        type: 'POST',
                        url: 'http://114.67.241.121:8088/stu/add',
                        contentType: 'application/json',
                        headers: {
    
    
                            Authorization: token
                        },
                        data: t,//JSON格式
                        success: function (reg) {
    
    
                            if (reg.code === 200) {
    
    
                                console.log('添加成功！');
                            } else {
    
    
                                return alert('添加失败！')
                            }
                            // 重新渲染界面
                            getStuList()
                            // 表单清空
                            $('#formAdd')[0].reset()
                            $('#chadiao').click()
                        }
                    })
                })


            })
            $('#btnAddoff').on('click', function () {
    
    
                $('#formAdd')[0].reset()
                $('#myModalAdd #chadiao').click()
            })




            // 获取所有学生信息,渲染在页面上
            function getStuList() {
    
    
                const token = localStorage.getItem('token')
                $.ajax({
    
    
                    type: 'GET',
                    url: 'http://114.67.241.121:8088/stu/list',
                    // header请求头携带变量：Authorization???!!!
                    headers: {
    
    
                        'Authorization': token
                    },
                    data: {
    
    },
                    success: function (reg) {
    
    
                        // console.log(reg.data)
                        if (reg.code === 200) {
    
    //请求成功
                            // 先清空原来渲染的
                            $('tbody').empty()
                            $.each(reg.data, function (i, ele) {
    
    
                                // 再一一渲染在页面上
                                const tr = $(`
                            <tr>
                                <td>${
    
    ele.stuid}</td>
                                <td>${
    
    ele.stuno}</td>
                                <td>${
    
    ele.stuname}</td>
                                <td>${
    
    ele.stugender}</td>
                                <td>${
    
    ele.stugrade}</td>
                                <td>${
    
    ele.stumajor}</td>
                                <td>${
    
    ele.stuphone}</td>
                                <td>${
    
    ele.stuaddess}</td>
                                <td>${
    
    ele.stunative}</td>
                                <td><a href="javascript:;" data-idModify=${
    
    ele.stuid} id='modify'>修改</a></td>
                                <td><a href="javascript:;" data-id=${
    
    ele.stuid} id='move'>删除</a></td>
                            </tr>
                            `)
                                $('tbody').append(tr)
                            })
                        } else {
    
    
                            return alert('数据获取失败！')
                        }


                    }
                })
            }

            // 删除(删除完之后重新渲染)
            $('tbody').on('click', '#move', function () {
    
    
                const stuId = $(this).attr('data-id')
                $.ajax({
    
    
                    type: 'POST',
                    url: 'http://114.67.241.121:8088/stu/del?stuid=' + stuId,
                    contentType: 'application/json; charset=utf-8',
                    headers: {
    
    
                        Authorization: token
                    },
                    // data: stuId,
                    success: function (reg) {
    
    
                        if (reg.code === 200) {
    
    //删除成功
                            getStuList()
                        } else {
    
    
                            return alert('删除失败！')
                        }
                    }
                })

            })

            // 修改
            $('tbody').on('click', '#modify', function () {
    
    
                const stuId = $(this).attr('data-idModify')
                console.log(stuId);
                $('#myModalModify').modal()
                $('#formModify').on('submit', function (e) {
    
    
                    e.preventDefault()
                    // 还可以对用户的输入进行限制(不能为空等)
                    const data = {
    
    
                        stuaddess: $('#formModify input[name=stuaddess]').val(),
                        stugender: $('#formModify input[name=stugender]').val(),
                        stugrade: $('#formModify input[name=stugrade]').val(),
                        stumajor: $('#formModify input[name=stumajor]').val(),
                        stuname: $('#formModify input[name=stuname]').val(),
                        stunative: $('#formModify input[name=stunative]').val(),
                        stuno: $('#formModify input[name=stuno]').val(),
                        stuphone: $('#formModify input[name=stuphone]').val(),
                    }//data这时是JS对象
                    // 要转成JSON字符串
                    const t = JSON.stringify(data)
                    $.ajax({
    
    
                        type: 'POST',
                        url: 'http://114.67.241.121:8088/stu/edit',
                        contentType: 'application/json',
                        headers: {
    
    
                            Authorization: token
                        },
                        data: t,//JSON格式
                        success: function (reg) {
    
    
                            console.log(reg)
                            if (reg.code === 200) {
    
    
                                console.log('修改成功！');
                            } else {
    
    
                                return alert('修改失败！')
                            }
                            // 重新渲染界面
                            getStuList()
                            // 表单清空
                            $('#formModify')[0].reset()
                            $('#myModalModify #chadiao').click()
                        }
                    })
                })
            })

        })
    </script>
</head>

<body>

    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">学生管理</h3>
        </div>
        <div class="panel-body">
            <!-- 这里写个新增学生信息的模态框 -->
            <!-- 添加学生信息按钮 -->
            <button type="button" class="btn btn-success" id="btnAdd">添加</button>


            <!-- 这里是添加模态框 -->
            <div class="modal fade" id="myModalAdd" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <!-- 这里是模态框标题 -->
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                    aria-hidden="true" id="chadiao">&times;</span></button>
                            <h4 class="modal-title" id="myModalLabel">添加学生信息</h4>
                        </div>
                        <!-- 这里是模态框内表单内容 -->
                        <div class="modal-body">
                            <form id="formAdd">
                                <div class="input-group">
                                    <div class="input-group-addon">学号</div>
                                    <input type="text" class="form-control" placeholder="请输入学号" name="stuno">
                                </div>
                                <div class="input-group">
                                    <div class="input-group-addon">姓名</div>
                                    <input type="text" class="form-control" placeholder="请输入姓名" name="stuname">
                                </div>
                                <div class="input-group">
                                    <div class="input-group-addon">性别</div>
                                    <input type="text" class="form-control" placeholder="请输入性别" name="stugender">
                                </div>
                                <div class="input-group">
                                    <div class="input-group-addon">年级</div>
                                    <input type="text" class="form-control" placeholder="请输入年级" name="stugrade">
                                </div>
                                <div class="input-group">
                                    <div class="input-group-addon">专业</div>
                                    <input type="text" class="form-control" placeholder="请输入专业" name="stumajor">
                                </div>
                                <div class="input-group">
                                    <div class="input-group-addon">联系电话</div>
                                    <input type="text" class="form-control" placeholder="请输入联系电话" name="stuphone">
                                </div>
                                <div class="input-group">
                                    <div class="input-group-addon">住址</div>
                                    <input type="text" class="form-control" placeholder="请输入住址" name="stuaddess">
                                </div>
                                <div class="input-group">
                                    <div class="input-group-addon">户籍</div>
                                    <input type="text" class="form-control" placeholder="请输入户籍" name="stunative">
                                </div>
                                <!-- 这里是表单内关闭/保存按钮 -->
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" id="btnAddoff">关闭</button>
                                    <button type="submit" class="btn btn-primary" id="btnAddSave">保存</button>
                                </div>
                            </form>
                        </div>

                    </div>
                </div>
            </div>

            <!-- 这里是修改模态框 -->
            <div class="modal fade" id="myModalModify" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <!-- 这里是模态框标题 -->
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                    aria-hidden="true" id="chadiao">&times;</span></button>
                            <h4 class="modal-title" id="myModalLabel">修改学生信息</h4>
                        </div>
                        <!-- 这里是模态框内表单内容 -->
                        <div class="modal-body">
                            <form id="formModify">
                                <div class="input-group">
                                    <div class="input-group-addon">学号</div>
                                    <input type="text" class="form-control" placeholder="请输入学号" name="stuno">
                                </div>
                                <div class="input-group">
                                    <div class="input-group-addon">姓名</div>
                                    <input type="text" class="form-control" placeholder="请输入姓名" name="stuname">
                                </div>
                                <div class="input-group">
                                    <div class="input-group-addon">性别</div>
                                    <input type="text" class="form-control" placeholder="请输入性别" name="stugender">
                                </div>
                                <div class="input-group">
                                    <div class="input-group-addon">年级</div>
                                    <input type="text" class="form-control" placeholder="请输入年级" name="stugrade">
                                </div>
                                <div class="input-group">
                                    <div class="input-group-addon">专业</div>
                                    <input type="text" class="form-control" placeholder="请输入专业" name="stumajor">
                                </div>
                                <div class="input-group">
                                    <div class="input-group-addon">联系电话</div>
                                    <input type="text" class="form-control" placeholder="请输入联系电话" name="stuphone">
                                </div>
                                <div class="input-group">
                                    <div class="input-group-addon">住址</div>
                                    <input type="text" class="form-control" placeholder="请输入住址" name="stuaddess">
                                </div>
                                <div class="input-group">
                                    <div class="input-group-addon">户籍</div>
                                    <input type="text" class="form-control" placeholder="请输入户籍" name="stunative">
                                </div>
                                <!-- 这里是表单内关闭/保存按钮 -->
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" id="btnModifyoff">关闭</button>
                                    <button type="submit" class="btn btn-primary" id="btnModifySave">保存</button>
                                </div>
                            </form>
                        </div>

                    </div>
                </div>
            </div>


            <!-- 这里再来个查询的输入框，做过滤查询(可能要用到浮动) -->

            <!-- table -->
            <table class="table table-bordered table-hover table-responsive">
                <thead>
                    <tr class="active">
                        <th>id</th>
                        <th>学号</th>
                        <th>姓名</th>
                        <th>性别</th>
                        <th>年级</th>
                        <th>专业</th>
                        <th>联系电话</th>
                        <th>住址</th>
                        <th>户籍</th>
                        <th colspan="2">操作</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td><a href="javascript:;">修改</a></td>
                        <td><a href="javascript:;">删除</a></td>
                    </tr> -->
                </tbody>
            </table>
        </div>


    </div>



</body>

</html>

文档: http://doc.wuguokai.cn/s/xPq1iNw_v
http://chat4.wuguokai.cn
79783435
https://blog.csdn.net/u010436243/article/details/130155724

猜你喜欢

转载自blog.csdn.net/ailaohuyou211/article/details/130307332
今日推荐
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
报告：Django 仍然是 74% 开发者的首选
《2024 年一季度互联网投融资运行情况》研究报告
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
周排行
BPM为企业带来的实际利益
好程序员web前端分享css常用属性缩写
Java文件下载（excel）
css样式的动态添加及显示和隐藏等零碎用法
axios全局配置以及拦截器
使用Logstash来实时同步MySQL和log日志数据到ES
C++获取当前时间（年月日、时分秒、毫秒）
Odoo产品分析 (四) -- 工具板块(11) -- 网站即时聊天(1)
Java环境配置正确，但是java、javac、java -version均返回“不是内部或外部命令，也不是可运行的程序或批处理文件”？
01 官网下载各种CentOS教程（超详细版）
每日归档
更多
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022