vue.js从入门到深入再到随心而用————vue电商项目004(权限管理模块)

在完成用户列表功能后大家记得把项目提交到本地和云端，并且创建一个rights子分支

1.权限列表

1.1添加对应的路由规则

import Rights from '../components/power/Rights.vue'

......
      path: '/home', component: Home, redirect: '/welcome', children: [
        { path: "/welcome", component: Welcome },
        { path: "/users", component: Users },
        { path: "/rights", component: Rights }
      ]
......

在components新建一个power文件夹然后再文件夹下新建一个Rights.vue组件

1.2添加面包屑导航

因为所有的面包屑导航都差不多，只要适当的修改其中的内容即可，我们可以复制Users.vue中的面包屑导航然后适当的修改就可以了

<!-- 面包屑导航区域 -->
		<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>

1.3添加卡片视图区域

所谓的卡片视图区域其实就是显示数据的地方，在Users.vue中我们也用到了el-table一系列的组件

<el-card>
			<el-table :data="RightsList" border stripe>
				<el-table-column label="#" type="index"></el-table-column>
				<el-table-column label="权限名称" prop="authName"></el-table-column>
				<el-table-column label="路径" prop="path"></el-table-column>
				<el-table-column label="权限等级" prop="level">
					<template slot-scope="scope">
						<el-tag v-if="scope.row.level==='0'">一级</el-tag>
						<el-tag type="success" v-else-if="scope.row.level==='1'">二级</el-tag>
						<el-tag type="warning" v-else>三级</el-tag>
					</template>					
				</el-table-column>
			</el-table>
		</el-card>

1.4 定义权限列表并且获取所有的权限信息

功能的实现比较简单就是获取到数据并且展示在页面上就OK了

data(){
			return{
				//所有的权限列表
				RightsList:[]
			}
		},
		created(){
			//获取所有的权限
			this.getRightsList()
		},
		methods:{
			//获取权限列表
			async getRightsList(){
				const {data:res}=await this.$http.get('rights/list')
				if(res.meta.status!==200){
					return this.$message.error('获取权限列表失败')
				}
				console.log(res.data)
				this.RightsList=res.data
			}
		}

1.5tag组件的使用

在权限列表功能的完成过程中我们又使用了一个一个新的组件tag，大家也需要进行注册然后再进行使用

使用作用域插槽并且使用v-if和v-else渲染不同的权限等级

1.6效果图和完成的代码

效果图：

完整的代码：

<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-table :data="RightsList" border stripe>
				<el-table-column label="#" type="index"></el-table-column>
				<el-table-column label="权限名称" prop="authName"></el-table-column>
				<el-table-column label="路径" prop="path"></el-table-column>
				<el-table-column label="权限等级" prop="level">
					<template slot-scope="scope">
						<el-tag v-if="scope.row.level==='0'">一级</el-tag>
						<el-tag type="success" v-else-if="scope.row.level==='1'">二级</el-tag>
						<el-tag type="warning" v-else>三级</el-tag>
					</template>					
				</el-table-column>
			</el-table>
		</el-card>
	</div>	
</template>

<script>
	export default{
		data(){
			return{
				//所有的权限列表
				RightsList:[]
			}
		},
		created(){
			//获取所有的权限
			this.getRightsList()
		},
		methods:{
			//获取权限列表
			async getRightsList(){
				const {data:res}=await this.$http.get('rights/list')
				if(res.meta.status!==200){
					return this.$message.error('获取权限列表失败')
				}
				console.log(res.data)
				this.RightsList=res.data
			}
		}
	}
</script>

<style lang="less"  scoped>
</style>

2.角色列表

2.1新建角色列表组价和添加路由

在power文件夹下新建一个Roles.vue子组件，然后添加对应的路由规则
大家完善一下即可

2.2添加面包屑导航

一样的套路再来一遍，啊哈哈

<!-- 面包屑导航 -->
		<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>

2.3卡片视图（显示数据）

• 在data中添加一个rightsList数据，在methods中提供一个getRightsList方法发送请求获取权限列表数据，在created中调用这个方法获取数据,同时在页面上写出卡片的视图区域

export default {
    data(){
        return {