Vue电商后台管理系统
前言
(三)主页布局和功能实现
一、主页布局
用到element-ui组件库中的Container布局容器,来实现主页的基础布局
(1)选择一个自己想要的布局,复制其代码
<template>
<el-container>
<!-- 头部区域 -->
<el-header>
<div>
<span>电商后台管理系统</span>
</div>
<el-button type="info" v-on:click="quit">退出</el-button>
</el-header>
<!-- 页面主体区域 -->
<el-container>
<!-- 侧边栏 -->
<el-aside width="200px">Aside</el-aside>
<!-- 右侧对应主体 -->
<el-main>Main</el-main>
</el-container>
</el-container>
</template>
(2)在plugins->element.js中导入并注册组件
import { Button, Form, FormItem, Input, Message ,Container, Header, Main, Aside} from 'element-ui'
Vue.use(Container)
Vue.use(Header)
Vue.use(Aside)
Vue.use(Main)
(3)添加css样式
<style lang="less" scoped>
.el-container {
width: 100%;
height: 100%;
}
.el-header {
background-color: #373D41;
display: flex;
justify-content: space-between;
align-items: center;
span{
color: #fff;
font-size: 28px;
}
.el-button{
color: white;
font-size: 18px;
}
}
.el-aside {
background-color: #333744;
}
.el-main {
background-color: #eaedf1;
}
</style>
二、左侧菜单布局
菜单分为二级,并且可以折叠
用到element-ui组件库中的NavMenu导航菜单
(1)粘贴代码到侧边栏中
<!-- 侧边栏 -->
<el-aside width="200px">
<!-- 侧边栏菜单区域 -->
<el-menu background-color="#333744" text-color="#fff" active-text-color="#ffd04b">
<!-- 一级菜单 -->
<el-submenu index="1">
<!-- 一级菜单模版区域 -->
<template slot="title">
<!-- 图标 -->
<i class="el-icon-location"></i>
<!-- 文本 -->
<span>导航一</span>
</template>
<!-- 二级菜单 -->
<el-menu-item index="1-4-1">
<!-- 一级菜单模版区域 -->
<template slot="title">
<!-- 图标 -->
<i class="el-icon-location"></i>
<!-- 文本 -->
<span>导航一</span>
</template>
</el-menu-item>
</el-submenu>
</el-menu>
</el-aside>
(2)导入并注册组件
import { Button, Form, FormItem, Input, Message ,Container, Header, Main, Aside, Menu, Submenu, MenuItemGroup, MenuItem} from 'element-ui'
Vue.use(Menu)
Vue.use(Submenu)
Vue.use(MenuItemGroup)
Vue.use(MenuItem)
(3)通过接口获取菜单数据
通过axios请求拦截器添加token,保证拥有获取数据的权限
(为每一次API请求头,挂载了Authorization)
// 配置axios
import axios from 'axios'
// 配置请求的根路径
axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/'
axios.interceptors.request.use(config => {
console.log(config)
config.headers.Authorization = window.sessionStorage.getItem('token')
// 在最后必须return config
return config
})
Vue.prototype.$http = axios
(4)获取左侧菜单数据
<script>
export default {
data() {
return {
menuList:[]
}
},
created() {
this.getMenuList()
},
methods: {
quit () {
// 清空token
window.sessionStorage.clear()
// 清空后重定向到登录界面
this.$router.push('/login')
},
// 获取所有菜单
async getMenuList () {
const { data:res } = await this.$http.get('menus')
// 失败
if(res.meta.status!==200) return this.$message.error(res.meta.msg)
this.menuList=res.data
console.log(res)
}
}
}
</script>
(5)通过双层for循环渲染左侧菜单
一级菜单是data,数组中的每一项
每一个一级菜单通过children属性又嵌套了所有的二级菜单
外层for循环主要渲染一级菜单,内层for循环渲染二级菜单
<!-- 一级菜单 -->
<el-submenu :index="item.id+''" v-for="item in menuList" :key="item.id">
<span>{{item.authName}}</span>
<!-- 二级菜单 -->
<el-menu-item :index="subItem.id+''" v-for="subItem in item.children" :key="subItem.id">
<span>{{subItem.authName}}</span>
(6)为选中项设置字体颜色并添加分类图标
<el-menu background-color="#333744" text-color="#fff" active-text-color="#409EFF">
其中active-text-color就是激活后的颜色
修改二级菜单图标
去element-ui中找到icon图标,复制其名称即可
<!-- 图标 -->
<i class="el-icon-menu"></i>
修改一级菜单图标,所有一级菜单图标都是不一样的,需要通过自定义图标形式去解决.
在数据中定义一个图标对象,把id作为对象的键,把图标名称作为值
data() {
return {
menuList:[],
iconsObj: {
'125': 'iconfont icon-user',
'103': 'iconfont icon-tijikongjian',
'101': 'iconfont icon-shangpin',
'102': 'iconfont icon-danju',
'145': 'iconfont icon-baobiao'
}
}
},
再用v-for遍历,把对应id号的图标添加上来
<!-- 图标 -->
<i :class={{iconsObj[item.id]}}></i>
(7)每次只能打开一个菜单项
给menu添加属性 unique-opened的值为true
此时就只能打开一个菜单栏
三、左侧菜单的折叠与展开
(1)布局与样式
<!-- 在侧边栏中最顶部添加 -->
<div class="toggle-btn">|||</div>
.toggle-btn{
background-color: #4A5064;
color: white;
font-size: 15px;
letter-spacing: 0.2em;
cursor: pointer;
}
(2)实现点击__折叠与展开
为按钮绑定一个单击事件
怎么实现?menu有一个属性collapse,值为true__折叠
只要实现点击按钮,切换这个值的true/false即可实现
data() {
return {
menuList:[],
iconsObj: {
'125': 'iconfont icon-user',
'103': 'iconfont icon-tijikongjian',
'101': 'iconfont icon-shangpin',
'102': 'iconfont icon-danju',
'145': 'iconfont icon-baobiao'
},
// 默认不折叠
isCollapse:false
}
}
methods: {
// 点击按钮__切换菜单的折叠与展开
toggleCollapse(){
this.isCollapse=!this.isCollapse
}
}
<!-- 侧边栏 -->
<el-aside :width="isCollapse ? '64px':'200px'">
<!-- 侧边栏菜单区域 -->
<el-menu background-color="#333744" text-color="#fff" active-text-color="#409EFF" unique-opened="true" :collapse="isCollapse" :collapse-transition="false">
四、实现路由的重定向效果
定义一个welcome组件,在home页面中main这个位置放一个路由占位符,然后把welcome这个路由设置为home路由的子路由规则,这样就在home页面中嵌套显示了welcome子组件
(1)在components->新建welcome.vue
<template>
<div>
<h3>Welcome!</h3>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
(2)在路由中导入welcome组件
import welcome from '../components/welcome.vue'
(3)把welcome作为home的子路由规则,并且当访问home页面时,重定向到welcome组件
{ path: '/home', component: home ,redirect:'/welcome',children:[
{path:'/welcome',component:welcome}
]}
(4)在home.vue中的menu中的main区域放一个路由占位符
<!-- 右侧对应主体 -->
<el-main>
<!-- 路由占位符 -->
<router-view></router-view>
</el-main>
五、实现左侧菜单路由链接的改造
把每个二级菜单改成路由链接,不用把每个都改成router-link,有更简单的方法
menu有一个属性router,默认值是false,就是没有启动路由跳转模式,启动该模式会在激活导航时以index作为path进行路由跳转
(1)开启router模式
为el-menu添加一个属性 router=“true”
此时,点击二级菜单,会发生跳转,跳转到二级菜单对应index的值,也就是id值
但是拿id值作为跳转地址并不是很合理,应该拿当前的path属性值作为唯一的跳转地址
<!-- 二级菜单 -->
<el-menu-item :index="'/'+subItem.path" v-for="subItem in item.children" :key="subItem.id">