ant-design-pro v4 从服务器请求菜单

ant-design-pro写的比较笼统,router-nav-cn
这里详细介绍一下从服务器请求菜单的过程:
第一步:找到入口文件layouts/BasicLayout.jsant-design-pro v4 从服务器请求菜单_第1张图片
第二步:配置请求方法及菜单调用menuData
ant-design-pro v4 从服务器请求菜单_第2张图片
第三步:新建一个menu.js,调用 model 的 effect
ant-design-pro v4 从服务器请求菜单_第3张图片
第四步:调用统一管理的 service 请求函数
ant-design-pro v4 从服务器请求菜单_第4张图片
最后一步:json格式
ant-design-pro v4 从服务器请求菜单_第5张图片
注意:如果菜单有子级时,需要多做一步操作:
ant-design-pro v4 从服务器请求菜单_第6张图片
ant-design-pro v4 从服务器请求菜单_第7张图片
需要将数据进行改造,将父级地址添加到子级去,代码以下:

import { isUrl } from '@/utils/utils';
function formatter(data, parentPath = '/', parentAuthority) {
    return data.map(item => {
        let { path } = item;
        if (!isUrl(path)) {
            path = parentPath + item.path;
        }
        // if (item.icon) {
        //     icon = item.icon.replace('icon-', '');
        // }
        const result = {
            ...item,
            path,
            authority: item.authority || parentAuthority,
        };
        if (item.children) {
            result.children = formatter(item.children,
                `${parentPath}${item.path}/`, item.authority);
        }
        return result;
    });
}

以上,有帮助请点个赞,谢谢。同时也是为了以后可以自己查阅一下。

你可能感兴趣的:(react)