（1）用户管理下的用户列表界面如下所示：

• 在最上面是一个面包屑的导航区域，主要用到的是element-ui里的<el-breadcrumb>、<el-breadcrumb-item>。
• 接着用户列表的详细信息用到Card卡片来包裹一个包含搜索框和添加用户按钮的行以及一个表格。
• 下面的是分页区域，使用Pagination分页。
• 点击添加用户会弹出添加用户的对话框，点击操作中的每个也会弹出相应的对话框，而点击删除是会弹出是否确认删除的警告。

（2）然后来看一下用户管理下的用户列表功能都有实现哪些功能：

• getUsersList():从后台获取用户的列表数据，在created()中调用这个方法是为了页面加载的时候也同时获取数据渲染到页面中展示出来。
• handleSizeChange()、handleCurrentChange()都是用来处理用户对表格展示的不同需求，监听每页展示多少条数据和跳转到哪一页。
• changeUserState():改变用户的状态，这里的界面主要是使用element-ui中的switch，同时也是调用后台的接口来修改用户的状态。
• closeUserForm()：关闭添加用户后让对话框重置，意思就是我们填完的表单被关闭之后再次打开，之前所填的信息都被清除。给表单添加一个ref属性，使用this.$refs.ref属性值可以获取这个表单，然后调用表单的resetFields()方法来实现。
• addUser()：添加用户，就是点击添加用户对话框的确定按钮之后进行的动作。首先使用表单的validate()方法来对表单输入的数据是否正确，参数是一个函数，函数里的参数如果为true代表数据都符合要求，只要有一个不符合都为false。然后调用后台接口来添加用户，并且成功与否都关闭对话框，然后调用getUsersList()重新渲染页面。
• showEditDialog()：点击编辑按钮后弹出对话框，并且调用后台接口将点击的对应的用户信息渲染到对话框中。
• editCloseUserForm()：关闭编辑用户表单对话框让其重置。
• editUser()：编辑/修改用户的邮箱和电话信息。
• deleteUser()：删除用户，点击删除按钮之后首先弹出一个确认框，这里使用到element-ui里的MessageBox弹框中的确认消息，首先需要对这个组件在element.js文件中进行挂载，然后才可以使用。这里需要注意的是点击确定会返回confirm，而点击取消会报错，所以需要catch错误，返回的为cancel。然后调用后台接口进行删除。
• showAssignRole()：展示分配角色对话框，实现原理和前面展示编辑对话框一样。
• closeAssignRole()：关闭分配角色对话框对表单进行重置。
• assignRole()：分配角色。

（3）具体实现：
①首先在项目的components文件夹中新建user文件夹，然后在user文件夹中新建一个Users.vue文件，具体代码如下所示：

<template><div><!-- 面包屑导航区域 --><el-breadcrumb separator-class="el-icon-arrow-right"><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="8"><!-- 搜索框 --><el-input placeholder="请输入搜索内容" v-model="userParams.query" clearable @clear="getUsersList"><el-button slot="append" icon="el-icon-search" @click="getUsersList"></el-button></el-input></el-col><el-col :span="3"><el-button type="primary" @click="userDialogVisible=true">添加用户</el-button></el-col></el-row><!-- 用户数据列表区域 --><el-table :data="userList" style="width: 100%" stripe border><el-table-column type="index" width="50"></el-table-column><el-table-column prop="username" label="用户名" width="180"></el-table-column><el-table-column prop="email" label="邮箱" width="180"></el-table-column><el-table-column prop="mobile" label="电话" width="180"></el-table-column><el-table-column prop="role_name" label="角色" width="180"></el-table-column><!-- <el-table-column prop="mg_state" label="状态" width="180"> --><el-table-column label="状态" width="180"><!-- 作用域插槽会覆盖prop属性，则上面列中的属性prop可以删除  --><template slot-scope="scope"><!-- 可以使用{{slotProps.row}}来获取这一行的数据(相当于当前行的数据对象，row是个内置属性 $index可获取当前行的索引) --><el-switch v-model="scope.row.mg_state" @change="changeUserState(scope.row)"></el-switch></template></el-table-column><el-table-column label="操作" width="180"><template slot-scope="scope"><!-- {{scope.$index}} --><!-- 编辑 --><el-button type="primary" icon="el-icon-edit" circle @click="showEditDialog(scope.row.id)"></el-button><!-- 删除 --><el-button type="danger" icon="el-icon-delete" circle @click="deleteUser(scope.row.id,scope.row.username)"></el-button><!-- 文字提示 --><el-tooltip effect="dark" content="分配角色" placement="top" :enterable="false"><!-- 分配角色 --> <el-button type="warning" icon="el-icon-setting" circle @click="showAssignRole(scope.row.id)"></el-button></el-tooltip></template></el-table-column></el-table><!-- 分页区域 --><el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange":page-sizes="[1, 2, 5, 10]" :page-size="userParams.pagesize" :current-page="userParams.pagenum"layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination></el-card><!-- 添加用户对话框 --><el-dialog title="添加用户" :visible.sync="userDialogVisible" width="50%" @close="closeUserForm"><!-- 内容主体区域 --><!-- <span>这是一段信息</span> --><el-form :model="addUserForm" :rules="addUserRules" ref="addUserFormRef" label-width="100px" ><el-form-item label="用户名" prop="username"><el-input v-model="addUserForm.username"></el-input></el-form-item><el-form-item label="用户密码" prop="password"><el-input v-model="addUserForm.password"></el-input></el-form-item><el-form-item label="邮箱" prop="email"><el-input v-model="addUserForm.email"></el-input></el-form-item><el-form-item label="电话" prop="mobile"><el-input v-model="addUserForm.mobile"></el-input></el-form-item></el-form><!-- 底部区域 --><span slot="footer" class="dialog-footer"><el-button @click="userDialogVisible = false">取 消</el-button><el-button type="primary" @click="addUser">确 定</el-button></span></el-dialog><!-- 编辑用户对话框 --><el-dialog title="编辑用户信息" :visible.sync="editDialogVisible" width="50%" @close="editCloseUserForm"><el-form :model="editUserForm" :rules="editUserRules" ref="editUserFormRef" label-width="100px" ><el-form-item label="用户名"><el-input v-model="editUserForm.username" disabled="disabled"></el-input></el-form-item><el-form-item label="邮  箱" prop="email"><el-input v-model="editUserForm.email" ></el-input></el-form-item><el-form-item label="电  话" prop="mobile"><el-input v-model="editUserForm.mobile" ></el-input></el-form-item></el-form><span slot="footer" class="dialog-footer"><el-button @click="editDialogVisible = false">取 消</el-button><el-button type="primary" @click="editUser">确 定</el-button></span></el-dialog><!-- 分配角色对话框 --><el-dialog title="分配角色" :visible.sync="assignRoleDialogVisible" width="50%" @close="closeAssignRole"><el-form :model="assignRoleForm" ref="assignRoleFormRef" label-width="100px" ><el-form-item label="用户名"><el-input v-model="assignRoleForm.username" disabled="disabled"></el-input></el-form-item><el-form-item label="角色"><el-input v-model="assignRoleForm.rid" ></el-input></el-form-item> </el-form>   <span slot="footer" class="dialog-footer"><el-button @click="assignRoleDialogVisible = false">取 消</el-button><el-button type="primary" @click="assignRole">确 定</el-button></span></el-dialog></div>
</template><script>
export default {created(){// 页面一加载就执行获取用户列表数据的函数this.getUsersList();},data:function(){// 验证邮箱的自定义规则var checkEmail = (rule,value,callback) => {var emailreg = /^([a-zA-Z0-9-_])+@([a-zA-Z0-9-_])+(\.[a-zA-Z0-9-_])+/;if(emailreg.test(value)){callback();}else {callback(new Error('请输入正确格式的邮箱'));}};// 验证手机的自定义规则var checkPhone = (rule,value,callback)=>{var phonereg = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/;if(phonereg.test(value)){callback();}else {callback(new Error('请输入合法的手机号'));}}return {// 用户列表数据userList:[],// 用户总数total:0,// 查询用户列表的参数userParams:{'query':'',// 当前页码'pagenum':1,// 每页显示条数'pagesize':3},//是否显示添加用户对话框userDialogVisible:false,// 是否显示编辑用户对话框editDialogVisible:false,//是否显示分配角色对话框assignRoleDialogVisible:false,// 添加用户表单数据addUserForm:{username:'',password:'',email:'',mobile:''},// 编辑用户表单数据editUserForm:{},//分配角色表单数据assignRoleForm:{},// 添加用户表单验证规则addUserRules:{username: [{ required: true, message: '请输入用户名', trigger: 'blur' },{ min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }],password: [{ required: true, message: '请输入密码', trigger: 'blur' },{ min: 6, max: 18, message: '长度在 6 到 18 个字符', trigger: 'blur' }],email: [{ required: true, message: '请输入邮箱', trigger: 'blur' },{validator:checkEmail,trigger:'blur'}],mobile: [{ required: true, message: '请输入电话号码', trigger: 'blur' },{validator:checkPhone,trigger:'blur'}],},//编辑用户表单验证规则editUserRules:{email: [{ required: true, message: '请输入邮箱', trigger: 'blur' },{validator:checkEmail,trigger:'blur'}],mobile: [{ required: true, message: '请输入电话号码', trigger: 'blur' },{validator:checkPhone,trigger:'blur'}]}}},methods:{getUsersList:async function(){// 获取用户列表数据const {data:res} = await this.$http.get('users',{params:this.userParams});//    console.log(res);if(res.meta.status != 200) return this.$message.error(res.meta.msg);this.userList = res.data.users;this.total = res.data.total;},handleSizeChange:function(newsize){// 改变每页条数 pageSize 改变时会触发// console.log(newsize); newsize是自己选择的页面显示条数1，2,5,10// 根据选择的每页条数重新获取数据然后渲染出来this.userParams.pagesize = newsize;this.getUsersList();},handleCurrentChange:function(newpage){// 当前页 currentPage 改变时会触发// console.log(newpage);this.userParams.pagenum = newpage;this.getUsersList();},changeUserState:async function(userInfo){// 改变用户的状态// console.log(userInfo);${}为es6的语法代表变量const {data:res} = await this.$http.put(`users/${userInfo.id}/state/${userInfo.mg_state}`);// console.log(res);if(res.meta.status != 200) {userInfo.mg_state = !userInfo.mg_state;//状态不变return this.$message.error({message:'修改用户状态失败',duration:1000});}this.$message.success({message:'修改用户状态成功',duration:500});},// 关闭添加用户对话框让表单重置closeUserForm:function(){this.$refs.addUserFormRef.resetFields();},// 点击添加用户对话框的确定按钮addUser:function(){this.$refs.addUserFormRef.validate(async value => {// console.log(value); true代表输入的数据成功符合 false代表数据一个或多个不符合if(!value) return this.$message.error('添加用户失败！');const {data:res} = await this.$http.post('users',this.addUserForm);if(res.meta.status !==200){return this.$message.error('添加用户失败！');}else {this.$message.success(res.meta.msg);}// 添加成功后关闭对话框this.userDialogVisible = false;// 在列表页也展示新增加的用户this.getUsersList();})},//展示编辑对话框showEditDialog: async function(id){this.editDialogVisible = true;// 获取点击的用户数据//console.log(id);const {data:res} = await this.$http.get('users/'+id);if(res.meta.status !== 200) return this.$message.error('获取用户数据失败');this.editUserForm = res.data;},// 关闭编辑用户表单对话框让表单重置editCloseUserForm:function(){this.$refs.editUserFormRef.resetFields();},// 编辑用户信息editUser:function(){this.$refs.editUserFormRef.validate(async value => {if(!value) return this.$message.error('请输入正确的修改信息');// 修改用户信息const {data:res} = await this.$http.put('users/'+this.editUserForm.id,{email:this.editUserForm.email,mobile:this.editUserForm.mobile})if(res.meta.status !== 200) return this.$message.error('更新失败');this.$message.success(res.meta.msg);// 关闭编辑用户对话框this.editDialogVisible = false;// 重新渲染列表this.getUsersList();})},// 删除用户deleteUser:async function(id,username){const msg = await this.$confirm('此操作将永久删除用户'+username+', 是否继续?', '提示', {confirmButtonText: '删除',cancelButtonText: '取消',type: 'warning'}).catch(err => err);// 如果点击删除返回confirm，如果点击取消返回cancel// console.log(msg);if(msg === 'confirm'){const {data:res} = await this.$http.delete('users/'+id);if(res.meta.status !==200) return this.$message.error('删除用户失败！');this.$message.success(res.meta.msg);}// 重新渲染列表this.getUsersList();},// 展示分配角色对话框showAssignRole:async function(id){this.assignRoleDialogVisible = true;const {data:res} = await this.$http.get('users/'+id);// console.log(res);this.assignRoleForm = res.data;},// 关闭分配角色对话框使其重置closeAssignRole:function(){this.$refs.assignRoleFormRef.resetFields();},// 分配角色assignRole:async function(){const {data:res}  = await this.$http.put('users/'+this.assignRoleForm.id+'/role',{rid:this.assignRoleForm.rid});if(res.meta.status !== 200) return this.$message.error('分配角色失败~');this.$message.success(res.meta.msg);// 关闭对话框this.assignRoleDialogVisible = false;//重新渲染列表this.getUsersList();}}
}
</script><style lang="less" scoped></style>

②全局样式global.css代码：

html,
body,
#app {height: 100%;padding: 0;margin: 0;
}/* 面包屑导航 */.el-breadcrumb {margin-bottom: 30px;
}/* 卡片 */.el-card {box-shadow: 0 1px 1px rgba(216, 156, 156, 0.15) !important;
}/* 表格 */.el-table {margin-top: 15px;font-size: 15px;
}/* 分页 */.el-pagination {margin-top: 20px;
}

③element.js文件中的组件依赖用到的都需要载入。
④路由文件index.js代码：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../components/Login.vue'
import Home from '../components/Home.vue'
import Welcome from '../components/Welcome.vue'
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {return originalPush.call(this, location).catch(err => err)
}
import Users from '../components/user/Users.vue'
Vue.use(VueRouter)const routes = [// 配置路由重定向{ path: '/', redirect: '/login' },{ path: '/login', component: Login },{path: '/home',component: Home,redirect: '/welcome',children: [{ path: '/welcome', component: Welcome },{ path: '/users', component: Users }]}
]const router = new VueRouter({routes
})// 挂载路由导航守卫
router.beforeEach((to, from, next) => {// to将要访问的路径// from代表从哪个跳转而来// next一个函数,表示放行,若有参数则表示强制跳转的路径if (to.path == "/login") return next();const tokenStr = window.sessionStorage.getItem('token');if (!tokenStr) return next('/login');next();
})
export default router

（4）将用户管理功能上传到码云：
①创建一个新的分支user：git checkout -b user

②查看当前修改和新增的文件：git status

③将新增和修改的文件添加到暂存区并且提交到本地仓库：git add. git commit -m "完成主页、用户管理功能"

④将分支推送到远程码云：
首先先将user合并到master:git merge user

然后进行推送：
推送master：git push
推送user:git push -u origin user

⑤这次推送的时候用户名写错导致出现如下的错误：

解决方法：打开控制面板—>凭据管理器—>Windows凭据，然后找到gitee的凭据进行删除，再次在终端输入命令推送。（ps:忘记密码真的好头疼啊！！！）

这个功能到这里就结束啦，继续加油~~~