前言

使用螞蟻金服的ant-design-pro框架，畢竟也是剛開始學習React，剛從github拉下來有點懵，不明白那麼多模組之間是如何呼叫的，資料如何和頁面關聯，伴隨著這些疑問去學習了Redux，之後就覺得思路清晰多了，明白了整個專案內部的呼叫流程後，裡面的模組就可以隨意新增調整，所以個人覺得在使用ant-design-pro之前，前提是去學習一下Redux，這樣整個思路都會清晰起來。扯皮的話不多說了，直接步入正題。

ant-design-pro的整個框架結構

├── mock                     # 本地模擬資料
├── public                   # 存放公共資源
 

├── src
│   ├── assets               # 本地靜態資源
│   ├── common               # 導航資訊和路由的配置
│   ├── components           # 通用元件的封裝，如表格、表單
│   ├── e2e                  # 整合測試用例
│   ├── layouts              # 通用佈局，整個網站的共用導航欄，頁尾和主體部分
│   ├── models               # dva model
│   ├── routes               # 瀏覽器中所看到的頁面
 

│   ├── services             # 後臺介面服務
│   ├── utils                # 工具庫
│   ├── g2.js                # 視覺化圖形配置
│   ├── theme.js             # 主題配置
│   ├── index.ejs            # HTML 入口模板，相當於index.html
│   ├── index.js             # 應用入口
│   ├── index.less           # 全域性樣式
│   └── router.js            # 路由入口
 

├── tests                    # 測試工具
├── README.md
└── package.json

在以上的目錄中，所獨立出來的模組，對於第一次使用這個架構的同學來說，比較新奇的就是mock模組，以及src中的分層結構：models、service、routes這三部分和common了，下面的內容就重點介紹這三部分的關係，以及每部分的職責。

common

目前專案所使用的是v2.0這個版本，每個版本可能都會有些不同之處，這個版本中目前將導航和路由分開，分別在menu.js和router.js這兩個檔案中。

• menu.js

主要設定導航欄的資訊，如跳轉連結和所顯示的文字和圖示。如下所示：

{
    name: '題庫',  //導航欄上顯示的文字
    icon: 'table',  //顯示的圖示
    path: 'problem',  //跳轉的連結
}

• router.js

這個檔案很重要，裡面涉及了路由，資料還有頁面，主要將路由和頁面關聯，以及將資料和頁面關聯。如下所示：

'/problem': {
    component: dynamicWrapper(app, ['problemList'], () => import('../routes/ProblemList')
),
},
'/problem/detail/:id': {
    component: dynamicWrapper(app, ['problem', 'user'], () => import('../routes/Problem')),
},

從上面程式碼可以看出，一個頁面可以關聯多個數據，這個根據頁面的需求來決定，只要是關聯的資料都可以在頁面中拿到。dynamicWrapper 函式所做的工作就是將頁面與model關聯起來，其中第二個引數就是model的檔名。

models

在第二部分框架的基本結構中就說了models是屬於dva的，所以如果你之前就使用過dva的話，那這個框架就用起來非常得心應手，model是dva的核心部分，ant-design-pro就是針對dva的一次最佳實踐。下面看下model檔案的主要結構：

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

export default {
  namespace: 'problem',

  state: {
    problemInfo: {}, // 題目詳情
    loading: true,
  },

  effects: {
    *fetchProblemInfo({ payload }, { call, put }) {
      yield put({  //開啟頁面載入動畫
        type: 'changeLoading',
        payload: true,
      });
      const response = yield call(getProblemInfo, payload); // 獲取頁面資料
      if (response.code === 0) {
            yield put({ //將資料交給reducer處理
              type: 'saveProblemInfo',
              payload: response.data,
            });
          }
        }
      }
      yield put({ //結束頁面載入動畫
        type: 'changeLoading',
        payload: false,
      });
    },
  },

  reducers: {
    saveProblemInfo(state, action) {
      return {
        ...state,
        problemInfo: action.payload, //將資料返回給頁面
      };
    },
    changeLoading(state, action) {
      return {
        ...state,
        loading: action.payload,
      };
    },
  },
};

• namespace：該欄位就相當於model的索引，根據該名稱空間就可以找到頁面對應的model;
• effects： 處理所有的非同步邏輯，將返回結果以Action的形式交給reducer處理；
• reducers：處理所有的同步邏輯，將資料返回給頁面；

補充：在effects中呼叫了service中所封裝的後臺介面，該呼叫方式是ES6中的generator函式，該函式使得非同步操作如同同步操作一樣。call就相當於一個執行器，在call內部對generator函式進行了處理。

routes

在routes中主要涉及兩個操作，第一個就是如何拿到資料，第二個就是如何傳送同步或非同步請求來更新頁面資料。

• 如何拿到資料

在該模組中，就是每個路由所對應的頁面，下面主要了解資料是如何在頁面中取到的：

import { connect } from 'dva';

@connect(state => ({
  problem: state.problem,
  user: state.user,
}))
export default class Problem extends PureComponent {
  render() {
    const { problem, user } = this.props;
    return (
      <div title="題目">{problem.title}</div>
    );
  }
}

從上面的程式碼可以看到在頁面中匯入了dva框架，用dva的connect方法可以拿到所有的state，我們只需要在頁面中獲取需要的state即可。拿到之後所有的資料都是以props的形式嵌入頁面的，也就是我們就像操作props來對待這些資料即可。

• 如何更新頁面資料

在和model關聯的頁面中，都會給頁面傳入dispatch() 這個方法，該方法就是分發的意思，可以發出一個Action，Action是Redux中的概念，發出這個Action後就會找到頁面所對應的model，然後做出相應的處理。如下：

componentDidMount() {
   const { dispatch } = this.props;
   dispatch({
     type: 'problem/fetchProblemInfo',
     payload: {
       id: this.props.match.params.id,
     }，
   });
 }

dispatch中的引數就是一個Action。第一個type欄位由兩部分組成，前半部分是model的namespace（名稱空間），後半部分是該Action的處理位置，對應model中的effects（處理非同步邏輯）,或reducers（處理同步邏輯）。

services

這個模組中的邏輯相對比較簡單，就是模仿一下後臺介面的實現，對請求進行了進一步的封裝。

// 獲得題目資訊
export async function getProblemInfo(params) {
  return request(`/apiv1/problem/get?${stringify(params)}`);
}

// 普通提交
export async function commonSubmit (params) {
  return request('/authv1/submit/common', {
    method: 'POST',
    body: params,
  })
}

在該層將request的結果返回給model層，放在async內部的函式都是同步的。

Mock

Mock的功能就是可以在本地模擬後臺的行為，在框架中主要涉及到.roadhogrc.mock.js檔案。如果開啟代理的話，當發起請求時就會被代理到本地來處理，根據請求方式和URL就可以返回不同的資料。

總結

以上是對ant-design-pro的一次實踐總結，希望有助於剛開始接觸這個框架的新手加深理解，具體的時間專案已傳至

歡迎   start    Thanks♪(･ω･)ﾉ。