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

訾博ZiBo

发布于 2025-01-06 16:09:56

3600

代码可运行

文章被收录于专栏：全栈开发工程师

运行总次数：0

代码可运行

一、编写布局和头部

1、修改Home.vue

<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">Aside</el-aside>
			<!-- 主体 -->
			<el-main>Main</el-main>
		</el-container>
	</el-container>
</template>

<script>
	export default {
		methods: {
			logout() {
				window.sessionStorage.clear();
				this.$router.push("/login");
			},
		},
	};
</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、最终效果

二、编写侧边栏

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>