theme: vuepress highlight: vs2015

快捷跳轉

關於本課程大綱和內容介紹：前端全棧必備課程：Vue + Node.js 開發實戰：從入門到就業

Node.js 是 JavaScript 的執行時環境，是一個基於 Google Chrome V8 引擎設計實現的、跨平臺相容的、可以執行在伺服器端的指令碼開發語言；如今，隨著全棧開發技術的不斷深入與日益盛行，Node.js 逐漸成為前端設計開發的通用標準框架；例如，大多數讀者耳熟能詳的 Angular 、React 和 Vue.js 這三大漸進式前端開發框架，均與 Node.js 有著密不可分的關聯關係；

本課程的重點，就是介紹關於 Node.js 與 Vue.js 前端全棧開發的內容；本章主要對 Node.js 進行整體介紹，並對其發展歷史和相關版本進行詳細說明，同時也介紹後續開發中所涉及的基礎知識

通過本章的學習可以：

瞭解 Node.js 的發展歷史和特點
瞭解 V8 引擎的介紹及其與 Node.js 的關係
掌握 Node.js 的一些應用場景

1. Node.js 基礎

本節包括 Node.js 的基礎簡介、發展歷史、組織架構，以及具體應用等方面的內容

1-1. Node.js 簡介

Node.js 是一個基於 Chrome V8 引擎的 JavaScript 執行環境；從開發者角度來說，原本執行在 Web 瀏覽器中的 JavaScript 程式碼，現在可以執行在任何裝有 Node.js 的環境中

Node.js 最顯著的特點就是能夠執行在伺服器端（區別於其他指令碼語言），以及良好的多平臺相容性（支援Windows、Linux、Mac OS X、SunOS和FreeBSD等多種系統平臺），使其成為最重要的指令碼程式設計語言；我們都知道，一般的JavaScript指令碼語言需要在瀏覽器環境下才可以解釋執行；而Node.js是伺服器端的指令碼語言，可以直接在後端解釋執行；下面就是最基本的Node.js命令執行方法

```js

node filename.js // TODO: node命令直接解釋執行filename.js指令碼檔案

```

由於Chrome V8引擎執行JavaScript指令碼的速度非常快，因此Node.js所開發出來的應用程式效能非常好。Node.js已經成為全棧開發的首選語言之一，並且從它衍生出眾多出色的全棧開發框架。Node.js已經在全球被眾多公司使用，包括創業公司Voxer、Uber以及沃爾瑪、微軟這樣的知名公司。它們每天通過Node.js處理的請求數以億計，可以說在要求苛刻的伺服器系統，Node.js也可以輕鬆勝任

Node.js還包括一個完善的社群；在Node.js的官方網站可以找到大量的文件和示例程式，並且Node.js還有一個強大的NPM包管理器。漸漸地，越來越多的人蔘與到本專案中來，可用的第三方模組和擴充套件增長迅猛，而且質量也在不斷提升，Node已是全球較大的開源庫生態系統之一

🔔 Notice

Node.js並不是一個JavaScript應用，而是一個JavaScript的執行時環境，其底層由C++語言編寫而成

1-2. Node.js 安裝與環境搭建

本小節介紹如何在 Windows 平臺上安裝 Node.js；相比 Linux 等其他平臺的 Node.js 而言，Windows 平臺的 Node.js 出現較晚，但是在微軟的支援下，Windows 平臺的 Node.js 安裝方法承襲了 Windows 應用程式的一貫作風，只需要下載一個安裝程式，雙擊安裝即可

第一步

使用瀏覽器開啟Node.js官網，頁面如下圖所示

Node.js 分為兩個不同的版本：LTS 和 Current

🔔 Notice

LTS 版本是長期支援的穩定版本，即該版本內容穩定，除了重大的安全性問題外，不會為其增加新的功能和特性，也不會更改其主要內容；Current 版本是根據當前專案的開發進度實時更新的可釋出版本，包含最新的效能優化和程式碼優化，但版本中會有一些 Bug

對於線上執行的穩定環境或開發時環境，推薦使用 LTS 版本；版本的選擇還要參考不同的框架

第二步

選擇 LTS 版本，單擊 LTS 下載按鈕，自動下載安裝程式

第三步

下載完成後，雙擊開啟該程式，如下圖所示

第四步

等待其自動檢測安裝環境後，「 Next 」按鈕亮起，單擊該按鈕，進入條款和許可說明對話方塊，如下圖所示；勾選同意選項，再次單擊「 Next 」按鈕進入下一步

第五步

在進入的對話方塊中選擇程式的安裝目錄，然後再單擊「 Next 」按鈕；也可以選擇性地安裝 Node.js

第六步

選擇好需要安裝的內容後出現「 Install 」按鈕，單擊該按鈕開始安裝，等到進度條走到 100% 時，則說明安裝成功，如圖所示；單擊「 Finish 」按鈕，即可完成 Node.js 的安裝

第七步

檢測是否成功安裝了Node.js；使用快捷鍵 Win+R 開啟「執行」對話方塊，輸入 cmd 命令後單擊「確定」按鈕，如下圖所示

第八步

在命令列視窗中輸入 node –v 命令，如果顯示正確的 Node.js 版本號，而非提示“不是內部或外部命令，也不是可執行的程式或批處理檔案”，則說明 Node.js安裝成功

🔔 Notice

如果 Node.js 安裝成功卻無法在命令列中使用，有可能是許可權問題，因為該安裝目錄並非在環境變數中，需要手動將 Node.js 的安裝目錄（預設為C:\Program Files\nodejs\）加入環境變數中，如下圖所示

1-3. 第一個 Node.js 示例 — Hello World

本小節正式使用Node.js進行開發。首先是所有開發人員都需要編寫的第一個例程：Hello World。首先匯入所需要的模組，Node.js為開發者提供了require命令進行匯入

新建一個JavaScript檔案，命名為Hello World.js，在其中引入HTTP包，同時例項化一個返回結果，並掛載在本地的3000埠中，程式碼如下：

```js //引入HTTP包 const http = require('http');

http.createServer(function (request, response) { //返回HTTP頭部資訊 //返回HTTP相應的狀態碼：200（請求成功） //返回資料內容的型別：text/plain //指定返回的code以及形式 response.writeHead(200, { 'Content-Type': 'text/html});

//傳送HTML文件內容
 //列印輸出一個<h1>元素
 response.end('<h1>Hello World</h1>');
}).listen(3000);

//通過console列印相關的提示資訊
console.log('Server running at http://127.0.0.1:3000/');

```

使用cd命令進入JavaScript.js檔案所在的資料夾，然後使用node命令執行程式碼，如下圖所示

如果成功執行，則命令提示符處會出現一個閃動的游標，沒有任何的錯誤和警告提示；此時在瀏覽器中輸入 http://127.0.0.1:3000 ，可以看到顯示效果，如圖所示

這樣就完成了第一個最簡單的Node.js專案

2. 後端框架 Express

本節介紹基於Node.js的一個流行的後端框架——Express，同時也會使用Express進行簡單的網站開發

2-1. Express的發展

1-4節使用Node.js開發了一個Hello World程式，雖然通過HTTP包，用一個簡單的檔案就能實現一個路由和頁面，但這對於一個工程專案的開發來說遠遠不夠

一個合格的工程從來不是一些簡單的檔案堆砌，就如同建造一座摩天大樓一樣，並不像搭建一個玩具模型的房子，通過簡單的拼裝就可以完成。建造一座摩天大樓必須擁有堅實的地基和框架，還要有規範和章程才能完成

Express框架其實就是這樣的一款產品，為工程而生。它基於Node.js平臺，是一個快速、開放、極簡的Web開發框架。Express框架從Node.js釋出之初就存在，至今已有十多年的歷史了。開發者可以使用Express快速地搭建一個具有完整功能的網站，而不是一個簡單的網頁

簡單來說，Express框架本身是對Node.js中的HTTP模組進行的一層抽象，就是這層抽象使得開發者可以無須注意細節，直接上手進行頁面和業務邏輯的開發

Express的主要功能包括：

設定中介軟體來響應HTTP請求
定義路由表執行不同的HTTP請求動作
通過向模板傳遞引數動態渲染HTML頁面

2-2.Express 的安裝

本小節介紹如何安裝Express。Express的功能雖然相當於1-3節中使用過的HTTP模組，但是不能通過require匯入，需要按需安裝和下載後才能使用

不僅僅是Express，作為一個開放的平臺，Node.js社群收入了大量開源的JavaScript模組，與安裝Node.js時自動安裝的HTTP模組不同，這些模組需要使用npm命令按需下載

🔔 Notice

如果使用npm命令時出現下載非常慢或下載失敗的情況，請參照 cnpm 淘寶映象的安裝方法

第一步

新建專案資料夾，並且通過命令提示行進入該資料夾

第二步

使用npm命令初始化Node.js專案，命令如下：

js npm init

如果使用者是第一次使用專案初始化命令，這裡要特別提示一下，初始化命令並不是一次執行完畢，會提出很多問題讓使用者選擇，如專案名稱、描述和作者等，如果不想填寫，一直按Enter鍵即可

初始化命令的執行過程如下圖所示。注意，本例的入口檔案沒有使用預設的index.js，而是使用了app.js

初始化命令執行成功後會生成一個package.json檔案，內容如下：

js { "name": "2-2-2", "version": "1.0.0", "description": "test", "main": "app.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC" }

第三步

執行Express的安裝命令如下：

js //安裝Express npm install express

第四步

安裝成功後，package.json檔案會自動新增Express為依賴項，更改後的內容如下：

js //自動更改後的package.json檔案 { "name": "2-2-2", …… "license": "ISC", "dependencies": { "express": "^4.17.1" } }

至此，當前專案中成功安裝了Express模組

🔔 Notice

老版本的npm安裝時，如果沒有自動將Express新增為依賴項，可以使用save引數進行新增

2-3. Express專案示例 — Hello World

上一節完成了一個Express專案，本小節在此專案基礎上編寫一個Express版本的Hello World程式

第一步

新建一個入口檔案app.js，完整的程式碼如下：

```js //引入Express模組和例項化 const express = require('express') const app = express()

//設定根路由顯示Hello World app.get('/', (req, res) => res.send('Hello World!'))

//監聽3000埠為HTTP服務 app.listen(3000, () => console.log(Example app listening on port 3000!)) ```

Express專案中不需要引入HTTP模組，而且寫法更簡單。例項化Express後，所有的操作只需在該例項中指定路由即可

第二步

使用如下命令執行程式，然後在瀏覽器中輸入 http://127.0.0.1:3000 ，即可訪問該頁面

js node app.js

2-4. RESTful API 規範

RESTful API是一種網路應用程式的設計風格和開發方式。使用RESTful風格設計的API路由基於HTTP，支援XML與JSON等格式的資料回傳。這種風格設計的介面本身是通過請求方式的限制實現對網路資料資源狀態的標識，類似於GET請求某一個路由路徑，應當對應的是資料的獲取，而使用POST方式進行路由路徑的請求，應當是對應資料的增加，例如這一行程式碼：

js app.get('/', (req, res) => res.send('Hello World!'))

指定了一個應用於HTTP的路由，也是該Express專案的根目錄，其中“/”是目錄地址，即當用戶訪問http://127.0.0.1:3000 本身時就是該地址，而app例項中的get指定了一個狀態資料操作介面

一個HTTP請求可能會採用各種不同的請求方式，參考下表

網站的任何操作都有其請求方式，這可以通過瀏覽器的開發者工具獲取。在瀏覽器中按F12鍵進入開發者工具，如下圖所示，被框選的部分就是訪問百度頁面時獲取的GET請求

每種請求方式都對應著不同的操作，這些操作提供專門的路由地址，這也是RESTful API的本質。RESTful是目前最流行的API設計規範，其核心思想就是對客戶端發起的請求進行5種劃分，不同的操作對應5種不同的HTTP請求方法，這是以邏輯操作功能為基礎進行劃分的，而不是傳統的API設計以路徑方式進行劃分。RESTful劃分的種類參考下表

符合RESTful的API設計就是所有的API路由符合上述劃分。也就是說，相同的請求路徑，由於請求方式不同，可能獲取的資料結果不同，或執行不同的資料操作

不同的請求方式返回的狀態碼也可能不同，常見的狀態碼含義見下表

🔔 Notice

狀態碼還可以用來表示其他含義，如300系列的重定向、400系列的客戶端錯誤和500系列的伺服器錯誤等。通過HTTP檢視具體的狀態碼並且瞭解其含義，可以方便地定位問題所在

Node.js 基礎與環境搭建「 Vue + Node.js 開發實戰 」