后台管理系统
用户管理
1. 概述:
用户管理通过后台管理用户的账号信息,包括用户信息的展示、添加、修改、删除、角色分配、账号启用/注销等功能。
- 用户信息列表展示
- 添加用户
- 修改用户
- 删除用户
- 启用或禁用用户
- 用户角色分配
2. 实现功能
- 用户头部:面包屑导航 el-breadcrumb
栅栏系统使用的是el-row
表格布局是 el-table、el-pagination
- 用户状态列和操作列
作用域插槽(为什么使用它,插槽(Slot)是vue的组件封装者 提供的能力。允许开发者在封装组件时,把 不确定的、希望由用户指定的部分 定义为插槽。)
接口调用
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.userList
this.total = res.data.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>
// 监听pagesize改变的事件
handleSizeChange (newSize) {
this.queryInfo.pagesize = newSize
this.getUserList()
},
// 监听 页码值改变的事件
handleCurrentChange (newPage) {
this.queryInfo.pagenum = newPage
this.getUserList()
},
- 搜索功能
<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>
- 邮箱和手机号的验证(自定义表单验证规则)
// 验证邮箱的规则
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('请输入合法的手机号'))
}
表单提交,将用户信息作为参数,调用后台接口添加用户
- 编辑用户(难点)
为什么不能直接获取本地数据(userList)或者说是id对应的页面上的数据,而是要向后台发起数据请求操作呢?
答:通过F12修改界面,那么本地的数据就会变动,真实的数据是存储在数据库的!
一般思路是;给编辑按钮绑定点击事件,向后台传递id这一请求参数,这样后台会返回数据。
我当时实现编辑用户这个功能的时候在想,既然页面上有数据,又何必向后台发起请求呢?直接获取页面上的数据不可以吗?通过userList找到对应的id
后来网上找了找答案,说页面的数据可以通过f12调试面板进行修改,我便做了一些尝试:
- 先编写代码,对userList进行循环,获取到id一致的信息
- 通过控制面板,将第2个用户的id设置为500(和第一个用户一样)
- 我再次点击link的编辑按钮,发现面板打印出了两个对象
可以看出,这是存在问题的,考虑得不够全面。一个项目如果要发布上线,我们要尽可能想到各种问题,而不只是实现某一功能。
在实现这一功能时,向后台请求数据才是正确的做法。