单页CRUD的全栈案例:后台管理页面

技术实现

springboot+mybatisplus+lombok+vue+element+axios

单页CRUD的全栈案例:后台管理页面

数据属性绑定层面

数据库与domain绑定

单页CRUD的全栈案例:后台管理页面
单页CRUD的全栈案例:后台管理页面

前端属性和domain统一

单页CRUD的全栈案例:后台管理页面

R类的前后端交互

后端传给前端的是一个R对象,并且需要前端对R对象进行判断解析
R类属性:flag\data\msg
单页CRUD的全栈案例:后台管理页面

后端控制层

单页CRUD的全栈案例:后台管理页面

前端视图层

单页CRUD的全栈案例:后台管理页面

异常处理拦截器

单页CRUD的全栈案例:后台管理页面

MybatisPlus:持久层+业务层

单页CRUD的全栈案例:后台管理页面
单页CRUD的全栈案例:后台管理页面

单页CRUD的全栈案例:后台管理页面

控制层调用业务层接口

单页CRUD的全栈案例:后台管理页面

前后端对应交互

分页查询Get

一个页面要么不分页,要么分页,分页也只能使用同一个分页组件,即便是后面的条件查询,也必须在分页的基础上
像下面这种查完不分页的话,在前端是展示不出来的
单页CRUD的全栈案例:后台管理页面

后端@GetMapping("{currentPage}/{pageSize}")

单页CRUD的全栈案例:后台管理页面

前端钩子函数

单页CRUD的全栈案例:后台管理页面

前端分页查+条件查

单页CRUD的全栈案例:后台管理页面前端data中定义的是一个变量,而不是对象,所以后端使用@PathVariable来接受单页CRUD的全栈案例:后台管理页面

条件查询传路径变量or对象?

因为这个案例的查询需求是“只要求从ID查询”,所以这里get的第三个参数可以只传一个路径变量this.searchById,后端通过@PathVariable Integer id来接受参数

如果是需要多条件查,可以通过多个路径变量@PathVariable
多条件查如果条件过多,最好直接传一个对象,让后端处理

但是get方法是不能搭配@RequestBody的,后端直接不要用@RequestBody

增Post

后端@RequestBody

单页CRUD的全栈案例:后台管理页面

前端formData:{}传对象

单页CRUD的全栈案例:后台管理页面

单页CRUD的全栈案例:后台管理页面

删Delete

后端:删只能通过ID删

单页CRUD的全栈案例:后台管理页面

前端只管传id路径变量

单页CRUD的全栈案例:后台管理页面

改Put

后端:接受对象@RequestBody

单页CRUD的全栈案例:后台管理页面

前端获取待编辑的数据是不需要分页查询的,因此下面的“非分页条件查询id”是必不可少的

单页CRUD的全栈案例:后台管理页面

前端:对于改的逻辑比后端复杂

单页CRUD的全栈案例:后台管理页面
单页CRUD的全栈案例:后台管理页面

单页CRUD的全栈案例:后台管理页面
dialogFormVisible4Edit = true后弹出表单,并读取数据
单页CRUD的全栈案例:后台管理页面
单页CRUD的全栈案例:后台管理页面

上一篇:MySQL总结


下一篇:这么简单的问题面试时都答不出,还以为你多牛逼呢...