成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

react在本地代理請求json文件返回接口數(shù)據(jù)開發(fā)

張春雷 / 1811人閱讀

摘要：文件夾是業(yè)務(wù)代碼，這個不是重點，是執(zhí)行文件入口文件執(zhí)行讀取本地文件返回數(shù)據(jù)的方法實現(xiàn)是做代理的一些配置文件是本地代理的代理邏輯然后上面文件夾是準(zhǔn)備好的本地文件，調(diào)取接口時候就是調(diào)取了本地文件然后讀取文件返回數(shù)據(jù)的一個過程。

在平時開發(fā)過程中，很多時候前后端并行開發(fā)，暫時無法調(diào)取后臺接口，此時我們很多時候可能會采取本地偽數(shù)據(jù)方式，或者采用mock數(shù)據(jù)，我以前大多采用這種方式，最近來新公司這邊，發(fā)現(xiàn)這便是利用node本地代理方式來進(jìn)行接口模擬調(diào)用，然后數(shù)據(jù)通過本地json文件讀取返回，個人認(rèn)為這種方式最能體現(xiàn)業(yè)務(wù)代碼執(zhí)行過程中的眾多邏輯，所以稍加研究，記錄一下。當(dāng)然，前提時后端跟前端有著良好的接口溝通方式，后端已經(jīng)給出了接口名稱和返回結(jié)構(gòu)字段，這樣后端接口寫完了之后直接進(jìn)行調(diào)試不需要再進(jìn)行修改。

本demo采用create-react-app腳手架初始化項目，用antd-mobile進(jìn)行組件化展示，用node的express搭建本地環(huán)境，superagent進(jìn)行前后端請求，鑒于node執(zhí)行文件修改都需要重啟，這里采用nodemon進(jìn)行node啟動，當(dāng)node執(zhí)行文件有修改，會自動重啟應(yīng)用后臺服務(wù)。

src文件夾是業(yè)務(wù)代碼，這個不是重點，app.js是node執(zhí)行文件入口；router.js文件執(zhí)行node讀取本地josn文件返回數(shù)據(jù)的方法實現(xiàn)；config.js是做代理的一些配置文件；proxy-confit.js是本地代理的代理邏輯；然后上面文件夾proxy_data是準(zhǔn)備好的本地json文件，調(diào)取接口時候就是node調(diào)取了本地json文件然后讀取文件返回數(shù)據(jù)的一個過程。

首先需要注意的是，package.json加上proxy配置

目前網(wǎng)上查到好像說該配置僅僅對create-react-app初始化的項目起作用，作用就是將請求的路徑修改到proxy路徑，這里的host和port需要跟下面配置的host port對應(yīng)。

詳細(xì)解釋一下：
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)// 注意執(zhí)行
app.use(bodyParser.json())// 注意加上，否則返回的是數(shù)據(jù)流，不是json
app.listen(config.port, function () {// 啟動應(yīng)用
    console.log("server is run on " + config.port);
})

config.js代理配置，這里目前只有host和port根據(jù)項目需求自己加上即可。
var config = {
    host: "localhost",
    port: 5002,
}
//這里面最重要的在于host/port其他可以根據(jù)項目需要加進(jìn)去，
module.exports = config;

router.js //詳細(xì)的代理和讀取文件邏輯
var express = require("express");
var fs = require("fs");
var proxyConfig = require("./proxy_config.js");// 引入代理邏輯
var router = express.Router();//注意執(zhí)行
/*
 * RESTful 路由
 */
//router.get("/token", proxy.token);

// 下面文件執(zhí)行邏輯在于當(dāng)本地請求有符合proxy_config里面配置的正則，就會被代理到本地并且讀取本地對        應(yīng)json文件返回相應(yīng)json數(shù)據(jù)
for(var i=0; i


詳細(xì)代碼見github地址，下載后執(zhí)行install后先啟動nodemon app啟動express再新開npm run start啟動應(yīng)用。
另外除開代理請求的內(nèi)容，這個demo同樣也是個react的完備小demo.采用了antd-mobie做組件開發(fā)，基于router頁面層級的react-loadable執(zhí)行按需加載，父子組件之間的數(shù)據(jù)傳遞和通信，簡單地生命周期演示和組件state數(shù)據(jù)修改。


github地址：https://github.com/nextisleo/...
后面我會再爭取把redux加進(jìn)去，用一個小項目來對react進(jìn)行完備的理解和開發(fā)。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/96144.html

相關(guān)文章

  • 尚學(xué)堂 react -后臺管理系統(tǒng)開發(fā)流程

    摘要：項目開發(fā)準(zhǔn)備描述項目技術(shù)選型接口接口文檔測試接口啟動項目開發(fā)使用腳手架創(chuàng)建項目開發(fā)環(huán)境運行生產(chǎn)環(huán)境打包運行管理項目創(chuàng)建遠(yuǎn)程倉庫創(chuàng)建本地倉庫配置將本地倉庫推送到遠(yuǎn)程倉庫在本地創(chuàng)建分支并推送到遠(yuǎn)程如果本地有修改新的同事克隆倉庫如果遠(yuǎn)程修 day01 1. 項目開發(fā)準(zhǔn)備 1). 描述項目 2). 技術(shù)選型 3). API接口/接口文檔/測試接口 2. 啟動項目開發(fā) 1). 使用react...

    lemon 評論0 收藏0

  • 搭建并使用前端代理服務(wù)器

    摘要：本文主要是從前端的角度，使用搭建一個簡易的測試項目，在自己搭建的代理服務(wù)的下實現(xiàn)簡單的微信分享。在微信測試工具中調(diào)試接口，點擊發(fā)送即可會出現(xiàn)比較漂亮的分享鏈接。 一、背景簡介： 目前流行的前后端分離項目，一般都處于不同的域名下，前后端開發(fā)過程中，是分別部署在不同服 務(wù)器上，在做接口聯(lián)調(diào)時，會出現(xiàn)跨域的情況，部署上線時，基本不存在這種需要，因此搭建一個 前端代理服務(wù)，方便開發(fā)。 作為一個...

    lyning 評論0 收藏0

  • 搭建并使用前端代理服務(wù)器

    摘要：本文主要是從前端的角度，使用搭建一個簡易的測試項目，在自己搭建的代理服務(wù)的下實現(xiàn)簡單的微信分享。在微信測試工具中調(diào)試接口，點擊發(fā)送即可會出現(xiàn)比較漂亮的分享鏈接。 一、背景簡介： 目前流行的前后端分離項目，一般都處于不同的域名下，前后端開發(fā)過程中，是分別部署在不同服 務(wù)器上，在做接口聯(lián)調(diào)時，會出現(xiàn)跨域的情況，部署上線時，基本不存在這種需要，因此搭建一個 前端代理服務(wù)，方便開發(fā)。 作為一個...

    jasperyang 評論0 收藏0

  • vue-cli項目中的proxyTable跨域問題小結(jié)

    摘要：由兩部分組成回調(diào)函數(shù)和數(shù)據(jù)?；卣{(diào)函數(shù)是當(dāng)響應(yīng)到來時應(yīng)該在頁面中調(diào)用的函數(shù)?；卣{(diào)函數(shù)的名字一般是在請求中指定的。動態(tài)創(chuàng)建標(biāo)簽，設(shè)置其，回調(diào)函數(shù)在中設(shè)置在頁面中，返回的作為參數(shù)傳入回調(diào)函數(shù)中，我們通過回調(diào)函數(shù)來來操作數(shù)據(jù)。 什么是跨域？ 同源策略規(guī)定了如果兩個 url 的協(xié)議、域名、端口中有任何一個不等，就認(rèn)定它們跨源了。 跨域的解決方式有哪幾種？ 1.JSONP 是 JSON with ...

    lidashuang 評論0 收藏0

  • vue-cli項目中的proxyTable跨域問題小結(jié)

    摘要：由兩部分組成回調(diào)函數(shù)和數(shù)據(jù)。回調(diào)函數(shù)是當(dāng)響應(yīng)到來時應(yīng)該在頁面中調(diào)用的函數(shù)?；卣{(diào)函數(shù)的名字一般是在請求中指定的。動態(tài)創(chuàng)建標(biāo)簽，設(shè)置其，回調(diào)函數(shù)在中設(shè)置在頁面中，返回的作為參數(shù)傳入回調(diào)函數(shù)中，我們通過回調(diào)函數(shù)來來操作數(shù)據(jù)。 什么是跨域？ 同源策略規(guī)定了如果兩個 url 的協(xié)議、域名、端口中有任何一個不等，就認(rèn)定它們跨源了。 跨域的解決方式有哪幾種？ 1.JSONP 是 JSON with ...

    張金寶 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<