用户（三）
实现的功能
| 功能 | 详述 |
|---|---|
| 用户布局 | 面包屑导航；卡片视图；栅格系统+带搜索的输入框 |
| 用户列表 | 请求获取用户数据列表；渲染boolean为开关；作用域插槽自定义 |
| 分页 | 监听pagesize、pagenum改变 |
| 搜索用户 | 清空文本；获取搜索用户列表 |
| 添加用户 | 添加用户对话框显示和隐藏；自定义验证规则；重置表单；表单预校验；校验通过发送添加请求 |
| 修改用户 | 修改用户对话框显示和隐藏；渲染修改表单；自定义验证规则；重置表单；表单预校验；校验通过发送删除请求 |
| 删除用户 | 弹框询问；删除用户 |
使用到的Element-ui组件
| 组件名称_EN | 注册 | 备注 |
|---|---|---|
| Breadcrumb | Vue.use(Breadcrumb) | 面包屑 |
| BreadcrumbItem | Vue.use(BreadcrumbItem) | |
| Card | Vue.use(Card) | 卡片 |
| Row | Vue.use(Row) | 布局 |
| Col | Vue.use(Col) | |
| Table | Vue.use(Table) | 表格 |
| TableColumn | Vue.use(TableColumn) | |
| Switch | Vue.use(Switch) | 开关 |
| Tooltip | Vue.use(Tooltip) | 文字提示 |
| Pagination | Vue.use(Pagination) | 分页 |
| Dialog | Vue.use(Dialog) | 对话框 |
| MessageBox | Vue.prototype.$confirm = MessageBox.confirm | 弹框 |
用户
1、渲染组件和子路由
2、布局
①面包屑导航
<!-- [User.vue] -->
<!-- 面包屑 -->
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>用户管理</el-breadcrumb-item>
<el-breadcrumb-item>用户列表</el-breadcrumb-item>
</el-breadcrumb>
②卡片视图
③栅格系统+带搜索的输入框
栅格系统
gutter：列与列之间的距离
<!-- [User.vue] -->
<!-- 搜索与添加区域 -->
<el-row :gutter="20">
<el-col :span="9">
<el-input placeholder="请输入内容">
<el-button slot="append" icon="el-icon-search" @click="getUserList"></el-button>
</el-input>
</el-col>
<el-col :span="4">
<el-button type="primary">添加用户</el-button>
</el-col>
</el-row>
3、获取渲染用户数据列表
①获取用户数据列表
// [User.vue -> data]
// 获取用户列表的参数对象
queryInfo: {
query: '',
// 当前页数
pagenum: 1,
// 当前每页显示多少条数据
pagesize: 2,
},
userlist: []
// [User.vue -> created]
created() {
this.getUserList()
}
// [User.vue -> methods]
methods: {
async getUserList() {
const { data: res } = await this.$http.get('/users', {
params: this.queryInfo,
})
if (res.meta.status !== 200)
return this.$message.error('获取用户列表失败')
this.userlist = res.data.users
this.total = res.data.total
}
}
②渲染用户数据列表
表格
data：数据源
border：表格边框线
stripe：隔行变色
表格项
lebel：渲染列的标题
prop：渲染列的数据项
<!-- [User.vue] -->
<!-- 用户列表 -->
<el-table :data="userlist" border stripe>
<!-- 索引列 -->
<el-table-column type="index"></el-table-column>
<el-table-column label="姓名" prop="username"></el-table-column>
<!-- ...... -->
</el-table>
1️⃣状态 布尔值渲染为开关
作用域插槽
slot-scope="scope"：接收数据，scope.row当前行的数据
@change：switch状态改变时触发
<!-- [User.vue] -->
<el-table-column label="状态">
<template slot-scope="scope">
<el-switch v-model="scope.row.mg_state" @change="userStateChange(scope.row)"></el-switch>
</template>
</el-table-column>
// [User.vue -> methods]
// 监听switch开关状态改变
async userStateChange(userinfo) {
const { data: res } = await this.$http.put(`users/${userinfo.id}/state/${userinfo.mg_state}`)
if (res.meta.status !== 200) {
userinfo.mg_state = !userinfo.mg_state
return this.$message.error('更新用户状态失败')
}
this.$message.success('更新用户状态成功')
}
2️⃣操作
作用域插槽
提示框Tooltip
:enterable="false"：鼠标是否可以进入tooltip中
<!-- [User.vue] -->
<el-table-column label="操作" width="180px">
<template slot-scope="scope">
<!-- 修改 -->
<el-button type="primary" icon="el-icon-edit" size="mini"></el-button>
<!-- 删除 -->
<el-button type="danger" icon="el-icon-delete" size="mini"></el-button>
<!-- 分配角色 -->
<el-tooltip effect="dark" content="分配角色" placement="top" :enterable="false">
<el-button type="warning" icon="el-icon-setting" size="mini"></el-button>
</el-tooltip>
</template>
</el-table-column>
4、分页组件
@size-change：获取最新pagesize
@current-change：获取最新页码pagenum
:current-page：当前页
:page-sizes：每页显示有几条
:page-size：当前每页显示几条
layout="total, sizes, prev, pager, next, jumper"：展示哪些页码组件
:total="total"：总共多少条数据
<!-- [User.vue] -->
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="queryInfo.pagenum"
:page-sizes="[1, 2, 5, 10]"
:page-size="queryInfo.pagesize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
></el-pagination>
// [User.vue -> methods]
// 监听pagesize改变
handleSizeChange(newSize) {
this.queryInfo.pagesize = newSize
this.getUserList()
},
// 监听页码值改变
handleCurrentChange(newPage) {
this.queryInfo.pagenum = newPage
this.getUserList()
}
5、搜索用户
v-model：双向绑定
clearable：清空文本框
@clear：清空文本框时触发
<!-- [User.vue] -->
<el-input placeholder="请输入内容" v-model="queryInfo.query" clearable @clear="getUserList">
<el-button slot="append" icon="el-icon-search" @click="getUserList"></el-button>
</el-input>
6、添加用户
①展示添加用户对话框
:visible.sync="addDialogVisible"：对话框显示和隐藏
// [User.vue -> data]
// 控制添加用户对话框的显示与隐藏
addDialogVisible: false
<!-- [User.vue] -->
<el-button type="primary" @click="addDialogVisible = true">添加用户</el-button>
<!-- 添加用户的对话框 -->
<el-dialog title="添加用户" :visible.sync="addDialogVisible" width="50%" >
<!-- 内容主题区域 -->
<!-- ...... -->
<!-- 底部区域 -->
<span slot="footer" class="dialog-footer">
<el-button @click="addDialogVisible = false">取 消</el-button>
<el-button type="primary">确 定</el-button>
</span>
</el-dialog>
②增加表单
form
:model="addForm"：数据绑定对象
:rules="addFormRules"：验证规则对象
ref="addFormRef"：数据引用对象
form-item
label="用户名"：标题文本
prop="username"：具体的校验规则，在定义
input双向绑定到addForm
<!-- [User.vue] -->
<!-- 内容主题区域 -->
<el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="70px" status-icon>
<el-form-item label="用户名" prop="username">
<el-input v-model="addForm.username"></el-input>
</el-form-item>
<!-- ...... -->
</el-form>
// [User.vue -> data]
// 添加用户的表单数据
addForm: {
username: '',
password: '',
email: '',
mobile: '',
},
// 添加表单的验证规则对象
addFormRules: {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' },
{ min: 3, max: 10, message: '用户名长度3-10字符之间', trigger: 'blur',},
],
// ......
}
③自定义验证规则
validator: checkMobile：具体的校验规则
checkMobile = (验证规则, 需要验证的值, callback) => {
验证通过，return callback()
验证不通过，调用callback，提供错误对象
})
// [User.vue -> data]
// 验证手机号
var checkMobile = (rule, value, callback) => {
const regMobile = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/
if (regMobile.test(value)) {
return callback()
}
callback(new Error('请输入合法的手机号'))
}
// 添加表单的验证规则对象
addFormRules: {
// ......
mobile: [
// ......
{ validator: checkMobile, trigger: 'blur' },
],
}
④重置表单
@close：关闭对话框时触发
<!-- [User.vue] -->
<!-- 添加用户的对话框 -->
<el-dialog title="添加用户" :visible.sync="addDialogVisible" width="50%" @close="addDialogClosed">
// [User.vue -> methods]
// 监听添加对话框的关闭事件
addDialogClosed() {
this.$refs.addFormRef.resetFields()
}
⑤表单预校验，校验通过发起请求
<!-- [User.vue] -->
<el-button type="primary" @click="addUser">确 定</el-button>
// [User.vue -> methods]
// 点击按钮添加新用户 预校验
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()
})
}
7、修改用户
①展示修改用户对话框
②渲染修改表单
根据id查询用户数据，并渲染到修改表单中
<!-- [User.vue] -->
<!-- 修改 -->
<el-button type="primary" icon="el-icon-edit" size="mini" @click="showEidtDialog(scope.row.id)"></el-button>
// [User.vue -> data]
// 查询到的用户信息对象
editForm: {}
// [User.vue -> methods]
// 展示修改对应用户的对话框
async showEidtDialog(id) {
// 请求对应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
}
③表单验证规则editFormRules
④表单重置
⑤表单预校验，校验通过发起请求
8、删除用户
①弹框询问 删除用户
弹框：
如果用户确认删除，则返回为字符串confirm;
如果用户取消删除，会报错，需要catch处理，返回字符串cancel
<!-- [User.vue] -->
<!-- 删除 -->
<el-button type="danger" icon="el-icon-delete" size="mini" @click="removeUserBtId(scope.row.id)"></el-button>
// [User.vue -> methods]
// 根据id删除对应的用户信息
async removeUserBtId(id) {
// 弹框询问用户是否删除数据
const confirmResult = await this.$confirm(
'此操作将永久删除该用户, 是否继续?',
'提示',
{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
}
).catch((err) => err)
// 判断是否取消删除 删除confirm 取消删除cancel
if (confirmResult !== 'confirm') {
return this.$message.info('已经取消删除')
}
// 发送删除请求
const { data: res } = await this.$http.delete('/users/' + id)
if (res.meta.status !== 200) {
return this.$message.error('删除用户失败')
}
this.$message.success('删除用户成功')
this.getUserList()
}
