html f12 修改 提交表单,MP更新操作 用户新增表单

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.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表单,实现数据提交

demo练习

用户新增表单 名称:

年龄:

性别:

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 userList = userService.getUser();

return userList;

}

2.8.2 编辑UserService

通过MP获取后端数据集合

@Override

public List 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

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进行数据解析,之后通过表格展现数据

用户列表展现

//循环写法

/**

* //js 实现for循环

for(var i=0;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 = "

"+id+""+name+""+age+""+sex+""

//利用ID选择器定位table标签

//append 向每个匹配的元素内部追加内容。

$("#tab1").append(tr)

}

})

})

表格数据
ID编号	名称	年龄	性别