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

時間 2019-11-06

標籤 typescript 工程實戰 nuxt nest 接入Mongo DB服務欄目 JavaScript 简体版

原文原文鏈接

1、前言

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

複製代碼

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

效果預覽:

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

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

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

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

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、MongoDB簡介

MongoDB

MongoDB 是一個基於分佈式文件存儲的數據庫。由 C++ 語言編寫，旨在爲 WEB 應用提供可擴展的高性能數據存儲解決方案。是一個介於關係數據庫和非關係數據庫之間的產品，是非關係數據庫當中功能最豐富，最像關係數據庫的產品。

MongoDB與Nest.js
開始以前先介紹MongoDB 的適用場景:
1.網站實時數據：實時的插入，更新與查詢，並具有網站實時數據存儲所需的複製及高度伸縮性。

2.數據緩存:適合做爲信息基礎設施的緩存層。在系統重啓以後，由MongoDB搭建的持久化緩存層能夠避免下層的數據源過載。

3.大尺寸、低價值數據存儲

4.高伸縮性場景:適合由數十或數百臺服務器組成的數據庫。

5.對象或JSON 數據存儲: MongoDB 的BSON數據格式很是適合文檔化格式的存儲及查詢。憑這一點，適合與Node.js集成。

6.Nest.js中使用
Nest.js有兩種處理MongoDB數據庫的方法。提供MongoDB支持的ORM，也可使用最受歡迎的MongoDB對象建模工具Mongoose。若是想使用ORM，能夠結合Type-ORM。本文中咱們探討的則爲MongooseJS

3、鏈接MongoDB

創建本地MongoDB服務
參考官網安裝配置 Install MongoDB ，注意設置的帳號和密碼,最終在 Robo 3T 可視化管理工具中顯示效果以下:
在本示例中，分別建立了購物車、產品、用戶等文結構。
獨立配置
前文提到，本示例使用了先後端一體化配置，但特例狀況是，對於數據庫等敏感配置內容，不適合先後端共用，因此在本示例中，須要將其單獨抽離。

依據環境變量，獲取不一樣的配置

代碼裏邊單獨引用
創建鏈接
Nest.js使用MongoDB,默認集成Mongoose, 在使用時經過import的方式引入。以示例中的本地模塊爲例:
1.創建LocalModule，LocalModule再導入DataBaseModule

2.DataBaseModule中經過provider和exports提供並導出公共服務

3.在Provider中則進行MongoDB鏈接。
至此，Nest.js中鏈接步驟完成。

4、效果

交互：
在首頁中，綁定數據庫中用戶擁有的購物車產品數量，當點擊【個人購物車】時，跳轉至【購物車】頁面，用戶點擊+或者-進行購物車物品數量增減操做，同時藉助Vuex系統，進行多頁面狀態共享，最後更新至數據庫中的【isomorphism.carts】文檔中的num字段中進行數據持久化。

5、接口設計

文檔設計
本示例中，從上圖效果圖來看用戶首頁顯示當前購物車數量，點擊進入可修改購物車數量。抽象成數據庫表現爲：
須要有一個文檔，用於存放用戶信息。
須要有一個文檔，用於存放用戶購物車信息，購物車信息由用戶，用戶存放的物品ID，每一個物品在購物車中的數量構成。
須要有一個文檔，用於存放商品原始SKU信息。
交互形式爲:
用戶界面中操做購物車數量，依據用戶ID和產品ID將更新結果存放於存放用戶購物車數量信息的文檔中。
控制器實現
這裏以更新購物車爲例，截取部份代碼片段，基礎思路是使用POST接口，接收前端傳入參數，再傳入SERVICE服務層，同時接口層對傳入和返回處理做統一的封裝。
1.定義接口:
使用@Post('xxx')定義訪問接口，Post爲RESTful關鍵方法之一。@Body()獲取傳入參數。

2.定義入參結構
@Body()獲取傳入參可對傳入參數進行強類型定義，Nest.js在處理參數功能上，做了自動字段校驗，舉個例子：本示例參數中的AddCartsDto，那麼框架層面將會對參數進行完整性校驗，即按類型定義的內容，傳少參數將會有接口錯誤信息拋出。

3.返回結構父類封裝
- 返回結構定義
  返回結構，這裏將其定義爲，須要一個方法，統一返所須要的結構，在Controller層調用時直接進行返回結果轉換。
- 返回結構實現
  新建父類，用於實現返回的兩種結構，列表與普通對象，不論是哪種結構，都會在上一層加上code, message, success用於標識接口狀態碼，成功或失敗字符串描述，接口成功與否狀態。
- 子類繼承
  讓Controller子類繼承自父類，這樣子便擁用返回結構的兩種方法，進行代碼複用。
4.服務實現
在服務層，一樣遵循與Controller相同的機制，這裏基礎的增刪改查，若是不是因特殊需求，是能夠概括封裝在父類實現的。
- 遵循Mongoose調用，在構造體中加入註冊用到的文檔Model結構:
- Model結構須要在Provider中創建聯接。
- Schema結構。
  這裏的collection創建與實體文檔isomorphism.cats的鏈接。
5.自定義功能實現
以依據ID獲取已添加入購物車的列表數據項爲例，model負責實際的MongoDB語句操做，整個過程都是異步的，因此須要使用async

語句操做遵循全部moongoose語法規範:

6、接口調用

服務端完成相關功能後，客戶端則須要創建相關的單獨服務類調用來承接該功能，例如本示例中的LocalService:

客戶端接口實現：

業務代碼調用(Vue):

7、延伸

登陸功能
以上實現的是業務當中功能實現，在現實中，每每須要加上權限驗證功能。這裏做了一下簡單示例實現。即
1.用戶登陸，存取TOKEN
2.每次請求時頭部帶上TOKEN信息
3.服務端進行合法性校驗。
固然，與JAVA服務端等交互時可能會引入JWT等框架機制實現，在此不另做討論
客戶端登陸

用戶登陸時須要對密碼進行安全性保護，這裏的作法是，使用MD5進行加密，到了服務端，再依據用戶名，從DB中取出相應的HASH值校驗。避免密碼明文傳輸。

若是校驗經過，將返回用戶信息，不然爲空，並提示相關錯誤信息。

以上步驟完成，在服務端須要存儲該用戶登陸信息到全局或者REDIS結構中。這裏另外須要提一點，就是存入的REDIS或者客戶端中的COOKIE應該有時間效性控制，即多久失效和過時。
統一攔截器
登陸完成以後，須要攔截器中統一處理登陸合法性校驗，避免在各個業務邏輯中重複使用相同代碼。在這裏統一放至middleware中進行處理。

1.服務端攔截
在業務中依據頭部傳入內容，檢測用戶合法性，不合法狀況下返回錯誤信息。

2.客戶端攔截
客戶端則檢測COOKIE中的登陸信息是否存在，不存在則跳轉至登陸頁面。