【SpringBoot+Vue】007-获取导航数据、数据匹配、折叠按钮

分手后的思念是犯贱 2023-10-05 12:00 8阅读 0赞

**目录**

一、获取导航数据

1、修改Home页面

2、测试结果

二、数据匹配

1、修改Home.vue

2、效果

3、问题

4、修改home页面

5、消除对不齐的线

对不齐的线：

CSS样式：

6、最终效果（美妙wonderful）

三、折叠按钮

1、home页面代码

2、最终效果

--------------------

# 一、获取导航数据 #

## 1、修改Home页面 ##

（改的东西并不多，注意获取导航菜单的方法）

## 2、测试结果 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70][]

# 二、数据匹配 #

（拿到导航菜单数据之后，我们将数据给对应的菜单栏）

## 1、修改Home.vue ##

## 2、效果 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 1][]

## 3、问题 ##

点击一个一级菜单你展开，其他的一级菜单也展开了；

点击一个二级菜单，其他二级菜单也被点击了；

## 4、修改home页面 ##

（其实一次性写完就行了）

<template>
    	
    	<el-container class="home-container">
    		
    		<el-header>
    			<div>
    				<img class="logo" src="../assets/logo.png" />
    			</div>
    			<span class="title">个人运动平台</span>
    			<el-button class="info" @click="logout()"> 安全退出！ </el-button>
    		</el-header>
    		
    		<el-container>
    			
    			<el-aside width="200px">
    				<el-menu background-color="#545c64" 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.title}}</span>
    						</template>
    						
    						<el-menu-item :index="it.id+''" v-for="it in item.subMenuList" :key="it.id">{
       {it.title}}</el-menu-item>
    					</el-submenu>
    				</el-menu>
    			</el-aside>
    			
    			<el-main>Main</el-main>
    		</el-container>
    	</el-container>
    </template>
    
    <script>
    	export default {
    		data(){
    			return{
    				//菜单列表
    				menuList:[],
    			}
    		},
    		//这个created方法，相当于onload事件，页面一加载就执行
    		created() {
    			//查询我的菜单列表
    			this.getMenuList();
    		},
    		methods: {
    			//安全退出
    			logout() {
    				window.sessionStorage.clear();
    				this.$router.push("/login");
    			},
    			//获取导航菜单
    			async getMenuList(){
    				//发get请求，获取数据
    				const {data:res} = await this.$http.get("menus");
    				console.log(res);
    				if(res.status != 200){
    					return this.$message.error("导航菜单获取击败！")
    				}
    				this.menuList = res.data;//数据对接
    			},
    		},
    	};
    </script>
    
    <style style lang="less" scoped>
    	/* 布局样式 */
    	.home-container {
    		height: 100%;
    	}
    
    	/* 头部 */
    	.el-header {
    		background-color: #373d41;
    		display: flex;
    		justify-content: space-between;
    		/* 两端对齐 */
    		color: #FFFFFF;
    		font-size: 20px;
    		align-items: center;
    
    		>div {
    			//左侧div加布局
    			display: flex;
    			align-items: center;
    
    			span {
    				margin-left: 15px;
    			}
    		}
    	}
    
    	/* 侧边栏 */
    	.el-aside {
    		background-color: #333744;
    	}
    
    	/* 主体 */
    	.el-main {
    		background-color: #eaedf1;
    	}
    
    	/* logo */
    	.logo {
    		width: 40px;
    		height: 40px;
    	}
    </style>

## 5、消除对不齐的线 ##

### 对不齐的线： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 2][]

### CSS样式： ###

.el-aside {
      background-color: #333744;
      .el-menu{
        border-right: none;// 对其右边框
      }
    }

## 6、最终效果（美妙wonderful） ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 3][]

（到此，我们就暂且告一段落吧！）

（算了，伸缩按钮也写这里吧！）

# 三、折叠按钮 #

## 1、home页面代码 ##

（图标数据可以从后台数据库获取的）

<template>
    	
    	<el-container class="home-container">
    		
    		<el-header>
    			<div>
    				<img class="logo" src="../assets/logo.png" />
    			</div>
    			<span class="title">个人运动平台</span>
    			<el-button class="info" @click="logout()"> 安全退出！ </el-button>
    		</el-header>
    		
    		<el-container>
    			
    			<el-aside :width="isCollapse?'64px':'200px'">
    				<div class="toggle-button" @click="toggleCollapase">|||</div>
    				<el-menu class="el-menu" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" unique-opened
    				 :collapse="isCollapse" :collapse-transition="false">
    					
    					
    					
    					<el-submenu :index="item.id+''" v-for="item in menuList" :key="item.id">
    						<template slot="title">
    							<i :class="iconsObject[item.id]"></i>
    							<span>{
       {item.title}}</span>
    						</template>
    						
    						<el-menu-item :index="it.id+''" v-for="it in item.subMenuList" :key="it.id">
    							<i :class="iconsObject[it.id]"></i>
    							<span>{
       {it.title}}</span>
    						</el-menu-item>
    					</el-submenu>
    				</el-menu>
    			</el-aside>
    			
    			<el-main>Main</el-main>
    		</el-container>
    	</el-container>
    </template>
    
    <script>
    	export default {
    		data() {
    			return {
    				//菜单列表
    				menuList: [],
    				isCollapse: false,
    				iconsObject: {
    					'100': 'iconfont icon-guanliyuan',
    					'200': 'iconfont icon-yundong',
    					'101': 'iconfont icon-denglu',
    					'102': 'iconfont icon-mima',
    					'103': 'iconfont icon-yundong',
    					'104': 'iconfont icon-shangpin',
    					'201': 'iconfont icon-shu',
    					'202': 'iconfont icon-qialuli',
    					'203': 'iconfont icon-food',
    					'204': 'iconfont icon-denglu',
    				},
    			}
    		},
    		//这个created方法，相当于onload事件，页面一加载就执行
    		created() {
    			//查询我的菜单列表
    			this.getMenuList();
    		},
    		methods: {
    			//安全退出
    			logout() {
    				window.sessionStorage.clear();
    				this.$router.push("/login");
    			},
    			//获取导航菜单
    			async getMenuList() {
    				//发get请求，获取数据
    				const {
    					data: res
    				} = await this.$http.get("menus");
    				console.log(res);
    				if (res.status != 200) {
    					return this.$message.error("导航菜单获取击败！")
    				}
    				this.menuList = res.data; //数据对接
    			},
    			// 切换菜单折叠与展开
    			toggleCollapase() {
    				this.isCollapse = !this.isCollapse;
    			},
    		},
    	};
    </script>
    
    <style style lang="less" scoped>
    	/* 布局样式 */
    	.home-container {
    		height: 100%;
    	}
    
    	/* 头部 */
    	.el-header {
    		background-color: #373d41;
    		display: flex;
    		justify-content: space-between;
    		/* 两端对齐 */
    		color: #FFFFFF;
    		font-size: 20px;
    		align-items: center;
    
    		// >div {
    		// 	//左侧div加布局
    		// 	display: flex;
    		// 	align-items: center;
    
    		// 	span {
    		// 		margin-left: 15px;
    		// 	}
    		// }
    	}
    
    	/* 侧边栏 */
    	.el-aside {
    		background-color: #333744;
    
    		//去掉子菜单的有边框
    		.el-menu {
    			border-right: none;
    		}
    	}
    
    	/* 主体 */
    	.el-main {
    		background-color: #eaedf1;
    	}
    
    	/* logo */
    	.logo {
    		width: 40px;
    		height: 40px;
    	}
    
    	// 折叠按钮
    	.toggle-button {
    		background-color: #4A5064;
    		font-size: 10px;
    		line-height: 24px;
    		color: #fff;
    		text-align: center;
    		letter-spacing: 0.2em;
    		cursor: pointer; // 显示鼠标指针为：小手
    	}
    </style>

## 2、最终效果 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 4][]

（前端的东西没啥好些的，没啥太大的逻辑性，写什么样子就是什么样子，笔记也没啥好做的）

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2020101912024372.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20201019121732931.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20201019122139856.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20201019135627354.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20201019141808827.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70