Vue项目实战之电商后台管理系统(二) 主页模块_vue首页界面样式

前言

一、主页布局

1.1 整体布局

打开src-components-home.vue文件，进行布局，这里使用element-ui的布局组件：
<el-container class="home-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组件同名的类名可以帮助我们快速的给对应的组件添加样式，如下所示：
.home-container {
	height: 100%;
}
.el-header{
	background-color:#373D41;
}
.el-aside{
	background-color:#333744;
}
.el-main{
	background-color:#eaedf1;
}

注意：如果发现组件没有生效，是因为没有按需导入element-ui组件，要在plugins-element.js中导入
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

最终的效果图如下：

1.2 头部区域布局

template部分代码如下：
<!-- 头部区域 -->
<el-header>
	<div>
		<img src="../assets/heima.png" alt="">
		<span>电商后台管理系统</span>
	</div>
	<el-button type="info" @click="logout">退出</el-button>
</el-header>

style部分代码如下：
.el-header {
	background-color: #373d41;
	display: flex;
	justify-content: space-between;
	padding-left: 0;
	align-items: center;
	color: #fff;
	font-size: 20px;
	> div {
		display: flex;
		align-items: center;
		span {
			margin-left: 15px;
		}
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

1.3 左侧菜单布局

1.3.1 静态布局

这里使用el-menu组件，静态部分代码如下：
<!-- 侧边栏 -->
<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

1.3.2 通过axios请求拦截器来进行权限验证

后台除了登录接口之外，都需要token权限验证，我们可以通过添加axios请求拦截器来添加token，以保证拥有获取数据的权限
在main.js中添加代码如下：
//请求在到达服务器之前，先会调用use中的这个回调函数来添加请求头信息
axios.interceptors.request.use(config=>{
	//为请求头对象，添加token验证的Authorization字段
	config.headers.Authorization = window.sessionStorage.getItem("token")
	return config
})
1
2
3
4
5
6
7
8

1.3.3 通过axios获取左侧菜单数据

script部分代码如下所示：
export default {
	data() {
		return {
		// 左侧菜单数据
		menuList: []
		}
	},
	created() {
		// 在created阶段请求左侧菜单数据
		this.getMenuList()
	},
	methods: {
		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
		}
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

1.3.4 通过v-for双重循环渲染左侧菜单

<el-menu background-color="#333744" text-color="#fff" active-text-color="#ffd04b">
	<!-- 一级菜单 -->
	<el-submenu :index="item.id+''" v-for="item in menuList" :key="item.id">
		<!-- 一级菜单模板 -->
		<template slot="title">
			<!-- 图标 -->
			<i class="el-icon-location"></i>
			<!-- 文本 -->
			<span>{{item.authName}}</span>
		</template>
		<!-- 二级子菜单 -->
		<el-menu-item :index="subItem.id+''" v-for="subItem in item.children" :key="subItem.id">
			<!-- 二级菜单模板 -->
			<template slot="title">
				<!-- 图标 -->
				<i class="el-icon-location"></i>
				<!-- 文本 -->
				<span>{{subItem.authName}}</span>
			</template>
		</el-menu-item>
	</el-submenu>
</el-menu>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

1.3.5 其他设置

1、通过更改el-menu的active-text-color属性可以设置侧边栏菜单中点击的激活项的文字颜色
2、通过更改菜单项模板（template）中的i标签的类名，可以将左侧菜单栏的图标进行设置
3、通过在el-menu中添加一个属性unique-opened，可以保持左侧菜单每次只能打开一个，显示其中的子菜单
1
2
3

1.3.6 实现左侧菜单的收缩功能

首先要添加一个按钮绑定点击事件来控制菜单的收缩：
<div class="toggle-button" @click="toggleCollapse">|||</div>

接着在data中定义一个标志位，默认为false，当点击按钮时将其取反：
// 点击按钮，切换菜单的折叠与展开
toggleCollapse() {
	this.isCollapse = !this.isCollapse
},

然后给侧边栏菜单el-menu绑定属性：
<!-- 侧边栏菜单，:collapse="isCollapse"（设置折叠菜单为绑定的 isCollapse 值），:collapse-transition="false"（关闭默认的折叠动画） -->
<el-menu :collapse="isCollapse" :collapse-transition="false" >

最后还要设置左侧菜单的宽度： 
<el-aside :width="isCollapse ? '64px' : '200px'">
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

1.4 右侧主体区域布局

1.4.1 新增默认子级路由组件

首先在src-components中新建welcome.vue组件，该组件是每次打开网站时默认显示的内容
    
然后要在右侧内容主体中添加路由占位符：
<!-- 右侧内容主体 -->
<el-main>
	<!-- 路由占位符 -->
	<router-view></router-view>
</el-main>

接着在router.js中导入子级路由组件，并设置路由规则以及子级路由的默认重定向：
const router = new Router({
	routes: [
		{
			path: '/home',
			component: Home,
			redirect: '/welcome',
			children: [
				{ path: '/welcome', component: Welcome },
			]
		}
	]
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

1.4.2 给左侧菜单添加路由链接

给el-menu添加router属性即可实现路由跳转，如下所示：
<el-menu  router >
当点击二级菜单时，会根据菜单的index属性进行路由跳转，我们需要重新绑定index的值，如下所示：
<!-- 二级菜单 -->
<el-menu-item :index="'/' + subItem.path">
1
2
3
4
5

1.4.3 给左侧菜单添加点击高亮效果

当点击二级菜单的时候，我们需要高亮显示当前显示的页面
我们可以通过设置el-menu的default-active属性来设置当前激活菜单的index
但是default-active属性也不能写死，固定为某个菜单值
所以我们可以先给所有的二级菜单添加点击事件,并将path值作为方法的参数
@click="saveNavState('/'+subItem.path)"
在saveNavState方法中将path保存到sessionStorage中
saveNavState( path ){
  //点击二级菜单的时候保存被点击的二级菜单信息
  window.sessionStorage.setItem("activePath",path);
  this.activePath = path;
}
然后在数据中添加一个activePath绑定数据，并将el-menu的default-active属性设置为activePath
最后在created中将sessionStorage中的数据赋值给activePath
this.activePath = window.sessionStorage.getItem("activePath")
1
2
3
4
5
6
7
8
9
10
11
12
13
14

总结

至此我们的主页的总体布局就完成了，下一步要开发右侧主体显示的其他页面组件，比如用户模块，商品模块等