front-end-of-violet
/
menu.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
    <script src="js/axios.min.js"></script>
    <script src="js/element-lib/index.js"></script>
    <link rel="stylesheet" href="js/element-lib/theme-chalk/index.css">
    <link rel="stylesheet" href="css/main.css">
    <script src="js/main.js"></script>
</head>

<body>
    <div id="app">
        <el-container class="home-container">
            <el-container class="box">
                <el-aside :width="isCollapse ? '64px' : '200px'">
                    <div class="toggle-button" @click="toggleCollapse">
                        <i :class="isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'"></i>
                    </div>
                    <!-- 导航栏 -->
                    <el-menu :default-active="menuActive" class="el-menu-vertical-demo" :collapse="isCollapse"
                        unique-opened>
                        <!-- 一级菜单 -->
                        <a :href="menu.permissionUrl" v-if="menu.children == null" v-for="menu in menuList"
                            :key="menu.id">
                            <el-menu-item :index="menu.id+''">
                                <i :class="menu.menuIcon"></i>
                                <span>{{menu.permissionName}}</span>
                            </el-menu-item>
                        </a>
                        <el-submenu v-if="menu.children != null" :index="menu.id+''" v-for="menu in menuList"
                            :key="menu.id">
                            <template slot="title">
                                <i :class="menu.menuIcon"></i>
                                <span slot="title">{{menu.permissionName}}</span>
                            </template>
                            <!-- 二级菜单 -->
                            <a :href="secondaryMenu.permissionUrl" v-for="secondaryMenu in menu.children"
                                :key="secondaryMenu.id">
                                <el-menu-item :index="secondaryMenu.id+''">
                                    <i :class="secondaryMenu.menuIcon"></i>
                                    <span>{{secondaryMenu.permissionName}}</span>
                                </el-menu-item>
                            </a>
                        </el-submenu>
                    </el-menu>
                </el-aside>
                <el-container>
                    <el-header>
                        <div>
                            <img src="img/logo.png" class="log">
                            <span>紫罗兰后台管理系统</span>
                        </div>
                        <el-button type="danger" @click="logOff()">退出</el-button>
                    </el-header>
                    <el-main>Main</el-main>
                    <el-footer>Footer</el-footer>
                </el-container>
            </el-container>
        </el-container>
    </div>
    <script>
        let vm = new Vue({
            el: "#app",
            data() {
                return {
                    isCollapse: false,
                    menuList: [],
                    menuActive: 0
                }
            }, created() {
                this.getMenuList();
                this.getMenuIdByUrl();
            }, methods: {
                logOff() {
                    localStorage.removeItem('nfLoginJwt');
                    location.href = "login.html"
                },
                toggleCollapse() {
                    vm.isCollapse = !vm.isCollapse
                },
                getMenuList() {
                    axios({
                        url: "/menu/get/menu/by/jwt",
                        method: "GET",
                    }).then(function (resp) {
                        if (resp.data.code == 200) {
                            vm.menuList = resp.data.data
                        }
                    })
                }, getMenuIdByUrl() {
                    var strUrl = location.href;
                    var arrUrl = strUrl.split("/");
                    var strPage = arrUrl[arrUrl.length - 1];
                    axios({
                        url: "/menu/get/menu/id/by/url",
                        method: "GET",
                        params: { url: strPage }
                    }).then(function (resp) {
                        if (resp.data.code == 200) {
                            vm.menuActive = resp.data.data
                        }
                    })
                }
            }
        })
    </script>
</body>

</html>