ant Design給人的感覺(jué)就是：很強(qiáng)大、很龐大（雜亂）。

它號(hào)稱已經(jīng)應(yīng)用于多個(gè)生產(chǎn)項(xiàng)目了。或者看這里。或者看看dva官方首頁(yè)吹的牛B。

官方的dva教程只是告訴你dva/dva-cli有多好用，然后帶你做了一個(gè)用戶列表界面的展示。

接下來(lái)的思路還是先找重型的腳手架。

進(jìn)入官方的awesome-ant-design先，在Boilerplates中的前四個(gè)是star數(shù)超過(guò)100的，下面分別看它們。

（【擴(kuò)展：什么叫awesome？ 和 只有awesome的才是awesome的。P.S.進(jìn)入了awesome列表，都是些非凡的項(xiàng)目。你去這個(gè)列表上看一看，都是些什么！能被這個(gè)所謂的awesome收錄，我覺(jué)得水準(zhǔn)就是世界級(jí)的。】）

Ant-Admin

400+ stars。 Demo

特點(diǎn)：全面

React SPA

300+ stars。 Demo

特點(diǎn)：動(dòng)效

React-antd-admin

180+ stars。 Demo

特點(diǎn)：簡(jiǎn)單

React-redux-antd

150+ stars。No Live Demo

試用報(bào)告

前三個(gè)跑起來(lái)以后和Live Demo一毛一樣。
最后一個(gè)沒(méi)跑起來(lái)，放棄。

進(jìn)入 AntD Admin

項(xiàng)目的package.json解讀：

關(guān)于依賴版本的定義，直接version，>,<=這種就不說(shuō)了。

關(guān)鍵是^和~這種的。需要學(xué)習(xí)一下。

而依賴和dev依賴的區(qū)別也要有所了解。

看下dev依賴：

• atool ： ant封的webpack
• babel相關(guān)
• dora：配置管理
• eslint相關(guān)
• glob：路徑匹配（模糊？正則？）的node組件
• mock
• 等等

至于dependencies就比較常規(guī)了，react、ant、dva什么的。

ant-Admin項(xiàng)目代碼本身窺探：

• 結(jié)構(gòu)比較清晰。
• 封裝度不如admin on rest。因?yàn)閐va就是直接用了antd的ui組件，是組件級(jí)別而不是框架級(jí)別，dva自己也說(shuō)提供的api非常少。所以我們甚至在這個(gè)腳手架里面還看到less文件。不過(guò)說(shuō)起來(lái)其實(shí)也還好，因?yàn)檫@樣的話，我們可以自己做封裝，而且樣式也可以更靈活了。

初步體會(huì)：

• ant-Admin是利用dva實(shí)現(xiàn)的稍微復(fù)雜了一點(diǎn)兒的例子。
• Model是dva中的重要概念，事實(shí)上它自己也是這樣說(shuō)的。
• 不妨結(jié)合官方的開(kāi)發(fā)指引高效地進(jìn)行學(xué)習(xí)。

相關(guān)學(xué)習(xí)資料鏈接

• DVA首頁(yè)
• 12步30分鐘完成你人生中第一個(gè)DVA應(yīng)用
• 做完人生的第一步，請(qǐng)繼續(xù)看：DVA相關(guān)概念和課程入門(mén)

關(guān)于ant組件

總的來(lái)說(shuō)非常強(qiáng)大，它的組件庫(kù)豐富，配置靈活，樣式也多變。我簡(jiǎn)單試用了一下，單從展示與頁(yè)面功能上來(lái)說(shuō)，適配我們的產(chǎn)品絕大部分功能綽綽有余。

在讀腳手架代碼時(shí)，發(fā)現(xiàn)一個(gè)問(wèn)題，就是兩個(gè)框架在組件相關(guān)目錄文件內(nèi)容組織時(shí)有些小區(qū)別：

• dva-cli的工程的做法是：routes目錄中只放幾大主要模塊的Component（其他框架也這樣做的），但是它不放樣式，只是簡(jiǎn)單組織一下大體結(jié)構(gòu)。主要的內(nèi)容部分是直接引的Component目錄下的模塊組件。
• ant-admin的做法是：routes中每個(gè)主要模塊的文件寫(xiě)的比較復(fù)雜，而在Component目錄中的對(duì)應(yīng)目錄做的是這個(gè)模塊的部分組件，在routes目錄中的對(duì)應(yīng)文件中對(duì)他們進(jìn)行拼裝，而且實(shí)現(xiàn)了一些dispatch/action/行為，而且還會(huì)引入樣式。而在Component中，是不實(shí)現(xiàn)dispatch的。
• 個(gè)人竊以為dva的方式較好。當(dāng)然，組件復(fù)雜的情況下，可以在dva的方式的基礎(chǔ)上，按ant-admin的方式拆開(kāi)嘛。

當(dāng)然了，在Component目錄中，做法基本是沒(méi)區(qū)別的。你定義自己的業(yè)務(wù)組件，完成對(duì)ant組件的使用。

其他區(qū)別

發(fā)現(xiàn)一個(gè)就列一個(gè)

• dva用了路霸。aa用了dora。
• aa使用了動(dòng)態(tài)路由，而dva并沒(méi)有教我們用。
• dva有的eslint默認(rèn)配置。

結(jié)論：dva/antDesign更新快，自我迭代，因此它代表的是最佳實(shí)踐。我想后續(xù)的話，我們用其他腳手架指導(dǎo)和啟發(fā)我們的思路，而整體框架則沿用dva。

關(guān)于登錄認(rèn)證

都SPA了，登錄認(rèn)證不建議使用老的那一套。因?yàn)榍昂蠓蛛x了，后端不應(yīng)該管頁(yè)面渲染的事情。如果有個(gè)請(qǐng)求被拒絕了，由后端直接扔給瀏覽器一個(gè)默認(rèn)的404的html，那我認(rèn)為這是前后分離不徹底（同樣的，登錄頁(yè)面后端也不要管，也由前端框架來(lái)負(fù)責(zé)。）。
這不是有偏執(zhí)的牛角尖狂熱癥，同時(shí)我認(rèn)為后端應(yīng)該轉(zhuǎn)變或者拋棄傳統(tǒng)的一些思路。
試想，如果我前端又開(kāi)發(fā)了一個(gè)手機(jī)app版本的，界面是用原生應(yīng)用生成，數(shù)據(jù)和web前端一樣，同樣是基于后端。那么，后端發(fā)現(xiàn)認(rèn)證失敗的時(shí)候，是還扔給我404的html嗎？
因此，后端只管做好數(shù)據(jù)提供者就好，任何展示部分不要插手。如果一個(gè)后端開(kāi)發(fā)人員就是想插手展示部分，請(qǐng)你學(xué)習(xí)一下前端開(kāi)發(fā)技術(shù)，并轉(zhuǎn)型成為前端開(kāi)發(fā)人員。算我求你。
前端SPA認(rèn)證的基本思想，請(qǐng)參考這篇React SPA登錄與身份認(rèn)證。

基本思想我來(lái)解讀一下：

1. 請(qǐng)求首頁(yè)/登錄頁(yè)，不考慮認(rèn)證。
2. 登錄時(shí)，后端生成token，response給前端，前端保存。（后端邏輯：接受登錄請(qǐng)求，生成token，response出去。前端邏輯：登錄提交后，等待接受登錄的response，接收到以后成功登錄，保存token。）
3. 每次數(shù)據(jù)請(qǐng)求時(shí)，前端在http-header中包含token。（前端邏輯：請(qǐng)求后端數(shù)據(jù)，并在這個(gè)請(qǐng)求中附帶上token）
4. 后端可以根據(jù)token，決定是返回?cái)?shù)據(jù)，還是返回拒絕信息。（后端邏輯：先判斷token，如果沒(méi)問(wèn)題就返回?cái)?shù)據(jù)了。如果不行，返回一些信息，并附帶401或者403狀態(tài)碼。）
5. 前端根據(jù)狀態(tài)碼做數(shù)據(jù)展示或者路由。（前端邏輯：如果是200,201狀態(tài)碼，處理并展示數(shù)據(jù)，總之該怎樣怎樣。如果狀態(tài)碼是401或403，那就直接路由到/login，并清空之前的token就好了。）

總結(jié)：后端根據(jù)token進(jìn)行認(rèn)證（安全性有待討論，肯定有加固方式）。由返回碼通知前端認(rèn)證結(jié)果。前端每次請(qǐng)求數(shù)據(jù)帶token，并且根據(jù)返回碼判斷請(qǐng)求成功或者被拒絕。

看似啰嗦的邏輯或者流程，其實(shí)并不難做。后端庫(kù)是成熟的。
Spring的看這里，SpringMVC的RESTful API中就帶token處理的相關(guān)類(lèi)/API/注解。你只管寫(xiě)好你的CRUD接口就好，認(rèn)證這塊公共模塊就給你做好了啊。

前端也是成熟的。
就算是自己封一下也蠻簡(jiǎn)單的啊。【請(qǐng)看一下admin-on-rest關(guān)于登錄認(rèn)證的說(shuō)明，加深理解】

**【TODO】繼續(xù)了解JWT的概念，并學(xué)習(xí)使用react和jwt的結(jié)合，以及相關(guān)的庫(kù) **

關(guān)于Icon

在開(kāi)發(fā)前端工程時(shí)，很多地方需要使用一些小的logo圖片。對(duì)界面美化、整體風(fēng)格塑造等等方面都會(huì)有用。

主流的方式是使用一些svg等格式的矢量圖。

有沒(méi)有現(xiàn)成的圖片？如果有的話，我們?nèi)绾我茫?/p>

當(dāng)然有現(xiàn)成的！而且在antd admin中，對(duì)圖標(biāo)使用都有現(xiàn)成的例子。

antd admin 直接引用了iconfont的圖標(biāo)解決方案。這也是ant Design的Icon組件的圖標(biāo)使用方式。

具體的使用方法是：

1.在iconfont的網(wǎng)站上，眾多開(kāi)發(fā)者發(fā)布了非常多的免費(fèi)使用的圖標(biāo)庫(kù)。
2.使用者在iconfont網(wǎng)站上注冊(cè)一個(gè)賬號(hào)，并在自己的工作空間中創(chuàng)建一個(gè)項(xiàng)目。
3.對(duì)自己的項(xiàng)目生成一個(gè)在線訪問(wèn)的超鏈接，這個(gè)鏈接可以是一個(gè)公開(kāi)的鏈接，公網(wǎng)訪問(wèn)，而且無(wú)需登錄也可訪問(wèn)。
4.將喜歡的圖標(biāo)添加到自己的項(xiàng)目中。
5.常規(guī)開(kāi)發(fā)前端工程代碼，并在你的代碼中使用Icon組件。
6.將步驟3生成的超鏈接配置到我們的前端工程代碼中，即可在工程中用Icon組件使用步驟4中添加的所有圖標(biāo)。
7.上面的步驟要求前端工程運(yùn)行后必須能在線訪問(wèn)iconfont。因此iconfont即是一個(gè)在線的圖標(biāo)托管系統(tǒng)。如果需要離線使用步驟4中的所有圖標(biāo)，iconfont也提供打包下載然后本地使用的解決方案。

然而，antd默認(rèn)使用它的基礎(chǔ)在線的icon組件。每次都會(huì)在線向alicdn.com請(qǐng)求圖標(biāo)。【TODO 如果用了本地圖標(biāo)解決方案，這種事情還會(huì)發(fā)生嗎？講道理的話應(yīng)該不會(huì)】

如果你的chrome裝了qq電腦管家插件，它會(huì)發(fā)生向qq.com某地址請(qǐng)求的事情。我搞了一會(huì)兒才搞明白是這個(gè)插件的問(wèn)題。我還以為我用的js庫(kù)被企鵝廠搞了。

全局設(shè)置

utils/config.js 中可以改一些全局設(shè)置。感謝antd admin作者。

關(guān)于樣式

可參考阮神的 CSS Modules

iconfont本地化

參考這個(gè)issue
如果想引用自己的圖標(biāo)庫(kù)，還有這個(gè)issue