随便取个名字_哈哈的gravatar头像
随便取个名字_哈哈2021-09-07 21:55:55
记录一次使用vuecli+elementui+springboot+mybatisplus从0开始的前后端分离的增删改查系统

四个步骤:

一、确立前端布局,做好静态页面

二、后端springboot搭建、mybatisplus配置

三、封装axios请求

四、将接口封装成函数,用的时候直接调用

 

一、确立前端布局,做好静态页面

记录一次使用vuecli+elementui+springboot+mybatisplus从0开始的前后端分离的增删改查系统

整个布局分为三部分,头部,左侧菜单栏,内容区

将这三部分,分别拆成三个组件,然后,在一个vue中如Layout.vue,拼装这三个组件Layout.vue代码如下:

记录一次使用vuecli+elementui+springboot+mybatisplus从0开始的前后端分离的增删改查系统设置路由,默认根路径就指向这个Layout,Layout里面,默认指向home这个组件,代码如下:

记录一次使用vuecli+elementui+springboot+mybatisplus从0开始的前后端分离的增删改查系统

左侧菜单,当用户点击哪个路由,右侧内容区就出现哪个组件页面,代码如下,path是当前的路由路径

记录一次使用vuecli+elementui+springboot+mybatisplus从0开始的前后端分离的增删改查系统

至此,vue静态页面已经构建成功

 

二、后端springboot搭建、mybatisplus配置

用新建springboot项目:

记录一次使用vuecli+elementui+springboot+mybatisplus从0开始的前后端分离的增删改查系统

使用maven加入mybatisplus、log4j2等依赖

配置log4j2,并把log4j2的文件,配置到application.yml

记录一次使用vuecli+elementui+springboot+mybatisplus从0开始的前后端分离的增删改查系统

配置mybatisplus分页插件

记录一次使用vuecli+elementui+springboot+mybatisplus从0开始的前后端分离的增删改查系统

配置跨域

记录一次使用vuecli+elementui+springboot+mybatisplus从0开始的前后端分离的增删改查系统

使用mybatisplus插件,生成代码

记录一次使用vuecli+elementui+springboot+mybatisplus从0开始的前后端分离的增删改查系统

记录一次使用vuecli+elementui+springboot+mybatisplus从0开始的前后端分离的增删改查系统

后台接口的编写:

1. 分页查询:

后台定义了接口,需要前端传入当前页,页面做多容纳量,前端的搜索框内容

记录一次使用vuecli+elementui+springboot+mybatisplus从0开始的前后端分离的增删改查系统

记录一次使用vuecli+elementui+springboot+mybatisplus从0开始的前后端分离的增删改查系统

记录一次使用vuecli+elementui+springboot+mybatisplus从0开始的前后端分离的增删改查系统

三、封装axios请求

将axios封装到requests.js中,可以在这里,配置request(请求)和response(相应)拦截,由于暂时还没有使用jwt,所有,对request(请求)和response(相应)都没有做什么处理。

记录一次使用vuecli+elementui+springboot+mybatisplus从0开始的前后端分离的增删改查系统

四、将接口封装成函数,用的时候直接调用

使用user.js,定义用户增删改查的四个方法

记录一次使用vuecli+elementui+springboot+mybatisplus从0开始的前后端分离的增删改查系统User.vue代码如图所示,data属性动态绑定了tableData,tableData是数据源,el-table-column是数据源里面对应的字段,使用v-if判断role的值,根据role值不同,显示不同的字符串。

记录一次使用vuecli+elementui+springboot+mybatisplus从0开始的前后端分离的增删改查系统分页查询和搜索:

使用findPageUsers方法,传入当前页,当前页容纳量,搜索内容,res是返回值,返回数据后,this.loading=false,表示不会在转圈,把后台的数据赋值给表格数据源:tableData,把数据总条数赋值给total

记录一次使用vuecli+elementui+springboot+mybatisplus从0开始的前后端分离的增删改查系统

 

增加/修改对应的弹出框,增加和修改共用一个dialog的好处是,增强代码的复用性,:tiltle代表的是动态绑定了一个topTitle,title的值由topTitle决定,v-model是双向绑定,dialogVisible默认是false,不显示的,formObj是整个表的表单对象数据,表单的子元素使用formObj.xxx,这样做的好处是当表单子元素填入值时,会影响整改formObj的数据,

记录一次使用vuecli+elementui+springboot+mybatisplus从0开始的前后端分离的增删改查系统

当点击新增时,触发add函数,代码如下,将dialogVisible改为true,显示,topTitle标题改为增加,清空formObj

记录一次使用vuecli+elementui+springboot+mybatisplus从0开始的前后端分离的增删改查系统

 

当点击修改是,触发handEdit函数,代码如下,将dialogVisible改为true,显示,topTitle标题改为修改,并且,将数据使用深拷贝拷贝到formObj这个表单对象数据中,之所以不直接赋值,是因为如果直接赋值了,当修改修改对话框的值时,还没提交,就会改变表格的这行值,因为数据的双向绑定作用。

记录一次使用vuecli+elementui+springboot+mybatisplus从0开始的前后端分离的增删改查系统

 

不管是修改还是增加,都会进入到el-dialog那个界面,这个时候,在提交(save函数完成之前,要判断,使用的是增加还是修改,如果form有id,说明是修改,如果form没有id,说明是增加),分别调用不同的api接口,获取数据,当后台返回code的值为0时,代表操作成功。

记录一次使用vuecli+elementui+springboot+mybatisplus从0开始的前后端分离的增删改查系统

 

后台增加和修改的接口如下图:

记录一次使用vuecli+elementui+springboot+mybatisplus从0开始的前后端分离的增删改查系统

 

本次增删改查的效果图如图所示:

记录一次使用vuecli+elementui+springboot+mybatisplus从0开始的前后端分离的增删改查系统

记录一次使用vuecli+elementui+springboot+mybatisplus从0开始的前后端分离的增删改查系统

记录一次使用vuecli+elementui+springboot+mybatisplus从0开始的前后端分离的增删改查系统

记录一次使用vuecli+elementui+springboot+mybatisplus从0开始的前后端分离的增删改查系统


打赏

已有2人打赏

wxd1997的gravatar头像最代码官方的gravatar头像
最近浏览
lihaoSmall11月30日
暂无贡献等级
xinyong11月26日
暂无贡献等级
JediMaster LV111月25日
星星
qqdasa LV911月24日
月亮月亮星星
feel11月24日
暂无贡献等级
暂无贡献等级
.11月20日
暂无贡献等级
zahngyongbo11月11日
暂无贡献等级
wxd1997 LV1211月10日
月亮月亮月亮
c123456x LV211月9日
星星星星
顶部客服微信二维码底部
>扫描二维码关注最代码为好友扫描二维码关注最代码为好友