react在本地代理請求json文件返回接口數據開發

在平時開發過程當中，不少時候先後端並行開發，暫時沒法調取後臺接口，此時咱們不少時候可能會採起本地僞數據方式，或者採用mock數據，我之前大多采用這種方式，最近來新公司這邊，發現這即是利用node本地代理方式來進行接口模擬調用，而後數據經過本地json文件讀取返回，我的認爲這種方式最能體現業務代碼執行過程當中的衆多邏輯，因此稍加研究，記錄一下。固然，前提時後端跟前端有着良好的接口溝通方式，後端已經給出了接口名稱和返回結構字段，這樣後端接口寫完了以後直接進行調試不須要再進行修改。

本demo採用create-react-app腳手架初始化項目，用antd-mobile進行組件化展現，用node的express搭建本地環境，superagent進行先後端請求，鑑於node執行文件修改都須要重啓，這裏採用nodemon進行node啓動，當node執行文件有修改，會自動重啓應用後臺服務。

src文件夾是業務代碼，這個不是重點，app.js是node執行文件入口；router.js文件執行node讀取本地josn文件返回數據的方法實現；config.js是作代理的一些配置文件；proxy-confit.js是本地代理的代理邏輯；而後上面文件夾proxy_data是準備好的本地json文件，調取接口時候就是node調取了本地json文件而後讀取文件返回數據的一個過程。

首先須要注意的是，package.json加上proxy配置

目前網上查到好像說該配置僅僅對create-react-app初始化的項目起做用，做用就是將請求的路徑修改到proxy路徑，這裏的host和port須要跟下面配置的host port對應。

詳細解釋一下：
app.js

var express = require('express');
var bodyParser = require('body-parser');
var router = require('./router');// 引入router
var config = require('./config');// 引入配置
var app = express();
app.use(router)// 注意執行
app.use(bodyParser.json())// 注意加上，不然返回的是數據流，不是json
app.listen(config.port, function () {// 啓動應用
    console.log('server is run on ' + config.port);
})

config.js代理配置，這裏目前只有host和port根據項目需求本身加上便可。
var config = {
    host: 'localhost',
    port: 5002,
}
//這裏面最重要的在於host/port其餘能夠根據項目須要加進去，
module.exports = config;

router.js //詳細的代理和讀取文件邏輯
var express = require('express');
var fs = require('fs');
var proxyConfig = require('./proxy_config.js');// 引入代理邏輯
var router = express.Router();//注意執行
/*
 * RESTful 路由
 */
//router.get('/token', proxy.token);

// 下面文件執行邏輯在於當本地請求有符合proxy_config裏面配置的正則，就會被代理到本地而且讀取本地對        應json文件返回相應json數據
for(var i=0; i<proxyConfig.length; i++) {
(function(i){
    router[proxyConfig[i].method || 'post'](proxyConfig[i].reg, function(req, res, next){
        fs.readFile(__dirname + proxyConfig[i].local, 'utf8', function (err, data) {
            if(err) throw err;
            res.status(200);
            res.send(JSON.parse(data));
        });
    });
})(i)
}

module.exports = router;

proxy_config.js
代理規則
module.exports = [{
    "reg": "/collection-api/rest/userInfo",
    "local": "/proxy_data/userInfo.json"
},{
    "reg": "/collection-api/rest/planList",
    "local": "/proxy_data/planList.json"
},{
    "reg": "/collection-api/rest/planInfo",
    "local": "/proxy_data/planInfo.json"
}]

json文件根據真實需求編寫。例如：
{
  "code": 0,
  "data":{
    "planInfo": {
      "id":8,
      "planTitle":"react boss小應用demo",
      "planContent":"react+router+redux+express+mongdb+node",
      "createTime":"2018-07-12",
      "deadlineTime":"2018-08-12",
      "planStatus":0,
      "expiredStatus":0
    }
  }
}

請求結果：

詳細代碼見github地址，下載後執行install後先啓動nodemon app啓動express再新開npm run start啓動應用。
另外除開代理請求的內容，這個demo一樣也是個react的完備小demo.採用了antd-mobie作組件開發，基於router頁面層級的react-loadable執行按需加載，父子組件之間的數據傳遞和通訊，簡單地生命週期演示和組件state數據修改。

github地址：https://github.com/nextisleo/...
後面我會再爭取把redux加進去，用一個小項目來對react進行完備的理解和開發。