內容簡介
本書全面介紹Vue.js+Node.js全棧開發所使用的新技術,包括MongoDB、Express、Vue.js 3、Node.js、Naive UI、md-editor-v3、Nginx、basic-auth、JavaScript、TypeScript等開源技術棧,知識點涉及數據存儲、模組、測試、緩衝區、事件處理、檔案處理、HTTP編程、組件、模板、指令、監聽器、表達式、事件、表單、HTTP客戶端等內容。本書內容豐富,案例新穎,學習難度由淺入深,層層推進,理論聯繫實際,具有較強的實操性。這些知識點既能滿足當前企業級套用的開發需求,又可以**限度地減輕開發者的負擔。本書所介紹的知識較為前瞻,輔以大量的案例,令讀者知其然並知其所以然。通過本書的學習,可以令讀者拓展視野,提升職場競爭能力。
本書適合Vue.js+Node.js全棧開發初學者和進階讀者作為自學教程,也適合培訓學校作為培訓教材,還適合大、中專院校的相關專業作為教學參考書。
圖書目錄
目 錄
第1章 Vue.js+Node.js全棧開發概述 1
1.1 Vue.js+Node.js全棧開發核心技術棧的組成 1
1.1.1 MongoDB 1
1.1.2 Express 2
1.1.3 Vue.js 2
1.1.4 Node.js 2
1.2 Vue.js+Node.js全棧開發周邊技術棧的組成 2
1.2.1 Naive UI 2
1.2.2 md-editor-v3 3
1.2.3 Nginx 3
1.2.4 basic-auth 3
1.3 Vue.js+Node.js全棧開發的優勢 3
1.4 開發工具的選擇 6
1.5 小結 6
1.6 練習題 6
第2章 Node.js基礎 7
2.1 初識Node.js 7
2.1.1 Node.js簡介 7
2.1.2 為什麼叫Node.js 8
2.2 Node.js的特點 8
2.2.1 異步I/O 8
2.2.2 事件驅動 9
2.2.3 單執行緒 10
2.2.4 可用性和擴展性 10
2.2.5 跨平台 11
2.3 安裝Node.js 11
2.3.1 安裝Node.js和npm 11
2.3.2 Node.js與npm的關係 12
2.3.3 安裝npm鏡像 12
2.4 第一個Node.js套用 12
2.4.1 實例1:創建Node.js套用 12
2.4.2 實例2:運行Node.js套用 12
2.5 小結 13
2.6 練習題 13
第3章 Node.js模組——大型項目管理之道 14
3.1 理解模組化機制 14
3.1.1 理解CommonJS規範 14
3.1.2 理解ES6模組 16
3.1.3 CommonJS和ES6模組的異同點 17
3.1.4 Node.js的模組實現 18
3.2 使用npm管理模組 19
3.2.1 使用npm命令安裝模組 19
3.2.2 全局安裝與本地安裝 20
3.2.3 查看安裝信息 20
3.2.4 卸載模組 21
3.2.5 更新模組 21
3.2.6 搜尋模組 21
3.2.7 創建模組 21
3.3 Node.js核心模組 21
3.4 小結 22
3.5 練習題 22
第4章 Node.js測試 23
4.1 嚴格模式和遺留模式 23
4.2 實例3:斷言的使用 24
4.3 了解AssertionError 25
4.4 實例4:使用deepStrictEqual 26
4.5 小結 28
4.6 練習題 28
第5章 Node.js緩衝區—高性能IO處理的秘訣 29
5.1 了解Buffer 29
5.1.1 了解TypedArray 29
5.1.2 Buffer類 30
5.2 創建緩衝區 31
5.2.1 初始化緩衝區的API 31
5.2.2 實例5:理解數據的安全性 32
5.2.3 啟用零填充 33
5.2.4 實例6:指定字元編碼 33
5.3 實例7:切分緩衝區 34
5.4 實例8:連線緩衝區 35
5.5 實例9:比較緩衝區 36
5.6 緩衝區編解碼 36
5.6.1 編碼器和解碼器 36
5.6.2 實例10:緩衝區解碼 37
5.6.3 實例11:緩衝區編碼 38
5.7 小結 39
5.8 練習題 39
第6章 Node.js事件處理 40
6.1 理解事件和回調 40
6.1.1 事件循環 41
6.1.2 事件驅動 41
6.2 事件發射器 42
6.2.1 實例12:將參數和this傳給監聽器 42
6.2.2 實例13:異步與同步 43
6.2.3 實例14:僅處理事件一次 43
6.3 事件類型 44
6.3.1 事件類型的定義 44
6.3.2 內置的事件類型 44
6.3.3 實例15:error事件 44
6.4 事件的操作 47
6.4.1 實例16:設定最大監聽器 47
6.4.2 實例17:獲取已註冊的事件的名稱 47
6.4.3 實例18:獲取監聽器數組的副本 48
6.4.4 實例19:將事件監聽器添加到監聽器數組的開頭 48
6.4.5 實例20:移除監聽器 49
6.5 小結 50
6.6 練習題 50
第7章 Node.js檔案處理 51
7.1 了解fs模組 51
7.1.1 同步與異步操作檔案 51
7.1.2 檔案描述符 53
7.2 處理檔案路徑 53
7.2.1 字元串形式的路徑 54
7.2.2 Buffer形式的路徑 54
7.2.3 URL對象的路徑 55
7.3 打開檔案 56
7.3.1 檔案系統標誌 56
7.3.2 實例21:打開檔案的例子 57
7.4 讀取檔案 58
7.4.1 實例22:用fs.read讀取檔案 58
7.4.2 實例23:用fs.readdir讀取檔案 59
7.4.3 實例24:用fs.readFile讀取檔案 60
7.5 寫入檔案 61
7.5.1 實例25:將Buffer寫入檔案 61
7.5.2 實例26:將字元串寫入檔案 62
7.5.3 實例27:將數據寫入檔案 64
7.6 小結 64
7.7 練習題 65
第8章 Node.js HTTP編程 66
8.1 創建HTTP伺服器 66
8.1.1 實例28:用http.Server創建伺服器 66
8.1.2 理解http.Server事件的用法 67
8.2 處理HTTP常用操作 69
8.3 請求對象和回響對象 69
8.3.1 理解http.ClientRequest類 69
8.3.2 理解http.ServerResponse類 73
8.4 REST概述 76
8.4.1 REST定義 76
8.4.2 REST設計原則 76
8.5 成熟度模型 77
8.5.1 第0級:使用HTTP作為傳輸方式 78
8.5.2 第1級:引入了資源的概念 79
8.5.3 第2級:根據語義使用HTTP動詞 80
8.5.4 第3級:使用HATEOAS 81
8.6 實例29:構建REST服務的例子 83
8.6.1 新增用戶 84
8.6.2 修改用戶 85
8.6.3 刪除用戶 85
8.6.4 回響請求 86
8.6.5 運行套用 87
8.7 小結 90
8.8 練習題 90
第9章 Express基礎 91
9.1 安裝Express 91
9.1.1 初始化套用目錄 91
9.1.2 初始化套用結構 92
9.1.3 在套用中安裝Express 92
9.2 實例30:編寫Hello World套用 93
9.3 實例31:運行Hello World套用 93
9.4 小結 94
9.5 練習題 94
第10章 Express路由——頁面的導航員 95
10.1 路由方法 95
10.2 路由路徑 96
10.2.1 實例32:基於字元串的路由路徑 96
10.2.2 實例33:基於字元串模式的路由路徑 97
10.2.3 實例34:基於正則表達式的路由路徑 97
10.3 路由參數 98
10.4 路由處理器 98
10.4.1 實例35:單個回調函式 98
10.4.2 實例36:多個回調函式 98
10.4.3 實例37:一組回調函式 99
10.4.4 實例38:獨立函式和函式數組的組合 99
10.5 回響方法 99
10.6 實例39:Express構建REST API 100
10.7 測試Express的REST API 102
10.7.1 測試創建用戶API 102
10.7.2 測試刪除用戶API 102
10.7.3 測試修改用戶API 103
10.7.4 測試查詢用戶API 104
10.8 小結 104
10.9 練習題 104
第11章 Express錯誤處理器 105
11.1 捕獲錯誤 105
11.2 默認錯誤處理器 107
11.3 自定義錯誤處理器 107
11.4 小結 109
11.5 練習題 109
第12章 MongoDB基礎 110
12.1 MongoDB簡介 110
12.2 安裝MongoDB 112
12.3 啟動MongoDB服務 112
12.4 連線到MongoDB伺服器 113
12.5 小結 114
12.6 練習題 114
第13章 MongoDB常用操作 115
13.1 顯示已有的資料庫 115
13.2 創建、使用資料庫 115
13.3 插入文檔 116
13.3.1 實例40:插入單個文檔 116
13.3.2 實例41:插入多個文檔 116
13.4 查詢文檔 117
13.4.1 實例42:嵌套文檔查詢 118
13.4.2 實例43:嵌套欄位查詢 118
13.4.3 實例44:使用查詢運算符 118
13.4.4 實例45:多條件查詢 119
13.5 修改文檔 119
13.5.1 實例46:修改單個文檔 119
13.5.2 實例47:修改多個文檔 120
13.5.3 實例48:替換單個文檔 120
13.6 刪除文檔 121
13.6.1 實例49:刪除單個文檔 121
13.6.2 實例50:刪除多個文檔 122
13.7 小結 122
13.8 練習題 122
第14章 使用Node.js操作MongoDB 123
14.1 安裝mongodb模組 123
14.2 實現訪問MongoDB 124
14.3 運行套用 125
14.4 小結 125
14.5 練習題 125
第15章 mongodb模組的綜合套用 126
15.1 實例51:建立連線 126
15.2 實例52:插入文檔 127
15.3 實例53:查找文檔 128
15.4 修改文檔 130
15.4.1 實例54:修改單個文檔 130
15.4.2 實例55:修改多個文檔 134
15.5 刪除文檔 137
15.5.1 實例56:刪除單個文檔 137
15.5.2 實例57:刪除多個文檔 141
15.6 小結 145
15.7 練習題 145
第16章 Vue.js基礎 146
16.1 Vue.js產生的背景 146
16.2 Vue.js的下載安裝 146
16.2.1 安裝Vue CLI 147
16.2.2 安裝Vue Devtools 147
16.3 Vue CLI的常用操作 147
16.3.1 獲取幫助 147
16.3.2 創建套用 148
16.3.3 創建服務 149
16.3.4 啟動套用 149
16.3.5 編譯套用 150
16.4 實例58:創建第一個Vue.js套用 150
16.4.1 使用Vue CLI初始化套用 150
16.4.2 運行Vue套用 154
16.4.3 增加對TypeScript的支持 155
16.5 探索Vue.js套用結構 155
16.5.1 整體項目結構 155
16.5.2 項目根目錄檔案 156
16.5.3 node_modules目錄 156
16.5.4 public目錄 157
16.5.5 src目錄 158
16.6 小結 161
16.7 練習題 161
第17章 Vue.js套用實例 162
17.1 創建套用實例 162
17.1.1 第一個套用實例 162
17.1.2 讓套用實例執行方法 162
17.1.3 理解選項對象 163
17.1.4 理解根組件 163
17.1.5 理解MVVM模型 164
17.2 data的property與methods 164
17.2.1 理解data property 165
17.2.2 理解data methods 165
17.3 生命周期 166
17.3.1 什麼是生命周期鉤子 166
17.3.2 Vue.js的生命周期 167
17.3.3 實例59:生命周期鉤子的例子 168
17.4 小結 171
17.5 練習題 171
第18章 Vue.js組件 172
18.1 組件的基本概念 172
18.1.1 實例60:一個Vue.js組件的示例 172
18.1.2 什麼是組件 173
18.1.3 組件的復用 174
18.1.4 Vue組件與Web組件的異同點 175
18.2 組件互動方式 175
18.2.1 實例61:通過prop向子組件傳遞數據 175
18.2.2 實例62:監聽子組件事件 176
18.2.3 實例63:兄弟組件之間的通信 179
18.2.4 實例64:通過插槽分發內容 181
18.3 讓組件可以動態載入 183
18.3.1 實現組件動態載入的步驟 183
18.3.2 實例65:動態組件的示例 183
18.4 使用快取組件keep-alive 188
18.4.1 實例66:keep-alive的例子 188
18.4.2 keep-alive配置詳解 189
18.5 小結 190
18.6 練習題 190
第19章 Vue.js模板 191
19.1 模板概述 191
19.2 實例67:插值 192
19.2.1 文本 192
19.2.2 原生HTML代碼 192
19.2.3 綁定HTML attribute 193
19.2.4 JavaScript表達式 193
19.3 實例68:在模板中使用指令 194
19.3.1 參數 195
19.3.2 理解指令中的動態參數 195
19.3.3 理解指令中的修飾符 196
19.4 實例69:在模板中使用指令的縮寫 196
19.4.1 使用v-bind縮寫 196
19.4.2 使用v-on縮寫 197
19.5 使用模板的一些約定 197
19.5.1 對動態參數值的約定 197
19.5.2 對動態參數表達式的約定 198
19.5.3 對訪問全局變數的約定 198
19.6 小結 198
19.7 練習題 198
第20章 Vue.js計算屬性與監聽器 199
20.1 通過實例理解“計算屬性”的必要性 199
20.2 實例70:一個計算屬性的例子 200
20.2.1 聲明計算屬性 200
20.2.2 模擬數據更改 201
20.3 計算屬性快取與方法的關係 202
20.4 為什麼需要偵聽器 202
20.4.1 理解偵聽器 202
20.4.2 實例71:一個偵聽器的例子 202
20.5 小結 204
20.6 練習題 204
第21章 Vue.js表達式 205
21.1 條件表達式 205
21.1.1 實例72:v-if的例子 205
21.1.2 實例73:v-else的例子 206
21.1.3 實例74:v-else-if的例子 206
21.1.4 實例75:v-show的例子 206
21.1.5 v-if與v-show的關係 207
21.2 for循環表達式 207
21.2.1 實例76:v-for遍歷數組的例子 207
21.2.2 實例77:v-for遍歷數組設定索引的例子 208
21.2.3 實例78:v-for遍歷對象property的例子 210
21.2.4 實例79:數組過濾的例子 211
21.2.5 實例80:使用值的範圍的例子 212
21.3 v-for的不同使用場景 213
21.3.1 實例81:在<template>中使用v-for的例子 213
21.3.2 實例82:v-for與v-if一同使用的例子 214
21.3.3 實例83:在組件上使用v-for的例子 215
21.4 小結 216
21.5 練習題 216
第22章 Vue.js事件 217
22.1 什麼是事件 217
22.1.1 實例84:監聽事件的例子 217
22.1.2 理解事件處理方法 218
22.1.3 處理原始的DOM事件 219
22.1.4 為什麼需要在HTML代碼中監聽事件 220
22.2 實例85:多事件處理器的例子 220
22.3 事件修飾符 221
22.3.1 什麼是事件修飾符 221
22.3.2 理解按鍵修飾符 222
22.3.3 理解系統修飾鍵 223
22.4 小結 224
22.5 練習題 224
第23章 Vue.js表單 225
23.1 理解表單輸入綁定 225
23.2 實例86:表單輸入綁定的基礎用法 225
23.2.1 文本 225
23.2.2 多行文本 226
23.2.3 複選框 227
23.2.4 單選框 228
23.2.5 選擇框 229
23.3 實例87:值綁定 230
23.3.1 複選框 230
23.3.2 單選框 231
23.3.3 選擇框 232
23.4 小結 233
23.5 練習題 233
第24章 Vue.js HTTP客戶端 234
24.1 初識HttpClient 234
24.2 認識網路資源 235
24.3 實例88:獲取API數據 235
24.3.1 引入vue-axios 235
24.3.2 獲取API數據 235
24.3.3 運行套用 236
24.4 小結 236
24.5 練習題 236
第25章 實戰:基於Vue.js和Node.js的網際網路套用 237
25.1 套用概述 237
25.1.1 “新聞頭條”的核心功能 238
25.1.2 初始化資料庫 238
25.2 模型設計 238
25.2.1 用戶模型設計 238
25.2.2 新聞模型設計 239
25.3 接口設計 239
25.4 許可權管理 239
25.5 小結 240
25.6 練習題 240
第26章 實戰:前端UI客戶端套用 241
26.1 前端UI設計 241
26.1.1 首頁UI設計 241
26.1.2 新聞詳情頁UI設計 242
26.2 實現UI原型 242
26.2.1 初始化news-ui 242
26.2.2 添加Naive UI 243
26.2.3 創建組件 244
26.2.4 實現新聞列表原型設計 245
26.2.5 實現新聞詳情頁原型設計 247
26.3 實現路由器 249
26.3.1 理解路由的概念 249
26.3.2 使用路由外掛程式 249
26.3.3 創建路由 249
26.3.4 如何使用路由 250
26.3.5 修改新聞列表組件 251
26.3.6 新聞詳情組件增加返回按鈕事件處理 252
26.3.7 運行套用 252
26.4 小結 253
26.5 練習題 253
第27章 實戰:後端伺服器套用 254
27.1 初始化後台套用 254
27.1.1 初始化套用目錄 254
27.1.2 初始化套用結構 254
27.1.3 在套用中安裝Express 255
27.1.4 編寫後台Hello World套用 255
27.1.5 運行後台Hello World套用 256
27.2 初步實現登錄認證 256
27.2.1 創建後台管理組件 256
27.2.2 添加組件到路由 256
27.2.3 注入HTTP客戶端 257
27.2.4 客戶端訪問後台接口 257
27.2.5 後台接口設定安全認證 259
27.3 實現新聞編輯器 261
27.3.1 集成md-editor-v3外掛程式 261
27.3.2 導入md-editor-v3組件及樣式 261
27.3.3 編寫編輯器界面 261
27.3.4 後台創建新增新聞接口 264
27.3.5 運行 266
27.4 實現新聞列表展示 266
27.4.1 後台實現新聞列表查詢的接口 266
27.4.2 實現客戶端訪問新聞列表REST接口 267
27.4.3 運行套用 268
27.5 實現新聞詳情展示 269
27.5.1 在後伺服器實現查詢新聞詳情的接口 269
27.5.2 實現客戶端訪問新聞詳情REST接口 270
27.5.3 運行套用 272
27.6 實現認證信息存儲及讀取 273
27.6.1 實現認證信息的存儲 273
27.6.2 實現認證信息的讀取 273
27.6.3 改造認證方法 274
27.6.4 改造對外的接口 274
27.7 小結 276
27.8 練習題 276
第28章 實戰:使用Nginx實現高可用 277
28.1 Nginx概述與安裝 277
28.1.1 Nginx介紹 277
28.1.2 下載、安裝、運行Nginx 278
28.1.3 常用命令 281
28.2 部署前端套用 281
28.2.1 編譯前端套用 281
28.2.2 部署前端套用編譯檔案 282
28.2.3 配置Nginx 282
28.3 實現負載均衡及高可用 283
28.3.1 配置負載均衡 284
28.3.2 負載均衡常用算法 284
28.3.3 實現後台服務的高可用 286
28.3.4 運行 287
28.4 小結 287
28.5 練習題 287
參考文獻 288