노드 로컬 프록시를 사용하여 json 파일을 요청하고 인터페이스 데이터를 반환합니다.

일반적인 개발 과정에서는 프런트엔드와 백엔드가 병렬로 개발되는 경우가 많으며, 이때 백엔드 인터페이스를 일시적으로 호출할 수 없거나 로컬 의사 데이터를 사용하는 경우가 많습니다. 예전에는 이 방법을 주로 사용했는데, 최근 회사 측에서 새로운 방법을 알게 되었는데, 이는 노드 로컬 프록시 방법을 사용하여 인터페이스 시뮬레이션을 호출한 다음 로컬을 통해 데이터를 읽고 반환하는 것입니다. 저는 개인적으로 이 방법이 비즈니스 코드 실행 과정의 많은 로직을 가장 잘 반영할 수 있다고 생각하여 약간의 조사를 하고 기록했습니다. 물론 백엔드와 프론트엔드의 인터페이스 통신 방법이 좋다는 전제가 있다. 백엔드는 이미 인터페이스 이름과 반환 구조 필드를 제공하므로 백엔드 인터페이스를 작성한 후 수정 없이 직접 디버깅할 수 있다.
이 데모에서는 create-react-app 스캐폴딩을 사용하여 프로젝트를 초기화하고, 구성 요소화된 표시를 위해 antd-mobile을 사용하고, 노드의 Express를 사용하여 로컬 환경을 구축하고, 노드 실행 이후 프런트엔드 및 백엔드 요청을 수행하는 슈퍼에이전트를 사용합니다. 파일을 수정하려면 다시 시작해야 하며, 여기에서는 node.Start를 위해 nodemon을 사용합니다. 노드 실행 파일이 수정되면 애플리케이션 백그라운드 서비스가 자동으로 다시 시작됩니다.
논리적 구조는 매우 간단하며, 노드 지식이 거의 사용되지 않습니다. 기본적으로 구성을 읽고 사용하면 에이전트를 직접 개발할 수 있습니다. 구성 요소는 주로 표시용이므로 많은 비용을 지불할 필요가 없습니다. 일부 비즈니스 세부 사항에 주의하십시오. 주요 목적은 모든 사람에게 로컬 프록시 요청 방법을 보여주는 것입니다.
우선 프로젝트 구조는 다음과 같습니다.

src 폴더는 비즈니스 코드이며, 이는 요점이 아닙니다. app.js는 노드 실행 파일 항목입니다. router.js 파일은 로컬을 읽는 노드를 실행합니다. josn 파일 및 반환 데이터; config.js 프록시를 위한 일부 구성 파일입니다. 로컬 json 파일을 호출한 다음 파일을 읽고 데이터 프로세스를 반환합니다.
가장 먼저 주목해야 할 점은 package.json과 프록시 구성입니다

현재 이 구성은 create-react-app으로 초기화된 프로젝트에서만 작동하는 것으로 보이며, 그 기능은 요청된 경로를 수정하는 것입니다. 프록시 경로를 사용하려면 여기의 호스트와 포트가 아래에 구성된 호스트 포트와 일치해야 합니다.

详细解释一下：
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="/static/imghwm/default1.png" data-src="https://img.php.cn//upload/image/664/157/318/1531719633585316.png?x-oss-process=image/resize,p_40" class="lazy" title="1531719633585316.png" alt="노드 로컬 프록시를 사용하여 json 파일을 요청하고 인터페이스 데이터를 반환합니다."></p><p>자세한 코드는 github 주소를 확인하세요. 다운로드 후 install을 실행한 다음 nodemon 앱을 시작하여 express를 시작한 다음 npm run start를 열어 애플리케이션을 시작하세요. <br>프록시 요청 내용 외에도 이 데모는 구성 요소 개발을 위해 antd-mobie를 사용하고 라우터 페이지 수준을 기반으로 하는 반응 로드 가능 온디맨드 로딩, 데이터 전송 및 작업을 수행하는 완전한 소규모 반응 데모이기도 합니다. 상위 및 하위 구성 요소 간의 통신, 간단한 수명 주기 데모 및 구성 요소 상태 데이터 수정. </p><p>Github 주소: https://github.com/nextisleo/...<br>나중에 redux도 추가해보고 소규모 프로젝트를 활용해서 React를 완전히 이해하고 개발해보도록 하겠습니다. </p><p>관련 권장 사항: </p><p><a title="iNotify.js2如何做出浏览器title的一些功能" href="http://www.php.cn/js-tutorial-406592.html" target="_blank">iNotify.js2가 브라우저 제목의 일부 기능을 만드는 방법</a></p><p class="mt20 ad-detail-mm hidden-xs"><a title="如何通过Vue.js使用Font Awesome实现小图标" href="http://www.php.cn/js-tutorial-406567.html" target="_blank">Font Awesome을 사용하여 Vue.js를 통해 작은 아이콘을 구현하는 방법</a><br></p><p class="mt20 ad-detail-mm hidden-xs"><a title="响应式React Native Echarts组件的介绍" href="http://www.php.cn/js-tutorial-406517.html" target="_blank">반응형 React Native Echarts 구성 요소 소개</a><br> </p></proxyconfig.length>

위 내용은 노드 로컬 프록시를 사용하여 json 파일을 요청하고 인터페이스 데이터를 반환합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!