1、學習經歷

        用了兩週的時間學習nodejs，nodejs是一個指令碼語言，有過js基礎，所以上手很簡單。首先看nodejs開發文件，基本的語法自己也都實現了一遍。然後，第二週用websocket 和串列埠通訊，實現了點選螢幕監控訊號燈的功能。第三週開始看ant design pro ,好吧，開始確實無從下手，這裡就簡單分享下看懂ant-design-pro 並使用的過程。

2、從資料流開始，分析antd

       最直接的辦法就是看程式碼了，首先分析一下登入過程的資料流向，登入介面對應的js檔案在  src/routes/User/Login.js,

自動忽略所有程式碼是啥意思，找到下面的程式碼：

handleSubmit = (err, values) => {
  const { type } = this.state;
  const { dispatch } = this.props;
  if (!err) {
    dispatch({
      type: 'login/login',
      payload: {
        ...values,
        type,
      },
    });
  }
};

嗯，重點看到 login/login , 這是react-router元件跳轉的方式，payload是引數，這裡的login/login跳轉到哪裡？前邊的login代表著model，也就是src/models目錄下的models。具體是怎麼關聯的呢？在src/common目錄下的router.js檔案中設定：

'/user/login': {
 component: dynamicWrapper(app, ['login'], () => import('../routes/User/Login')),

嗯，['login'] , 就表示models 目錄下對應的那個js檔案（檔案中的namespace='login')。然後就找到models資料夾下的對應login.js

找到：

    *login({ payload }, { call, put }) {//fakeAccountLogin
      const response = yield call(fakeAccountLogin, payload);
      yield put({
        type: 'changeLoginStatus',
        payload: response,
      });
      // Login successfully
      if (response.status === 'ok') {
        reloadAuthorized();
        yield put(routerRedux.push('/'));
      }
    },
 

這樣的話，元件間資料的流向就跟清楚了，要想明白具體是怎麼實現的請先學習 react,react-router ,redux

學完這些，上邊的流程自然就能明白是啥意思了。

剩下的就是怎麼獲取後臺資料了，

const response = yield call(fakeAccountLogin, payload);  使用call（function，param）和獲取後臺資料，fakeAccountLogin是方法，定義在service資料夾下

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

ant design pro 採用dva框架進行管理，所有你要到根目錄找到.roadhogrc.mock.js 檔案 ，看到

POST /api/login/account': (req, res) => {
   //
  }

在這裡獲取後臺資料。以上就是完整的資料互動的流程 ，下面是學習三週後做的一個例子：

3、demo

主要的功能：用ant design 提供的元件完成對資料庫的曾刪改查的操作：