Ant Design Pro 上手備忘錄

時間 2019-11-07

原文原文鏈接

本文基於 Ant Design Pro 1.1.0 版本，參考前請注意版本信息。

Ant Design Pro 是螞蟻金服團隊在 Ant Design 的設計規範與組件庫基礎上推出的一套 React 實現的企業級中後臺前端/設計解決方案。前端

上手

使用方法是直接 clone 其 GitHub 倉庫而後執行 npm install，或是安裝官方提供的 cli 工具建立項目（但在這過程當中也會涉及到 clone 其 GitHub 倉庫）。新項目建立後，自帶模板頁面和工具鏈，能夠快速更改。react

git clone --depth=1 https://github.com/ant-design/ant-design-pro.git my-project
cd my-project
npm install

對於開發者而言，要作的固然是將項目快速適配本身的需求。官方提供了中文文檔，但其中內容組織較爲零碎。在這裏和你們簡單地以示例頁面中的標準列表爲例子，作一個整理，但願能幫助到你們快速上手這個框架。git

安裝完成後，咱們運行 npm run start 來啓動本地開發服務器，稍等片刻腳本就會自動完成打包。Ant Design Pro 默認經過只需瀏覽器單方面就可處理的 HashHistory 來完成路由。若是要切換爲 BrowserHistory，那在 src/index.js 中也有對應的內容能夠直接修改，但須要在後端服務器進行相應路由配置。github

從路由到組件

咱們在左側的導航欄點擊 列表頁 > 標準列表 後，能夠進入到上面截圖所示的頁面。導航欄的內容在 src/common/menu.js 中，npm

/* 導航欄記錄
 * src/common/menu.js
 */

{
  name: '列表頁',
  icon: 'table',
  path: 'list',
  children: [{
    name: '查詢表格',
    path: 'table-list',
  }, {
    name: '標準列表',
    path: 'basic-list',
  }
  ...],
}

全局的路由關係是這樣一個走向：src/index.js 中經過 app.router(require('./router').default);，將 src/router.js 綁定到 dva 實例的 router 方法上。而在 src/router.js 中又引入了 src/common/router.js 中的 getRouterData 做爲數據源。若是有點繞，不太能一會兒看明白，那就直接記下面的結論：json

於是，src/common/menu.js 中 path 所指向的路徑對應於 src/common/router.js 中的路由記錄。redux

/* 路由記錄
 * src/common/router.js
 */

export const getRouterData = (app) => {
  const routerConfig = {
    ...,
    '/list/basic-list': {
      component: dynamicWrapper(app, ['list'], () => import('../routes/List/BasicList')),
    },
    ...,
  };
  ...
}

這裏調用了同文件內的 lazy-loading 的動態加載函數 dynamicWrapper，有 3 個參數，app 爲全局 dva 實例，models 爲一個帶有相關 dva Model ¹ 的 Array，component 即爲該路由記錄對應的實際組件。後端

const dynamicWrapper = (app, models, component) => {...};

順藤摸瓜，咱們打開 src/routes/List/BasicList.js，開始考察具體組件。api

import React, { PureComponent } from 'react';
import { connect } from 'dva';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';

@connect(({ list, loading }) => ({
  list,
  loading: loading.models.list,
}))
export default class BasicList extends PureComponent {
  componentDidMount() {
    this.props.dispatch({
      type: 'list/fetch',
      payload: {
        count: 5,
      },
    });
  }

  render() {
    return (
      <PageHeaderLayout>{/* 具體頁面內容 */}</PageHeaderLayout>
    );
  }
}

@connect 裝飾器

首先的組件寫法中調用了 dva 所封裝的 react-redux 的 @connect 裝飾器，用來接收綁定的 list 這個 model 對應的 redux store。注意到這裏的裝飾器實際除了 app.state.list 之外還實際接收 app.state.loading 做爲參數，這個 loading 的來源是 src/index.js 中調用的 dva-loading ² 這個插件。跨域
/*
* src/index.js
*/
import createLoading from 'dva-loading';
app.use(createLoading());
它返回的信息包含了 global、model 和 effect 的異步加載完成狀況。
{
  "global": true,
  "models": {
    "list": false,
    "user": true,
    "rule": false
  },
  "effects": {
    "list/fetch": false,
    "user/fetchCurrent": true,
    "rule/fetch": false
  }
}

咱們注意到在這裏帶上 {count: 5} 這個 payload 向 store 進行了一個類型爲 list/fetch 的 dispatch，那咱們到 src/models/list.js 中就能夠找到具體的對應操做。

import { queryFakeList } from '../services/api';

export default {
  namespace: 'list',

  state: {
    list: [],
  },

  effects: {
    *fetch({ payload }, { call, put }) {
      const response = yield call(queryFakeList, payload);
      yield put({
        type: 'queryList',
        payload: Array.isArray(response) ? response : [],
      });
    },
    /* ... */
  },

  reducers: {
    queryList(state, action) {
      return {
        ...state,
        list: action.payload,
      };
    },
    /* ... */
  },
};

後端模擬數據

經過上面的分析，咱們能夠看到 list/fetch 會形成帶上 payload 的對 src/services/api 中 queryFakeList 的一次異步請求。

export async function queryFakeList(params) {
  return request(`/api/fake_list?${stringify(params)}`);
}

走到這一步的時候，後端交互開始產生了。咱們退到根目錄下的 .roadhogrc.mock.js 這個文件。Ant Design Pro 直接沿用了 roadhog 中自帶的 mock 功能，在這裏咱們簡單搜索一下就能看到具體的 mock 轉發配置。

import { getActivities, getNotice, getFakeList } from './mock/api';

const proxy = {
  // ...,
  'GET /api/fake_list': getFakeList,
};

那咱們轉進 mock/api.js 就能夠看到 JSON 內容的生成了。

在開發環境中，先後端開發服務器經常部署在 localhost 的不一樣端口，這個問題經常困擾先後端分離範式的開發者。但有了 roadhog 以後，對上述的 .roadhogrc.mock.js 稍作修改就能夠在前端的開發服務器上「構建」一個本地反代，輕鬆避免這個問題。

本地開發中的跨域問題

大多數瀏覽器要求 fetch 經過 HTTPS 進行，但對 localhost 有本地赦免，HTTP 下的 fetch 請求並不會遇到問題。（可是若是你給 localhost 作了 hosts 規則那本地開發赦免就不適用了。）

另外，對於本地，瀏覽器依舊強制執行 CORS 跨域檢查，後端端口若是不設置 Access-Control-Allow-Origin 響應頭依舊會遇到跨域安全問題。roadhog 提供的這個功能就良好解決了本地開發調試的跨域問題。

// FROM https://github.com/sorrycc/roadhog#proxy
"proxy": {
  "/api": {
    "target": "http://localhost:8080",
    "changeOrigin": true,
    "pathRewrite": { "^/api" : "" }
  }
}