Experiment report
Course Web front-end application development experiment project Jquery AJAX programming grade
Professional class serial number Instructor
name student number Experiment date
Experiment purpose and requirements:
(1) Understand and master the get method request of Jquery AJAX
(2) Understand and master Jquery AJAX (3) Understand and master the front-end and back -
end data interaction requests of vue axios
Server interface test address:
http://114.67.241.121:8088/swagger-ui.html
Interface instructions:
Click "User Login" under "User Management", "try it out"
Enter the interface parameter username:admin password:123456. click execute
View the returned results, token is the identity token of the current user
Copy the identity token, click "Authorization" in the upper right corner of the page, paste it and click the button "Authorize"
Click "Close" to close the popup.
Test other interfaces, enter relevant parameters, and click "execute" to run normally.
Experimental content:
1. Design the login interface, enter the account number and password (test account: admin password: 123456), and then call the server Api interface for identity verification. If the login is successful, the returned identity token will be recorded, and if the login fails, a corresponding feedback prompt will be given.
Interface address: http://114.67.241.121:8088/user/login
Request method: post
Interface parameters
Return data
run screenshot
code:
2. Log in successfully to enter the student management interface, call the Api interface to obtain all student information, and design the interface to load and display data.
Interface address: http://114.67.241.121:8088/stu/list
Request method: get
Request header:
header request header carries variable: Authorization
header request header carries variable value: token identity order recorded by successful login Brand
Interface parameters: none
Return data
The request header does not carry the token returned by successful login
The token identity token of the currently logged-in user is carried in the request header
run screenshot
code:
3. Click the "Add" button to enter the adding interface. After completing the input of relevant information, call the Api interface to save the data information.
Interface address: http://114.67.241.121:8088/stu/add
Request method: post
Request header
header carrying variable: Authorization
header request header carrying variable value: token identity token recorded successfully
Interface parameters
Return results
run screenshot
code:
4. Click the "Modify" button to enter the modification interface, read the current student information, enter the modified data and save to complete the data update.
Interface address: http://114.67.241.121:8088/stu/edit
Request method: post
Request header
request header carries variable: Authorization
header request header carries variable value: token identity token recorded by successful login
Interface parameters
Return results
run screenshot
code:
5. Click the "Delete" button to request the server to delete the data interface. After the server data is successfully deleted, the data row in the table will be removed.
Interface address: http://114.67.241.121:8088/stu/del
Request method: Post
Request header
request header carries variable: Authorization
header request header carries variable value: token identity token recorded by successful login
Interface parameters
Return results
run screenshot
code:
This experiment year used jquery, ajax and bootstrap. The project directory structure is as follows:
Login page:
<!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>
Student Management Page:
<!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">×</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">×</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