spring boot+iview 前后端分离架构之数据字典新增字典的实现（十三）

公众号

大家可以直接微信扫描上面的二维码关注我的公众号，然后回复【bg13】 里面就会给到源代码的下载地址同时会附上相应的视频教程，并定期在我的公众号上给大家推送相应的技术文章，欢迎大家关注我的公众号。

新增数据字典的初步编码

在我们上一章的基础上，我们在dict目录底下新增一个addDict.vue文件，代码如下：

接着我们再改造dictList.vue页面，在我们的列表上引入我们的组件，新增的代码如下截图：

接着再修改我们的addDict的方法，修改完成以后如下所示：

这样我们就简单的完成了我们的列表页和新增页面的联动了，现在我们可以启动我们的项目，然后访问我们的数据字典列表页点击新增字典按钮，我们就会看到如下的页面，则说明我们已经完成了简单的集成了：

新增数据字典的编码完善

通过上面我们已经完成了我们的初步的编码了，接着我们改造我们的addDict.vue页面，完善好以后的代码如下：

接着我们再次访问我们的字典列表页面，然后点击新增字典按钮，我们可以看到如下页面，同时点击确定按钮会做前端的验证，验证通过会提交数据：

到此我们就完成了整个数据字典模块。
上一篇文章地址：spring boot+iview 前后端分离架构之数据字典模块布局和列表查询的实现（十二）
下一篇文章地址：spring boot+iview 前后端分离架构之菜单管理首页的实现（十四）