之前一直都是一邊學習，一邊寫代碼，從來沒有像現在這樣做過課程分享筆記。堅持更完確實不容易，雖然作爲react結合dva的入門，不算是精品，但是還是感謝那些願意閱讀的朋友。在現在這個魚龍混雜的IT圈，浮躁的氛圍正侵蝕着每一個人。那些願意 學習，願意研究的人相信最終會越來越好。
1 學習dva的初衷
最爲一格後端開發者，我對於前端酷炫的頁面始終情有獨鍾。相比而言，後端全是數據接口，並沒有多少視覺上的衝擊力。
以前後段的我也寫過頁面，jsp加jquery的時代已經一去不復返。雖然說jquery簡化了好多js的寫法，但是對於一些複雜的業務邏輯，還是要寫很多的代碼，一點也不fashion。
前端近幾年來不斷髮展壯大，每天都有新的技術涌現。react和vue作爲最出名的框架，打開了前端新世界的大門。
一些原生js開發者，看不上這些框架，老夫只用jauery，用框架的都是小白新手。不管怎樣看不上，但是這些框架確實提高了開發效率，讓我們這些後端也能很快上手。
之前已經學習過了vue，只後也瞭解過react，但是並沒有系統的學習過。一次偶然的機會，在一個個人網站上，看到了dva框架。作者只是提供了前兩節課程的免費學習，後面的都要付費。我是個窮人，沒法支持作者，只能自己學習，於是就想到了使用dva結合cnode的免費api來學習。
本來是打算用豆瓣的api的，結果人家不提供了，只好用cnode的了。不是說豆瓣的api好，只是因爲圖書，影視的數據展示出來效果好。Sorry，我就是個顏值控。
2 簡單搬磚部分
所有頁面都用的antd，仿照官網的例子，直接上手自己改造就好。
雖然自己寫了登陸，註冊，導航等組件，其實只是使用antd的組件，然後將一些參數放到屬性中。在其他頁面中使用時，傳入組件屬性參數，來實現一些動態效果，並沒有做到複雜的效果。
頁面的佈局都屬於簡單，上中下的結構，尾部沒有加。每個頁面引入頭部導航組件，然後再引入自己的功能，像拼積木一樣完成搭建。
只要看下antd官網的api，你就可以熟練使用。這麼說，複製粘貼你就可以完成頁面。如果對於一些樣式不滿意，你可以使用行內樣式或是引入樣式去覆蓋。
3 難以理解部分
你需要了解ｄｖａ的數據流向，應爲他本身就是用來解決數據管理的。如果你熟悉ｊａｖａ後端的ｍｖｃ結構，我想你會很容易理解。
-
routes裏面放的就是頁面，也相當於ｃｏｎｔｒｏｌｌｅｒ層，根據不同的路由去不同的頁面，不同於ｊａｖａ的是，每個頁面的路由並沒有直接寫在自己的頁面代碼中，而是全部放在router.js中去，爲每個頁面邦定路由，然後註冊到整個應用中去。
app.router(require('./router').default);- 視圖層需要和後端數據去交互。於是有了ｄａｏ層，在
service中去請求後臺ａｐｉ獲取數據。相當於ｊａｖａ的ｓｅｒｖｉｃｅ層 -
model來統一存儲視圖層的數據，你可以選擇那些數據需要去存儲。相當於ｊａｖａ的ｓｅｒｖｉｃｅ層。視圖層發送ａｃｔｉｏｎ到對應的model中,model響應ａｃｔｉｏｎ去ｄａｏ層拿數據，然後存儲數據到ｓｔａｔｅ。
export default {
namespace: 'user',
state:{
isLogin:false,
user:{}
},
effects: {
*login({ payload: { userName,password } }, { call, put }) {
const result = yield call(userService.getUser, { userName,password })
yield put({
type: 'updateUser',
payload: {
result
}
})
yield put(routerRedux.push('/'))
},
*reg({ payload: { userName,password } }, { call, put }) {
const result = yield call(userService.regUser, { userName,password })
yield put(routerRedux.push('/login'))
},
*logOut({ payload: {} },{ call, put }){
yield put({type: 'userOut'})
}
},
reducers: {
'updateUser'(state, { payload: data }) {
let r = data.result
return {isLogin:true,user:r}
},
'userOut'(state) {
return {isLogin:false,user:{}}
}
},
};
effects中都是異步方法，用於請求ｓｅｒｖｉｃｅ中的數據，然後告訴reducers去更新數據狀態。這樣視圖層就會重新渲染 。
4 數據的邦定
因爲所有的數據統一放到model中去管理，所以要想在組件中獲取，兩者直接就需要進行邦定，將state中的數據邦定到組件props中，這樣你就能獲取到了。
function mapStateToProps(state) {
return {
state
};
}
// export default ListData;
export default connect(mapStateToProps)(Person);5 路由
react-router裏面有好多路由的介紹，我也還沒有使用的很熟練。因爲這次的網站並沒有很複雜。
- 視圖層使用
<Link/>來進行跳轉 - 在代碼中，我們可能也會進行跳轉。使用
routerRedux
this.props.dispatch(routerRedux.push('/'))- 權限路由，寫一個路由組件，在裏面進行判斷。在想要鑑權的路由上用它包裹
6 樣式
因爲是單頁面應用，你在某一個頁面或組件中導入的樣式，會污染到其他組件或頁面。所以最好不要使用導入樣式，在每個頁面或組件中去寫樣式。
百度了下，解決方案有的是加樣式前綴，每個組件和頁面有不同的前綴，這樣就不會污染了。還有的是藉助ｗｅｂｐａｃｋ的一些插件來實現，比較麻煩。
因爲樣式對於我來說實在過於複雜，就不班門弄斧了，大家自己深入瞭解吧
７ es6語法
ｄｖａ中大量使用ｅｓ６的語法，如果你不瞭解的話，可能會出很多問題。記得我第二節課因爲不瞭解語法，始終沒辦法把數據和ｓｔａｔｅ邦定，花了很多時間。
所以你需要多花點時間去學習ｅｓ６的語法。
因爲我是菜鳥，就不多說了
8 結束語
技術註定是鼓譟的，能靜下心來學習研究的人，都是對於編程有着一定的興趣。我之前也是浮躁的不行，現在也開始不斷的進行知識的分享。我想只有把這些記錄下來，纔不會忘記。萬一哪天項目中就用到了呢？
凡事都有第一次，看着那麼多的技術大ｖ有那麼多的粉絲，每篇文章有那麼多的閱讀量，非常羨慕。也希望自己能有更多的關注，慢慢努力吧。
感謝那些看完我整個系列文章的朋友，如果有些錯的地方還請指出。第一次寫技術文章，還有很多地方需要改進，後面爭取越寫越好。
此次系列文章也同步發到我的公衆號，別忘了關注我 mike啥都想搞
還有其他後端技術分享在我的公衆號。