Python全系列 教程
3567个小节阅读:5930.4k
目录
鸿蒙应用开发
C语言快速入门
JAVA全系列 教程
面向对象的程序设计语言
Python全系列 教程
Python3.x版本,未来主流的版本
人工智能 教程
顺势而为,AI创新未来
大厂算法 教程
算法,程序员自我提升必经之路
C++ 教程
一门通用计算机编程语言
微服务 教程
目前业界流行的框架组合
web前端全系列 教程
通向WEB技术世界的钥匙
大数据全系列 教程
站在云端操控万千数据
AIGC全能工具班
A A
White Night
修改vue_shop\src\views\HomeView.vue
xxxxxxxxxx
<template>
<div class="common-layout container">
<el-container class="container">
<el-header class="header">
<div class="logo">
<img src="../assets/logo1.png" alt="">
<span>电商后台管理系统</span>
</div>
<div class="user">
<el-button @click="logout" type="success" plain>退出</el-button>
<!-- <el-button @click="test">测试</el-button> -->
</div>
</el-header>
<el-container>
<el-aside class="aside">
<el-menu
active-text-color="#ffd04b"
background-color="#545c64"
class="el-menu-vertical-demo"
default-active="2"
text-color="#fff"
>
<el-sub-menu :index="index+' '" v-for="(item,index) in menuList.menus">
<template #title>
<el-icon>
<!-- <location /> -->
</el-icon>
<span>{{ item.name }}</span>
</template>
<el-menu-item index="1-1" v-for="childItem in item.children">
{{ childItem.name }}
</el-menu-item>
</el-sub-menu>
</el-menu>
</el-aside>
<el-main>
Main
</el-main>
</el-container>
</el-container>
</div>
</template>
<script setup>
import { useRouter } from 'vue-router';
import { onMounted,reactive } from 'vue';
import api from '@/api/index.js' // 导入api接口
const menuList = reactive({
menus:[]
})
const router = useRouter()
//当Dom元素加载完,调用
onMounted(() => {
get_menu()
})
// 退出登录
const logout = () => {
// 退出登录,从sessionStorage中移除token
sessionStorage.removeItem('token')
// 跳转到登录页面
router.push('/login')
}
// 获取菜单
const get_menu = () => {
api.get_menu().then(res => {
menuList.menus=res.data.data
})
}
</script>
<style scoped>
.header {
background-color: #fff;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
font-size: 20px;
color: #999;
height: 50px;
width: 100%;
}
.logo {
float: left;
height: 50px;
align-items: center;
display: flex;
justify-content: center;
}
.logo img {
width: 50px;
height: 30px;
margin-right: 10px;
}
.user {
float: right;
display: flex;
justify-content: center;
align-items: center;
height: 50px;
}
.aside{
width: 200px;
background-color: #304156;
}
.container{
height: 100%;
}
</style>