Ant Design Pro 4.0学习记录（一）远程动态菜单

最新推荐文章于 2024-08-20 15:28:42 发布

antdz

最新推荐文章于 2024-08-20 15:28:42 发布

阅读量3.9k

点赞数 3

分类专栏： AntDesignProV4学习记录

本文链接：https://blog.csdn.net/antdz/article/details/104369471

版权

本文记录了在Ant Design Pro 4.0中实现远程动态菜单的过程，包括遇到的问题及解决方案，重点讲述了如何从服务器获取菜单数据并显示图标。

摘要由CSDN通过智能技术生成

一远程动态菜单

很多时候我们不想将菜单直接写在前端里面，想要保证菜单控制的灵活。而在AntDesign Pro的手册中，写了一个Demo。我在这里记下我的解决方案，可能较那个demo麻烦些，也不知优劣。
[2020/03/02 补充] 之前写的源代码中，从服务器加载menu无法显示图标。官方给出了方案从服务器加载 menu 并且使用 icon。

过程

编写menu的model

源代码

models/menu.ts

import {
    Effect } from 'dva';
import {
    Reducer } from 'redux';

import {
     fetchCurrent } from '@/services/menu';

export interface MenuItem {
   
  path?: string;
  name?: string;
  children?: MenuItem[];
}

export interface MenuModelState {
   
  currentMenu?: MenuItem[];
}

export interface MenuModelType {
   
  namespace: 'menu';
  state: MenuModelState;
  effects: {
   
    fetchCurrent: Effect;
  };
  reducers: {
   
    saveCurrentMenu: Reducer<MenuModelState>;
  };
}

const MenuModel: MenuModelType = {
   
  namespace: 'menu',

  state: {
   
    currentMenu: [],
  },

  effects: {
   
    *fetchCurrent(_, {
    call, put }) {
   
      const response = yield call(fetchCurrent);
      yield put({
   
        type: 'saveCurrentMenu',
        payload: response,
      });
    },
  },

  reducers: {
   
    saveCurrentMenu(state, action) {
   
      return {
   
        ...state,
        currentMenu: action.payload ||[],
      };
    },
  },
};

export default MenuModel;

services/menu.ts

import request from '@/utils/request';

export async function fetchCurrent(): Promise<any> {
   
  return request('/api/menus');
}

3.mock/menu.ts

// import { Request,Response } from 'express';

export default {
   
  'GET /api/menus': [
    {
   
      path: "/welcome",
      name: "欢迎页",
    },
    {
   
      path: "/articles",
      name:"文章管理"<