平台项目首页——左侧菜单栏实现（三）

今天药忘吃喽~ 2024-02-25 05:28 40阅读 0赞

#### 这里写目录标题 ####

*  一、页面布局设计
 *  二、左侧菜单栏设计
 *   *  1、注意
     *  2、使用组件
     *   *  1、导入组件
         *  2、注册组件
         *  3、使用组件
     *  3、用户信息代码设计
     *  4、左侧菜单代码设计
     *  5、用户信息——注销登录和切换项目功能实现
 *  三、嵌套路由实现
 *   *  1、配置home的嵌套路由（子路由）
     *  2、home中预留的路由展示位（路由出口）
     *  3、点击菜单实现路由跳转

## 一、页面布局设计 ##

![在这里插入图片描述][690ee785e4ee4233850dabea1b0c251e.png]

<template>
    	
    	<div class="home">
    		
    		<div class="left_box">
    		</div>
    		
    		
    		<div class="right_box">
    			
    			<div class="top_box">
    			</div>
    			
    			
    			<div class="main_box">
    				
    			</div>
    		</div>
    	</div>
    </template>
    
    <script>
    
    </script>
    
    <style scoped>
    	/* 整体背景设置 */
    	.home{
        
    		height: 100vh;
    		background: #00aa7f;
    		display: flex;
    	}
    	/* 左侧内容的布局 */
    	.left_box{
        
    		width:200px;
    		/* 右侧的边框线 实线、1像素 白色 */
    		border-right: solid 1px #fff;
    		height: 100vh;
    	}
    	/* 右侧的整体布局 */
    	.right_box{
        
    		/* 左侧元素占用2oopx，右侧的元素占用其他的所有空间 */
    		flex:1;
    		margin: 3px;
    		background: burlywood;
    	}
    	/* 右侧顶部标签栏的样式 */
    	.top_box{
        
    		height: 60px;
    		background: #fff;
    		/* 向下的margin */
    		margin-bottom: 2px;
    	}
    	/* 右侧主题内容展示区域的样式 */
    	.main_box{
        
    		/* 屏幕高度-边框线-减去顶部盒子的高度 */
    		height:calc(100vh - 68px);
    		background: #fff;	
    		/* 圆角展示 */
    		border-radius:5px;
    		padding: 5px;
    		}
    </style>

## 二、左侧菜单栏设计 ##

**为了方便后期维护，将左侧菜单栏和右侧顶部栏设计成单独的组件**

### 1、注意 ###

**通过路由可以访问的页面，页面对应的组件，将组件定义在views中  
当定义的组件是给到路由中对应的组件中用的，将组件定义在components中**

![在这里插入图片描述][726c2a4d2dd649e7a032f72470a3521c.png]

### 2、使用组件 ###

#### 1、导入组件 ####

#### 2、注册组件 ####

![在这里插入图片描述][8b70904b91ab48e7af9efe45350d9963.png]

#### 3、使用组件 ####

![在这里插入图片描述][b38cf94601784554a7883fbc2e15744f.png]

### 3、用户信息代码设计 ###

![在这里插入图片描述][5a4db2cd7bdf4e13b2aac3d4a5964bfb.png]

### 4、左侧菜单代码设计 ###

> background-color=“none” 去除菜单颜色  
> text-color=“\#fff” 未选中文字颜色  
> active-text-color=“\#ffaa00” 选中后的文字颜色

<template>
    	
    	<div class="user_box">
    		<img src="../assets/logo.png" width="45" >
    		<div class="info">
    			
    			<el-dropdown>
    			    <span class="el-dropdown-link">
    				  
    				  <el-icon ><User /></el-icon>
    
    				  
    			      {
        {
         uname }}
    			      <el-icon><CaretBottom /></el-icon>
    			    </span>
    			    <template #dropdown>
    			      <el-dropdown-menu>
    					
    			        <el-dropdown-item @click="logout">注销登录</el-dropdown-item>
    			        <el-dropdown-item @click="$router.push({name:'allProject'})">切换项目</el-dropdown-item>
    
    			      </el-dropdown-menu>
    			    </template>
    			</el-dropdown>
    		</div>
    	</div>
    	
    
    	
    	
    	
    	<el-menu
    		router
            :default-active="$route.path"
            class="el-menu-vertical-demo leftmenubox"
            background-color="none"
            text-color="#ffffff"
            active-text-color="#ffaa00">
    		
    		<el-menu-item index="/project">
    			<el-icon><location /></el-icon>
    			<span>项目首页</span>
    		</el-menu-item>	
    		<el-menu-item index="/interface">
    			<el-icon><location /></el-icon>
    			<span>接口管理</span>
    		</el-menu-item>	
    		<el-menu-item index="3">
    			<el-icon><location /></el-icon>
    			<span>接口测试</span>
    		</el-menu-item>	 
    		<el-menu-item index="/records">
    			<el-icon><location /></el-icon>
    			<span>测试报表</span>
    		</el-menu-item>
    	</el-menu>
    </template>
    
    <script>
    	export default{
        
    		computed:{
        
    			uname(){
        
    				return window.sessionStorage.getItem('username')
    			}
    		},
    	}
    
    </script>
    
    <style scoped>
    	/* 顶部用户信息的样式 */
    	.user_box{
        
    		height: 63px;
    		border-bottom: solid 1px #fff;
    		display: flex;
    		/* 居中 */
    		align-items: center;
    	}
    	/* logo图片的样式 */
    	.user_box img{
        
    		/* 上、右、下、左 */
    		padding: 0 40px 0 10px;
    		/* 右侧margin */
    		margin-right: 20px;
    	}
    	/* 下拉菜单的样式 */
    	.user_box .info .el-dropdown-link {
        
    	  cursor: pointer;
    	  color: #fff;
    	  display: flex;
    	  align-items: center;
    	  font-size: 16px;
    	}
    	
    </style>

**修改element UI提供的组件，修改选中后的菜单背景颜色  
需要将修改的css样式在全局css中**

![在这里插入图片描述][e1f5e484c7594678b1892d24329193db.png]

/* ==================左侧菜单的样式更改======================= */
    .leftmenubox .el-menu-item:hover{
        
    	background: rgb(224, 229, 224);
    }

![在这里插入图片描述][303638c41f214793a2f6421137c7a58a.png]

### 5、用户信息——注销登录和切换项目功能实现 ###

选择注销登录——》清除token和用户名、重定向到登录页面  
选择切换项目——》切换路由到项目列表页面`$router.push({name:'allProject'})`

<template>
          <el-dropdown-menu>
    		
            <el-dropdown-item @click="logout">注销登录</el-dropdown-item>
            <el-dropdown-item @click="$router.push({name:'allProject'})">切换项目</el-dropdown-item>
          </el-dropdown-menu>
    </template>
    
    <script>
    
    	export default{
        
    		computed:{
        
    			uname(){
        
    				return window.sessionStorage.getItem('username')
    			}
    		},
    		methods:{
        
    			// 移除token和用户信息
    			logout(){
        
    				// 清除token和用户名
    				window.sessionStorage.removeItem('token');
    				window.sessionStorage.removeItem('username');
    				// 再重定向到登录页面
    				this.$router.push({
        name:'login'})
    			}
    		
    			
    		}
    	}
    
    </script>
    
    <style scoped>
    	......
    	......
    </style>

## 三、嵌套路由实现 ##

当切换到项目首页菜单时：主界面展示项目首页的信息  
当切换到接口管理菜单时：主界面展示接口管理的信息  
等等  
![在这里插入图片描述][34af85c5cdaf4f2f8a2d3040ecb45b17.png]

### 1、配置home的嵌套路由（子路由） ###

![在这里插入图片描述][44835c80474047b3a5c7f000f1843cee.png]

### 2、home中预留的路由展示位（路由出口） ###

![在这里插入图片描述][6aca48bd69ae4f78983d40d388e08e97.png]

### 3、点击菜单实现路由跳转 ###

router:实现路由跳转  
index="/project"只能设置字符串  
`:default-active="$route.path"`:`$route.path`:`$route：获取当前路由`

![在这里插入图片描述][a9dbf3fe1f314c9582a949323e84b704.png]

当新增一个菜单的时候：  
a、定义1个父组件例如testcase.vue  
b、配置home的嵌套路由例如（path：‘/testcase’）  
c、在子组件LeftMenu.vue中，新增菜单

<el-menu-item index="3">
    	<el-icon><location /></el-icon>
    	<span>用例管理</span>
    </el-menu-item>

d、修改index：index=‘/testcase’

<el-menu-item index='/testcase'>
    	<el-icon><location /></el-icon>
    	<span>用例管理</span>
    </el-menu-item>

[690ee785e4ee4233850dabea1b0c251e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/25/7dd864b6a83843bb8593f8bd8e71059f.png
[726c2a4d2dd649e7a032f72470a3521c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/25/121dc7b4b4b34b78a58418d4588a1991.png
[8b70904b91ab48e7af9efe45350d9963.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/25/c83b489d30dc4e5687192de28e90cd1a.png
[b38cf94601784554a7883fbc2e15744f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/25/3e6cd839f70c4ca6808c824ab7d23d10.png
[5a4db2cd7bdf4e13b2aac3d4a5964bfb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/25/97d1ce9522164659ad3e1a06c7731b44.png
[e1f5e484c7594678b1892d24329193db.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/25/11f0bdfc82fb4b2e9eb48676f014eb00.png
[303638c41f214793a2f6421137c7a58a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/25/bb2768d58a7d46dfa01a9803d5f18049.png
[34af85c5cdaf4f2f8a2d3040ecb45b17.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/25/0b36f8bd6d274281848051311829da4c.png
[44835c80474047b3a5c7f000f1843cee.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/25/9d8c8b13047d44039be9584ffbe7ec69.png
[6aca48bd69ae4f78983d40d388e08e97.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/25/7c0d3514000d4508867c9e53b42e35a7.png
[a9dbf3fe1f314c9582a949323e84b704.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/25/fcd5f2a98f9a4cb6a6bcaf2481f69739.png