【SpringBoot+Vue】007-获取导航数据、数据匹配、折叠按钮
【SpringBoot+Vue】007-获取导航数据、数据匹配、折叠按钮
訾博ZiBo
发布于 2025-01-06 16:11:17
发布于 2025-01-06 16:11:17
代码可运行
文章被收录于专栏：全栈开发工程师
运行总次数：0
代码可运行
一、获取导航数据
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");
},
//获取导航菜单
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>2、测试结果
二、数据匹配
（拿到导航菜单数据之后，我们将数据给对应的菜单栏）
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">
<el-menu background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
<el-submenu index="1" 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="1-1" 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>2、效果
3、问题
点击一个一级菜单你展开，其他的一级菜单也展开了；
点击一个二级菜单，其他二级菜单也被点击了；
4、修改home页面
（其实一次性写完就行了<!-- index要唯一，就不会造成问题出现了 -->）
<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-menu background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" unique-opened> -->
<!-- index要唯一，就不会造成问题出现了 -->
<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>
<!-- index要唯一，就不会造成问题出现了 -->
<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、消除对不齐的线
对不齐的线：
CSS样式：
.el-aside {
background-color: #333744;
.el-menu{
border-right: none;// 对其右边框
}
}6、最终效果（美妙wonderful）
（到此，我们就暂且告一段落吧！）
（算了，伸缩按钮也写这里吧！）
三、折叠按钮
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-menu background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" unique-opened> -->
<!-- index要唯一，就不会造成问题出现了 -->
<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>
<!-- index要唯一，就不会造成问题出现了 -->
<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、最终效果
（前端的东西没啥好些的，没啥太大的逻辑性，写什么样子就是什么样子，笔记也没啥好做的）
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2025-01-06，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
