react在本地代理請(qǐng)求json文件返回接口數(shù)據(jù)開(kāi)發(fā)

張春雷發(fā)布于2019-08-22 18:44 / 1815人閱讀

摘要：文件夾是業(yè)務(wù)代碼，這個(gè)不是重點(diǎn)，是執(zhí)行文件入口文件執(zhí)行讀取本地文件返回?cái)?shù)據(jù)的方法實(shí)現(xiàn)是做代理的一些配置文件是本地代理的代理邏輯然后上面文件夾是準(zhǔn)備好的本地文件，調(diào)取接口時(shí)候就是調(diào)取了本地文件然后讀取文件返回?cái)?shù)據(jù)的一個(gè)過(guò)程。

在平時(shí)開(kāi)發(fā)過(guò)程中，很多時(shí)候前后端并行開(kāi)發(fā)，暫時(shí)無(wú)法調(diào)取后臺(tái)接口，此時(shí)我們很多時(shí)候可能會(huì)采取本地偽數(shù)據(jù)方式，或者采用mock數(shù)據(jù)，我以前大多采用這種方式，最近來(lái)新公司這邊，發(fā)現(xiàn)這便是利用node本地代理方式來(lái)進(jìn)行接口模擬調(diào)用，然后數(shù)據(jù)通過(guò)本地json文件讀取返回，個(gè)人認(rèn)為這種方式最能體現(xiàn)業(yè)務(wù)代碼執(zhí)行過(guò)程中的眾多邏輯，所以稍加研究，記錄一下。當(dāng)然，前提時(shí)后端跟前端有著良好的接口溝通方式，后端已經(jīng)給出了接口名稱和返回結(jié)構(gòu)字段，這樣后端接口寫完了之后直接進(jìn)行調(diào)試不需要再進(jìn)行修改。

本demo采用create-react-app腳手架初始化項(xiàng)目，用antd-mobile進(jìn)行組件化展示，用node的express搭建本地環(huán)境，superagent進(jìn)行前后端請(qǐng)求，鑒于node執(zhí)行文件修改都需要重啟，這里采用nodemon進(jìn)行node啟動(dòng)，當(dāng)node執(zhí)行文件有修改，會(huì)自動(dòng)重啟應(yīng)用后臺(tái)服務(wù)。

src文件夾是業(yè)務(wù)代碼，這個(gè)不是重點(diǎn)，app.js是node執(zhí)行文件入口；router.js文件執(zhí)行node讀取本地josn文件返回?cái)?shù)據(jù)的方法實(shí)現(xiàn)；config.js是做代理的一些配置文件；proxy-confit.js是本地代理的代理邏輯；然后上面文件夾proxy_data是準(zhǔn)備好的本地json文件，調(diào)取接口時(shí)候就是node調(diào)取了本地json文件然后讀取文件返回?cái)?shù)據(jù)的一個(gè)過(guò)程。

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

目前網(wǎng)上查到好像說(shuō)該配置僅僅對(duì)create-react-app初始化的項(xiàng)目起作用，作用就是將請(qǐng)求的路徑修改到proxy路徑，這里的host和port需要跟下面配置的host port對(duì)應(yīng)。

詳細(xì)解釋一下：
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)// 注意執(zhí)行
app.use(bodyParser.json())// 注意加上，否則返回的是數(shù)據(jù)流，不是json
app.listen(config.port, function () {// 啟動(dòng)應(yīng)用
    console.log("server is run on " + config.port);
})

config.js代理配置，這里目前只有host和port根據(jù)項(xiàng)目需求自己加上即可。
var config = {
    host: "localhost",
    port: 5002,
}
//這里面最重要的在于host/port其他可以根據(jù)項(xiàng)目需要加進(jìn)去，
module.exports = config;

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

// 下面文件執(zhí)行邏輯在于當(dāng)本地請(qǐng)求有符合proxy_config里面配置的正則，就會(huì)被代理到本地并且讀取本地對(duì)        應(yīng)json文件返回相應(yīng)json數(shù)據(jù)
for(var i=0; i

詳細(xì)代碼見(jiàn)github地址，下載后執(zhí)行install后先啟動(dòng)nodemon app啟動(dòng)express再新開(kāi)npm run start啟動(dòng)應(yīng)用。
另外除開(kāi)代理請(qǐng)求的內(nèi)容，這個(gè)demo同樣也是個(gè)react的完備小demo.采用了antd-mobie做組件開(kāi)發(fā)，基于router頁(yè)面層級(jí)的react-loadable執(zhí)行按需加載，父子組件之間的數(shù)據(jù)傳遞和通信，簡(jiǎn)單地生命周期演示和組件state數(shù)據(jù)修改。
github地址：https://github.com/nextisleo/...
后面我會(huì)再爭(zhēng)取把redux加進(jìn)去，用一個(gè)小項(xiàng)目來(lái)對(duì)react進(jìn)行完備的理解和開(kāi)發(fā)。