react在本地代理请求json文件返回接口数据开发

张春雷发布于2019-08-22 18:44 / 1683人阅读

摘要：文件夹是业务代码，这个不是重点，是执行文件入口文件执行读取本地文件返回数据的方法实现是做代理的一些配置文件是本地代理的代理逻辑然后上面文件夹是准备好的本地文件，调取接口时候就是调取了本地文件然后读取文件返回数据的一个过程。

在平时开发过程中，很多时候前后端并行开发，暂时无法调取后台接口，此时我们很多时候可能会采取本地伪数据方式，或者采用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

详细代码见github地址，下载后执行install后先启动nodemon app启动express再新开npm run start启动应用。
另外除开代理请求的内容，这个demo同样也是个react的完备小demo.采用了antd-mobie做组件开发，基于router页面层级的react-loadable执行按需加载，父子组件之间的数据传递和通信，简单地生命周期演示和组件state数据修改。
github地址：https://github.com/nextisleo/...
后面我会再争取把redux加进去，用一个小项目来对react进行完备的理解和开发。

混合云 idc机房托管 js请求页面返回json数据返回json变成文件请求参数返回数据成功 js+返回请求数据

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96144.html

尚学堂 react -后台管理系统开发流程

摘要：项目开发准备描述项目技术选型接口接口文档测试接口启动项目开发使用脚手架创建项目开发环境运行生产环境打包运行管理项目创建远程仓库创建本地仓库配置将本地仓库推送到远程仓库在本地创建分支并推送到远程如果本地有修改新的同事克隆仓库如果远程修 day01 1. 项目开发准备 1). 描述项目 2). 技术选型 3). API接口/接口文档/测试接口 2. 启动项目开发 1). 使用react...

lemon 2019-08-26 10:42 评论0 收藏0
搭建并使用前端代理服务器

摘要：本文主要是从前端的角度，使用搭建一个简易的测试项目，在自己搭建的代理服务的下实现简单的微信分享。在微信测试工具中调试接口，点击发送即可会出现比较漂亮的分享链接。一、背景简介：目前流行的前后端分离项目，一般都处于不同的域名下，前后端开发过程中，是分别部署在不同服务器上，在做接口联调时，会出现跨域的情况，部署上线时，基本不存在这种需要，因此搭建一个前端代理服务，方便开发。作为一个...

lyning 2019-08-01 18:25 评论0 收藏0
搭建并使用前端代理服务器

摘要：本文主要是从前端的角度，使用搭建一个简易的测试项目，在自己搭建的代理服务的下实现简单的微信分享。在微信测试工具中调试接口，点击发送即可会出现比较漂亮的分享链接。一、背景简介：目前流行的前后端分离项目，一般都处于不同的域名下，前后端开发过程中，是分别部署在不同服务器上，在做接口联调时，会出现跨域的情况，部署上线时，基本不存在这种需要，因此搭建一个前端代理服务，方便开发。作为一个...

jasperyang 2019-08-22 13:56 评论0 收藏0
vue-cli项目中的proxyTable跨域问题小结

摘要：由两部分组成回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数。回调函数的名字一般是在请求中指定的。动态创建标签，设置其，回调函数在中设置在页面中，返回的作为参数传入回调函数中，我们通过回调函数来来操作数据。什么是跨域？同源策略规定了如果两个 url 的协议、域名、端口中有任何一个不等，就认定它们跨源了。跨域的解决方式有哪几种？ 1.JSONP 是 JSON with ...

lidashuang 2019-08-26 11:40 评论0 收藏0
vue-cli项目中的proxyTable跨域问题小结

摘要：由两部分组成回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数。回调函数的名字一般是在请求中指定的。动态创建标签，设置其，回调函数在中设置在页面中，返回的作为参数传入回调函数中，我们通过回调函数来来操作数据。什么是跨域？同源策略规定了如果两个 url 的协议、域名、端口中有任何一个不等，就认定它们跨源了。跨域的解决方式有哪几种？ 1.JSONP 是 JSON with ...

张金宝 2019-07-25 14:10 评论0 收藏0