四个步骤：

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

二、后端springboot搭建、mybatisplus配置

三、封装axios请求

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

 

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

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

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

设置路由，默认根路径就指向这个Layout，Layout里面，默认指向home这个组件，代码如下：

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

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

 

二、后端springboot搭建、mybatisplus配置

用新建springboot项目：

使用maven加入mybatisplus、log4j2等依赖

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

配置mybatisplus分页插件

配置跨域

使用mybatisplus插件，生成代码

后台接口的编写：

1. 分页查询:

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

三、封装axios请求

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

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

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

User.vue代码如图所示，data属性动态绑定了tableData，tableData是数据源，el-table-column是数据源里面对应的字段，使用v-if判断role的值，根据role值不同，显示不同的字符串。

分页查询和搜索：

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

 

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

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

 

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

 

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

 

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

 

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