vue电商后台管理系统保姆级教程（六）——用户添加，修改，删除功能实现

总文章地址：

vue.js基础还不会？——看这篇文章就够了

14万字手把手教你做vue电商后台管理（全）——技术栈（vue全家桶 Webpack Git axios Element-ui）

6、 用户添加，修改，删除功能

6.1 渲染添加用户的对话框

使用elementui中的dialog的对话框，按需导入，全局注册。把ui结构 放到页面中：

添加用户的对话框：
需要定义一个布尔值，addDialogVisible 在date中定义此数据
默认false为隐藏

为添加按钮点击添加单机事件，绑定addDialogVisible为true 点击后对话框展示出ture，

6.2 渲染添加用户的表单

总结：

写出ui结构，然后再数据中写数据，验证规则
：rules：验证规则
：model：数据绑定对象，
定义数据，定义验证规则

实现效果：

1、用户
使用form表单。
定义addform数据，添加用户的表单数据

验证规则有两项：
2、密码，邮箱，手机

6.3 自定义邮箱和手机号的校验规则

form表单验证没有手机号和邮箱验证，
先定义两个规则，
每个规则中有三个参数，rule valu，cb（callback）
使用正则表达式，

定义完成之后，在使用时使用validator来完成调用规则
trigger来实现什么时候点击调用

6.4 实现添加表单的重置操作

在对话框关闭之后重置对话框
给添加用户的对话框添加close事件

添加事件定义：

拿到表单的ref引用调用resetFields（ ）

6.5 实现添加用户前的表单预验证

在点击确定的时候对表单进行预验证，在确定按钮上绑定事件：

this.$refs.addformREef.表单的引用对象。

6.6 调用api接口完成添加用户的操作

API接口：

先用get发起请求，然后使用const接受发送回来的回调函数，判断服务器是否返回数据（通过201判断，）返回数据后隐藏对话框，重新获取用户列表刷新数据。

6.7 展示修改用户的对话框

效果图：
点击修改按钮后弹出对话框

找到修改按钮绑定事件：

定义事件：
写出对话框的结构：

定义其中属性的默认布尔值：

在编辑按钮定义点击事件，把布尔值赋值为ture，这样点击的时候才有效果

6.8 根据id查询对应的用户信息

先拿到用户的id，通过形参的方式，在修改按钮的单击事件中，通过作用域插槽，来拿到数据，

在修改按钮中有shoeEditDialog（scope.row.id）其中的形参就是拿到的id


发起get请求，

结构赋值简化promise，进行判断，显示提示消息：

定义对象：

6.9 渲染修改用户的表单

使用element表单验证，用户名，邮箱，手机号。按需要修改。
通过v-model双向绑定数据，：rules是验证规则， prop是校验规则，
先定义表单验证规则对象。

表单的验证规则：

6.10实现修改用户表单的重置操作

修改表单后，关闭应该重置，在修改用户事件上绑定函数：
定义函数：监听修改用户对话框的关闭事件，拿到表单的引用名称，然后关闭窗口。

6.11 完成提交修改前的表单预验证

点击确定之前，先对表单预验证。
确定按钮，绑定一个处理函数

定义函数：

6.12 提交表单完成用户信息的修改

API:

发起http请求，获取数据，关闭对话框，刷新数据列表

6.13 弹出询问框询问用户是确认删除数据

点击删除的时候需要弹出对话框是否需要删除数据
elementui里面有一个组件 message box组件
在element.js中导入message box 然后全局挂载，比较特殊：

为删除按钮绑定事件。

定义处理函数：
根据id删除对应的信息（先弹框提示）
然后使用const接受对象。优化promise

.catch 捕获错误，然后return出去

判断点击的是取消还是确定。最后弹出确认提示框

6.14 调用api完成删除用户的操作

API：
发起请求，删除，然后判断是否删除成功，成功之后刷新用户列表：

6.15 创建user子分支并把代码推送到码云

Git branch 查看当前分支
Git checkout -b user 切换到user分支上
git branch 查看代码 代码就被切换到user分支了
git status 检查当前分支状态、
git add. 添加到暂存区
git commit -m "完成用户列表功能的开发”
所有用户列表代码都提交到了user分支，
目前云端是没有user分支的，所以要把本地的分支推送到云端
Git push -u origin user 把本地user分支推送到origin上
用户名是邮箱，密码是账号密码
云端刷新之后就可以看到user
git checkout master 切换到主分支
Git merge user 把user的代码合并到主分支。
git push 把本地代码推送到云端

6.16 创建rights子分支并推送到码云

创建下一节的权限列表代码

Git branch检查当前分支
git checkout -b rights 创建right分支
Git branch 查看
git push -u origin rights 第一次把rights分支推送到云端。