Ant Design Pro V5 從伺服器請求選單（typescript版）

7tiny發表於2020-08-06

伺服器TypeScript

【前言】

找了很多Admin模板，最後還是看中了AntDesignPro（下文簡寫antd pro）這個阿里巴巴開源的Admin框架，長這樣（還行吧，目前挺主流的）：

官網地址：https://pro.ant.design/index-cn

該套模板是使用了React開發框架作為基礎，AntDesign（螞蟻金服開源UI元件庫）作為UI庫，整合了Dva，Umi，Mock等庫，如果不是很瞭解這些內容，門檻還是比較高的。

我們今天需要實現一個需求：將Antd Pro模板中固定寫死的選單換成從伺服器請求選單然後進行渲染

為啥非要自己寫，官網文件不香嗎？----官方文件寫的實在太草了，而且目前沒有typescript方式的文件，需要踩多少坑...不過沒關係，看完這篇坑就都基本填平了

關於Antd Pro第一步，如何建立並執行Antd Pro，可以移步 https://www.cnblogs.com/7tiny/p/13444963.html

【瞭解專案中的dva和Umi用法】

antd pro 預設採用了Umi和dva元件，因此想要在基礎上新增功能必須瞭解資料請求和資料流向

在dva中主要分3層，models,services,components,其中models是最重要概念，這裡放的是各種資料，與資料互動的應該都是在這裡。services是請求後臺介面的方法。components是我們編寫的元件。

service層

service 層僅僅是封裝了用request請求服務端的api的邏輯，這裡不涉及業務邏輯，比較簡單，例如下面程式碼：

import request from '@/utils/request';

export interface LoginParamsType {
  userName: string;
  password: string;
  mobile: string;
  captcha: string;
}

export function fakeAccountLogin(params: LoginParamsType) {
  return request('/api/login/account', {
    method: 'POST',
    data: params,
  });
}

export async function getFakeCaptcha(mobile: string) {
  return request(`/api/login/captcha?mobile=${mobile}`);
}

models層

models層是核心業務邏輯的所在

import { Effect, Reducer } from 'umi';

import { queryCurrent, query as queryUsers } from '@/services/user';

export interface CurrentUser {
    avatar?: string;
    name?: string;
    title?: string;
    group?: string;
    signature?: string;
    tags?: {
        key: string;
        label: string;
    }[];
    userid?: string;
    unreadCount?: number;
}

export interface UserModelState {
    currentUser?: CurrentUser;
}

//定義介面
export interface UserModelType {
    namespace: 'user';
    state: UserModelState;
    effects: {
        fetch: Effect;
    };
    reducers: {
        saveCurrentUser: Reducer<UserModelState>;
    };
}

const UserModel: UserModelType = {
    //名稱空間，component層呼叫路由方法的時候需要根據名稱空間匹配
    namespace: 'user',

    //存放值的地方
    state: {
        currentUser: {},
    },

    // 與後臺互動，處理資料邏輯的地方
    effects: {
        //業務方法，這裡的_是不需要引數，如果需要引數，這裡改成傳遞進來的引數物件即可
        //這裡支援call，put，select等幾種方法，用call呼叫service層的方法
        //const m = yield select((state) => state.test.num) //select就是用來選擇上面state裡的，這裡沒用上
        *fetch(_, { call, put }) {
            //queryUsers是引入service層那個function的一個名字
            const response = yield call(queryUsers);
            yield put({
                // 這就是reducer中save方法, put就是用來觸發reducer的方法，payload裡就是傳過去的引數。 同時它也能觸發同等級effects中其他方法。
                type: 'saveCurrentUser',
                payload: response,
            });
        },
    },

    // 能改變介面的action應該放這裡,這裡按官方意思不應該做資料處理，只是用來return state 從而改變介面
    reducers: {
        //可以理解為一個方法
        saveCurrentUser(state, action) {
            //return新的state,這樣頁面就會更新 es6語法，就是把state全部展開，然後把currentUser重新賦值
            return {
                ...state,
                currentUser: action.payload || {},
            };
        },
    },
};

export default UserModel;

component元件中呼叫model層

在某一個方法裡用dispatch即可呼叫

clickHandler = () => {
    dispatch({
        type: "user/fetch",// 這裡就會觸發models層裡面effects中fetch方法（也可以直接觸發reducer中方法，看具體情況） ,test就是user裡的名稱空間名字
        payload: {
           
        },
    })
}

這裡注意一下type請求的方法路由即可，前面是名稱空間，後面是方法名

使用connect獲取dispatch呼叫後改變的state中的資料

首先需要在元件介面中定義欄位，型別為model中定義的型別，因為要獲取model中欄位這個值，肯定是同一種型別的

然後在元件的實現中定義變數，從props中獲取值

在元件程式碼下方的connect方法中將變數賦值，只有這裡賦值了，元件中的常量才可以從props中獲取到state中的值

這裡connect方法的引數其實就是各個model中的state，dispatch後，這裡便可以獲取到修改後的值

tips：因為使用的是typescript，所以這裡的引數需要在ConnectState中先定義：

【開始改造Antd Pro，實現從伺服器請求選單】

定義service

在src/services資料夾下新增檔案 menu.ts

import request from '@/utils/request';

export async function query(): Promise<any> {
  return request('/api/getmenu');      //這裡是服務端的獲取選單的地址，根據自己情況進行調整
}

定義model

在src/models資料夾下新增檔案 menu.ts

import { Effect, Reducer } from 'umi';
import { MenuDataItem } from '@ant-design/pro-layout';
import { query } from '@/services/menu';

export interface MenuModelState {
    menuData: MenuDataItem[];
}

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

//這裡做了個轉換，可能服務端返回的介面格式和前端的路由格式並不一致，可以在這個方法裡進行調整，這裡的方法僅作參考，根據自己實際情況進行調整即可
const menuFormatter = (response: any) => {
    if (response === null)
        return [];

    var re = response.map((item: { name: string; route: string; children: any; }) => {
        const result = {
            children: {},
            name: item.name,
            path: item.route === null ? '/' : item.route,
        };

        if (item.children) {
            result.children = menuFormatter(item.children);
        }

        return result;
    })

    return re;
}

const MenuModel: MenuModelType = {
    namespace: 'menu',
    state: {
        menuData: [],
    },

    effects: {
        *getMenuData(_, { put, call }) {
            const response = yield call(query);
            yield put({
                type: 'saveMenuData',
                payload: menuFormatter(response.data.viewMenu),
            });
        },
    },

    reducers: {
        saveMenuData(state, action) {
            return {
                ...state,
                menuData: action.payload || [],
            };
        },
    },
};
export default MenuModel;