Vue实战之 5.用户管理模块
实战项目之用户管理模块
·
1. 用户管理概述
通过后台管理用户的账号信息，具体包括用户信息的展示、添加、修改、删除、角色分配、账号启用/注销等功能。
- 用户信息列表展示
- 添加用户
- 修改用户
- 删除用户
- 启用或者禁用用户
- 用户角色分配
2. 用户管理— 列表展示
1. 用户列表布局
- 头部：面包屑导航 el-breadcrumb
- Element-UI 栅格系统基本使用 el-row
- 表格布局 el-table、el-pagination
2. 用户状态列和用户操作列
- 作用域插槽
- 接口调用
<el-table-column label="状态">
<template v-slot="scope">
<el-switch v-model="scope.row.mg_state" @change="userStateChanged(scope.row)">
</el-switch>
</template>
</el-table-column>
<el-table-column label="操作" width="180px">
<template>
<!-- 修改按钮 -->
<el-button type="primary" icon="el-icon-edit" size="mini"></el-button>
<!-- 删除按钮 -->
<el-button type="danger" icon="el-icon-edit" 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>
-
为什么要使用作用域插槽？
答： 插槽（Slot）是vue为 组件的封装者 提供的能力。允许开发者在封装组件时，把 不确定的、希望由用户指定的部分 定义为插槽。 -
关于 element-ui中使用v-slot=“scope”这一固定用法的解释？
答： 我看了下面这篇文章后理解了。文章链接
3. 获取用户列表数据
async getUserList () {
const { data: res } = await this.$http.get('users', { params: this.queryInfo })
// console.log(res)
if (res.meta.status !== 200) return this.$message.error('获取用户列表失败!')
this.userList = res.data.users
this.total = res.data.total
}
4. 表格数据分页
<!-- 分页区域 -->
<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>
// 监听pagesize改变的事件
handleSizeChange (newSize) {
this.queryInfo.pagesize = newSize
this.getUserList()
},
// 监听 页码值改变的事件
handleCurrentChange (newPage) {
this.queryInfo.pagenum = newPage
this.getUserList()
},
5. 搜索功能
<el-col :span="8">
<el-input placeholder="请输入内容" clearable v-model="queryInfo.query"
@clear="getUserList">
<el-button slot="append" icon="el-icon-search"
@click="getUserList"></el-button>
</el-input>
</el-col>
6. 添加用户
<!-- 添加用户的对话框 -->
<el-dialog
title="添加用户"
:visible.sync="addDialogVisible"
width="50%">
<!-- 内容主体区域 -->
<el-form ref="form" :model="addForm" :rules="addFormRules"
red="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="emial">
<el-input v-model="addForm.emial"></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>
邮箱和手机号的验证（自定义表单验证规则）：
// 验证邮箱的规则
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[0123456789]|17[678]|18[0-9]|14[57])[0-9]{8}$/
if (regMobile.test(value)) {
// 合法的手机号
// 直接调用cb 表示校验通过
return cb
}
cb(new Error('请输入合法的手机号'))
}
表单提交，将用户信息作为参数，调用后台接口添加用户：
// 点击按钮添加新用户
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.编辑用户
<el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog(scope.row.id)"></el-button>
// 展示编辑用户的对话框
async showEditDialog (id) {
console.log(id)
const { data: res } = await this.$http.get('users/' + id)
if (res.meta.status !== 200) {
return this.$message.error('查询用户信息失败!')
}
// 把查询到的信息保存到editForm中
this.editForm = res.data
this.EditDialogVisible = true
}
在写这部分功能的时候，我想到一个问题：为什么不能直接获取本地的数据（userlist）或者说是id对应的页面上的数据，而是要向后台发起数据请求操作？
答： 可以通过f12修改界面，那么本地的数据就会变动，真实的数据是存储在数据库的！（具体见该转栏下5.1补充 文章链接）
提交编辑用户信息表单：
// 修改用户信息并提交
editUserInfo () {
// 提交之前进行表单预验证
this.$refs.editFormRef.validate(async valid => {
// console.log(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.EditDialogVisible = false
// 刷新数据列表
this.getUserList()
// 提示修改成功
this.$message.success('更新用户信息成功!')
})
}
8. 删除用户
// 根据id删除对应的用户信息
async removeUserById (id) {
// 弹框询问用户是否删除数据
const confirmResult = await this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).catch(err => err)
// 如果用户确认删除，则返回值为字符串confirm
// 如果用户取消删除，则返回字符串 cancel
// console.log(confirmResult)
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()
}
到目前为止，除了分配角色这一功能还没实现之外，其他关于用户管理的功能都已经实现了。分配角色这一功能和权限管理有关联，会在做完权限管理之后，回过头再去完成分配角色。
9. 提交用户列表功能代码
前往低代码交流专区
更多推荐
0
0- 0
已为社区贡献6条内容
所有评论(0)