Vue.js+Node,js全端開發實戰(第2版)

目    錄

第1章  Node.js基礎與環境搭建 1

1.1  Node.js基礎 1

1.1.1  Node.js簡介 1

1.1.2  Node.js的發展歷史 2

1.1.3  Node.js組織架構 3

1.1.4  Node.js的特點 4

1.1.5  Node.js應用場景 6

1.1.6  Node.js在國內的發展 6

1.2  搭建Node.js開發環境 7

1.2.1  Windows 10系統下安裝部署Node.js開發環境 7

1.2.2  測試Node.js開發環境 10

1.2.3  通過Node.js運行JavaScript文件 12

1.3  通過Visual Studio Code開發Node應用 12

1.3.1  通過Visual Studio Code開發和管理代碼 13

1.3.2  通過Webpack構建Node應用程序架構 18

1.3.3  通過Visual Studio Code開發調試Node應用 20

第2章  Vue.js基礎介紹與環境搭建 33

2.1  Vue.js基礎 33

2.1.1  Vue.js簡介 33

2.1.2  Vue.js發展歷史 34

2.1.3  Vue.js與MVVM架構模型 34

2.1.4  雙向數據綁定 35

2.1.5  Vue.js特點 35

2.2  Vue.js快速開發環境 35

2.2.1  直接通過<script>引入本地Vue.js 36

2.2.2  通過CDN方式引入Vue.js 37

2.2.3  兼容ES Module的方式 38

2.3  Vue.js腳手架開發環境 40

2.3.1  安裝Vue.js腳手架並創建Vue項目 40

2.3.2  通過Vue.js腳手架啟動開發服務器 41

2.3.3  Vue.js腳手架項目初探 42

2.3.4  通過Vue.js腳手架進行發布 44

2.3.5  通過Visual Studio Code開發調試Vue.js項目 46

第3章  Node.js語法基礎 52

3.1  JavaScript語法 52

3.1.1  變量 52

3.1.2  註釋 54

3.1.3  數據類型 55

3.1.4  函數 56

3.1.5  閉包 58

3.2  命名規範與編程規範 59

3.2.1  命名規範 59

3.2.2  編程規範 60

3.3  Node.js的控制台console 61

3.3.1  console對象下的各種方法 61

3.3.2  console.log()方法 62

3.3.3  console.info()、console.warn()和console.error()方法 63

3.3.4  console.dir()方法 63

3.3.5  console.time()和console.timeEnd()方法 64

3.3.6  console.trace()方法 65

第4章  Node.js中的包管理 66

4.1  npm介紹 66

4.1.1  npm常用命令 66

4.1.2  package.json文件 69

4.2  模塊加載原理與加載方式 70

4.2.1  require導入模塊 70

4.2.2  exports導出模塊 71

4.3  Node.js核心模塊 72

4.3.1  http模塊—創建HTTP服務器、客戶端 72

4.3.2  url模塊——URL地址處理 76

4.3.3  querystring模塊——查詢字符串處理 77

4.4  Node.js常用模塊 78

4.4.1  util模塊——實用工具 78

4.4.2  path模塊——路徑處理 79

4.4.3  dns模塊 80

第5章  Node.js文件操作 82

5.1  Node.js文件系統介紹 82

5.1.1  同步和異步 82

5.1.2  fs模塊中的類和文件的基本信息 84

5.1.3  文件路徑 85

5.2  基本文件操作 86

5.2.1  打開文件 86

5.2.2  關閉文件 87

5.2.3  讀取文件 88

5.2.4  寫入文件 89

5.3  其他文件操作 90

第6章  Node.js網絡開發 93

6.1  構建TCP服務器 93

6.1.1  使用Node.js創建TCP服務器 93

6.1.2  監聽客戶端的連接 94

6.1.3  查看服務器監聽的地址 96

6.1.4  連接服務器的客戶端數量 97

6.1.5  獲取客戶端發送的數據 97

6.1.6  發送數據給客戶端 98

6.2  構建TCP客戶端 100

6.2.1  使用Node.js創建TCP客戶端 100

6.2.2  連接TCP服務器 101

6.2.3  獲取從TCP服務器發送的數據 101

6.2.4  向TCP服務器發送數據 102

6.3  構建HTTP服務器 103

6.3.1  創建HTTP服務器 103

6.3.2  HTTP服務器的路由控制 104

6.4  利用UDP協議傳輸數據與發送消息 106

6.4.1  創建UDP服務器 106

6.4.2  創建UDP客戶端 109

 

第7章  Node.js數據庫開發 111

7.1  使用mongoose連接MongoDB 111

7.1.1  MongoDB介紹 111

7.1.2  連接MongoDB 113

7.1.3  操作MongoDB 114

7.2  直接連接MongoDB 119

7.2.1  使用node-mongodb-native連接MongoDB 119

7.2.2  使用node-mongodb-native操作MongoDB 120

7.3  連接MySQL 127

7.3.1  MySQL介紹 127

7.3.2  Node.js連接MySQL 130

7.3.3  Node.js操作MySQL 131

第8章  Vue.js數據、方法與生命周期 134

8.1  Vue.js數據 134

8.1.1  Vue.js數據同步 134

8.1.2  Vue.js數據凍結 138

8.1.3  Vue.js實例property屬性 141

8.2  Vue.js方法 143

8.2.1  觀察屬性方法 144

8.2.2  事件觸發方法 150

8.2.3  自定義事件方法 151

8.3  Vue.js生命周期 155

8.3.1  Vue.js生命周期圖示 155

8.3.2  Vue.js生命周期鉤子 157

第9章  Vue.js模板語法 166

9.1  Vue.js模板語法介紹 166

9.2  Vue.js插值 166

9.2.1  文本插值 167

9.2.2  原始HTML插值 168

9.2.3  使用JavaScript表達式 169

9.3  Vue.js指令 171

9.3.1  Vue指令概述 171

9.3.2  v-if條件表達式指令 172

9.3.3  v-show顯示指令 175

9.3.4  使用<template>元素渲染分組 177

9.3.5  v-for循環指令 180

9.4  Vue.js指令參數 183

9.4.1  Vue.js指令接收參數 183

9.4.2  Vue.js指令接收動態參數 184

9.4.3  通過Vue.js指令動態參數改變元素類型 187

9.5  Vue.js指令修飾符 189

9.5.1  Vue.js指令prevent修飾符 189

9.5.2  Vue.js指令stop修飾符 193

9.5.3  Vue.js指令once修飾符 195

9.6  Vue.js指令縮寫 197

9.7  Vue.js數據雙向綁定 201

9.7.1  v-model指令原理 201

9.7.2  .lazy修飾符 205

9.7.3  .number修飾符 207

9.7.4  .trim修飾符 210

9.8  Vue.js計算屬性 212

第10章  Vue.js樣式綁定 215

10.1  Vue.js綁定HTML Class 215

10.1.1  綁定靜態Class 215

10.1.2  綁定動態Class 217

10.1.3  綁定多個Class 220

10.2  通過數組語法綁定Class 222

10.3  Vue.js綁定HTML Style 224

10.3.1  綁定靜態Style 224

10.3.2  綁定Style對象 226

10.3.3  綁定多重值的Style 227

10.4  通過計算屬性綁定樣式 227

第11章  Vue.js組件基礎 230

11.1  Vue.js全局組件 230

11.2  Vue.js局部組件 232

11.3  通過Prop向子組件傳遞數據 234

第12章  Vue.js路由 238

12.1  安裝vue-router庫的方法 238

12.2  基於vue-router庫開發單頁面應用 239

12.3  基於vue-router庫實現動態路由 240

第13章  項目實戰：基於Vue.js+Node.js+MySQL實現學生成績管理系統 243

13.1  學生成績管理系統組織架構設計 243

13.2  構建項目應用框架 244

13.3  後台數據結構 245

13.4  功能模塊組件設計 246

13.5  功能模塊路由設計 256

13.6  功能模塊後台服務設計 257

13.7  測試學生信息管理系統 261

第14章  項目實戰：基於Vue.js+Node.js+jsonp實現城市信息查詢系統 264

14.1  全國城市信息查詢系統組織架構設計 264

14.2  構建項目應用框架 265

14.3  後台數據獲取方式 265

14.4  功能模塊組件設計 266

14.5  功能模塊路由設計 270

14.6  測試全國城市信息查詢系統 271