淺談 Ant Design Pro

1、開門見山css

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

 

2、雲裏霧裏前端

 一、腳手架的安裝步驟react

     使用命令行工具git

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

     $ mkdir my-project redux

     $ cd my-project 瀏覽器

     $ pro new
antd

    $ npm startreact-router

 二、目錄結構分析

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

 三、src文件夾 輕描淡寫

   而src中自己又包含着不少的子文件夾。 
   其中,咱們最經常使用的應該了routesservicesmodels以及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中增長一個訪問路徑。

相關文章
相關標籤/搜索