前后端数据交互|分页查询|表格-双向绑定|get和post的区别

1 前后端数据交互

1.1 前端代码 部署在 前端服务器

1. 操作前端代码的平台：

vue
eclips
idea

2. 部署前端服务器的工具

vue内嵌服务器
rad中was(websphere application server)是部署服务器工具

1.2 前端代码 在 浏览器展示（只展示页面，没有数据）----自给自足

浏览器地址栏输入前端页面地址：127.0.0.1：8080/index （一般都是本地服务器IP+8080）

8080一般是tomcat的默认端口，3306一般是mysql的默认端口，都可以改的

1.3 前端/浏览器 请求 后端数据　(后端死数据)----给啥吃啥

前端/浏览器 请求 后端数据方式就一种：在浏览器输入地址

• 后端设定(访问地址)：某模块的某功能/地址的数据

@RestController
@RequestMapping("/ums-user")
public class UmsUserController {
    @Resource
    IUmsUserService userService;
    @GetMapping("/page")

    IPage page(){
             return userService.page(new Page<>(1,10));
         }
}

前端利用ajax（模拟浏览器发起访问，只拿数据）绑定(访问地址)：按需求绑定对应 后端地址

this.$axios.request({
					url: '106.55.165.94/8081/ums-user/page',
					method: 'get',
				}).then(response => {
					console.log(response)
				})

1.4 前端 请求 后端数据　(前端死数据，后端动态数据)----指定吃啥

前端：定义参数params，让ajax访问时携带参数
关键：前端参数名=后端接受参数的类的属性名

data(){
			return {
				params: {
					pageNo: 1,
					pageSize: 9
				}
			}
		},
create（）{
this.$axios.request({
					url: '/ums-user/page',
					method: 'get',
					params: this.params
				}).then(response => {
					console.log(response)
				})
		}		

后端：

1. 接受参数params，
2. 通过接收到指令（具体数据 赋值 给自己对应类的对应属性）， IPage方法中利用赋值参数查询数据库
   ▶特殊情况：该参数不属于数据库表里的字段，只作为参数接受： @TableField，防止mybits-plus错误查询数据库）==mybits-plus你不要管，我就是接受给参数，执行方法就行。
3. 返回查询数据库后的内容response给前端
   ▶ 特殊情况：直接赋值给方法

@Data
public class BasePojo {
    @TableField(exist = false)
    private Integer pageNo;
    @TableField(exist = false)
    private Integer pageSize;
}

IPage page(UmsUser umsUser){
             return userService.page(new Page<>(umsUser.getPageNo(),umsUser.getPageSize()));
         }

1.5 前端/浏览器 请求 后端数据　(前后端活数据)----随意指定都能吃

前端活：双向绑定

• 初始化状态：前端代码初始参数 让 浏览器页面展示初始数据 ；
• 变更时：浏览器页面变更内容 触发 前端代码变更参数值

后端活：后端代码 根据 前端传来不同参数，查询不同数据，返回给前端代码，最终显示到页面上

1.5.1 具体流程

用户操作浏览器，触发页面按钮----------按钮影响前端代码：前端传给后端的参数更改（初始状态：参数有默认值==用户能看到一个首页面数据，而不是什么都没有）-------后端根据参数查询，返回对应的数据
前端：（后端不变故无图）

【分页栏:样式，样式，绑定全部数据，当前页（双向绑定），变更事件】
<el-pagination
		background
		layout="prev,pager,next"
		:page-count="tableData.pages"
		:current-page.sync="params.pageNo"
		@current-change="getTableData"
></el-pagination>

data(){
			return {
				params: {
					pageNo: 1,
					pageSize: 10
				}
			}
		},
		created(){
			this.getTableData()
		},
		methods:{
			getTableData(){
				this.$axios.request({
					url: '/ums-user/page',
					method: 'get',
					params: this.params
				}).then(response => {
					this.tableData = response.data
					
				})
			}
		}

1.5.2 分页查询（后端：分页查询方法+前端：双向绑定，变更事件）

后端：
使用分页查询方法page-------需要参数：第几页，一页几条-------返回值：（数组，元素json）

前端：
块1：定义数据展现表格（表格栏名称 绑定 返回值属性名）
块2：定义分页栏-----只能显示样式

前端分页功能实现：（双向绑定，变更事件）
▶分页栏的每页，绑定，前端传给后端的参数之一pageNo==浏览器页面的变更 触发 前端代码变更（前端传给后端 参数变更）=》双向绑定。单向绑定=分页栏每页，都绑定初始时前端代码写的参数

【表格：双向绑定sync】
:current-page.sync="params.pageNo"

触发变更事件（代码标签 绑定 变更事件，检测到标签内容变化，就会执行事件）：每次参数变更，就会向后端发送一次请求，要数据

2 get和post的区别

2.1 前端访问后端就一种方法：浏览器输入后端地址

前端访问后端就一种方法：
浏览器输入后端地址
=实质：url+http与服务器交互方式（在前后端代码中）
=表达式：服务器IP/端口/项目名+交互方式
=表举例：哪栋楼/哪户/+取东西/放东西

2.2 URL资源描述符+http与服务器交互方式

URL全称：资源描述符。一个URL地址，就是描述一个网络上的资源
Http定义了与服务器交互的不同方法，最基本的方法有4种，分别是GET，POST，PUT，DELETE。这4个对应着对这个资源的查，改，增，删4个操作。

2.3 GET一般用于获取/查询资源信息，POST一般用于更新资源信息

GET一般用于获取/查询资源信息，而POST一般用于更新资源信息。
获取/查询信息 =传递1或很少的参数：通过id、name查找某条数据

2.3 以下情况用post

1. 无法使用缓存文件（更新服务器上的文件或数据库）
2. ==向服务器发送大量数据（POST 没有数据量限制） ==
3. 发送包含未知字符的用户输入时
4. POST 比 GET 更稳定、更可靠、安全性更高