Utilisez le proxy local du nœud pour demander le fichier json et renvoyer les données d'interface

Au cours du processus de développement normal, le front-end et le back-end sont souvent développés en parallèle, et l'interface back-end ne peut pas être appelée temporairement. À l'heure actuelle, nous pouvons souvent utiliser des pseudo-données locales ou des données fictives. . J'ai principalement utilisé cette méthode dans le passé, mais récemment, lorsque je suis arrivé dans la nouvelle entreprise, j'ai découvert qu'elle utilisait la méthode proxy local du nœud pour effectuer des appels de simulation d'interface, puis que les données étaient lues et renvoyées via le fichier json local. .Je pense personnellement que cette méthode peut mieux refléter les nombreuses logiques du processus d'exécution du code métier, je vais donc brièvement faire quelques recherches et les enregistrer. Bien sûr, le principe est que le backend et le frontend ont une bonne méthode de communication d'interface.Le backend a déjà donné le nom de l'interface et les champs de structure de retour, de sorte qu'une fois l'interface backend écrite, elle puisse être déboguée directement sans modification.
Cette démo utilise l'échafaudage create-react-app pour initialiser le projet, utilise antd-mobile pour l'affichage des composants, utilise node's express pour créer l'environnement local et superagent pour effectuer les requêtes front-end et back-end depuis le nœud. les modifications du fichier d'exécution nécessitent un redémarrage, nodemon est utilisé ici. Démarrez le nœud Lorsque le fichier d'exécution du nœud est modifié, le service d'arrière-plan de l'application sera automatiquement redémarré.
La structure logique est très simple et très peu de connaissances sur les nœuds sont utilisées. Fondamentalement, après avoir lu la configuration et l'avoir utilisée, vous pouvez directement développer l'agent. Les composants sont principalement destinés à l'affichage, vous n'avez donc pas besoin de payer. trop d'attention à certains détails commerciaux. L'objectif principal ici est de vous montrer comment faire des demandes de proxy locales.
Tout d'abord, la structure du projet :

Le dossier src est le code métier. Ce n'est pas le but. app.js est l'entrée du fichier d'exécution du nœud ; le fichier router.js exécute la lecture du nœud. La méthode de retour des données du fichier josn local est implémentée ; config.js est certains fichiers de configuration pour le proxy ; proxy-confit.js est la logique de proxy du proxy local ; le dossier proxy_data est le fichier json local préparé, qui est utilisé lors de l'appel de l'interface. Un processus dans lequel le nœud appelle un fichier json local, puis lit le fichier et renvoie les données.
La première chose à noter est que package.json plus configuration proxy

À l'heure actuelle, il semble que cette configuration ne soit initialisée que pour create-react- app lorsqu'il est trouvé en ligne. Le projet fonctionne et sa fonction est de modifier le chemin demandé vers le chemin proxy. L'hôte et le port ici doivent correspondre au port hôte configuré ci-dessous.

详细解释一下：
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/imghw/default1.png" data-src="https://img.php.cn//upload/image/664/157/318/1531719633585316.png" class="lazy" title="1531719633585316.png" alt="Utilisez le proxy local du nœud pour demander le fichier json et renvoyer les données dinterface"></p><p>Voir l'adresse github pour le code détaillé, exécutez install puis démarrez l'application nodemon pour démarrer express, puis ouvrez npm run start pour démarrer le. application. <br>En plus du contenu demandé par le proxy, cette démo est également une petite démo complète de React. Elle utilise antd-mobie pour le développement de composants, et le chargement de réaction en fonction du niveau de la page du routeur effectue le chargement et les données à la demande. transfert entre les composants parents et enfants et communication, présentation simple du cycle de vie et modification des données d'état des composants. </p><p>Adresse Github : https://github.com/nextisleo/...<br>J'essaierai d'ajouter redux plus tard et d'utiliser un petit projet pour bien comprendre et développer React. </p><p>Recommandations associées : </p><p><a title="iNotify.js2如何做出浏览器title的一些功能" href="http://www.php.cn/js-tutorial-406592.html" target="_blank">Comment iNotify.js2 peut créer certaines fonctions de titre de navigateur</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">Comment utiliser Font Awesome via l'implémentation de Vue.js petites icônes</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">Introduction au composant réactif React Native Echarts</a><br></p></proxyconfig.length>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!