Vue电商项目—用户管理模块-05
1.1 用户管理概述
通过后台管理用户的账号信息，具体包括用户信息的展示、添加、修改、删除、角色分配、账号启用/注销等功能。
1.2 用户管理-列表展示
1. 用户列表布局
用到的组件
（1）面包屑导航 el-breadcrumb
（2）Element-UI 栅格系统基本使用 el-row
（3）表格布局 el-table、el-pagination
2. 用户状态列和操作列处理
作用域插槽
接口调用
<!-- 通过作用域插槽中的 scope-row，获取当前一行的所有数据 -->
<template slot-scope="scope">
<el-switch v-model="scope.row.mg_state" @change="userStateChanged(scope.row)"></el-switch>
</template>
3. 表格数据填充
调用后台接口
表格数据初填充
<!-- 用户列表区域 -->
<!-- :data 数据绑定 -->
<!-- border 添加边框线 -->
<!-- stripe 创建带斑马纹的表格（鼠标放上去，变色） -->
<el-table :data="userlist" border stripe>
<!-- label 列名 -->
<!-- prop属性来对应对象中的键名即可填入数据 -->
<el-table-column type="index" label="序号"></el-table-column>
<el-table-column label="姓名" prop="username"></el-table-column>
<el-table-column label="邮箱" prop="email"></el-table-column>
<el-table-column label="电话" prop="mobile"></el-table-column>
<el-table-column label="角色" prop="role_name"></el-table-column>
<el-table-column label="状态">
<!-- 通过作用域插槽中的 scope-row，获取当前一行的所有数据 -->
<template slot-scope="scope">
<el-switch v-model="scope.row.mg_state" @change="userStateChanged(scope.row)"></el-switch>
</template>
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<!-- 修改按钮 -->
<el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog(scope.row.id)"></el-button>
<!-- 删除按钮 -->
<el-button type="danger" icon="el-icon-delete" size="mini" @click="removeUserById(scope.row.id)"></el-button>
<!-- 分配角色按钮 -->
<!-- el-tooltip 展示鼠标 hover 时的提示信息 -->
<!-- enterable 鼠标是否可进入到 tooltip 中 -->
<el-tooltip content="分配角色" placement="top" :enterable="false">
<el-button type="warning" icon="el-icon-setting" size="mini" @click="setRole(scope.row)"></el-button>
</el-tooltip>
</template>
</el-table-column>
</el-table>
// 获取用户列表信息
async getUserList() {
// 发送Ajax请求
const {data: res} = await this.$http.get('users', {params: this.queryInfo});
// 请求失败
if(res.meta.status !== 200) return this.$message.error('用户列表参数获取失败！');
this.$message.success('用户列表参数获取成功！');
// 请求成功
this.userlist = res.data.users;
this.total = res.data.total;
// console.log(res);
}
4. 表格数据分页
① 当前页码：pagenum
② 每页条数：pagesize
③ 记录总数：total
④ 页码变化事件
⑤ 每页条数变化事件
⑥ 分页条菜单控制
<!-- 分页区域 -->
<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>
5. 搜索功能
将搜索关键字，作为参数添加到列表查询的参数中。
<!-- 使用Layout布局 -->
<!-- el-row 行 -->
<!-- :gutter="10" 指定每一栏之间的间隔 -->
<el-row :gutter="10">
<!-- el-col 列 -->
<!-- :span 每一栏的大小 共24 -->
<el-col :span="8">
<!-- 搜索与添加区域 -->
<!-- clearable属性即可得到一个可清空的输入框 -->
<!-- @clear 通过 clear事件，清空输入的内容，查询所有信息 -->
<el-input placeholder="请输入内容" v-model="queryInfo.query" clearable @clear='getUserList'>
<el-button slot="append" icon="el-icon-search" @click="getUserList"></el-button>
</el-input>
</el-col>
<el-col :span="4">
<el-button type="primary" @click="addDialogVisible = true">添加用户</el-button>
</el-col>
</el-row>
1.3 用户管理-用户状态控制
- 开关组件的用法
- 接口调用更改用户的状态
<!-- 通过作用域插槽中的 scope-row，获取当前一行的所有数据 -->
<template slot-scope="scope">
<el-switch v-model="scope.row.mg_state" @change="userStateChanged(scope.row)"></el-switch>
</template>
// 监听 switch 开关状态的改变
async userStateChanged(userinfo) {
// console.log(userinfo);
// 发送Ajax请求
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('更新用户状态成功！');
}
1.4 用户管理-添加用户
1. 添加用户表单弹窗布局
弹窗组件用法
控制弹窗显示和隐藏
<!-- 添加用户的对话框 -->
<!-- visible属性，它接收Boolean，当为true时显示 Dialog -->
<el-dialog title="添加用户" :visible.sync="addDialogVisible" width="50%" @close='addDialogClosed'>
<!-- 内容主体区域 -->
<el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="100px" >
<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="addUser">确 定</el-button>
</span>
</el-dialog>
2. 表单验证
内置表单验证规则
// 添加用户表单的验证规则对象
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' },
{ validator: checkEmail, trigger: 'blur' }
],
mobile: [
{ required: true, message: '请输入手机', trigger: 'blur' },
{ validator: checkMobile, trigger: 'blur' }
]
}
自定义表单验证规则
// 验证邮箱的规则
var checkEmail = (rule, value, cb) => {
// 验证邮箱的正则表达式
const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
if (regEmail.test(value)) {
// 合法的邮箱
return cb()
}
cb(new Error('请输入合法的邮箱'))
}
// 验证手机号的规则
var checkMobile = (rule, value, cb) => {
// 验证手机号的正则表达式
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 cb()
}
cb(new Error('请输入合法的手机号'))
}
email: [
{ required: true, message: '请输入邮箱', trigger: 'blur' },
{ validator: checkEmail, trigger: 'blur' }
],
mobile: [
{ required: true, message: '请输入手机', trigger: 'blur' },
{ validator: checkMobile, trigger: 'blur' }
]
3. 表单提交
将用户信息作为参数，调用后台接口添加用户
// 点击按钮，添加新用户
addUser() {
// 对提交的数据，进行预验证
this.$refs.addFormRef.validate(async valid => {
// 预验证失败
if(!valid) return;
// 预验证成功，发送Ajax请求
const {data: res} = await this.$http.post('users', this.addForm);
// 添加失败
if(res.meta.status !== 201) {
return this.$message.error('添加用户失败！');
}
// 添加成功
this.$message.success('添加用户成功！');
// 隐藏对话框
this.addDialogVisible = false;
// 重新获取用户列表数据
this.getUserList();
});
}
1.5 用户管理-编辑用户
1. 根据 ID 查询用户信息
<!-- 修改按钮 -->
<el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog(scope.row.id)"></el-button>
// 展示编辑用户的对话框
async showEditDialog(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;
}
2. 编辑提交表单
// 修改用户信息并提交
editUserInfo() {
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) return this.$message.error('更新用户信息失败！');
// 修改成功
this.$message.success('更新用户信息成功！');
// 关闭对话框
this.editDialogVisible = false;
// 刷新数据列表
this.getUserList();
});
}
1.6 用户管理-删除用户
<!-- 删除按钮 -->
<el-button type="danger" icon="el-icon-delete" size="mini" @click="removeUserById(scope.row.id)"></el-button>
// 根据Id删除对应的用户信息
// 通过catch 捕获了用户的 取消行为
async removeUserById(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();
}
2443
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
