在平时开发过程中，很多时候前后端并行开发，暂时无法调取后台接口，此时我们很多时候可能会采取本地伪数据方式，或者采用mock数据，我以前大多采用这种方式，最近来新公司这边，发现这便是利用node本地代理方式来进行接口模拟调用，然后数据通过本地json文件读取返回，个人认为这种方式最能体现业务代码执行过程中的众多逻辑，所以稍加研究，记录一下。当然，前提时后端跟前端有着良好的接口沟通方式，后端已经给出了接口名称和返回结构字段，这样后端接口写完了之后直接进行调试不需要再进行修改。
本demo采用create-react-app脚手架初始化项目，用antd-mobile进行组件化展示，用node的express搭建本地环境，superagent进行前后端请求，鉴于node执行文件修改都需要重启，这里采用nodemon进行node启动，当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 module.exports proxy_config.js json><p><img src="https://img.php.cn//upload/image/664/157/318/1531719633585316.png" title="1531719633585316.png" alt="利用node本地代理请求json文件返回接口数据"></p><p>详细代码见github地址，下载后执行install后先启动nodemon app启动express再新开npm run start启动应用。<br>另外除开代理请求的内容，这个demo同样也是个react的完备小demo.采用了antd-mobie做组件开发，基于router页面层级的react-loadable执行按需加载，父子组件之间的数据传递和通信，简单地生命周期演示和组件state数据修改。</p><p>github地址：https://github.com/nextisleo/...<br>后面我会再争取把redux加进去，用一个小项目来对react进行完备的理解和开发。</p><p>相关推荐：</p><p><a title="iNotify.js2如何做出浏览器title的一些功能" href="//m.sbmmt.com/js-tutorial-406592.html" target="_blank">iNotify.js2如何做出浏览器title的一些功能</a></p><p class="mt20 ad-detail-mm hidden-xs"><a title="如何通过Vue.js使用Font Awesome实现小图标" href="//m.sbmmt.com/js-tutorial-406567.html" target="_blank">如何通过Vue.js使用Font Awesome实现小图标</a><br></p><p class="mt20 ad-detail-mm hidden-xs"><a title="响应式React Native Echarts组件的介绍" href="//m.sbmmt.com/js-tutorial-406517.html" target="_blank">响应式React Native Echarts组件的介绍</a><br></p></proxyconfig.length>以上是利用node本地代理请求json文件返回接口数据的详细内容。更多信息请关注PHP中文网其他相关文章！
