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>

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

封装api接口

在这里插入图片描述

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

在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}}},...

在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.envListlet 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',})// 清除tokenuStore.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%;
}

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

总结

elemrnt-plus的布局容器
pinia -> actions
router-view