vue3-admin商品管理后台项目(后台布局layout布局开发二)

因为这一块实在太多了，所以直接新开一个了
我们继续来进行侧边栏菜单的开发：
我们使用element提供的menu菜单
首先编辑layout文件夹里面的components文件夹里面的FMenu.vue
粘贴上element提供的menu菜单
这里直接上代码：

<!-- 侧边栏部分 -->
<template>
    <div class="f-menu">
        <!-- 使用handleSelect监听 -->
        <el-menu default-active="2" class="border-0" @select="handleSelect">

            <template v-for="(item,index) in asideMenus" :key="index">
                <!-- 判断它有没有child字段并且这个数组长度是否大于0，是的话就代表有下级菜单 index绑定name值-->
                <!-- 二级菜单 -->
                <el-sub-menu v-if="item.child && item.child.length > 0" :index="item.name">

                    <template #title>
                        <el-icon>
                            <!-- 动态图标 -->
                            <component :is='item.icon'></component>
                        </el-icon>
                        <!-- 标题部分 -->
                        <span>{
   {
    item.name }}</span>
                    </template>

                    <el-menu-item v-for="(item2,index2) in item.child" :key="index2" :index="item2.frontpath">
                        <el-icon>
                            <!-- 动态图标 -->
                            <component :is='item2.icon'></component>
                        </el-icon>
                        <!-- 标题部分 -->
                        <span>{
   {
    item2.name }}</span>
                    </el-menu-item>

                </el-sub-menu>

                <!-- 一级菜单 -->
                <el-menu-item v-else :index="item.frontpath">
                    <el-icon>
                        <!-- 动态图标 -->
                        <component :is='item.icon'></component>
                    </el-icon>
                    <!-- 标题部分 -->
                    <span>{
   {
    item.name }}</span>
                </el-menu-item>
            </template>


        </el-menu>
    </div>
</template>

<script setup>
// 引入useRouter
import {
    useRouter } from 'vue-router'
// 拿到useRouter
const router = useRouter()

const asideMenus = [{
   
    "name": "后台面板",
    "icon": "help",
    // 二级菜单
    "child": [{
   
        "name": "主控台",
        "icon": "home-filled",
        // 菜单路径
        "frontpath": "/"
    }]
}, {
   
    "name": "商城管理",
    "icon": "shopping-bag",
    // 二级菜单
    "child": [{
   
        "name": "商品管理",
        "icon": "shopping-cart-full",
        // 菜单路径
        "frontpath": "/goods/list"
    }]
}]

// 定义handleSelect事件
const handleSelect = (e) => {
   
    // 这里的e打印出来是path路径，意味我们可以利用进行跳转
    // console.log(e);
    router.push(e)
}

</script>

<style>
.f-menu {
   
    width: 250px;
    /* 因为头部部分占了64px */
    top: 64px;
    bottom: 0;
    left: 0;
    /* 如果很长就需要滚动 */
    overflow: auto;
    /* 侧边栏的阴影 */
    @apply shadow-md fixed bg-light-50;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110

这里重要的主要是定义了一个asideMenus数组对象，对菜单栏的名称和图标进行赋值，当然别忘了改上面template部分的v-for进行动态获取。然后就是利用handleSelect事件进行跳转。
在pages下面创建一个goods文件夹，然后创建list.vue如下

然后编辑router文件夹里面的index.js，如下引入页面的同时并对跟路由的子路由再复制一份，编辑路径和名称表示这是商品管理页的路由。

到这里，我们的侧边栏部分就做好了。

然后我们进行展开和收起菜单的功能的制作：
这个要进行状态的改变，所以会用到vuex的状态管理，在里面编辑：

主要是进行主页面宽度的管理。

找到FHeader.vue里面的缩起菜单图标：
搞成伸缩是两个不同的图标，并且加上状态管理，因为管理的是宽度，所以我们就能实现伸缩。

而宽度的状态我们是写在vuex里面的Index.js里面的，所以就没问题了。
而在FMenu.vue里面我们也要进行处理：利用computed属性来判断是否折叠。


最后我们的内容宽度当然也要跟着改变，这就编辑admin.vue，也加上宽度状态管理就行

然后运行项目：


我们发现没有问题，所以就成功的做完了折叠功能。

然后我们来实现菜单选中和路由关联：
就是url地址上面的url是和当前展开的页面相对应的
首先我们动态引入一个default-active方法，他就是指默认激活的菜单的index

然后在下面引入route，用route.path方法，就是说明默认值是当前路径。

这样，我们就完成了菜单选中和路由关联功能。

接着我们来实现数据前后端交互：
前面的菜单栏我们是写死的，那么这里的菜单栏我们要从数据库里引入动态的，所以要实现前后端交互。
首先在store里面拿到这些数据：
这里是拿了SET_MENUS和SET_RULENAMES两个里面的数据，

然后在actions里面拿数据

之后找到FMenu里面原本写死的菜单栏，我们从刚刚state里面获取的拿数据，不再写死。

然后在pages文件夹里面加上一个category文件夹，里面加上list.vue，这就代表着分类列表

然后别忘了在router里面要加上一个分类列表的路由：

到这里，我们就完成了前后端数据交互，运行一下：
我们发现菜单栏都是从数据库获取的，然后分类列表也能成功显示，说明我们成功的从数据库里取出了menu数据跟前端进行交互。

到这里，我们就完成了前后端数据的交互。

然后我们来实现根据菜单动态添加路由功能：

这里我们将之前定义的const routes数组全部注释掉，然后写我们的动态路由：
所有的默认路由放在一个routes里，这是所有用户共享的

然后子路由我们再包在asyncRoutes里面

动态路由我们单独定义了一个方法，利用的是递归，大概思路都在注释里，写的很详细。

然后在permission.js里面，我们进行方法的调用，因为调用的最好时间就是在拿到所有info之后，

当然这里面有一个问题，就是一开始的路由动态绑定没问题，但是一旦刷新页面就会变为404，这是因为使用addRoute()方法之后，他们只注册一个新路由，如果新增路由与当前位置相匹配，就需要自己手动导航才能显示该新路由，所以我们前面设置了默认没有新路由

但是添加了之后将值改为true

然后返回出去

而permission.js这里接收router的index.js传过来的true值

然后如果有新的路由就进行手动导航，否则就直接调用next()。

这一块东西有点复杂，但是我的注释写的很详细，需要大家结合注释去仔细推敲，到这里根据菜单动态添加路由就做完了。

今天先到这，明天继续，大家加油！

继续继续兄弟们
我们来进行标签导航栏的实现：
使用到的是element plus里面提供的Tabs标签页里面的自定义增加标签页触发器，
以及一个Dropdown下拉框组件。
只涉及到FTaglist.vue页面我直接贴代码了：注释比较详细，其实主要就是element plus里面上面说的两个组件的引入，然后修改其中一部分样式，修改样式涉及到一个样式穿透问题，一开始发现一直不生效，仔细一看原来是自己style没加scoped

<!-- 标签导航栏部分 -->
<template>
    <!-- 相对左边的距离随着侧边栏的距离变化 -->
    <div class="f-tag-list" :style="{ left:$store.state.asideWidth }">
        <!-- 给加上了一个min-width就能左右滑动了，不知道原因是什么 -->
        <el-tabs v-model="editableTabsValue" type="card" class="flex-1" closable @tab-remove="removeTab" style="min-width:100px;">
            <el-tab-pane v-for="item in editableTabs" :key="item.name" :label="item.title" :name="item.name">
            </el-tab-pane>
        </el-tabs>

        <span class
1
2
3
4
5
6
7
8
9
10