react在本地代理請求json文件返回接口數據開發

張春雷發布于2019-08-22 18:44 / 1806人閱讀

摘要：文件夾是業務代碼，這個不是重點，是執行文件入口文件執行讀取本地文件返回數據的方法實現是做代理的一些配置文件是本地代理的代理邏輯然后上面文件夾是準備好的本地文件，調取接口時候就是調取了本地文件然后讀取文件返回數據的一個過程。

在平時開發過程中，很多時候前后端并行開發，暫時無法調取后臺接口，此時我們很多時候可能會采取本地偽數據方式，或者采用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進行完備的理解和開發。

GPU云服務器云服務器 js請求頁面返回json數據返回json變成文件請求參數返回數據成功 js+返回請求數據

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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