文章目录
- 1、引言
- 2、整体布局
- 3 、主页
- 3.1 实现基本的主页布局
- 3.2 美化主页的header区域
- 3.3 实现导航菜单的基本结构
- 3.4 通过axios拦截器添加token验证
- 3.5 解决每次只能打开一个菜单项和边框问题
- 3.7 实现首页路由的重定向
- 3.8 实现侧边栏路由链接的改造
- 5、结束语
1、引言
这是一个用于交流学习
的后台管理系统,会陆续的更新开发进度,欢迎关注!
2、整体布局
3 、主页
3.1 实现基本的主页布局
3.2 美化主页的header区域
3.3 实现导航菜单的基本结构
<el-menu
default-active="/userlist"
class="el-menu-vertical-demo el-menu"
@open="handleOpen"
@close="handleClose"
background-color="#0b2d5a"
text-color="#fff"
active-text-color="#ffd04b"
:unique-opened="true"
:router="true"
>
<el-submenu index="1">
<template slot="title">
<i class="el-icon-user"></i>
<span>用户管理</span>
</template>
<el-menu-item-group>
<el-menu-item index="/userlist">
<i class="el-icon-s-grid"></i>
用户列表
</el-menu-item>
</el-menu-item-group>
</el-submenu>
<el-submenu index="2">
<template slot="title">
<i class="el-icon-s-tools"></i>
<span>权限管理</span>
</template>
<el-menu-item-group>
<el-menu-item index="/rolelist">
<i class="el-icon-location"></i>
角色列表
</el-menu-item>
</el-menu-item-group>
<el-menu-item-group>
<el-menu-item index="/rightlist">
<i class="el-icon-location"></i>
权限列表
</el-menu-item>
</el-menu-item-group>
</el-submenu>
<el-submenu index="3">
<template slot="title">
<i class="el-icon-s-goods"></i>
<span>商品管理</span>
</template>
<el-menu-item-group>
<el-menu-item index="3-1">
<i class="el-icon-location"></i>
商品列表
</el-menu-item>
</el-menu-item-group>
<el-menu-item-group>
<el-menu-item index="3-2">
<i class="el-icon-location"></i>
分类参数
</el-menu-item>
</el-menu-item-group>
<el-menu-item-group>
<el-menu-item index="3-3">
<i class="el-icon-location"></i>
商品分类
</el-menu-item>
</el-menu-item-group>
</el-submenu>
<el-submenu index="4">
<template slot="title">
<i class="el-icon-s-order"></i>
<span>订单管理</span>
</template>
<el-menu-item-group>
<el-menu-item index="4-1">
<i class="el-icon-location"></i>
订单列表
</el-menu-item>
</el-menu-item-group>
</el-submenu>
<el-submenu index="5">
<template slot="title">
<i class="el-icon-s-marketing"></i>
<span>数据统计</span>
</template>
<el-menu-item-group>
<el-menu-item index="5-1">
<i class="el-icon-location"></i>
数据报表
</el-menu-item>
</el-menu-item-group>
</el-submenu>
</el-menu>
3.4 通过axios拦截器添加token验证
需要授权的 API ,必须在请求头中使用 Authorization 字段提供 token 令牌
通过 axios 请求拦截器
添加 token,保证拥有获取数据的权限。
// axios请求拦截 axios.interceptors.request.use(config => {
// 为请求头对象,添加 Token 验证的 Authorization 字段
config.headers.Authorization = window.localStorage.getItem('token')
return config
})
因为测试的是登录 Authorization 所以返回null 如果是登录之后,调用其他接口就会有一个token值了
3.5 解决每次只能打开一个菜单项和边框问题
elementUI 默认值是false,改为true则实现每次只打开一个菜单项
代码如下:
这里边框问题没有对齐,需要解决
解决办法:通过检察元素,发现是一个el-menu样式里有一个border-right值不为0 我们将它重置为none就可以解决问题了
3.7 实现首页路由的重定向
3.8 实现侧边栏路由链接的改造
5、结束语
到这里我们主页的布局就基本结束了,后续内容希望大家继续关注谢谢!