其他分享
首页 > 其他分享> > 单页CRUD的全栈案例:后台管理页面

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

作者:互联网

技术实现

springboot+mybatisplus+lombok+vue+element+axios

案例结构

数据属性绑定层面

数据库与domain绑定

设置自动填充当前时间
domain

前端属性和domain统一

名字和domain统一

R类的前后端交互

后端传给前端的是一个R对象,并且需要前端对R对象进行判断解析
R类属性:flag\data\msg

后端控制层

返回R对象,设置属性

前端视图层

res.data==R

异常处理拦截器

返回一个只设置msg的R对象

MybatisPlus:持久层+业务层


业务层需要重写分页查询

控制层调用业务层接口

调用业务层接口的方法间接操作数据库

前后端对应交互

分页查询Get

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

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

前端钩子函数

前端分页查+条件查

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

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

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

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

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

增Post

后端@RequestBody

前端formData:{}传对象

formData是对象

删Delete

后端:删只能通过ID删

不允许删除开发者

前端只管传id路径变量

改Put

后端:接受对象@RequestBody

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

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

绑定点击事件
重置表单,清除原有数据

交互:先读后改
dialogFormVisible4Edit = true后弹出表单,并读取数据

跳转到修改put方法

标签:分页,单页,前端,CRUD,查询,RequestBody,对象,全栈,变量
来源: https://blog.csdn.net/m0_56079407/article/details/122751417