最近公司做一個後臺管理系統，猶豫半天還是想用ant design，後來發現他們有現成的腳手架 ant design pro ( github地址 )，果斷拉程式碼下來執行起來。

一：ant design pro 專案目錄結構和流程

整體目錄大概長這個樣子 

src裡面是這樣子

重要的就是mock檔案和src檔案咯，mock檔案裡面主要是用來本地構建請求返回的假資料（不是從伺服器返回的資料），src則是存放整個專案相關的檔案，接下來就重點講解一下。

common：只有menu.js和router.js 前者是定義的選單列表，這是因為ant design pro專案是寫死的選單列表 後面會講如何動態構建選單。後者是定義的整個專案的路由列表（也就是你訪問每一個頁面的路徑都需要提前在這裡定義好。）。

component：封裝的一些基礎UI元件（小零件）
layouts : ant design pro專案一些公共的元件比如：頭部、尾部、構建選單這些

routes：UI 元件（也就是每個路由對應的頁面元件檔案）
models：容器元件（用於元件的資料儲存，接收請求返回的資料等）

services：請求伺服器的介面列表、用於與後臺互動、傳送請求等

utils：封裝的一些工具

index.js :整個專案的入口 有使用dva（小女子還沒研究過，後面會深入研究。）

router.js：整個專案的路由入口 會有許可權判斷 （自己把utils檔案下面幾個檔案的程式碼好好讀一遍就能知道個大概了）

那麼我們就可以好好捋一捋整個流程了

1、首先你要訪問使用者列表，那你就必須先去common資料夾下的router.js檔案裡面定義

也就是將‘/userManage/userlist’這個路由指向routes資料夾下的User/list頁面。而其中dynamicWrapper方法則是將該頁面與models資料夾下的user、login關聯。只有關聯後，頁面才能訪問models的資料。（我自己嘗試後得知其他頁面關聯了的models也能訪問。也就是路由A關聯了user 路由B關聯device 那麼A頁面也是能訪問device的，B頁面是能訪問user的，但是如果都沒關聯customer，那A、B都是沒法訪問customer的，搞不懂為何這麼設計！！）

2、接下來就應該根據定義的路由去構建選單。

可以看出是由父節點選單path+子節點選單path組合而成

3、點選選單的時候是不是就跳轉到了‘../routes/User/list’頁面呢？

進入頁面的時候 是不是就應該請求列表資料？前面已經數過了 routes裡面是純UI元件，只負責頁面展示，那麼要展示的資料以及要提交給伺服器的資料都必須向models去請求，或者提交給models去處理。兩者要互動必須先connect起來。這樣在UI元件就可以通過this.props拿到models的資料。

@connect(({ user, loading }) => ({

     user,

    loading: loading.models.system,

}))

第一個user表示的是user這個model,也就是當前頁面要訪問那幾個models都必須這麼先關聯起來。loading是來自dva,可以監聽models的狀態。然後在頁面就可以開始請求。

componentDidMount() {

     this.props.dispatch({     //dispatch相當於觸發一個action

        type: 'user/userListfetch',//  models資料夾下user檔案裡面effects下面的*userListfetch方法

       payload: data    //  提交的引數

      });

}

3、然後我們再跟蹤到models資料夾下的user檔案。

namespace：表示改models的名稱，

state：表示這個models下儲存的資料，

effects：主要接收UI元件傳送過來的action，

reducers：資料處理，儲存到state.

*fetch(_, { call, put }) {

        const response = yield call(queryUsers); // 請求services資料夾

       yield put({   // 請求成功後 執行 reducers裡面的save方法

            type: 'save',

            payload: response,

      });

},

save(state, action) {

    return {

         ...state,

       list: action.payload, // 把請求的結果放到state的list裡面

      };

},

這樣 在routes/user/list裡面列印 this.props就一定是這樣的結構

{

    user:{  // user對應的就是namespace

        list:[....] ,// ....表示請求拿到的值

       currentUser: {...},

       menuData: [....],

   }

  ........// 還有其他屬性 來自dva或者ant design pro自己封裝的東西 比如form、loading、routerData等等

}

4、繼續跟蹤到services資料夾下

就是向伺服器進行請求。

---------------------------------------------自此 整個流程結束---------------------------------------------------------

二、Ant Design Pro使用技巧之mock資料地址改為伺服器地址

第一步：package.json裡面加一行

              "start": "cross-env ESLINT=none roadhog dev",

              "start:no-proxy": "cross-env NO_PROXY=true ESLINT=none roadhog dev",  // 表示配置代理伺服器的啟動方式

第二步：.roadhogrc.mock.js檔案         

               // 是否禁用代理

              const noProxy = process.env.NO_PROXY === 'true';

              // 將所有以/api/開頭的GET和POST請求全部直接轉發至‘你的伺服器地址’  

              export default noProxy ? { 'GET /api/*': '你的伺服器地址','POST /api/*': '你的伺服器地址' } : delay(proxy, 1000); 

第三步、啟動

             npm start : 不適用代理伺服器 請求mock資料

            npm run -r start:no-proxy ：使用代理伺服器 請求伺服器資料

三、動態建立選單

四、富文字編輯器

      因為專案所需的富文字編輯器比較簡單，糾結了很久選擇了react-draft-wysiwyg（支援把編輯器內容轉化成html、json等格式，也支援將html、json等格式的資料轉化成文字內容。）使用方法也很簡單，跟著官網的幾個demo走就可以了。

暫時就這麼多，以上全都是個人見解，有錯誤的地方希望大家指正，謝謝！！！