Vue学习四—— Home主体页面

前言

在之前已经实现了登录页面，项目页面增删查改的操作，然后选择项目，进入Home页面，也就是核心主体页面。

一、实现效果图

使用elemrnt-plus的布局容器，将页面分为4部分，也可以选择自己喜欢的布局。
在侧边栏点击相应的内容，出现在右边main

布局容器

如果将3块内容全部写在一个homeview下面，代码会很多，不方便查找修改。所以使用自定义组件，分开来写

<!-- HomeView.vue -->
<template>
	<el-container>
		<!-- 左侧侧边栏 -->
		<el-aside width="200px">
			<LeftMenu></LeftMenu>
		</el-aside>

		<el-container>
			<!-- 页面头部内容 -->
			<el-header>
				<Header></Header>
			</el-header>
			<!-- 页面主体内容 -->
			<el-main>
				
				<!-- 主体内容区域 -->
				
			
			</el-main>
			<!-- 页面底部内容 -->
			<el-footer>
				<Footer></Footer>
			</el-footer>
		</el-container>
	</el-container>
</template>

<style lang="scss" scoped>
	
	.el-container {
		height: 100%;
	
		.el-aside {
			border-right: solid 1px #6a6a6a;
		}
	
		.el-header {
			border-bottom: solid 1px #6a6a6a;
			padding: 0;
			height: 55px;
		}
	
		.el-footer {
			border-top: solid 1px #6a6a6a;
			height: 29px;
		}
		.el-main{
			padding: 0;
		}
	
	}
</style>

二、页面内容

1. 左边部分(LeftMenu)

创建LeftMenu.vue文件，用来写左边内容。左边部分分为上面logo和下面的列表，列表循环展示MenuList的内容

设置菜单激活

通过设置element–plus菜单组件的参数，来管理菜单项的激活状态。
比如设置了第二个路径是\home，当前访问的路径也是\home，第二个菜单就被激活高亮显示了

2.顶部部分（Header）

初步设想是分3块内容，左边的收缩按钮（将左侧菜单栏收缩），中间一个平台名称展示，右边的个人信息和其他操作。

<div class="head_box">
		<div class="left_box"></div>
		<div class="center_box"></div>
		<div class="righr_box"></div>
</div>

左侧部分（left_box）

1. 测试环境的获取及选择

<div class="left_box">
	<el-button icon="Fold"></el-button>
	<!-- 选择框 -->
	<el-select v-model="env" placeholder="请选择测试环境">
		<el-option v-for='item in evnList' :key="item.id" :label="item.name" :value="item.id" />
	</el-select>
</div>

结合后端，测试环境的值从后端请求获取。

1. 封装api接口

//ProjectApi.js
//获取测试环境列表
	getEnvListApi(pro_id){
		return request.get(`/api/testPro/envs`,{
			params:{
				project:pro_id
			}
		})
	}

2. 在ProStore中封装获取列表的方法

export const ProjectStore = defineStore('proStore',{
	state:() => {
		return {
			pro : {},
			envList : [],
			env: null,
		}
	},
	actions:{
		//获取项目下所有测试环境
		async getEnvList(){
			const response =  await http.pro.getEnvListApi(this.pro.id)
			if(response.status==200){
				this.envList = response.data
			}
		}
	},
	...

3. 在Header中使用方法获取环境数据

	import {ref,reactive} from 'vue'
	import http from '@/api/index'
	import {ProjectStore} from '@/stores/module/ProStore'
	import { storeToRefs } from 'pinia'
	
	const proStore = ProjectStore()
	const proStoreRef = storeToRefs(proStore)
	proStore.getEnvList()
	const envList = proStoreRef.envList
	let env = proStoreRef.env

这里 storeToRefs 主要是为了解构 Store 时，仍然能够保持状态的响应式特性。更多可以参考其他使用文档

StoreToRefs

这样就获取到了该项目下的测试环境数据

2.左侧菜单栏收缩与展开

proStore新增一个状态字段isCollapse

state:() => {
		return {
			pro : {},
			isCollapse:false,
			envList : [],
			env: null,
		}

点击就将状态取反，展开就收起，收起则展开。

<el-icon size="28" @click="switchCollapse" style="margin: 0 5px;">
				<Expand v-if='proStore.isCollapse' />
				<Fold v-else />
</el-icon>
...
function switchCollapse(){
		proStore.isCollapse = !proStore.isCollapse
	}

相应的要在HomeView读取proStore的是否收起菜单的状态，用于显示宽度，动态绑定style

// HomeView.vue
 <el-aside :style="{width:proStore.isCollapse? '65px' : '200px'}">
		  <LeftMenu></LeftMenu>
</el-aside>

中间部分（center_box）

纯文案 + 背景样式，可以是图片，反正各种自定义都行。

<div class="center_box">
			接口测试平台
</div>

...
<style lang='scss' scoped> 
.center_box{
	height: 50px;
	width: 700px;
	line-height: 50px;
	text-align: center;
	font-weight: bold;
	font-size: 22px;
	color: #00aaff;
	flex-shrink: 0;
	border-radius: 10px;
	background: linear-gradient(120deg, #F3BA48 0%, #FEDC96 100%);
	margin-right: 3px;
}
</style>

右边的项目和个人信息部分（right_box）

切换项目

不做那么麻烦，给按钮添加点击事件ChangePro，直接回到选择项目的页面，重新选就行了。

	const router = useRouter()
	function ChangePro(){
		router.push('project')
	}

右侧个人信息

用户信息肯定得从ustore读取，然后增加一个退出登录的功能

//Header.vue
...
<el-dropdown>
	<el-button plain icon="User" > {{uStore.userinfo.nickname}} </el-button>
	<template #dropdown>
		<el-button plain icon="User" @click='LogOut'> 退出登录 </el-button>
	</template>			
</el-dropdown>
...
function LogOut(){
	// 跳转到登录页面，清空登录的用户信息和pinia的数据
	router.push({
		name: "login"
	})
	ElNotification({
		title: '已退出登录',
		type: 'success',
	})
	// 清除token
	uStore.token = ''
	// 修改登录的状态
	uStore.isAuthenticated = false
}
...

3. 底部部分（Footer）

就一些描述信息，可有可无

<template>
	<div class="text_desc" >
		牛马测试平台，版权归属@John (2025年:1月份开始开发)阿巴阿巴
	</div>
</template>

<script>
</script>

<style scoped>
	.text_desc{
		height: 29px;
		line-height: 28px;
		text-align: center;
		font-size: 14px;
		color: #969696;
	}
</style>

4. 中间主体部分（Main）

主体部分使用路由出口局部渲染展示。

router-view

...
<el-main>
	<router-view></router-view>
</el-main>
...

新建几个页面，一个测试环境页面，一个测试接口页面…
在LeftMenu里，定义好他们的路径

同时在router的index种，定义好home页的子页面路径，注意路径一致。

也可以访问home页，重定向到env页面，增加redirect就行

有一点点跟自己想要的不一致，需要整个html占据页面100%，可以修改一下全局定义样式

html,
body,
#app
{
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
}

主体页面大致就是这样，后面需要完成的就是每一个具体页面的开发，然后将内容渲染到主体页面中间。

总结

1. elemrnt-plus的布局容器
2. pinia -> actions
3. router-view