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 開發實戰 」