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) 前端打包,編譯,路由,模型,服務