最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

利用node本地代理请求json文件返回接口数据

来源:动视网 责编:小采 时间:2020-11-27 19:33:34
文档

利用node本地代理请求json文件返回接口数据

利用node本地代理请求json文件返回接口数据:在平时开发过程中,很多时候前后端并行开发,暂时无法调取后台接口,此时我们很多时候可能会采取本地伪数据方式,或者采用mock数据,我以前大多采用这种方式,最近来新公司这边,发现这便是利用node本地代理方式来进行接口模拟调用,然后数据通过本地json
推荐度:
导读利用node本地代理请求json文件返回接口数据:在平时开发过程中,很多时候前后端并行开发,暂时无法调取后台接口,此时我们很多时候可能会采取本地伪数据方式,或者采用mock数据,我以前大多采用这种方式,最近来新公司这边,发现这便是利用node本地代理方式来进行接口模拟调用,然后数据通过本地json
 在平时开发过程中,很多时候前后端并行开发,暂时无法调取后台接口,此时我们很多时候可能会采取本地伪数据方式,或者采用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; 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进行完备的理解和开发。

文档

利用node本地代理请求json文件返回接口数据

利用node本地代理请求json文件返回接口数据:在平时开发过程中,很多时候前后端并行开发,暂时无法调取后台接口,此时我们很多时候可能会采取本地伪数据方式,或者采用mock数据,我以前大多采用这种方式,最近来新公司这边,发现这便是利用node本地代理方式来进行接口模拟调用,然后数据通过本地json
推荐度:
标签: 本地 请求 接口
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top