TypeScript全棧工程實戰-(Nuxt. js & Nest. js) - 5、《API服務設計》

1、前言

在實際業務開發中，會遇到這樣一種需求，使用VUE的頁面須要支持SEO，同時對首屏有指標性要求，目前市面上廣泛使用的是Nuxt.js解決方案，在引入的同時還須要考慮與現有的全棧工程結合，本系列文章探討的是此類全棧工程的解決方案，同時使用的是TypeScript應用於先後端編程，文章中介紹的工程與技術要點源碼已上傳至Github，有須要的朋友可自行下載：
Nuxt.js和Nest.js同構工程

複製代碼

文章意在拋磚引玉，先後端使用同一種語言TypeScript編寫，示例已包含基本接口請求，數據庫鏈接應用，公用模塊封裝等實際開發中使用到的內容。

效果預覽:

如下爲該系列文章入口列表:
TypeScript全棧工程實戰-(Nuxt. js & Nest. js) - 1、《簡介》

TypeScript全棧工程實戰-(Nuxt. js & Nest. js) - 2、《框架融合》

TypeScript全棧工程實戰-(Nuxt. js & Nest. js) - 3、《配置服務》

TypeScript全棧工程實戰-(Nuxt. js & Nest. js) - 4、《UI系統》

TypeScript全棧工程實戰-(Nuxt. js & Nest. js) - 5、《API服務設計》

TypeScript全棧工程實戰-(Nuxt. js & Nest. js) - 6、《SEO功能實現》

TypeScript全棧工程實戰-(Nuxt. js & Nest. js) - 7、《Vuex使用》

TypeScript全棧工程實戰-(Nuxt. js & Nest. js) - 8、《接入Mongo DB服務》

TypeScript全棧工程實戰-(Nuxt. js & Nest. js) - 9、《TypeScript》

TypeScript全棧工程實戰-(Nuxt. js & Nest. js) - 10、《工程化部署》

示例中的遠程服務調用系統採用直連和服務端中轉2種方式進行，在實際業務開發中，跨域狀況比較常見，在現今先後端各司其職狀況下，引入Nest.js服務，通常前端能自行解決。跨域方法類型這裏不做綴述。主要有:
1.NGINX設置
2.服務端開放
3.其它
這裏討論的是Nest.js中轉的方式進行，通常來說，若是API不須要跨域，則只須要前端直接發起請求便可。但若是API是跨域，在這裏示例中使用的是Nest.js中轉的方式進行，同時使用中轉也能統一請求出口入口，鑑權，請求參數監控和日誌監控等的統一處理。本示例中使用到的服務遠程調用主要圍繞axios組件使用展開。

2、前端API服務基類實現(axios封裝)

在nuxt.config.ts配置中導出全局引用

在插件實現類中定義攔截和響應邏輯。

3、服務端API服務基類實現(axios封裝)

服務端則經過中間件形式，引入axios，註冊攔截器，charles抓包代理，原理同客戶端實現大同小異。

4、服務端中轉服務實現(RESTful)

與客戶端axios實現區別是，由於做了服務端中轉，因此須要重寫實現全部RESTful系列方法。

5、調用舉例

• 非中轉服務調用舉例

  

  

• 中轉服務調用舉例

  

  

  

  創建中轉專用模塊:

  

  中轉模塊服務繼承自ServiceTransport實現：

  

  對外暴露controller服務,經過/api/trasport/getTransportData方式訪問：

  

  註冊模塊：

  

  從截圖能夠比較看出，中轉與非中轉服務調用，對客戶端來講區別不大，主要取決於Service類繼承的類是否爲TransportService，而TransportService則又繼承自BaseService只不過是重寫了底層實現。
  

6、子類服務實現，按域名分類複用思想

客戶端遠程服務調用，建議以調用域名區分，同一域名服務下接口請求都歸類到同一文件中，進行代碼複用，例如：

示例中，當cart和goods頁面都同時須要調用goods接口的時候，這裏將接口封裝在一個Service類中，對於每一個業務頁面來講，只須要進行類的導入，而後是接口調用，達到複用目的。