spring boot+iview 前后端分离架构之组织用户的用户的增删改的实现(二十)

spring boot 与 iview 前后端分离架构之组织用户的用户的增删改的实现(二十)

  • 公众号
  • 用户维护
    • 新增用户
    • 修改用户
    • 删除用户

公众号

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

用户维护

由于在用户模块使用到了省市区的下拉,因此需要在此处引入iview-area的依赖,因此我们在package.json中增加以下的依赖:
spring boot+iview 前后端分离架构之组织用户的用户的增删改的实现(二十)_第1张图片
接着我们在项目底下执行cnpm install 去下载这个依赖,同时改造我们的main.js将这个组件引入进来,改造的代码部分如下所示:
spring boot+iview 前后端分离架构之组织用户的用户的增删改的实现(二十)_第2张图片
到此我们就引入了我们的省市区的插件了。

新增用户

我们在user目录底下新建一个addUser.vue文件,该文件实现了新增用户,代码如下:



最后我们将项目运行起来,访问我们的用户组织的页面,点击新增用户按钮,会看到如下页面则说明我们的新增用户就已经实现了。
spring boot+iview 前后端分离架构之组织用户的用户的增删改的实现(二十)_第3张图片

修改用户

接着在user目录底下创建一个updateUser.vue,代码如下:




接着修改我们的orgList.vue,如下所示:
spring boot+iview 前后端分离架构之组织用户的用户的增删改的实现(二十)_第4张图片
spring boot+iview 前后端分离架构之组织用户的用户的增删改的实现(二十)_第5张图片
然后再次运行项目点击用户组织页面上的编辑按钮出现如下页面则说明我们修改用户就完成了。
spring boot+iview 前后端分离架构之组织用户的用户的增删改的实现(二十)_第6张图片

删除用户

删除用户的代码我们在第十八章已经实现了,此处我们就直接截图即可:
spring boot+iview 前后端分离架构之组织用户的用户的增删改的实现(二十)_第7张图片
到此为止我们就完成了用户的增删改的实现了。
上一篇文章地址:spring boot+iview 前后端分离架构之组织用户的组织的增删改的实现(十九)
下一篇文章地址:spring boot+iview 前后端分离架构之首页面包屑的实现(二十一)

你可能感兴趣的:(java,spring,boot,iview,vue,spring,boot,与,iview实现前后端分离架构,iview,vue,spring,boot,前后端分离,权限架构)