Ant Design Pro V5 從伺服器請求選單(typescript版)

7tiny發表於2020-08-06

【前言】

找了很多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中方法,看具體情況) ,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;

調整元件 BasicLayout.tsx

antd pro的選單調整在 src/layouts/BasicLayout.tsx 檔案中

這裡menuDataRender 預設指向一個方法,我這裡不要原來的方式,我們要調整成自己的資料

以下程式碼如無特殊說明,都在 BasicLayout.tsx 檔案中

1. 調整介面

在 BasicLayoutProps 介面中新增承載選單的欄位

2. 調整元件傳入的欄位,useEfect方法中加入請求服務的路由

3. 調整元件menuDataRender為使用傳進來的選單資料(以前那個方法不用了)

4. 調整connect方法,獲取資料

menu是我們在models/menu.tx中定義的MenuModelState型別,光這裡寫會提示錯誤,我們需要在ConnectState中先將該欄位定義才可以正常使用

【執行一下試試效果】

執行命令執行一下看看效果

cnpm start

可以看到,已經自動觸發了後端介面,並獲取到了資料,最後又用服務端的資料渲染了選單

其他內容可以參考官方文件

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

相關文章