三阶段Day06

1. Ajax异步调用-POST

1.1 对象提交

1.1.1 页面JS

1.首先封装数据.利用JS对象将数据进行包裹.
2.利用post请求,将JS对象进行发送.

1.1.2 请求数据说明

说明: 数据经过http协议进行传输,则数据由原来的JS对象 变为了有特殊格式意义的JSON串.

1.1.3 编辑POJO对象

说明: 标识主键自增.

1.1.4 编辑后端Controller

1.1.5 编辑后端Service

1.2 restFul风格实现用户新增

1.2.1 编辑页面JS

1.2.2 编辑UserController

2. 简化Axios调用

2.1 设定公共的请求路径

2.1.1 需求说明

说明: 由于ajax异步请求,其中每次都需要编辑完整的请求路径.如果请求个数较多,则写法上较为繁琐.

 解决方案: 将公共的请求路径单独进行抽取.

2.1.2 实现路径的封装

2.2 解构赋值操作

2.3 简化用户列表展现

2.3.1 设定基本请求路径

2.3.2 简化userList获取

2.3.3 简化删除操作

2.4 用户新增操作

2.4.1 编辑页面

定义标签: 实现新增用户的双向数据绑定

2.4.2 定义新增属性

2.4.3 定义方法实现

按照axios实现用户数据新增. 由于新增后端之前已经完成.所以这里省略

 

2.5 用户修改回显

2.5.1 编辑修改页面

2.5.2 定义修改属性

2.5.3 为修改按钮添加事件

2.5.4 实现数据回显

2.6 用户数据修改

2.6.1 修改按钮添加点击事件

2.6.2 编辑修改函数

2.6.3 编辑后端Controller

2.6.4 编辑后端Service

2.7 编辑关于请求参数说明

2.7.1 get/delete请求说明

说明: GET/DELETE参数是 KEY=VALUE结构,如果传递多个数据,则通过&方式进行拼接.
URL: HTTP://localhost:8090/getUser?id=1&name="tomcat"
后端接收: public List getUserByNS(User user){}
数据的转化:
1.用户调用请求.
2.user对象需要在内存中实例化(空对象)
3.SpringMVC框架.为对象的属性赋值, id=1&name=“tomcats” 根据key 调用对象身上的set方法.最终可以为属性赋值.

2.7.2 post/put请求说明

URL: HTTP://localhost:8090/saveUser
参数:
1. jQuery的ajax 如果进行post请求,数据的结构 KEY1=VALUE1,KEY2=VALUE2 k-v结构,后端直接利用对象接收(set方法)
2. axios的ajax 写的JS对象/网络传输时JSON串 结构 “{key:value,key2:value2}”
如果后端需要为对象赋值,json串无法直接转化对象. SpringMVC针对于这个问题.开发了@RequestBody注解.注解解决json串转化为对象的问题.
 

2.8 v-for循环遍历说明

说明:在循环遍历时会在虚拟DOM对象中保存遍历的数据,方便用户对数据进行操作