vue+node實現中間層同步調用接口

?為了應對業務的復雜性,提高前端的渲染能力,故在項目中引入nodejs做中間層,前端承接vue,后端對接Java。

至于為什么這么搞,網上有好多文章都在討論,可以說仁者見仁智者見智,這里我們不在深究。

這里主要記錄一下,我在項目中嘗試使用這種結構遇到的問題:

1.前端的vue工程采用axios請求中間層node服務會遇到跨域問題

解決方法:打開vue工程的index.js配置文件添加如下配置

assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {'/api': {target: 'http://localhost:3000',changeOrigin: true,pathRewrite: {'^/api': ''}}
},

2.中間層使用axios請求后端接口時需要等待接口返回后,在傳遞數據給前端,這里就需要使用同步請求機制

解決方法采用 async, await 方式,如下

var express = require('express')
var router = express.Router()
var http = require('../config/http')router.get('/getFarmTargets', async (req, res, next) => {console.log('進入請求')var result = {}result.targets = await http.get('/cim/cimInfos/survey?orgId=1115').then(response => response.data.code === 0 ? response.data.data : null)result.introductions = await http.get('/cim/introductions', { orgId: 1115 }).then(response => response.data.code === 0 ? response.data.data : null)console.log('回調外層2:' + JSON.stringify(result))res.json({code: '0',msg: '',data: result})next()
})

先記錄到這兒,未完待續......

?

?

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/249151.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/249151.shtml
英文地址,請注明出處:http://en.pswp.cn/news/249151.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

ES6學習筆記(二十二)ArrayBuffer

ArrayBuffer ArrayBuffer對象、TypedArray視圖和DataView視圖是 JavaScript 操作二進制數據的一個接口。它們都是以數組的語法處理二進制數據,所以統稱為二進制數組。 二進制數組由三類對象組成。 (1)ArrayBuffer對象: 代表內存之…

如何正確地使用Java的@deprecated標注

沒有什么事情比看到一個沒有任何說明的deprecated標注更讓人憤怒的事情了。這種做法只能讓人困惑,我到底還要不要用這個已經‘廢棄’的方法?如果開發者不希望某個方法再被人用的話,就要好好地為deprecated標注寫說明。這篇文章就討論了正確地…

實現div里的img圖片水平垂直居中

body結構 <body><div><img src"1.jpg" alt"haha"></div> </body>方法一&#xff1a; 將display設置成table-cell&#xff0c;然后水平居中設置text-align為center&#xff0c;垂直居中設置vertical-align為middle。 <…

[ 懶人神器 ] —— OO一鍵build:.zip - .jar

懶人神器 更新 大家注意一下&#xff0c;由于在寫入MANIFEST的時候&#xff0c;Class-Path路徑給的是 ../lib &#xff0c;即上級目錄的lib。 所以在對拍時如果手動移動了 jar包的位置&#xff0c;需要保證 lib/ 文件夾在存放jar包的上一級目錄下&#xff0c;否則在運行時會報錯…

實現Datagrid分頁

Html頁面&#xff1a; <!DOCTYPE html> <html> <head><meta http-equiv"Content-Type" content"text/html; charsetutf-8" /><title></title><meta charset"utf-8" /><!-- 引入相關CSS --><…

Luogu 3698 [CQOI2017]小Q的棋盤

BZOJ 4813 雖然數據范圍很迷人&#xff0c;但是想樹形$dp$沒有前途。 先發現一個事情&#xff0c;就是我們可以先選擇一條鏈&#xff0c;最后要走到這一條鏈上不回來&#xff0c;走到鏈上的點每一個只需要一步&#xff0c;而如果要走這條鏈之外的點&#xff0c;一個點需要走兩步…

h5-plus.webview

這里是鏈接轉載于:https://www.cnblogs.com/yuners/p/10721163.html

解決vue打包后靜態資源路徑錯誤的問題

vue項目完成的最后一步就是打包部署上線&#xff0c;但是打包部署的過程往往不是那么一帆風順的&#xff0c;現將遇到問題和解決方案記錄如下。 圖片路徑問題 起因&#xff1a; 頁面中引入資源的方式往往有如下幾種 * HTML標簽中直接引入圖片&#xff0c; 如 <img src&qu…

SQL語句01

SQL(Structured Query Language)&#xff1a;結構化查詢語言SQL分類&#xff1a; 數據操縱語言DML&#xff08;Data Manipulation Language&#xff09; SELECT INSERT UPDATE DELETE 數據定義語言DDL&#xff08;Data definition language&#xff09; …

mongoose 筆記

快速啟動 首先需要安裝MongoDB和Node.js。 然后使用npm下載mongoose&#xff1a; npm install mongoose 接著我們直接在項目中引入mongoose&#xff0c;并且連接數據庫就會在本地運行 MongoDB了&#xff1a; // index.js var mongoose require(mongoose); mongoose.connect(…

前端DES加密

1、下載crypto.js文件庫 https://github.com/brix/crypto-js/releases 2、引入文件 <script type"text/javascript" src"js/jquery.min.js"></script> <script src"js/rollups/tripledes.js"></script> <script src&…

DOMBOM(source、methods、contents、Application)

何為DOM&#xff1f; Document Object Model Dom&#xff0c;是W3C組織推薦的處理可擴展標志語言的標準編程接口。在網頁上&#xff0c;組織頁面的對象被組織在一個樹形結構中&#xff0c;用來表示文檔中對象的標準模型就稱為DOM。 可以認為DOM是頁面上數據和結構的一個樹形表示…

sublime 無法下載插件解決辦法(親測有效)

最近發現sublime裝不到插件 只需要在Preferences > Package Settings > Package Control > Settings - User頁面加上以下代碼即可&#xff1a; "channels":["https://erhan.in/channel_v3.json"]上述頻道親測有效&#xff0c;如果還不能使用的小…

ES命令

基礎概念 Elasticsearch有幾個核心概念。從一開始理解這些概念會對整個學習過程有莫大的幫助。 接近實時&#xff08;NRT&#xff09; Elasticsearch是一個接近實時的搜索平臺。這意味著&#xff0c;從索引一個文檔直到這個文檔能夠被搜索到有一個輕微的延遲&#xff…

Bug : Bash on Ubuntu on Windows scp work on window but not in shell file

&#xff1a; No Permission轉載于:https://www.cnblogs.com/rgqancy/p/10726154.html

圖片做背景撐開div

需求點&#xff1a; 設計師給了一張超大背景圖&#xff0c;需要做一個不知道大小廣告位&#xff0c;要求就是要把圖片撐滿整個頁面&#xff0c;而且還得保證自適應。 解決方案一 &#xff08;親測有效&#xff09; HTML代碼&#xff1a; <div class"wrap">…

十一、jQuery的基本用法

初步接觸不是很習慣&#xff0c;之前都是用的js&#xff0c;但是jQuery去掉了js很多繁瑣的內容&#xff0c;用的不是很熟&#xff0c;所以先簡單的記錄一下&#xff0c;后續在繼續補充 jq獲取html內容: $("#id") 獲取id $(".class") class名 …

spring-注解---IOC(3)

spring--注解---IOC(3) package com.zwj.bean;public class Blue {public Blue(){System.out.println("blue...constructor");}public void init(){System.out.println("blue...init...");}public void detory(){System.out.println("blue...detory..…

絕對定位的div圖片居中自適應

需求點 固定定位div中添加圖片內容&#xff0c;保證圖片垂直居中&#xff0c;并且自適應。 一般在第三方UI組件中&#xff0c;這種布局需求較為常見 解決方案一 &#xff08;親測有效&#xff09; HTML代碼&#xff1a; <div class"el-carousel__item is-active is…

英語進階系列-A06-本周總結

本周總結 目錄Content 英語進階系列-A01-再別康橋 英語進階系列-A02-英語學習的奧秘 英語進階系列-A03-英語升級練習一 英語進階系列-A04-英語升級練習二 英語進階系列-A05-英語升級練習三 古詩Poem 再別康橋 回鄉偶書 梅花 勸學 游子吟 詞匯Vocabulary be; have; give; get; t…