项目环境搭建
序列化问题
为什么序列化?
需求: 有时项目调用时需要进行远程过程调用(RPC) A系统中需要B系统的User数据.由于是不同的2个系统,所以需要通讯协议(http/https/tcp/udp…)的支持.
问题: 由于user对象可以通过协议进行网络传输. 如果保证B系统中传递的User数据,到了A系统中也能正常的识别!!! (保证数据的准确性!!!)
电影(恶心类型): 变蝇人
序列化结构
序列化: 将对象按照特定的字节顺序 进行排列.
反序列化: 将一段字节信息,按照特定的格式顺序读取 ,将字节信息转化为对象的过程.
序列化代码
代码层级结构
浏览器F12说明
1.console 一般可以查看js中输出的日志
2.network 检查URL请求路径/参数/请求状态是否正确
用户新增入库
编辑HTML页面
编辑一个form表单,实现数据提交
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo练习</title>
</head>
<body>
<!-- action: 数据向哪里提交 一般写服务器路径
method: 一般数据提交 采用post请求
-->
<h1>用户新增表单</h1>
<form action="http://localhost:8090/addUser" method="post">
名称: <input type="text" name="name"/> <br>
年龄: <input type="text" name="age"/> <br>
性别: <input type="text" name="sex"/> <br>
<input type="submit" value="新增"/>
</form>
</body>
</html>
编辑UserController
@RestController
public class UserController {
@Autowired
private UserService userService;
/**
* URL: /addUser
* method: post
* 参数: form表单传参 name/age/sex
* 返回值: 返回成功的字符信息
*/
@PostMapping("/addUser")
public String addUser(User user){
userService.addUser(user);
return "新增成功!!";
}
}
编辑UserService
@Service
public class UserServiceImpl implements UserService{
@Autowired
private UserMapper userMapper;
@Override
public void addUser(User user) {
userMapper.insert(user);
}
}
form表单提交的说明
说明:通过form表单中的action属性 可以实现数据的远程传输. 当点击form表单的提交按钮时,页面会发生同步的跳转.将数据直接发送给后端服务器. 该请求是同步的请求方式.
结论: 同步请求 不需要添加跨域的注解.
下载jQuery函数类库
Ajax介绍
介绍
Ajax即Asynchronous Javascript And XML(异步JavaScript和XML)在 2005年被Jesse James Garrett提出的新术语,用来描述一种使用现有技术集合的‘新’方法,包括: HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的XMLHttpRequest。 [3] 使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上,而不需要重载(刷新)整个页面,这使得程序能够更快地回应用户的操作。 [3]
总结: 局部刷新,异步访问
同步请求
知识铺垫: 同步问题
角色: 1.用户 2.服务提供者
同步请求缺点: 当后端服务器不能及时处理请求时,用户处于等待的状态,而页面处于刷新状态.
用户体验差.
异步请求
同步: 用户直接访问服务器.
异步: 用户间接访问服务器 用户在等待数据的过程中,还可以执行其他的业务操作.
请求过程:
1.用户将请求交给Ajax引擎处理. (请求)
2.Ajax引擎接收到用户请求之后,自己发起新的URL请求,向服务器获取数据.
3.服务器接收到请求之后,根据自身进行业务处理,最终将结果返回 返回给引擎.
4.Ajax引擎通过事先规定好的 回调函数实现返回值的传递. 当用户获取返回值之后,则开始调用函数中的内容.
局部刷新
获取用户列表数据
编辑UserController
/**
* 查询User表的全部数据
* 请求路径: http://localhost:8090/getUser
* 参数: 不需要参数
* 返回值: List<User>
*/
@GetMapping("/getUser")
public List<User> getUser(){
List<User> userList = userService.getUser();
return userList;
}
编辑UserService
通过MP获取后端数据集合
@Override
public List<User> getUser() {
return userMapper.selectList(null);
}
同步访问页面效果
说明:通过localhost:8090/getUser 同步的方式可以获取user的JSON数据信息
用户列表前端实现
循环写法
基本for循环
//js 实现for循环
for(var i=0;i<data.length;i++){
var user = data[i]
console.log(user)
}
循环写法-in
in 关键字 in 表示便利的是下标
for(var index in data){
console.log(data[index])
}
编辑userList.html页面
发起Ajax请求,动态获取后端服务器数据,之后通过JS进行数据解析,之后通过表格展现数据
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>用户列表展现</title>
<!-- 1.导入JS函数类库 -->
<script src="jquery-3.6.0.min.js"></script>
<!-- 2.编辑JS发起Ajax请求 -->
<script>
//循环写法
/**
* //js 实现for循环
for(var i=0;i<data.length;i++){
var user = data[i]
console.log(user)
}
in关键字 index代表下标
for(var index in data){
console.log(data[index])
}
//增强for写法 of 表示直接获取遍历内容
for(var user of data){
console.log(user)
}
*/
//让页面加载完成之后再次执行
//语法: 函数式编程
$(function(){
//alert("页面加载完成,jQuery调用成功!!!!")
//利用Ajax的get请求方式
//http://localhost:8090/getUser 全部数据
//将数据以表格的形式展现
//种类: 1.$.get() 2.$.post() 3.$.getJSON() 4.$.ajax()
//js中可以根据返回值的数据动态匹配类型
//$.get("url地址","参数",function(data){},"返回值类型")
var name = "张三"
var age = 18
//参数写法1: key=value&key2=value2
var args1 = "name="+name + "&age="+age
//参数写法: {key:value,key2:value2}
var args2 = {
name:name,age:age}
//如果有参数,则直接添加,如果没有参数,则直接省略
var url = "http://localhost:8090/getUser";
$.get(url,function(data){
//增强for写法 of 表示直接获取遍历内容
for(var user of data){
var id = user.id
var name = user.name
var age = user.age
var sex = user.sex
var tr = "<tr align='center'><td>"+id+"</td><td>"+name+"</td><td>"+age+"</td><td>"+sex+"</td></tr>"
//利用ID选择器定位table标签
//append 向每个匹配的元素内部追加内容。
$("#tab1").append(tr)
}
})
})
</script>
</head>
<body>
<table id="tab1" border="1px" width="700px" align="center">
<tr>
<td colspan="4" align="center"><h1>表格数据</h1></td>
</tr>
<tr align="center">
<td>ID编号</td>
<td>名称</td>
<td>年龄</td>
<td>性别</td>
</tr>
</table>
</body>
</html>