电商后台管理系统（前端）

前言

跟着编写电商后台管理系统时总是囫囵吞枣照抄代码却没有自己的思考,于是我将要复盘自己所学习的内容,进一步巩固和加深对知识理解,也为我后续遗忘时查找提供帮助

一、配置环境

在vue2中引入element-ui、axios、router

① 引入element-ui

1、安装
打开终端输入
npm i element-ui -S
2、全局引入element-ui
在main.js中写入

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

②引入axios

1、安装
打开终端输入
npm i axios -S
2、全局引入axios(未封装)

import axios from "axios"
axios.defaults.baseURL = '<url>'
Vue.prototype.$http = axios//挂载到原型对象上

③引入router

1、安装
打开终端输入
npm install vue-router@3
2、全局引入router

import VueRouter from 'vue-router'
Vue.use(VueRouter);

3、创建router文件夹并暴露路由

在index文件夹写入

import Vue from 'vue'

//专门创建整个项目的路由
import VueRouter from 'vue-router'

import Login from '../components/Login'


Vue.use(VueRouter)

//创建并暴露一个路由器
const router  = new VueRouter({
   
	routes: [
		{
    path: '/', redirect:'/login'},
		{
    path: '/login', component: Login},
	]
})
export default router

在入口引入

import reuter from './router/index.js'

并在原型对象上写入

router:reuter

二、登录组件的实现

登录布局与实现

①登录布局

<div class="mei">
  		<div class="login-box">
  			<!-- 头像区域 -->
  			<div class="ava">
  				<img src="../assets/logo.png" alt="">
  			</div>
  			<!-- 登录表单区域 -->
  			<el-form   label-width="80px" class="ff">
  				<!-- 用户名  -->
  				<el-form-item >
  					<el-input  type="text" placeholder="请输入用户名" prop="username"
  						class="ipt1" prefix-icon="el-icon-user-solid">
  					</el-input>
  				</el-form-item>
  				<!-- 密码 -->
  				<br>
  				<br>
  				<el-form-item >
  					<el-input type="password" placeholder="请输如密码" class="ipt2"
  						prefix-icon="el-icon-lock">
  					</el-input>
					<br>
					<br>
					  
					
  				</el-form-item>
  				<!--  按钮 -->
  				
  <el-button type="primary" >登录</el-button>
  <el-button type="into" >重置</el-button>
  			</el-form>
  		</div>
  
  	</div>

.mei {
   
			height: 100%;
		}
		.login-box {
   
			width: 450px;
			height: 300px;
			background-color: #fff;
			border-radius: 3px;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			border-color: black;
		}
	
		.ava {
   
			height: 130px;
			width: 130px;
			border: 1px solid #eee;
			border-radius: 50%;
			padding: 10px;
			box-shadow: 0 0 10px #ddd;
			position: absolute;
			left: 50%;
			transform: translate(-50%, -50%);
			background-color: #fff;
		}
	
		img {
   
			height: 100%;
			width: 100%;
			border-radius: 50%;
			background-color: #fff;
	
		}
		.ff {
   
				position: absolute;
				bottom: 0;
				width: 50%;
				height: 68%;
				/* padding: 0 100px; */
				text-align: center;
				border-color: black;
			}
		.el-button{
   
			text-align: center;
			align-content: center;
		}
		
			.ipt1,
			.ipt2 {
   
				width: 250px;
				height: 26px;
				padding: 0px;
			}

②登录组件表单的数据绑定

1.在data写入

from:{
   			
	username:'admin',
	password:'123456'
	 } 

名称与后端接口一致
2.为el-form加入 :model=“from” 进行数据绑定

3.为登录和密码的el-input分别加入v-model="from.username"和v-model="from.password"进行数据绑定

4.实现表单验证
为el-form绑定:rules:“rules”
通过属性绑定在登录和密码的el-form-item分别绑定prop=“username”

prop=“password”
其值为表单的验证规则在data里写入

//表单验证规则
				rules: {
   
					username: [{
   //名字要与from中的名字一致
							required: true,//这项为必选项
							message: '请输入用户名',//错误提示
							trigger: 'blur'//当鼠标失去焦点时触发
						},
						{
   
							min: 5,//最小长度
							max: 11,//最大长度
							message: '请输入正确用户名',
							trigger: 'blur'
						}
					],
					password: [{
   
							required: true,
							message: '请输入密码',
							trigger: 'blur'
						},
						{
   
							min: 6,
							max: 25,
							message: '密码不少于6位数',
							trigger: 'blur'
						}
					]
				}

③实现表单的重置

为重置按钮绑定一个单击事件@click=“resetFromLogin”
为from绑定ref="ruleFormRef"使得可以调用from表表单得重置方法

在methods中写入resetFromLogin方法

methods:{
   
			resetFromLogin(){
   
				this.$refs.ruleFormRef.resetFields()
				}
		},

④登录前的校验

为登录按钮绑定@click=“login”

login() {
   
				this.$refs.ruleFormRef.validate(async valid => {
   
					if (!valid) return;
					const {
   data:res} = await this.$http.post('/login',this.from,)
					// console.log(res)
					if (res.meta.status !== 200) return this.$message.error('用户名或密码错误');
					this.$message.success('登录成功');//弹窗
					window.sessionStorage.setItem("token", res.data.token)//将token放置浏览器缓存
					this.$router.push("/home")//成功后跳转到home页面
				})
			}
			

⑤路由导航守卫控制访问权限

在index.js加入

router.beforeEach((to, from, next)=>{
   
	//to代表将要访问的路径
	//from代表从哪个路劲跳转而来
	//next是一个函数，表示放行
	//next()放行  next('/login')强制跳转
	
	if(to.path === '/login') return next()
	//获取token
	const tokenStr = window.sessionStorage.getItem('token')//必须携带tiken值,否则返回login,token值在请求拦截器中添加
	if(!tokenStr) return next('/login')
	next()
	
})

⑥页面效果

三、主页面的实现

注: 在router的index.js中添加home路由规则

主页面的布局

①主页菜单布局

创建home vue文件

<el-container class="home-container">
		<!-- 头部区域 -->
		<el-header>
			<div>
				<span>电商后台管理系统</span>
			</div>
			<el-button type="info">退出</el-button>
		</el-header>
		<!-- 页面主体区 -->
		<el-container>
			<!-- 侧边栏  -->
			<el-aside >
				<div class="TextButton" >|||</div>
				<!-- 侧边栏菜单区域 -->
				 <el-menu
				      :default-active="activPath"
				      class="el-menu-vertical-demo"
				      background-color="#333744"
				      text-color="#fff"
				      active-text-color="#409EFF"
					  
					  >
					  <!-- 一级菜单 -->
				      <el-submenu >
				        <template slot="title">
				          <i class="el-icon-menu"></i>
				          <span>导航</span>
				        </template>
						<!-- 二级菜单 -->
						
				          <el-menu-item >
						  <i class="el-icon-menu"></i>
						  二级
						 </el-menu-item>
				      </el-submenu>			  
				    </el-menu>
			</el-aside>
			<!-- 右侧内容主题  -->
			<el-main>
				<!-- 路由占位符  -->
				<router-view></router-view>
			</el-main>
		</el-container>
	</el-container>

.home-container {
   
		height: 100%;
		width: 100%;
		position: fixed;
	}

	.el-header {
   
		background-color: #373d41;
		display: flex;
		justify-content: space-between;
		padding-left: 0;