Node.js+Express+MongoDB+Vue.js全棧開發(fā)實(shí)戰(zhàn)

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