随便取个名字_哈哈的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头像
最近浏览
taoshen95  LV14 2023年4月13日
Aweiii  LV2 2023年1月5日
weixiao  LV6 2022年10月23日
城街老酒 2022年8月30日
暂无贡献等级
406503223  LV5 2022年7月13日
858508237 2022年7月1日
暂无贡献等级
zjw1997 2022年4月30日
暂无贡献等级
youwuzuichen  LV10 2022年3月17日
longhong1234 2022年2月23日
暂无贡献等级
zh12346600 2022年2月18日
暂无贡献等级
顶部 客服 微信二维码 底部
>扫描二维码关注最代码为好友扫描二维码关注最代码为好友