阅读 32

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分支推送到云端。

文章分类
前端
文章标签