Vue项目练习--电商后台管理系统的功能---登录页面
用户管理概述：
通过后台管理用户的账号信息，具体包括用户信息的展示、添加、修改、删除、角色分配、账号启用/注销等功能。
1.列表展示
- 面包屑导航 el-breadcrum
- Element-UI 的Card卡片组件
- Element-UI 栅格系统基本使用 el-row。el-row代表每一行，el-col代表每一列，:span代表每一列代表多宽，整个一行有24个格子。每一栏之间的距离使用:gutter来进行指定
- 表格布局 el-table、 el-pagination
这里分栏之间使用了间隔，以及隔行变色功能
添加索引列：
2.用户状态列和操作列处理
- 作用域插槽
- 接口调用
<template slot-scope="scope">
<!-- 开关 -->
<el-switch v-model="scope.row.mg_state" @change="stateChanged(scope.row.id, scope.row.mg_state)">
</el-switch>
</template>
如何将bool值按需渲染成开关的显示效果？需要用到作用域插槽，通过作用域插槽接收scope，然后就可以使用scope.row属性，代表这一行对应的数据，并且使用Element-UI 的Switch组件
scope.row就是当前这一行的数据
如果你同时为这一列指定了prop和作用域插槽，作用域插槽会覆盖prop，所以就不需要prop
使用自定义插槽的形式渲染操作列：
操作这一列不对应任何的数据结构，要渲染成什么样子完全是由程序员自己决定。但是操作这一列必须要拿到对应的id才能进行操作，所以必须使用作用域插槽的形式来渲染
需要使用Element-UI 的Tooltip组件
3.渲染表格数据
3.1 调用后台接口
3.2 表格数据初填充
const { data: res } = await this.$http.get('users', { params: this.queryInfo })
if (res.meta.status !== 200) {
return this.$message.error('查询用户列表失败！ ')
}
this.total = res.data.total
this.userlist = res.data.users
获取用户列表数据：total表示所有的用户数量，pagenum表示第几页，users代表第pagenum页的用户
渲染用户列表数据：
4.分页器
分页组件包括：
- 当前页码： pagenum
- 每页条数： pagesize
- 记录总数： total
- 页码变化事件
- 每页条数变化事件
- 分页条菜单控制
1 <el-pagination 2 @size-change="handleSizeChange" 3 @current-change="handleCurrentChange" 4 :current-page="queryInfo.pagenum" 5 :page-sizes="[2, 3, 5, 10]" 6 :page-size="queryInfo.pagesize" 7 layout="total, sizes, prev, pager, next, jumper" 8 :total="total"> 9 </el-pagination>
layout作用是用来指定页面上显示哪些布局结构的
5.搜索功能
将搜索关键字，作为参数添加到列表查询的参数中。
<el-input
placeholder="请输入搜索的内容"
v-model="queryInfo.query"
clearable
@clear="getUserList">
<el-button slot="append"
icon="el-icon-search"
@click="getUserList">
</el-button>
</el-input>
实现搜索功能：当用户在文本框中输入了不同的名称之后，点击搜索按钮，可以根据指定的名称来搜索不同的用户。
首先应该将文本框和data中的数据做双向绑定，绑定之后，点击搜索按钮可以调用获取用户列表的函数，重新渲染列表数据
优化搜索功能：当输入搜索数据并点击搜索按钮之后，会重新渲染搜索的数据结果，但是如果我们想要再查看所有的用户，必须删掉搜索框中的内容，并且再重新点击一下搜索按钮。我们的需求是，当我们想查看全部的数据时，搜索框内可以提供一个清空的按钮，只要我们一点清空，文本框就可以被重置了，所有用户就会被立即查询出来了
此时只是文本框被清空了，但是数据并没有被重置，如何在清空文本框的同时重置所有的数据呢？
6.用户管理-用户状态控制
6.1 开关组件的用法
6.2 接口调用更改用户的状态
<el-switch v-model="scope.row.mg_state" @change="stateChanged(scope.row.id, scope.row.mg_state)"> </el-switch>
async stateChanged(id, newState) { const { data: res } = await this.$http.put(`users/${id}/state/${newState}`) if (res.meta.status !== 200) { return this.$message.error('修改状态失败！ ') } }
实现用户状态的修改：需要把用户状态的更改同步保存到数据库中
- 第一步，需要监听到switch开关状态的改变，拿到最新的状态
- 第二步，要调用对应的API接口，把最新的状态保存到数据库中
6.用户管理-添加用户
6.1 添加用户表单弹窗布局
- 弹窗组件Dialog的用法
- 控制弹窗显示和隐藏
<el-dialog title="添加用户" :visible.sync="addDialogVisible" width="50%">
<el-form :model="addForm" label-width="70px">
<el-form-item label="用户名" prop="username">
<el-input v-model="addForm.username"></el-input>
</el-form-item>
<!-- 更多表单项 -->
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="resetAddForm">取 消</el-button>
<el-button type="primary" @click="addUser">确 定</el-button>
</span>
</el-dialog>
在对话框中渲染添加用户的表单：
6.2 表单验证
内置表单验证规则
<el-form :model="addForm" :rules="addFormRules" ref="addFormRef" >
<!-- 表单 -->
</el-form>
addFormRules: {
username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
}
this.$refs.addFormRef.validate(async valid => { if (!valid) return })
自定义表单验证规则
const checkMobile = (rule, value, cb) => { let reg = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/ if (reg.test(value)) { cb() } else { cb(new Error('手机号码格式不正确')) } }
mobile: [
{ required: true, message: '请输入手机号', trigger: 'blur' },
{ validator: checkMobile, trigger: 'blur' }
]
使用自定义校验规则验证邮箱和手机号：
- 第一步，先定义一个箭头函数代表一个校验规则，然后给该箭头函数取个名字
- 第二步，在具体的规则中通过validator来使用自定义规则
6.3表单提交
将用户信息作为参数，调用后台接口添加用户
this.$refs.addFormRef.validate(async valid => {
if (!valid) return
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()
})
在整个对话框关闭之后重置整个表单：
添加用户的预验证功能：
7. 用户管理-编辑用户
7.1 根据 ID 查询用户信息
<el-button type="primary" size="mini" icon="el-icon-edit"
@click="showEditDialog(scope.row.id)">
</el-button>
async showEditDialog(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
}
用户名不需要有校验规则，所以不需要prop属性
7.2 编辑提交表单
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.getUserList()
this.editDialogVisible = false
})
8 用户管理-删除用户
<el-button type="danger" size="mini" icon="el-icon-delete"
@click="remove(scope.row.id)">
</el-button>
async remove(id) { // 询问是否要删除 const confirmResult = await this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).catch(err => err) const { data: res } = await this.$http.delete('users/' + id) if (res.meta.status !== 200) return this.$message.error('删除用户失败！ ') this.$message.success('删除用户成功！ ') this.getUserList() }
需要使用ElementUI中的MessageBox弹窗组件：
