读书管理后台开发项目-7.菜单权限页面开发

前端组件配置

将vben中的权限管理路由添加至后端目录的data文件中，再在前端的views/system/permission中添加菜单管理组件（vben中已经封装好了，可以直接复制）

然后在routes/modules/demo/permission.ts中添加路由配置，并关联对应名称的组件

最后记得配置i18n的国际化语言库

{
    "path"
:
    "/permission",
        "name"
:
    "Permission",
        "redirect"
:
    "/permission/menu",
        "meta"
:
    {
        "orderNo"
    :
        15,
            "icon"
    :
        "ion:key-outline",
            "title"
    :
        "routes.demo.permission.permission"
    }
,
    "children"
:
    [
        {
            "path": "menu",
            "name": "PermissionMenu",
            "meta": {
                "title": "routes.demo.permission.menu"
            }
        }
    ]
}

后端利用ORM框架同步建表

开启AppModule中Typeorm的synchronize: true，在menu模块下配置menu实体，以及在module中导入menu实体

import {Column, Entity, PrimaryGeneratedColumn, Unique} from 'typeorm';

@Entity('admin_menu')
export class Menu {
    @Column()
    @PrimaryGeneratedColumn()
    id: number;

    @Column()
    path: string;

    @Column()
    @Unique(['name'])
    name: string;

    @Column()
    redirect: string;

    @Column()
    meta: string;

    @Column()
    pid: number;

    //1 - 可用， 0 - 不可用
    @Column()
    active: number;
}

启动Nest后即可在数据库中看见menu表

配置menu的service与controller

改造MENU_LIST后需要在前端进行兼容
编写converMenuTree对从后端传来的数据进行转换

      const convertMenuTree = (menuList) => {
    const menus = [];
    menuList.forEach((menu) => {
        if (menu.meta) {
            try {
                menu.meta = JSON.parse(menu.meta);
            } catch (e) {
                console.error(e);
            }
        }
        if (menu.pid === 0) {
            menus.push(menu);
            if (!menu.children) {
                menu.children = [];
            }
        } else {
            const parentMenu = menuList.find((m) => m.id === menu.pid);
            if (!parentMenu.children) {
                parentMenu.children = [];
            }
            parentMenu.children.push(menu);
        }
    });
    return menus;
};
const getAllMenuData = () => {
    return getAllMenus().then((menu_) => {
        // console.log(menu_);
        return convertMenuTree(menu_);
    });
};
let backendRouteList;

最后调用其他的路由处理函数

前端菜单页面管理开发

完成了路由的后端下发并在前端展示功能后开始开发菜单管理页面

1.菜单列表查询和渲染

在@/views/demo/system/permission/index.vue下即为要开发的菜单页面组件

首先改动的第一个点为菜单接口查询方式，如图所示

更改Api文件下的查询目录地址为/menu

更改从成功后菜单数据结构并不符合现成的组件，所以需要进一步做兼容处理

分析源码可知维护菜单Table的关键数据在menu.data中

配置菜单列

export const columns: BasicColumn[] = [
    {
        title: '菜单id',
        dataIndex: 'id',
        width: 80,
    },
    {
        title: '父菜单ID',
        dataIndex: 'pid',
        width: 80,
    },
    {
        title: '菜单路径',
        dataIndex: 'path',
        width: 180,
    },
    {
        title: '菜单名称',
        dataIndex: 'menuName',
        width: 200,
        align: 'left',
    },
    {
        title: '重定向',
        dataIndex: 'redirect',
    },
    {
        title: '元数据',
        dataIndex: 'meta',
        customRender: ({ text }) => {
            return h(Tooltip, { title: text, placement: 'top' }, () => text.slice(0, 10) + '...');
        },
    },
    {
        title: '状态',
        dataIndex: 'status',
        width: 80,
        customRender: ({ record }) => {
            const status = record.active === 1;
            const enable = ~~status === 1;
            const color = enable ? 'green' : 'red';
            const text = enable ? '启用' : '停用';
            return h(Tag, { color: color }, () => text);
        },
    },
];

注意meta列中使用到了customRender

注意，findAllmenu根据字面意思，后端服务就不能在查询数据库的时候添加where条件了