后端接口实现
在DeptController类中以插入方式添加接口,代码如下:
![](https://ucc.alicdn.com/pic/developer-ecology/x7am3a5b4ek6a_1a1ad6244b0d4052881206054b075238.png?x-oss-process=image/resize,w_1400/format,webp)
前端实现
1.修改菜单名称
在路由中修改菜单名称,并将组件PageOne.vue改名为DeptManager.vue,将组件PageTwo.vue改名为AddDept.vue,代码如下:
![](https://ucc.alicdn.com/pic/developer-ecology/x7am3a5b4ek6a_cc49a40e10564b72b022957d3c3048d7.png?x-oss-process=image/resize,w_1400/format,webp)
2.修改AddDept页面
添加页面的布局,使用Element组件中的Form表单来实现,如图
![](https://ucc.alicdn.com/pic/developer-ecology/x7am3a5b4ek6a_c297c24a8f4640f9b6814c64a74bf619.png?x-oss-process=image/resize,w_1400/format,webp)
页面布局成功后精简AddDept页面代码,并使用Axios将页面添加数据提交到后端项目添加接口,代码如下:
![](https://ucc.alicdn.com/pic/developer-ecology/x7am3a5b4ek6a_67f74407fb0c4cf6b2028c68239f11e2.png?x-oss-process=image/resize,w_1400/format,webp)
![](https://ucc.alicdn.com/pic/developer-ecology/x7am3a5b4ek6a_1a6b1dfe978649849dc430a667486640.png?x-oss-process=image/resize,w_1400/format,webp)
经过上面配置后,部门员工的录入功能就实现了。