4.前端基於react,後端基於.net core2.0的開發之路（4） 前端打包，編譯，路由，模型，服務
1.簡要的介紹
學習react，首先學習的就是javascript,然後ES6,接著是jsx，通常來說如果有javascript的基礎，上手非常快，但是真正要搭建一個前端工程化項目，還是有很多坑的
搞定上面的東西，那麽去了解一下Virtual DOM，可以讓你更快的了解react
狀態管理和路由都是基於dva(dva基於react-router,redux)，所以就按照dva的命名和規則來玩。建議一邊實踐一邊學習。因為dva對新手非常的友好，建議使用它來入門。
2.心路歷程（坑路歷程）
第一個坑，基本來說很簡單，就是安裝node，然後通過npm初始化項目，然後通過dva-cli創建你的第一個項目，對我就是用dva-cli初始化項目後開始搭建的。
第二個坑，我需要放棄dva自帶的roadhog插件,使用webpack，這個時候配置webpack就是一個深坑了
第三個坑，這個坑是webpack帶來的，簡單來說就是各種loader，你會發現，當你填完前面一個坑後，接著會再出現一個坑讓你填，對，就是babel！css-loader,less-loader這裏就不說了，相對簡單。
我們重點說說babel，babel分presets和plugins，如果是react，你需要babel編譯es2015，react，然後通常還需要幾個plugins包，比如‘...‘這個語法，就需要特殊的包來編譯他。簡單來說，你使用webpack命令打包程序時，問題會一個一個浮現出來，然後你需要通過查詢官方文檔，來一個一個解決他。
第四個坑，服務端渲染的坑，當你需要做這個的時候，你會發現，你能查到的文章，並不能給你解決實際問題（文章太老舊），你需要Github去找別人的解決方案，你需要去官方文檔裏翻可能存在在角落的官方實例（也可能沒有），當你解決這個問題的時候，你會發現，自己用的react-router版本不是最新的，然後你還會發現，最新版本直接重寫了！不向下兼容。
然後這個坑會讓你去學習如何搭建Node,如何使用node的服務端框架如express,然後node怎麽記錄session等等問題。
第五個坑，如何在node層攔截請求，並進行處理。
好了心路歷程走完，我們可以把所有的知識點串聯起來了
dva-cli->dva->react->webpack->babel->node->express
3.來個Todo實戰一下，了解下路由，模型，服務
通過dva-cli先建一個項目
然後
cd learnreact
npm run start
啟動成功！
我們來看看項目構成
入口文件index.js
路由入口router.js
路由文件夾routes
模型文件夾models
服務文件夾services
簡單寫一下查詢數據，就OK了，我們開始
如果你不需要做服務端渲染，那麽，webpack,mock之類的就不要自己加了，直接用roadhog，創建的時候都給你配置好了，拿來即用。
第一步，創建服務，並引用到模型裏
路徑：services/home.js
import request from ‘../utils/request‘; export function GetHomeInfo() { return request(‘/api/getHomeInfo‘); }
然後把request.js修改下
路徑：utils/request
export default function request(url, options) { return fetch(url, options) .then(checkStatus) .then(parseJSON) .then((data) => { return { data }; }) .catch(err => ({ err })); }
第二步，建立模型（store），並註入進去
路徑：models/home.js
import { GetHomeInfo } from ‘../services/home‘;
export default {
namespace: ‘home‘,
state: {
homeInfo: []
},
subscriptions: {
setup({ dispatch, history }) { // eslint-disable-line
},
},
effects: {
*getHomeInfo({ payload }, { call, put }) { // eslint-disable-line
const result = yield call(GetHomeInfo, payload);
const { data } = result;
yield put({ type: ‘setHomeInfo‘, payload: data.data });
},
},
reducers: {
setHomeInfo(state, { payload }) {
return { ...state, homeInfo: payload };
},
},
};
然後把模型引用進去：
路徑：src/index.js
import dva from ‘dva‘; import ‘./index.css‘; import home from ‘../src/models/home‘; // 1. Initialize const app = dva(); // 2. Plugins // app.use({}); // 3. Model // app.model(require(‘./models/example‘)); app.model(home); // 4. Router app.router(require(‘./router‘)); // 5. Start app.start(‘#root‘);
第三步，創建路由
路徑：routes/Home.js
import React, { Component } from ‘react‘;
import { connect } from ‘dva‘;
class Home extends Component {
componentDidMount() {
const { dispatch } = this.props;
dispatch({ type: ‘home/getHomeInfo‘ });
}
render() {
const { homeInfo } = this.props.home;
return <div>
{homeInfo.map((item, index) => {
return <div key={item.key}>
{item.name}
</div>
})}
</div>
}
}
export default connect(({ home }) => ({ home }))(Home);
第四部，添加mock攔截請求
路徑：.roadhogrc.mock.js
export default { ‘GET /api/getHomeInfo‘: (req, res) => { res.json({ success: true, data: [ { key: 1, name: ‘nick‘, age: 19 }, { key: 2, name: ‘tony‘, age: 20 }, { key: 3, name: ‘lili‘, age: 21 }, { key: 4, name: ‘lilei‘, age: 22 }, ], }); }, };
最後跑起來看看：
OK，成功啦，這就是一個簡單的查詢，查詢走通了，其他操作就是堆積木了。
數據的走向都清楚了
router->model(effects)->service->api->result->model(reducers)->router.
再說一下裏面出現的一些關鍵字：
class, extends ,export，import ,componentDidMount,render
前4個是ES6的語法，class類，extends基礎，export導出和import導入都是模塊化的東西，componentDidMount是react的生命周期,render就是渲染了，所有state的變化都會觸發render，不管你是this.setState(),還是dispatch修改了模型的裏的state.
最後，打包
npm run build
dist文件夾裏就是打包文件，可以直接部署在iis上面
這篇文章就寫這麽多吧~.
4.前端基於react,後端基於.net core2.0的開發之路（4） 前端打包，編譯，路由，模型，服務