前言

一、用户管理模块布局

1.1 新建用户列表组件

在src/components/user/中新建Users.vue组件
在router.js中导入子级路由组件Users.vue，并设置路由规则
routes: [
	{
		path: '/home',
		component: Home,
		redirect: '/welcome',
		children: [
			{ path: '/welcome', component: Welcome },
			{ path: '/users', component: Users }
		]
	}
]
1
2
3
4
5
6
7
8
9
10
11
12
13

1.2 绘制用户列表基本结构

页面的基本布局如下图所示：

使用element-ui面包屑组件完成顶部导航路径，在src/plugins/element.js中导入组件Breadcrumb,BreadcrumbItem
使用element-ui卡片组件作为主体表格的容器，再使用element-ui输入框完成搜索框及搜索按钮，此时我们需要使用栅格布局来划分结构
在element.js中导入组件Card，Row，Col，然后再使用el-button制作添加用户按钮，代码如下：
<div>
	<!-- 面包屑导航 -->
	<el-breadcrumb separator="/">
		<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
		<el-breadcrumb-item>用户管理</el-breadcrumb-item>
		<el-breadcrumb-item>用户列表</el-breadcrumb-item>
	</el-breadcrumb>
	
	<!-- 卡片视图区域 -->
	<el-card>
		<!-- 搜索与添加区域 -->
		<el-row :gutter="20">
			<el-col :span="7">
				<el-input placeholder="请输入内容">
					<el-button slot="append" icon="el-icon-search"></el-button>
				</el-input>
			</el-col>
			<el-col :span="4">
				<el-button type="primary">添加用户</el-button>
			</el-col>
		</el-row>
	</el-card>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

二、用户信息列表展示

2.1 请求用户列表数据

export default {
	data() {
		return {
			//获取查询用户信息的参数
			queryInfo: {
				query: '',
				pagenum: 1,
				pagesize: 2
			},
			//保存请求回来的用户列表数据
			userList:[],
			total:0
		}
	},
	created() {
		this.getUserList()
	},
	methods: {
		async getUserList() {
			//发送请求获取用户列表数据
			const { res: data } = await this.$http.get('users', {params: this.queryInfo})
			//如果返回状态为异常状态则报错并返回
			if (res.meta.status !== 200) return this.$message.error('获取用户列表失败')
			//如果返回状态正常，将请求的数据保存在data中
			this.userList = res.data.users;
			this.total = res.data.total;
		}
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

2.2 展示用户列表数据

在得到后台返回的用户数据以后，我们需要使用element-ui表格组件来显示用户列表数据，在element.js中导入组件Table,TableColumn：
<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-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="状态">
		//在渲染展示状态时，会使用作用域插槽获取每一行的数据
		<template slot-scope="scope">
			//再使用switch开关组件展示状态信息,要记得在element.js中导入组件Switch
			<el-switch v-model="scope.row.mg_state"></el-switch>
		</template>
	</el-table-column>
	<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>
			<!-- 分配角色 -->
			//当我们把鼠标放到分配角色按钮上时希望能有一些文字提示，此时我们需要使用文字提示组件,在element.js中导入组件Tooltip,将分配角色按钮包含
			<el-tooltip class="item" 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>
</el-table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

2.3 实现分页展示用户列表

当我们使用表格来展示用户列表数据时，可以使用分页组件实现列表分页展示数据，在element.js中导入组件Pagination：

<!-- 分页导航区域
@size-change(pagesize改变时触发) @current-change(页码发生改变时触发) :current-page(设置当前页码)
:page-size(设置每页的数据条数) :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>

handleSizeChange(newSize) {
	//pagesize改变时触发，当pagesize发生改变的时候，我们应该以最新的pagesize来请求数据并展示数据
	this.queryInfo.pagesize = newSize;
	//重新按照pagesize发送请求，请求最新的数据
	this.getUserList();
},
handleCurrentChange( current ) {
	//页码发生改变时触发当current发生改变的时候，我们应该以最新的current页码来请求数据并展示数据
	this.queryInfo.pagenum = current;
	//重新按照pagenum发送请求，请求最新的数据
	this.getUserList();
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

三、用户状态控制

当用户点击列表中的switch组件时，用户的状态也要随之发生改变。
首先要监听用户点击switch组件的事件，并将当前状态保存到后台数据库中：
<el-switch v-model="scope.row.mg_state" @change="userStateChanged(scope.row)"></el-switch>

async userStateChanged(row) {
	//发送请求进行状态修改
	const { data: res } = await this.$http.put(`users/${row.id}/state/${row.mg_state}`)
	//如果返回状态为异常状态则报错并返回
	if (res.meta.status !== 200) {
		row.mg_state = !row.mg_state
		return this.$message.error('修改状态失败')
	}
	this.$message.success('更新状态成功')
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14

四、搜索功能实现

添加数据绑定，添加搜索按钮的点击事件，当用户点击搜索按钮的时候，根据文本框内容重新请求用户列表数据
<el-col :span="7">
	//给搜索框添加一个一键清除关键字的功能，只需要给文本框添加clearable属性
	//清除关键字以后，还要添加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>
1
2
3
4
5
6
7
8

五、添加用户

当我们点击添加用户按钮的时候，需要弹出一个对话框来实现添加用户的功能，首先我们需要在element.js文件中引入Dialog组件
接下来我们要为“添加用户”按钮添加点击事件，在事件中将addDialogVisible设置为true，即显示对话框
1
2

对话框样式如下图所示：

布局代码如下：

<!-- 对话框组件 :visible.sync(设置是否显示对话框) width(设置对话框的宽度):before-close(在对话框关闭前触发的事件) -->
<el-dialog title="添加用户" :visible.sync="addDialogVisible" width="50%">
	<!-- 对话框主体区域 -->
	<el-form :model="addForm" :rules="addFormRules" ref="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="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="addDialogVisible = false">确 定</el-button>
	</span>
</el-dialog>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

添加数据绑定和表单校验规则，代码如下：

data() {
	//验证邮箱的自定义规则
	var checkEmail = (rule, value, cb) => {
		const regEmail = /^\w+@\w+(\.\w+)+$/
		if (regEmail.test(value)) {
			return cb()
		}
		//返回一个错误提示
		cb(new Error('请输入合法的邮箱'))
	}
	//验证手机号码的规则
	var checkMobile = (rule, value, cb) => {
		const regMobile = /^1[34578]\d{9}$/
		if (regMobile.test(value)) {
			return cb()
		}
		//返回一个错误提示
		cb(new Error('请输入合法的手机号码'))
	}
	return {
		//是否显示添加用户弹出窗，默认不显示
		addDialogVisible: false,
		// 添加用户的表单数据
		addForm: {
			username: '',
			password: '',
			email: '',
			mobile: ''
		},
		// 添加表单的验证规则对象
		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, message: '邮箱格式不正确，请重新输入', trigger: 'blur'}
		],
		mobile: [
			{ required: true, message: '请输入手机号码', trigger: 'blur' },
			{ validator:checkMobile, message: '手机号码不正确，请重新输入', trigger: 'blur'}
		]
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

当关闭对话框时，重置表单：

给el-dialog添加@close事件，在事件中添加重置表单的代码：
<el-dialog title="添加用户" :visible.sync="addDialogVisible" width="50%" @close="addDialogClosed">

addDialogClosed() {
	this.$refs.addFormRef.resetFields()
},
1
2
3
4
5
6

点击对话框中的确定按钮，发送请求完成添加用户的操作，代码如下：

<el-button type="primary" @click="addUser">确 定</el-button>

addUser(){
	//点击确定按钮，添加新用户
	//调用validate进行表单验证
	this.$refs.addFormRef.validate( async valid => {
		if(!valid) return this.$message.error("请填写完整用户信息");
		//发送请求完成添加用户的操作
		const {data:res} = await this.$http.post("users",this.addForm)
		//判断如果添加失败，就做提示
		if (res.meta.status !== 200) return this.$message.error('添加用户失败')
		//添加成功的提示
		this.$message.success("添加用户成功")
		//关闭对话框
		this.addDialogVisible = false
		//重新请求最新的数据
		this.getUserList()
	})
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

六、修改用户

修改用户的逻辑和添加用户大体相同，这里不做过多赘述
1

七、删除用户

在点击删除按钮的时候，需要弹窗让用户确认是否删除。
弹窗组件需要挂载到vue中才能使用，首先在elements.js中导入MessageBox组件
然后将MessageBox组件挂载到实例：Vue.prototype.$confirm = MessageBox.confirm

当用户点击确认删除按钮时，要根据id发送请求给后台删除对应的用户数据
代码如下：
<!-- 删除按钮 -->
<el-button type="danger" icon="el-icon-delete" size="mini" @click="removeUserById(scope.row.id)"></el-button>

async removeUserById(id){
	//弹出确定取消框，是否删除用户
	const confirmResult = await this.$confirm('请问是否要永久删除该用户','删除提示',{
		confirmButtonText:'确认删除',
		cancelButtonText:'取消',
		type:'warning'
	}).catch(err=>err)
	//如果用户点击确认，则confirmResult 为'confirm'
	//如果用户点击取消, 则confirmResult获取的就是catch的错误消息'cancel'
	if(confirmResult != "confirm"){
		return this.$message.info("已经取消删除")
	}
	//发送请求根据id完成删除操作
	const {data:res} = await this.$http.delete('users/'+id)
	//判断如果删除失败，就做提示
	if (res.meta.status !== 200) return this.$message.error('删除用户失败')
	//修改成功的提示
	this.$message.success('删除用户成功')
	//重新请求最新的数据
	this.getUserList()
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

总结

今天完成了用户管理模块的内容，包括获取用户列表，搜索，添加及删除用户功能，核心是通过前后端的交互获取动态数据