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.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%;
}
主体页面大致就是这样，后面需要完成的就是每一个具体页面的开发，然后将内容渲染到主体页面中间。
总结
- elemrnt-plus的布局容器
- pinia -> actions
- router-view