Node.js＋Express + MongoDB＋Vue.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