时间:2021-07-01 10:21:17 帮助过:0人阅读
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进行完备的理解和开发。
相关推荐:
iNotify.js2如何做出浏览器title的一些功能
以上就是利用node本地代理请求json文件返回接口数据的详细内容,更多请关注Gxl网其它相关文章!