淺談 Ant Design Pro

1、開門見山

     Ant Design Pro 是一套基於 React 技術棧的單頁面應用，咱們提供的是前端代碼和本地模擬數據的開發模式， 經過 Restful API 的形式和任何技術棧的服務端應用一塊兒工做，技術組成主要是react+redux+dva+antd+fetch+roadhog，說白了就是基於React的一套腳手架，UI是 Ant Design ，框架是 Ant Design Pro ，腳手架安裝完成，運行起來的樣子：

 

2、雲裏霧裏

 一、腳手架的安裝步驟

     使用命令行工具

     $ npm install ant-design-pro-cli -g

     $ mkdir my-project

     $ cd my-project

     $ pro new

    $ npm start

 二、目錄結構分析

咱們已經爲你生成了一個完整的開發框架，提供了涵蓋中後臺開發的各種功能和坑位，下面是整個項目的目錄結構。

 三、src文件夾 輕描淡寫

   而src中自己又包含着不少的子文件夾。 
   其中，咱們最經常使用的應該了routes，services，models以及components。 
  下面，咱們來依次瞭解一下這四個文件夾的做用。

1. routes：每一個路由對應的頁面組件文件。主要定義具體頁面的基本結構和內容。
2. services：用於與後臺交互、發送請求等。
3. models：用於組件的數據存儲，接收請求返回的數據等。
4. components：組件文件夾。每一個頁面多是由一些組件組成的，對於一些相對通用的組件，建議將該組件寫入components文件夾中，並在routes文件夾中的文件引入來使用。

3、疑難雜症

   一、css樣式的處理

            Ant Design Pro 默認使用 less 做爲樣式語言，建議在使用前或者遇到疑問時學習一下 less 的相關特性。

           用 less 寫樣式好像沒什麼改變，只是類名比較簡單（實際項目中也是這樣），js 文件的改變就是在設置 className 時，用一個對象屬性取代了原來的字符串，屬性名跟 less 文件中對應的類名相同，對象從 less 文件中引入。

         使用：

       編輯：

在上面的樣式文件中，.title 只會在本文件生效，你能夠在其餘任意文件中使用同名選擇器，也不會對這裏形成影響。不過有的時候，咱們就是想要一個全局生效的樣式呢？可使用 :global。

二、ant design pro數據流走向

  common   

• menu.js
• 主要設置導航欄的信息，如跳轉連接和所顯示的文字和圖標。以下所示：

•  

• router.js

         這個文件很重要，裏面涉及了路由，數據還有頁面，主要將路由和頁面關聯，以及將數據和頁面關聯。以下所示：

 

從上面代碼能夠看出，一個頁面能夠關聯多個數據，這個根據頁面的需求來決定，只要是關聯的數據均可以在頁面中拿到。dynamicWrapper 函數所作的工做就是將頁面與model關聯起來，其中第二個參數就是model的文件名。

  models

在第二部分框架的基本結構中就說了models是屬於dva的，因此若是你以前就使用過dva的話，那這個框架就用起來很是駕輕就熟，model是dva的核心部分，ant-design-pro就是針對dva的一次最佳實踐。下面看下model文件的主要結構：

• namespace：該字段就至關於model的索引，根據該命名空間就能夠找到頁面對應的model;
• effects： 處理全部的異步邏輯，將返回結果以Action的形式交給reducer處理；
• reducers：處理全部的同步邏輯，將數據返回給頁面；

補充：在effects中調用了service中所封裝的後臺接口，該調用方式是ES6中的generator函數，該函數使得異步操做如同同步操做同樣。call就至關於一個執行器，在call內部對generator函數進行了處理

   routes

在routes中主要涉及兩個操做，第一個就是如何拿到數據，第二個就是如何發送同步或異步請求來更新頁面數據。

• 如何拿到數據

在該模塊中，就是每一個路由所對應的頁面，下面主要了解數據是如何在頁面中取到的：

  從上面的代碼能夠看到在頁面中導入了dva框架，用dva的connect方法能夠拿到全部的state，咱們只須要在頁面中獲取須要的state便可。拿到以後全部的數據都是以props的形式嵌入頁面的，也就是咱們就像操做props來對待這些數據便可。

• 如何更新頁面數據

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

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

   services

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

  

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

  Mock

  Mock的功能就是能夠在本地模擬後臺的行爲，在框架中主要涉及到.roadhogrc.mock.js文件。若是開啓代理的話，當發起請求時就會被代理到本地來處理，根據請求方式和URL就能夠返回不一樣的數據。

總結

  瀏覽器輸入路徑->腳手架獲取路徑->經過common匹配路徑(分級匹配)->加載layouts頁面->加載routes頁面，調用

  dispatch()請求數據,加載->models模型接收，並調取services請求，並返回且封裝->將請求到的參數傳入components控件中->加載components控件，經過數據渲染，返回控件html。

        大概流程就是這樣，antd pro框架已經集成了dva請求框架，和react-router路由框架，開發須要的只是去common中添加新頁面的path，去routers中新增頁面，若是有可複用的頁面控件的話還能夠去components中封裝起來，而後去models中新增長一個模型，services中增長一個訪問路徑。