MP更新操作 用户新增表单

1. MP 更新操作
   1.1 更新操作
   @SpringBootTest
   public class TestMP2 {

   @Autowired
   private UserMapper userMapper;

   /**

   • 将ID=229的用户名称 改为六一儿童节
     */
     @Test
     public void updateUser(){
     User user = new User();
     user.setId(229).setName(“六一儿童节”);
     //set name=“xxx” where id = 229
     userMapper.updateById(user);
     }

   /**

   • 更新操作2

   •  将name="六一儿童节" 改为"端午节"
     

   • 参数说明:

   •     1.实体对象  封装修改后的数据 set结构
     

   •     2.UpdateWrapper 修改的条件构造器
     

   • Sql: update demo_user set name=“端午节” where name=“61”
     */
     @Test
     public void updateUser2(){
     User user = new User();
     user.setName(“端午节”);
     UpdateWrapper updateWrapper = new UpdateWrapper();
     updateWrapper.eq(“name”, “六一儿童节”);
     userMapper.update(user,updateWrapper);
     }
     }

2. 项目环境搭建
   2.1 序列号问题
   2.1.1 为什么序列化
   需求: 有时项目调用时需要进行远程过程调用(RPC) A系统中需要B系统的User数据.由于是不同的2个系统,所以需要通讯协议(http/https/tcp/udp…)的支持.
   问题: 由于user对象可以通过协议进行网络传输. 如果保证B系统中传递的User数据,到了A系统中也能正常的识别!!! (保证数据的准确性!!!)
   电影(恶心类型): 变蝇人

2.1.2 序列化结构
序列化: 将对象按照特定的字节顺序 进行排列.
反序列化: 将一段字节信息,按照特定的格式顺序读取 ,将字节信息转化为对象的过程.
在这里插入图片描述

2.1.3 序列化代码
在这里插入图片描述

2.2 代码层级结构
在这里插入图片描述

2.3 浏览器F12说明
在这里插入图片描述

2.4 用户新增入库
2.4.1 编辑html页面
编辑一个form表单,实现数据提交

用户新增表单

名称:
年龄:
性别:

2.4.2 编辑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 "新增成功!!";
}

}
2.4.3 编辑UserService
@Service
public class UserServiceImpl implements UserService{

@Autowired
private UserMapper userMapper;

@Override
public void addUser(User user) {
    userMapper.insert(user);
}

}
2.5 form表单提交的说明
说明: 通过form表单中的action属性 可以实现数据的远程传输. 当点击form表单的提交按钮时,页面会发生同步的跳转.将数据直接发送给后端服务器. 该请求是同步的请求方式.
结论: 同步请求 不需要添加跨域的注解.
在这里插入图片描述

2.6 下载jQuery函数类库
在这里插入图片描述

2.7 Ajax介绍
2.7.1 介绍
Ajax即Asynchronous Javascript And XML（异步JavaScript和XML）在 2005年被Jesse James Garrett提出的新术语，用来描述一种使用现有技术集合的‘新’方法，包括: HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的XMLHttpRequest。 [3] 使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面，这使得程序能够更快地回应用户的操作。 [3]
总结: 局部刷新,异步访问

2.7.2 同步请求
知识铺垫: 同步问题
角色: 1.用户 2.服务提供者
同步请求缺点: 当后端服务器不能及时处理请求时,用户处于等待的状态,而页面处于刷新状态.
用户体验差.
在这里插入图片描述

2.7.3 异步请求
同步: 用户直接访问服务器.
异步: 用户间接访问服务器 用户在等待数据的过程中,还可以执行其他的业务操作.
请求过程:
1.用户将请求交给Ajax引擎处理. (请求)
2.Ajax引擎接收到用户请求之后,自己发起新的URL请求,向服务器获取数据.
3.服务器接收到请求之后,根据自身进行业务处理,最终将结果返回 返回给引擎.
4.Ajax引擎通过事先规定好的 回调函数实现返回值的传递. 当用户获取返回值之后,则开始调用函数中的内容.
局部刷新
在这里插入图片描述

2.8 获取用户列表数据
2.8.1 编辑UserController
/**
* 查询User表的全部数据
* 请求路径: http://localhost:8090/getUser
* 参数: 不需要参数
* 返回值: List
*/
@GetMapping("/getUser")
public List getUser(){

    List<User> userList = userService.getUser();
    return userList;
}

2.8.2 编辑UserService
通过MP获取后端数据集合

 @Override
public List<User> getUser() {

    return userMapper.selectList(null);
}

2.8.3 同步访问页面效果
说明: 通过localhost:8090/getUser 同步的方式可以获取user的JSON数据信息
在这里插入图片描述

2.9 用户列表前端实现
2.9.1 循环写法
2.9.1.1 基本for循环
//js 实现for循环
for(var i=0;i<data.length;i++){
var user = data[i]
console.log(user)
}
2.9.1.2 循环写法-in
in关键字 in 表示遍历的是下标

				for(var index in data){
					
					console.log(data[index])
				}

2.9.1.3 循环写法-of
增强for写法 of 表示直接获取遍历内容

//增强for写法 of 表示直接获取遍历内容
for(var user of data){
	
	console.log(user)
}

2.9.2 编辑userList.html页面
发起Ajax请求,动态获取后端服务器数据,之后通过JS进行数据解析,之后通过表格展现数据

	<!-- 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>