主页设计
实现效果
设计思路
主要分为三个部分
- 头部区域
- 侧边栏区域
- 右侧主体区域
使用 Container 布局容器来搭建页面的基本结构 container
<el-container>：外层容器。当子元素中包含 <el-header> 或 <el-footer>时，全部子元素会垂直上下排列，否则会水平左右排列。 <el-header>：顶栏容器。 <el-aside>：侧边栏容器。 <el-main>：主要区域容器。 <el-footer>：底栏容器。
具体实现
搭建基本结构
选择的是第四个，粘到 Home.vue中即可
<el-container>
<!-- 头部区域 -->
<el-header>
Header
<el-button type="info" @click="logout">退出</el-button>
</el-header>
<!-- 内容主体区域 -->
<el-container>
<!-- 侧边栏 -->
<el-aside width="200px">Aside</el-aside>
<!-- 右侧内容主体区域 -->
<el-main>Main</el-main>
</el-container>
</el-container>
element ui 中提供的组件，他们的名称就是类名，可以直接用来选择添加样式
给他们添加样式：背景色，让他们充满整个屏幕【给最外部的el-container添加一个类名，设置height：100%】
header区域设计
分为图标和文本及右侧的按钮
<!-- 头部区域 -->
<el-header>
<div>
<img src="../assets/touxiang.jpg" />
<span>电商管理系统</span>
</div>
<el-button type="info" @click="logout">退出</el-button>
</el-header>
flex布局
.el-header {
background-color: #373d41;
display: flex;
justify-content: space-between; // 左右贴边对齐
align-items: center; // 按钮居中对齐
> div {
display: flex;
align-items: center; // 文本纵向居中对齐
img {
width: 60px;
border-radius: 50%;
}
span {
color: white;
font-size: 18px;
margin-left: 15px;
}
}
}
aside 侧边栏设计
菜单分为两级，可以折叠，使用 el-menu menu
使用自定义颜色那部分的样例
<!-- 侧边栏 -->
<el-aside width="200px">
<!-- 侧边栏菜单区域 -->
<el-menu background-color="#333744" text-color="#fff" active-text-color="#409eff">
<!-- 一级菜单 -->
<el-submenu index="1">
<!-- 一级菜单模板区域 -->
<template slot="title">
<!-- 图标 -->
<i :class="el-icon-location"></i>
<!-- 文本 -->
<span>导航一</span>
</template>
<!-- 二级菜单 -->
<!-- router开启路由模式，index当作跳转地址 -->
<el-menu-item index="1-1">
<template slot="title">
<!-- 图标 -->
<i class="el-icon-menu"></i>
<!-- 文本 -->
<span>导航1-1</span>
</template>
</el-menu-item>
</el-submenu>
</el-menu>
</el-aside>
.el-aside {
background-color: #333744;
.el-menu {
border-right: 0; // 菜单右侧边框线
}
}
通过axios添加token验证
注意：需要授权的 API ，必须在请求头中使用 Authorization 字段提供 token 令牌
在 main.js中添加
// 通过axios 拦截器添加token验证
axios.interceptors.request.use(config => {
config.headers.Authorization = window.sessionStorage.getItem('token')
// 最后必须添加return
return config
})
通过接口动态获取侧边栏菜单数据
获取数据
应该在页面一开始加载的时候就立即获取菜单数据
data() {
return {
menulist: []
};
},
created() {
this.getMenuList()
},
getMenuList() {
// 获取所有的菜单名称
this.$http.get('menus').then((res) => {
console.log(res);
if (res.data.meta.status == 200) {
this.menulist = res.data.data
console.log(this.menulist);
} else {
return this.$message.error(res.data.meta.msg)
}
});
},
v-for 渲染数据和图标
数据类型
- 为每个el-submenu指定唯一的index 控制其打开一个的时候不会全部点开，动态数据绑定
- index要用字符串格式，item.id是数值型，要转换，拼接上一个空字符串 :是动态绑定
- authName为一级菜单的文本区域
- id为 v-for中的key
- 二级菜单循环其中的children
- 二级图标都使用 "el-icon-menu"
- 一级图标 在data中定义一个图标对象，以id作为key，图标作为value
- active-text-color="#409eff" 设置选中时高亮的颜色
- unique-opened 设置每次只打开一个菜单栏
<!-- 侧边栏 -->
<el-aside width="200px">
<!-- 侧边栏菜单区域 -->
<el-menu background-color="#333744" text-color="#fff" active-text-color="#409eff" unique-opened>
<!-- 一级菜单 -->
<el-submenu :index="item.id + ''" v-for="item in menulist" :key="item.id">
<!-- 一级菜单模板区域 -->
<template slot="title">
<!-- 图标 -->
<i :class="iconObj[item.id]"></i>
<!-- 文本 -->
<span>{{item.authName}}</span>
</template>
<!-- 二级菜单 -->
<!-- router开启路由模式，index当作跳转地址 -->
<el-menu-item :index="subItem.id + ''" v-for="subItem in item.children" :key="subItem.id">
<template slot="title">
<!-- 图标 -->
<i class="el-icon-menu"></i>
<!-- 文本 -->
<span>{{subItem.authName}}</span>
</template>
</el-menu-item>
</el-submenu>
</el-menu>
</el-aside>
<script>
export default {
data() {
return {
menulist: [],
iconObj: {
"125": "el-icon-user-solid",
"103": "el-icon-lock",
"101": "el-icon-s-goods",
"102": "el-icon-s-order",
"145": "el-icon-s-data"
}
};
},
设置每次只能打开一个菜单栏
侧边栏折叠与展开
- 放置侧边栏对象 div 标签 和 |||
- 设置样式
- collapse 属性控制折叠与展开状态
- collapse-transition属性 控制关闭折叠动画
- 在data 中定义控制变量 isCollapse
- 设置点击触发方法
- 侧边栏宽度根据 isCollapse 来动态赋值
<el-container>
<!-- 侧边栏 -->
<el-aside :width="isCollapse ? '64px' : '200px'">
<div class="toggle-button" @click="toggleCollapse">|||</div>
<el-menu
background-color="#333744"
text-color="#fff"
active-text-color="#409eff"
unique-opened
:collapse="isCollapse"
:collapse-transition="false">
.toggle-button {
font-size: 10px;
line-height: 24px;
color: #fff;
text-align: center;
letter-spacing: 0.2em; // 三个竖线之间的间距
cursor: pointer; // 鼠标放上去变成小手的形状
}
data() {
return {
menulist: [],
iconObj: {
"125": "el-icon-user-solid",
"103": "el-icon-lock",
"101": "el-icon-s-goods",
"102": "el-icon-s-order",
"145": "el-icon-s-data"
},
isCollapse: false
};
},
toggleCollapse() {
// 点击按钮，切换菜单的折叠与展开
this.isCollapse = !this.isCollapse;
}
侧边栏路由链接改造
- 开启路由模式，在 el-menu 中加一个 router属性
- 跳转默认是index对应的位置，所以把 index 改为 数据中的path属性
<el-menu background-color="#333744" text-color="#fff" active-text-color="#409eff"
unique-opened :collapse="isCollapse" :collapse-transition="false" router>
<!-- 二级菜单 -->
<!-- router开启路由模式，index当作跳转地址 -->
<el-menu-item :index="'/'+subItem.path" v-for="subItem in item.children" :key="subItem.id">
首页路由重定向
- 定义 welcome组件
- 在Home.vue 中 main 部分放置路由占位符
- 将welcome组件设置为Home的子路由
<template>
<div>
<h3>welcome</h3>
</div>
</template>
<script>
export default {
data() {
return {
}
},
components: {
}
}
</script>
<style lang="less" scoped>
</style>
<!-- 右侧内容主体区域 -->
<el-main>
<!-- 路由占位符 -->
<router-view></router-view>
</el-main>
const router = new Router({
routes: [
{ path: '/', redirect: '/login' },
{ path: '/login', component: Login },
{
path: '/home',
component: Home,
redirect: '/welcome',
children: [
{ path: '/welcome', component: Welcome },