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

单页CRUD的全栈案例:后台管理页面 技术实现

springboot+mybatisplus+lombok+vue+element+axios

数据属性绑定层面 数据库与domain绑定

前端属性和domain统一

R类的前后端交互

后端传给前端的是一个R对象，并且需要前端对R对象进行判断解析
R类属性：flagdatamsg

后端控制层

前端视图层

异常处理拦截器

MybatisPlus：持久层+业务层

控制层调用业务层接口

前后端对应交互 分页查询Get

一个页面要么不分页，要么分页，分页也只能使用同一个分页组件，即便是后面的条件查询，也必须在分页的基础上
像下面这种查完不分页的话，在前端是展示不出来的

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

前端钩子函数

前端分页查+条件查

前端data中定义的是一个变量，而不是对象，所以后端使用@PathVariable来接受

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

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

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

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

增Post 后端@RequestBody

前端formdata:{}传对象

删Delete 后端:删只能通过ID删

前端只管传id路径变量

改Put 后端：接受对象@RequestBody

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

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

dialogFormVisible4Edit = true后d出表单，并读取数据