项目环境搭建

序列化问题

为什么序列化？

需求: 有时项目调用时需要进行远程过程调用(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>

页面效果

在这里插入图片描述

Java学习笔记----利用MP获取数据并在浏览器可视化

项目环境搭建

序列化问题

为什么序列化？

序列化结构

序列化代码

代码层级结构

浏览器F12说明

用户新增入库

编辑HTML页面

编辑UserController

编辑UserService

form表单提交的说明

下载jQuery函数类库

Ajax介绍

介绍

同步请求

异步请求

获取用户列表数据

编辑UserController

编辑UserService

同步访问页面效果

用户列表前端实现

循环写法

基本for循环

循环写法-in

编辑userList.html页面

页面效果

猜你喜欢