web前端实验5
实 验 报 告
课 程 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"><spanaria-hidden="true" id="chadiao">×</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"><spanaria-hidden="true" id="chadiao">×</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
