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
中自己又包含着不少的子文件夾。
其中,咱們最經常使用的應該了routes
,services
,models
以及components
。
下面,咱們來依次瞭解一下這四個文件夾的做用。
3、疑難雜症
一、css樣式的處理
Ant Design Pro 默認使用 less 做爲樣式語言,建議在使用前或者遇到疑問時學習一下 less 的相關特性。
用 less 寫樣式好像沒什麼改變,只是類名比較簡單(實際項目中也是這樣),js 文件的改變就是在設置 className 時,用一個對象屬性取代了原來的字符串,屬性名跟 less 文件中對應的類名相同,對象從 less 文件中引入。
使用:
編輯:
在上面的樣式文件中,.title
只會在本文件生效,你能夠在其餘任意文件中使用同名選擇器,也不會對這裏形成影響。不過有的時候,咱們就是想要一個全局生效的樣式呢?可使用 :global
。
二、ant design pro數據流走向
這個文件很重要,裏面涉及了路由,數據還有頁面,主要將路由和頁面關聯,以及將數據和頁面關聯。以下所示:
從上面代碼能夠看出,一個頁面能夠關聯多個數據,這個根據頁面的需求來決定,只要是關聯的數據均可以在頁面中拿到。dynamicWrapper
函數所作的工做就是將頁面與model關聯起來,其中第二個參數就是model的文件名。
models
在第二部分框架的基本結構中就說了models是屬於dva的,因此若是你以前就使用過dva的話,那這個框架就用起來很是駕輕就熟,model是dva的核心部分,ant-design-pro就是針對dva的一次最佳實踐。下面看下model文件的主要結構:
補充:在effects中調用了service中所封裝的後臺接口,該調用方式是ES6中的generator函數,該函數使得異步操做如同同步操做同樣。call就至關於一個執行器,在call內部對generator函數進行了處理
在routes中主要涉及兩個操做,第一個就是如何拿到數據,第二個就是如何發送同步或異步請求來更新頁面數據。
在該模塊中,就是每一個路由所對應的頁面,下面主要了解數據是如何在頁面中取到的:
從上面的代碼能夠看到在頁面中導入了dva框架,用dva的connect方法能夠拿到全部的state,咱們只須要在頁面中獲取須要的state便可。拿到以後全部的數據都是以props的形式嵌入頁面的,也就是咱們就像操做props來對待這些數據便可。
在和model關聯的頁面中,都會給頁面傳入dispatch()
這個方法,該方法就是分發的意思,能夠發出一個Action,Action是Redux中的概念,發出這個Action後就會找到頁面所對應的model,而後作出相應的處理。以下:
dispatch中的參數就是一個Action。第一個type字段由兩部分組成,前半部分是model的namespace(命名空間),後半部分是該Action的處理位置,對應model中的effects(處理異步邏輯),或reducers(處理同步邏輯)。
這個模塊中的邏輯相對比較簡單,就是模仿一下後臺接口的實現,對請求進行了進一步的封裝。
在該層將request的結果返回給model層,放在async內部的函數都是同步的。
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中增長一個訪問路徑。