在平時開發過程中,很多時候前後端並行開發,暫時無法調取後台接口,此時我們很多時候可能會採取本地偽數據方式,或者採用mock數據,我以前大多採用這種方式,最近來新公司這邊,發現這便是利用node本地代理方式來進行接口模擬調用,然後數據通過本地json文件讀取返回,個人認為這種方式最能體現業務代碼執行過程中的眾多邏輯,所以稍加研究,記錄一下。當然,前提時後端跟前端有著良好的介面溝通方式,後端已經給出了介面名稱和返回結構字段,這樣後端介面寫完了之後直接進行調試不需要再進行修改。
本demo採用create-react-app腳手架初始化項目,用antd-mobile進行組件化展示,用node的express搭建本地環境,superagent進行前後端請求,鑑於node執行文件修改都需要重啟,這裡採用nodemon進行node啟動,當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<proxyconfig.length module.exports proxy_config.js json><p><img src="https://img.php.cn//upload/image/664/157/318/1531719633585316.png" title="1531719633585316.png" alt="利用node本地代理請求json檔案返回介面數據"></p><p>詳細程式碼請見github位址,下載後執行install後先啟動nodemon app啟動express再新開npm run start啟動應用程式。 <br>另外除開代理請求的內容,這個demo同樣也是個react的完備小demo.採用了antd-mobie做組件開發,基於router頁面層級的react-loadable執行按需加載,父子組件之間的數據傳遞和通信,簡單地生命週期演示和組件state資料修改。 </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如何做出瀏覽器title的一些功能</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">如何透過Vue.js使用Font Awesome實作小圖示</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>
以上是利用node本地代理請求json檔案返回介面數據的詳細內容。更多資訊請關注PHP中文網其他相關文章!