后台管理初级：权限开发

 登陆页面：

<template>
	<div class="Login">
		<div class="form">
			<el-form :label-position="labelPosition" :model="formLabelAlign" class="ele" :rules="rules">
				<h4>KGC后台管理系统\{^-^}/ hi!</h4>
				<el-form-item prop="name">
					<el-input v-model="formLabelAlign.name" prefix-icon="el-icon-user" placeholder="请输入用户名"></el-input>
				</el-form-item>
				<el-form-item prop="region">
					<el-input v-model="formLabelAlign.region" prefix-icon="el-icon-lock" placeholder="请输入密码"></el-input>
				</el-form-item>
				<el-row>
					<el-button type="primary" @click="sum()" size="medium">立即登录</el-button>
				</el-row>
			</el-form>

		</div>
	</div>
</template>

<script>
	export default {
		name: 'Login',
		data() {
			return {
				labelPosition: 'left',
				formLabelAlign: {
					name: '',
					region: '',
				},
				rules: {
					name: [{
							required: true,
							message: '请输入账号',
							trigger: 'blur'
						},
						{
							min: 3,
							max: 5,
							message: '长度在 3 到 5 个字符',
							trigger: 'blur'
						}
					],
					region: [{
							required: true,
							message: '请输入密码',
							trigger: 'blur'
						},
						{
							min: 3,
							max: 12,
							message: '长度在 3 到 12 个字符',
							trigger: 'blur'
						}
					]
				}
			}
		},
		created() {
			window.sessionStorage.clear()
			
		},
		methods: {
			sum() {
				//获取后台数据
				this.$axios.get('/users').then(res => {
					//遍历用户组
					for (let i = 0; i <= res.data.length; i++) {
						//判断是否输入用户名
						if (this.formLabelAlign.name) {
							//判断输入的用户名与密码是否匹配同一个用户组内的用户与密码
							if (this.formLabelAlign.name == res.data[i].name && this.formLabelAlign.region == res
								.data[i].pwd) {
									//登录成功，将用户名放进VUEX
								this.$store.commit('add', this.formLabelAlign.name)
								//获取用户数据组
								this.$axios.get('/goods').then(res => {
									//放入VUEX
									this.$store.commit('addSuder', res.data)
								})
								//获取商品数据组
								this.$axios.get('/orders').then(res => {
									//放入VUEX+
									this.$store.commit('addStudents', res.data)
								})
								//跳转到主页
								this.$router.push('/')
								//成功弹框
								return this.$message({
									message: '恭喜你，登录成功',
									type: 'success'
								});
							}
						}
						//未匹配到，登陆失败
						if (i + 1 == res.data.length) {
							this.$message({
								message: '登陆失败',
								type: 'danger'
							});

						}
					
					}

				

				})

			},
		}
	}
</script>

<style scoped>
	.Login {
		width: 100%;
		height: 100%;
	}

	.form {
		width: 400px;
		height: 300px;
		margin: 100px auto;
		text-align: center;
	}
</style>

登录后主页：

头部组件：

<template>
	<div class="header">
		<p>KGC后台管理系统</p>
		<div class="he">
			<p>{{$store.state.name}}</p>
			<el-link @click="deLete" to="/">退出</el-link>
		</div>
	</div>
</template>

<script>
	export default {
		
		methods:{
			deLete(){
				//退出后删除本地储存的数据并跳转到登陆页面
				window.sessionStorage.clear()
				this.$router.push('/login')
			}
		}
		
	}
</script>

<style>
	.header{
		line-height: 50px;
		color: #fff;
	}
	p{
		display: inline-block;
		
	}
	.he {
		display: inline-block;
		float: right;
		line-height: 50px;
		color: #fff;
	}
</style>

身体组件：

<template>
	<div id="com">
		<el-tabs :tab-position="tabPosition" v-model="activeName">
			<el-tab-pane label="用户管理" name="finter" v-if="name=='admin'">
				<template>
					<el-table :data="tableData" style="width: 100%" v-loading="fullscreenLoading">
						<el-table-column prop="id" label="编号">
						</el-table-column>
						<el-table-column prop="name" label="用户名">
						</el-table-column>
						<el-table-column prop="role" label="角色"> </el-table-column>
						<el-table-column prop="orderno" label="手机号码"> </el-table-column>
						<el-table-column prop="email" label="邮箱"> </el-table-column>
						<el-table-column label="操作">
							<template v-slot="scope">
								<el-button size="mini" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
							</template>
						</el-table-column>
					</el-table>
				</template>
			</el-tab-pane>
			<el-tab-pane label="配置管理" name="first">
				<template>
					<el-table :data="table" style="width: 100%">
						<el-table-column prop="id" label="编号">
						</el-table-column>
						<el-table-column prop="name" label="商品名称">
						</el-table-column>
						<el-table-column prop="price" label="单价"> </el-table-column>
						<el-table-column prop="number" label="库存"> </el-table-column>
					</el-table>
				</template>
			</el-tab-pane>
		</el-tabs>

	</div>
</template>
<script>
	import {
		mapState
	} from 'vuex';
	export default {
		computed: {
			...mapState(['tableData']),
			...mapState(['table'])
		},
		data() {
			return {
				tabPosition: 'left',
				activeName: "",
				fullscreenLoading: false,
				//获取登录账号名
				name: JSON.parse(window.sessionStorage.getItem('name'))
			};
		},
		created() {
			//用作删除后台数据后再请求渲染
			this.$axios.get('/orders').then(res => {
				console.log(res);
				window.sessionStorage.setItem('rightsList', JSON.stringify(res.data))
				this.$store.commit('addStudents', res.data)
				

			})

		},
		mounted() {
			//因后台数据不完善，用来判断是否管理员
			if (this.name == 'admin') {
				this.activeName = "finter"
			} else {
				this.activeName = "first"
			}
		},
		methods: {
			async handleDelete(id) {
				//element组件
				this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning",
					})
					.then(() => {
						this.$message({
								type: "success",
								message: "删除成功!",
							},
							//获取本地数据
							window.sessionStorage.removeItem('rightsList'),
							//状态
							this.fullscreenLoading = true,
							//删除后台数据
							this.$axios.delete('/orders' + '/' + id),
							//两秒后状态停止并刷新页面
							setTimeout(() => {
								this.fullscreenLoading = false;
								window.location.reload()
							}, 2000),



						);


					})
					.catch(() => {
						this.$message({
							type: "info",
							message: "已取消删除",
						});
					});


		

			},
		}
	};
</script>
<style>
	el-table-column {
		line-height: 10px;
	}
</style>

router:

import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../views/Login'
import About from '../views/About.vue'
Vue.use(VueRouter)

const routes = [{
		path: '/',
		name: 'Home',
		component: () => import( /* webpackChunkName: "about" */ '../views/Home.vue')
	},

	{
		path: '/login',
		name: 'Login',
		component: Login,

	},
	{
		path: '*',
		name: 'About',
		component: About,
	}

]

const router = new VueRouter({
	routes
})
//后台数据无token所以用name代替，获取本地储存中的name，有就放，无就打回
router.beforeEach((to, from, next) => {
	if (to.path == '/login') {
		next()
	} else {
		let name = window.sessionStorage.getItem('name')
		if (!name) {
			next('/login')
		} else {
			next()
		}
	}
})
export default router

vuex:

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
	state: {
		name: JSON.parse(window.sessionStorage.getItem('name') || '[]'),
		tableData: JSON.parse(window.sessionStorage.getItem('rightsList') || '[]'),
		table: JSON.parse(window.sessionStorage.getItem('table') || '[]')

	},
	mutations: {
		addStudents(state, preload) {
			//从登陆页面获取的用户数据组，放入数据池并本地保存
			state.tableData = preload
			console.log(state.tableData);
			window.sessionStorage.setItem('rightsList', JSON.stringify(preload))
		},
		add(state, preload) {
			//从登陆页面获取的登录用户名，放入数据池并本地保存
			state.name = preload
			console.log(state.name);
			window.sessionStorage.setItem('name', JSON.stringify(preload))
		},
		
		addSuder(state, preload) {
			//从登陆页面获取的商品数据组，放入数据池并本地保存
			state.table = preload
			window.sessionStorage.setItem('table', JSON.stringify(preload))
		}
	},
	actions: {},
	modules: {}
})