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

時間 2019-11-06

標籤 typescript 工程實戰 nuxt nest 簡介欄目 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、《框架融合》vue

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

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

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

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

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

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

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

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

使用說明:

- 前置條件MongoDB

工程中使用到了MongoDB,需先在本地安裝該服務 MongoDB安裝教程安裝完成後使用如下命令啓動:

mongod --config mongod 配置目錄/mongod.conf --dbpath 數據庫存放目錄
例如:
mongod --config /usr/local/etc/mongod.conf --dbpath /usr/local/mongodir
複製代碼

- 前置條件Charles

對接接口時藉助Charles Web Debugging Proxy抓包分析工具能提高開發效率和快速定位問題,請注意Charles端口是否已設置爲8888(默認值)

- 開發環境運行

npm run client:prod	// local start on production mode
npm run client:dev	// local start on development mode

visit: http://localhost:8088
複製代碼

啓動效果:

- 生產環境運行

npm run build
and
cross-env NODE_ENV=production npm run start  // server start on production mode
cross-env NODE_ENV=development npm run start // server start on development mode
複製代碼

2、所使用的技術棧

Nuxt.js

Nuxt.js 基於 Vue.js 的通用應用框架,經過對客戶端/服務端基礎架構的抽象組織，主要關注的是應用的 UI渲染。支持異步數據加載、中間件支持、佈局支持等。工程中主要使用其服務端渲染、SEO、自動代碼分層、打包和壓縮 JS 和 CSS等功能。

Nest.js

Nest.js 一個用於構建高效，可擴展的 Node.js 服務器端應用程序的框架。它使用漸進式 JavaScript，內置並徹底支持 TypeScript並結合了 OOP（面向對象編程），FP（函數式編程）和 FRP（函數式響應編程）的元素。

在底層，Nest.js使用強大的 HTTP Server 框架，如 Express（默認）和 Fastify。Nest.js在這些框架之上提供了必定程度的抽象，同時也將其 API 直接暴露給開發人員。在工程中與Nuxt.js結合,主要是使用Nuxt.js做爲中間件middleware的形式注入Nest.js服務中。

Vant UI Framework

Vant 友贊Vant主打輕量、可靠的移動端 Vue 組件庫，主要是把業務開發中經常使用的組件進行抽象和易用性改造。得益於它支持SSR和TypeScript及在國內有必定的使用率，故UI框架選用它做爲表現層內容。

TypeScript

TypeScript JavaScript超集,主打可選的靜態類型和基於類的面向對象編程。工程中採用它解決全棧工程中統一語言問題，避免開發者在開發時針對不一樣的框架須要作麻煩的語法轉換。得益於強類型，使代碼重構，類型推斷，代碼質量在工程業務愈來愈大時能達到比較不錯的質量收益。

3、所解決的問題

搜索引擎優化(SEO)

將SEO的關鍵數據直接在後臺就渲染成html，從而保證搜索引擎的爬蟲能爬取到關鍵數據，如圖所示：TDK實時渲染，保證搜索引擎識別。

SSR提高首屏時間

SSR優點之一是更快的響應時間，不用等待全部的js都下載完成，瀏覽器變成現實比較完整的頁面。能夠在頁面初始化以前在服務器端優先將頁面使用的數據提早加載。例如

首屏渲染是node發送過來的html字符串，不依賴於Vue前端渲染生成DOM節點，使用戶更快的看到頁面的內容。尤爲是針對大型單頁應用，打包後文件體積比較大，普通客戶端渲染加載全部所需文件時間較長，解決白屏等待時間過長問題。

全棧化功能擴充

引入全棧功能，能夠繼續發揮node做爲中間層做用，在此基礎上，能夠封裝前端自有API，例如RESTful中轉接口，解決跨域問題，鏈接數據庫、操做緩存、文件、錯誤捕捉上報等功能。

4、架構分析說明

結構說明

底層採用Nest.js將Nuxt.js包裝成middleware形式嵌入服務器中,UI層Vant則運行在Nuxt.js中，屬Vue.js表示層框架。在此基礎上封裝公共組件層，用於提供開發中經常使用且公共服務，避免代碼分散，和非重用。主要包括core、日誌、權限管理、服務端渲染實現，基礎網絡請求封裝。最上層爲業務功能層，包括各業務功能頁面實現邏輯，Vue.js文件採用HTML/CSS/JS邏輯包含在同一文件中，未做進一步分離，但基本原則是細粒度化組件劃分。整個開發過程服務端與前端採用TypeScript做爲同一種語言開發，增長開發質量和減小重構成本。

流程舉例

客戶端發起HTTP請求，這裏分爲2種狀況，在框架層分別處理了2種請求，頁面和API層級，框架自動依據請求地址是否帶API前綴，將處理請求發往不一樣的處理底層，分別是非API，使用SSR服務處理，主要返回頁面HTML代碼結構，而API則發往特定的API服務控制器，在非中轉接口類請求中，若是使用到DB還會與MONGO DB交互，例如：做必要的CRUD操做等。

5、相關規範

目錄規範

目錄統一採用小寫格式，依據功能分治原則，取名使用全英文，避免拼音，同時單個單詞不能表達相應意思時，使用燒考串模式：some-words-descript來描述。

文件規範

文件統一使用大寫駝峯模式命名，避免使用拼音，首字母或單詞通常採用當前目錄文件夾名字，使文件看上去統一整齊，快速定位和查找。接口命名統一使用I開頭例如：

特例

有個特殊的例外，store目錄中內容不受大小寫影響，由於在服務端渲染狀況下，讀取store中內容，則須要用原文件名訪問才能訪問到，例如：

訪問store中的auth對象值，正常訪問方式爲:

store.state.modules.auth    // right
複製代碼

若是auth使用大寫命名Auth,那麼正確訪問方式爲：不符合變量對象訪問常規方式，故加入特列中。

store.state.modules.Auth    // wrong
複製代碼

6、目錄結構

功能分層:

build目錄 生成配置環境腳本
config目錄 先後端共用配置，按環境區分
dist目錄 生產編譯發佈後生成的轉譯源碼目錄
docs目錄 文檔說明目錄
src 源碼目錄
- client目錄 前端源碼目錄，包括Vue等源文件
- server目錄 服務端源碼目錄，包括服務、控制器、數據庫邏輯等源文件