添加用户

对话框表单

  • 对话框使用到了Dialog 对话框组件,里面再嵌套表单组件。对话框的关闭采用点击事件控制
1
2
// Dialog的属性,data中定义addDialogVisible布尔值
:visible.sync="addDialogVisible"
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!---添加用户的对话框-->
<el-dialog title="添加用户" :visible.sync="addDialogVisible" width="30%">
<!--内容读取区-->
<el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="70px">
<el-form-item label="用户名" prop="username">
<el-input v-model="addForm.username"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model="addForm.password"></el-input>
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input v-model="addForm.email"></el-input>
</el-form-item>
<el-form-item label="电话" prop="mobile">
<el-input v-model="addForm.mobile"></el-input>
</el-form-item>
</el-form>
<!--底部区域-->
<span slot="footer" class="dialog-footer">
<el-button @click="addDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="addDialogVisible = false">确 定</el-button>
</span>
</el-dialog>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
export default {
name: 'Users',
data() {
return {
// 获取用户列表的参数对象
queryInfo: {
query: '', // 查询参数
pagenum: 1, // 当前页码
pagesize: 2, // 每页显示条数
},
// 保存用户列表数据
userList: [],
total: 0, // 总数据条数
addDialogVisible: false, // 控制对话框的显示与隐藏
// 添加用户的表单数据
addForm: {
username: '',
password: '',
email: '',
mobile: '',
},
// 添加用户表单的验证规则
addFormRules: {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' },
{
min: 3,
max: 10,
message: '长度在 3 到 10 个字符',
trigger: 'blur',
},
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{
min: 6,
max: 15,
message: '长度在 6 到 15 个字符',
trigger: 'blur',
},
],
email: [{ required: true, message: '请输入邮箱', trigger: 'blur' }],
mobile: [{ required: true, message: '请输入电话', trigger: 'blur' }],
},
}
},
// ,...
}

自定义校验规则

  • 需要自定义电话和邮箱的校验规则,首先在data中定义校验规则
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
data() {
// 定义校验规则
var checkEmail = (rule, value, callback) => {
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 =
/^(0|86|17951)?(13[0-9]|15[0123456789]|17[678]|18[0-9]|14[57])[0-9]{8}$/
if (regMobile.test(value)) {
return callback()
}
callback(new Error('请输入合法有效的号码'))
}
return {
// xxx rules
}
}
  • 然后在rules规则中使用validator: checkMobile指定使用的规则

完善表单

  • 实现表单的重置功能,每次关闭再打开对话框需要是重置后的表单
    • 首先给对话框添加close事件
    • close事件对应的函数中调用表单引用对象的resetFields方法重置表单
1
2
3
4
<el-dialog  @close="addDialogClosed">
<!--内容读取区-->
<el-form ref="addFormRef"></el-form>
</el-dialog>
1
2
3
4
 // 监听添加对话框的关闭事件
addDialogClosed(){
this.$refs.addFormRef.resetFields()
}
  • 然后实现表单提交按钮点击后预校验的功能,所有表单正确填写后才提交
    • 给按钮绑定事件,在事件中调用 本地引用对象的validate方法
1
<el-button type="primary" @click="addUser">确 定</el-button>
1
2
3
4
5
6
7
// 添加之前对表单进行预校验
addUser(){
this.$refs.addFormRef.validate(valid => {
if(!valid) return
// 发送添加用户的请求
})
}

发送请求

  • 当表单预校验成功后就发送请求添加用户。请求路径:users,请求方法:post,请求参数直接用data中定义的数据表单对象即可
参数名 参数说明 备注
username 用户名称 不能为空
password 用户密码 不能为空
email 邮箱 可以为空
mobile 手机号 可以为空
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 添加之前对表单进行预校验
addUser() {
this.$refs.addFormRef.validate( async (valid) => {
if (!valid) return
// 发送添加用户的请求
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()
})
}

修改用户

修改对话框

  • 其对话框和添加对话框大致一样,给修改按钮添加事件。然后在data中补充editFormeditFormRules
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<template slot-scope="scope">
<!-- 修改按钮-->
<el-tooltip>
<el-button @click="showEditDialog(scope.row.id)"></el-button>
</el-tooltip>
</template>

<!--修改用户的对话框-->
<el-dialog title="修改用户" :visible.sync="editDialogVisible" width="50%">
<!--内容读取区-->
<el-form
:model="editForm"
:rules="editFormRules"
ref="editFormRef"
label-width="70px"
>
<el-form-item label="用户名" prop="username">
<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>
<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>
1
2
3
4
5
6
7
8
9
10
// 展示编辑用户的对话框
async showEditDialog(id) {
// 展示对话框
this.editDialogVisible = true
// 通过id获取用户信息
const { data: res } = await this.$http.get(`users/${id}`)
if (res.meta.status !== 200)
return this.$message.error('获取用户信息失败')
this.editForm = res.data
},
  • 实现重置的方法也是一杨的,给对话框添加close事件
1
<el-dialog @close="editDialogClosed"> </el-dialog>
1
2
3
4
// 监听修改对话框的关闭事件
editDialogClosed() {
this.$refs.editFormRef.resetFields()
}

发送请求

  • 点击确定按钮后,需要表单预校验然后发送请求
1
<el-button type="primary" @click="editUser" >确 定</el-button>
  • 请求路径:users/:id,请求方法:put,请求参数如下
参数名 参数说明 备注
id 用户 id 不能为空 参数是url参数:id
email 邮箱 可以为空
mobile 手机号 可以为空
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 修改之前对表单进行预校验
editUser(){
this.$refs.editFormRef.validate(async (valid) => {
if (!valid) return
// 发送修改用户的请求
const { data: res } = await this.$http.put(`users/${this.editForm.id}`, {
email: this.editForm.email,
mobile: this.editForm.mobile
})
if (res.meta.status != 200) {
this.$message.error('编辑用户失败')
}
this.$message.success('编辑用户成功')
// 关闭对话框
this.editDialogVisible = false
// 刷新用户列表
this.getUserList()
})
}

删除用户

删除提示框

  • 使用到了MessageBox 弹框UI组件,需要挂载的VM实例上才能使用,在element.js中按需导入
1
2
3
import { MessageBox } from 'element-ui';
// 全局挂载
Vue.prototype.$confirm = MessageBox.confirm
  • 给删除按钮添加点击事件
1
2
<!--插槽传入数据对象-->
<el-button @click="removeUserByID(scope.row)"></el-button>
  • 注意:用户确认返回字符串confirm,用户取消返回字符串cancel,删除用户的请求路径:users/:id,请求方法:delete, 请求参数为id
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
 // 根据id删除用户
async removeUserByID(userInfo) {
// 弹窗提示是否删除数据
const confirmResult = await this.$confirm(
`是否删除用户${userInfo.username}?`,
'确认信息',
{
confirmButtonText: '删除',
cancelButtonText: '取消',
type: 'warning'
}
).catch((err) => {
return err
})
// 用户确认返回字符串confirm
// 用户取消返回字符串cancel
if(confirmResult !== 'confirm'){
return this.$message.info('已取消删除')
}
// 发送请求删除用户
const { data: res } = await this.$http.delete(`users/${userInfo.id}`)
if(res.meta.status !== 200) return this.$message.error('删除失败')
this.$message.success('删除用户成功')
// 重新获取用户信息
this.getUserList()
}

推送码云

  • 用户列表的功能已经开发完了,需要把代码分到user分支,首先创建user分支
1
2
3
4
# 创建并切换到user分支
git checkout -b user
# 查看当前分支
git branch
  • 然后添加到暂存区,并推送到user分支上,这样本地user分支的代码是最新的
1
2
3
4
git status
git add .
git commit -m "完成用户列表功能的开发"
git status
  • 然后把本地的user分支推送到码云
1
git push -u origin user
  • 但是master分支代码还是旧的,就需要把user分支合并
1
2
3
4
5
6
7
# 切换到master分支
git checkout master
git branch
# 本地user分支合并到master分支
git merge user
# 推送到远程仓库,远程master分支也更新
git push