单页CRUD的全栈案例:后台管理页面
作者:互联网
技术实现
springboot+mybatisplus+lombok+vue+element+axios
数据属性绑定层面
数据库与domain绑定
前端属性和domain统一
R类的前后端交互
后端传给前端的是一个R对象,并且需要前端对R对象进行判断解析
R类属性:flag\data\msg
后端控制层
前端视图层
异常处理拦截器
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后弹出表单,并读取数据
标签:分页,单页,前端,CRUD,查询,RequestBody,对象,全栈,变量 来源: https://blog.csdn.net/m0_56079407/article/details/122751417