【SpringBoot+Vue】005-编写布局和头部、编写侧边栏

朱雀 2023-10-05 12:00 116阅读 0赞

**目录**

一、编写布局和头部

1、修改Home.vue

2、最终效果

二、编写侧边栏

1、Home页面代码

2、最终效果

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

# 一、编写布局和头部 #

## 1、修改Home.vue ##

## 2、最终效果 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70][]

# 二、编写侧边栏 #

## 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="200px">
    				<el-menu background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
    					<el-submenu index="1">
    						<template slot="title">
    							<i class="el-icon-location"></i>
    							<span>导航一</span>
    						</template>
    						<el-menu-item index="1-1">选项1</el-menu-item>
    						<el-menu-item index="1-2">选项2</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");
    			},
    			//获取导航菜单
    			getMenuList(){
    				console.log("getMenuList");
    			},
    		},
    	};
    </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>

## 2、最终效果 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 1][]

（接下来是后台操作了，我们放在下一篇笔记中！）

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20201019094216995.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/2020101910053694.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70