一、自定义验证规则
验证合法的邮箱和手机号
data() {
//验证邮箱的规则
var checkEmail = (rule, value, callback) => {
//验证邮箱的正则表达式，使用regemail就直接出来了
const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/
//如果邮箱的返回值为真，就证明校验通过，
if (regEmail.test(value)) {
//合法的邮箱
return callback()
}
//否则返回非法的邮箱
callback(new Error('请输入合法的邮箱'))
}
//验证手机号的规则
var checkMobile = (rule, value, callback) => {
//验证手机号的正则表达式
const regMobile = /^[1][3,4,5,7,8][0-9]{9}$/
if (regMobile.test(value)) {
//合法的
return callback()
}
//否则返回非法的邮箱
callback(new Error('请输入合法的手机号'))
}
先定义验证规则，再在验证规则对象里添加
email: [
{ required: true, message: '请输入邮箱', trigger: 'blur' },
{validator:checkEmail,trigger:'blur'}
],
mobile: [
{ required: true, message: '请输入手机', trigger: 'blur' },
{validator:checkMobile,trigger:'blur'}validator:属性添加自定义规则
二。添加用户表单的重置功能
我们希望添加表单之后关闭再打开，看到的是一个清空的表单，而不是上次填写的页码
1，监听对话框的关闭事件
2，在关闭事件中重置表单
实现重置的操作
找到添加用户的对话框，绑定一个close事件，指定一个处理函数
<el-dialog title="添加用户" :visible.sync="addDialogVisible" width="50%"
@close="addDialogClosed">
在处理函数中拿到表单的引用，调用resetFields()
//监听添加用户对话框的关闭事件
addDialogClosed() {
//对话框关闭，重置表单,调用引用的一个函数
this.$refs.addFormRef.resetFields()
}三，添加用户前的表单预校验操作
在点击确定按钮之后，应该对整个表单进行预验证，为确定按钮添加一个点击事件，定义事件处理函数
<el-button type="primary" @click="addUser">确 定</el-button>
//点击按钮，添加新用户
addUser() {
this.$refs.addFormRef.validate(async valid =>
{
if (!valid) return
//如果通过了，发起添加用户的网络请求，先看掉哪个用户接口，post，如果请求成功，状态是201
//在私有数据中的addForm对象和传的参数是一致的，所以可以直接拿过来
const { data: res } = await this.$http.post('users', this.addForm)
if (res.meta.status !== 201) {
this.$message.error('添加用户失败')
}
this.$message.success('添加用户成功')
//隐藏添加用户的对话框
this.addDialogVisible = false
//重新获取用户列表数据
this.getUserList()
})
}四，用户信息修改
点击修改按钮，弹出对话框
先绑定一个单击事件，定义处理函数@click="showEditDialog()
<el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog()"></el-button>
添加用户对话框
<!-- 修改用户对话框 -->
<el-dialog title="修改用户" :visible.sync="editdialogVisible" width="50%" >
<span>这是一段信息</span>
<span slot="footer" class="dialog-footer">
<el-button @click="editdialogVisible = false">取 消</el-button>
<el-button type="primary" @click="editdialogVisible = false">确 定</el-button>
</span>
</el-dialog>在处理函数中设置点击修改你按钮，对话框的状态为显示
showEditDialog() {
//粘过来用户的对话框，然后在这里添加事件，点击修改按钮后，对话框的状态为显示
//要通过this调用才可
this.editdialogVisible = true
}
五。根据ID查询到用户的信息
在弹出修改按钮之后，会显示这条用户的旧信息，已填充到了表单中
通过形参的形式在修改按钮的单击事件中传用户的旧数据
可以通过作用域插槽scope.row.id获取用户的ID
<el-table-column label="操作" width="180px">
<template slot-scope="scope">
<!-- 修改按钮 -->
<el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog(scope.row.id)"></el-button>
<!-- 删除按钮 -->id拿到后调取接口：根据ID查询用户的信息
会返回一个data，用户对象
回到代码中发起get请求
因为是动态ID，所以要把id拿出来，在后面加号加上
查询成功后，应该把数据保存到私有数据对象里，重新定义一个空对象，查询到的用户信息对象
//展示修改用户的对话框
async showEditDialog(id) {
//粘过来用户的对话框，然后在这里添加事件，点击修改按钮后，对话框的状态为显示
//要通过this调用才可,
// console.log(id);
const { data: res } = await this.$http.get('users/' + id)
//因为请求不一定永远都是成功的，所以要进行判断
if (res.meta.status !== 200) {
return this.$message.error('查询用户信息失败！')
}
//将查询到的用户信息保存到私有表单数据对象上
this.editForm = res.data
//点击编辑按钮，展开显示对话框
this.editdialogVisible = true
} //查询到的用户信息保存
editForm: {}
}六，绘制用户修改信息表单
粘贴过来表单格式进行修改
从成品图中可以看到，用户名不需要进行修改，因此不需要校验规则，只需要对手机和邮箱进行校验。
梳理粘贴过来的表单信息，验证规则和表单的引用都分别改名字。class暂时用不到，先删除
因为在上一步获取到的表单数据都保存到了editForm中，所以在model绑定的数据应该是editForm
<el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="70px">
因为用户名不需要有校验规则，所以删除prop
<!-- 修改用户对话框 -->
<el-dialog title="修改用户" :visible.sync="editdialogVisible" width="50%">
<el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="70px">
<el-form-item label="用户名" >
<!-- 用户名禁用属性：disabled -->
<el-input v-model="editForm.username" disabled></el-input>
</el-form-item>
<!-- 需要分别给邮箱和手机创建校验规则 -->
<el-form-item label="邮箱" prop="email">
<el-input v-model="editForm.email"></el-input>
</el-form-item>
<el-form-item label="手机" prop="mobile">
<el-input v-model="editForm.mobile"></el-input>
</el-form-item>
</el-form>在data区创建一个修改表单的验证规则对象
// 修改表单的验证规则对象
editFormRules:{
email: [
{ required: true, message: '请输入邮箱', trigger: 'blur' },
{ validator: checkEmail, trigger: 'blur' }
],
mobile: [
{ required: true, message: '请输入手机', trigger: 'blur' },
{ validator: checkMobile, trigger: 'blur' }
],
}七：修改表单后的重置操作
找到el-dialog绑定一个关闭按钮处理函数
//监听修改用户对话框的关闭事件
editDialogClosed() {
this.$refs.editFormRef.resetFields();
} <el-dialog title="修改用户" :visible.sync="editdialogVisible" width="50%" @close="editDialogClosed">
八，提交修改表单之前的预验证操作
找到确定按钮，绑定一个预验证处理函数
//修改用户信息并提交,对表单进行预验证,valid是一个布尔值
editUserInfo() {
this.$refs.editFormRef.validate
(async valid => {
if (!valid) return
//当预验证通过后，就发起修改表单提交请求，编辑用户提交APIm将数据自动同步到editform
const { data: res } = await this.$http.put('users/' + this.editForm.id,
{ email: this.editForm.email, mobile: this.editForm.mobile })
if (res.meta.status !== 200) {
return this.$message.error('更新用户信息失败')
}
//关闭对话框
this.editdialogVisible = false
//刷新数据列表
this.getUserList()
//提示修改成功
this.$message.success('更新用户信息成功')
})
}九，删除用户操作
点击删除，会弹出提示消息框是否删除按钮
用到element中的弹框
//根据id删除用户信息
async removeUserById(id){
//弹窗询问用户是否删除数据
const confirmResult = await this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}
).catch(err =>err)
//此时用户点确定返回的是一个confirm字符串，如果点取消是返回一个错误，如果解决，加一个catch
//修改好错误之后，用户点击取消删除之后返回的是一个字符串cancel
// console.log(confirmResult)
if(confirmResult !=='confirm'){
return this.$message.info('已取消删除')
}
console.log('确认了删除')在弹出的提示框里点击确认删除，会触发删除单个用户请求
找到对应的API接口
//此时用户点确定返回的是一个confirm字符串，如果点取消是返回一个错误，如果解决，加一个catch
//修改好错误之后，用户点击取消删除之后返回的是一个字符串cancel
// console.log(confirmResult)
if (confirmResult !== 'confirm') {
return this.$message.info('已取消删除')
}
// console.log('确认了删除')
const { data: res } = await this.$http.delete('users/' + id)
if (res.meta.status !== 200) {
return this.$message.error('删除用户失败')
}
this.$message.success('删除用户成功')
this.getUserList()
}十。提交用户代码
git branch
新建一个分支git checkout -b user
git branch
git status
git add .
git status
git commit -m "完成用户列表功能的开发"
git status
git push -u origin user
合并分支
git checkout master
git branch
git merge user
git push -u origin master
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
