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上面

這篇文章就寫這麼多吧~.