內容簡介
本書著眼於實戰開發,以Node.js和Vue.js原生知識和框架實戰為主線,詳細介紹Node.js + Vue.js開發的基礎知識和相應案例實踐。Node.js後端包括console、assert、fs、path、http、url、tcp、udp等核心模組、與MongoDB和MySQL資料庫的連線方法等。Vue.js前端包括模板語法、生命周期、指令系統、樣式綁定和路由等內容。同時,本書著重介紹基於Node.js + Vue.js開發的工具選擇、環境搭建和項目構建等內容,所有案例都提供了詳盡的原始碼及其注釋。
全書共14章,主要內容有Node.js和Vue.js環境搭建、Node.js語法基礎、Node.js包管理機制、Node.js網路開發、Node.js檔案模組使用、Node.js資料庫開發、Vue.js數據、方法與生命周期、Vue.js模板語法、Vue.js指令系統、Vue.js樣式綁定和Vue.js路由,以及兩個Node.js+Vue.js實戰項目。
本書內容豐富、實例典型、實用性強,適合希望學習Node.js+Vue.js全棧開發的初學者,也適合作為高等院校和培訓學校計算機及其相關專業師生的參考書。
作者簡介
王金柱,對JavaScript語言、jQuery框架、Node.js、React等Web前端開發有著獨到的經驗,並精通HTML/XHTML、CSS與PHP等開發語言的套用。有著10多年豐富的IT從業經歷,完成過多家大型央企與上市公司的企業級Web系統平台項目的前端模組開發工作。
圖書目錄
第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在國內的發展 7
1.2 搭建Node.js開發環境 8
1.2.1 Windows 10系統下安裝部署Node.js開發環境 8
1.2.2 測試Node開發環境 13
1.2.3 通過Node運行JavaScript檔案 14
1.3 通過Visual Studio Code開發Node套用 15
1.3.1 通過Visual Studio Code開發管理代碼 15
1.3.2 通過Webpack構建Node應用程式架構 21
1.3.3 通過Visual Studio Code開發調試Node套用 23
第2章 Vue.js基礎介紹與環境搭建 40
2.1 Vue.js基礎 40
2.1.1 Vue.js簡介 40
2.1.2 Vue.js發展歷史 41
2.1.3 Vue.js與MVVM架構模型 41
2.1.4 雙向數據綁定 42
2.1.5 Vue.js特點 42
2.2 Vue.js快速開發環境 43
2.2.1 直接通過<script>引入本地Vue.js 43
2.2.2 通過CDN方式引入Vue.js 44
2.2.3 兼容ES Module的方式 45
2.3 Vue.js腳手架開發環境 45
2.3.1 安裝Vue.js腳手架 45
2.3.2 通過Vue.js腳手架進行快速原型開發測試 47
2.3.3 通過Vue.js腳手架進行打包 48
2.3.4 通過Vue.js腳手架創建套用 50
2.3.5 通過vue-cli結合Webpack創建套用 53
2.3.6 通過Visual Studio Code開發調試Vue代碼 57
第3章 Node.js語法基礎 62
3.1 JavaScript語法 62
3.1.1 變數 62
3.1.2 注釋 65
3.1.3 數據類型 65
3.1.4 函式 66
3.1.5 閉包 68
3.2 命名規範與編程規範 69
3.2.1 命名規範 69
3.2.2 編程規範 71
3.3 Node.js的控制台console 72
3.3.1 console對象下的各種函式 72
3.3.2 console.log()函式 73
3.3.3 console.info()、console.warn()和console.error()函式 73
3.3.4 console.dir()函式 74
3.3.5 console.time()和console.timeEnd()函式 74
3.3.6 console.trace()函式 75
第4章 Node.js中的包管理 76
4.1 NPM介紹 76
4.1.1 NPM常用命令 76
4.1.2 package.json檔案 79
4.2 模組載入原理與載入方式 81
4.2.1 require導入模組 81
4.2.2 exports導出模組 82
4.3 Node.js核心模組 83
4.3.1 http模組——創建HTTP伺服器、客戶端 83
4.3.2 url模組——url地址處理 87
4.3.3 querystring模組——查詢字元串處理 88
4.4 Node.js常用模組 89
4.4.1 util模組——實用工具 89
4.4.2 path模組——路徑處理 90
4.4.3 dns模組 91
第5章 檔案系統 93
5.1 Node.js檔案系統介紹 93
5.1.1 同步和異步 93
5.1.2 fs模組中的類和檔案的基本信息 95
5.1.3 檔案路徑 96
5.2 基本檔案操作 97
5.2.1 打開檔案 97
5.2.2 關閉檔案 98
5.2.3 讀取檔案 99
5.2.4 寫入檔案 100
5.3 其他檔案操作 102
第6章 Node.js網路開發 104
6.1 構建TCP伺服器 104
6.1.1 使用Node.js創建TCP伺服器 104
6.1.2 監聽客戶端的連線 105
6.1.3 查看伺服器監聽的地址 107
6.1.4 連線伺服器的客戶端數量 107
6.1.5 獲取客戶端傳送的數據 108
6.1.6 傳送數據給客戶端 109
6.2 構建TCP客戶端 111
6.2.1 使用Node.js創建TCP客戶端 111
6.2.2 連線TCP伺服器 112
6.2.3 獲取從TCP伺服器傳送的數據 112
6.2.4 向TCP伺服器傳送數據 113
6.3 構建HTTP伺服器 114
6.3.1 創建HTTP伺服器 114
6.3.2 HTTP伺服器的路由控制 115
6.4 利用UDP協定傳輸數據與傳送訊息 117
6.4.1 創建UDP伺服器 117
6.4.2 創建UDP客戶端 120
第7章 Node.js資料庫開發 123
7.1 使用mongoose連線MongoDB 123
7.1.1 MongoDB介紹 123
7.1.2 使用mongoose連線MongoDB 125
7.1.3 使用mongoose操作MongoDB 126
7.2 直接連線MongoDB 131
7.2.1 使用node-mongodb-native連線MongoDB 131
7.2.2 使用node-mongodb-native操作MongoDB 132
7.3 連線MySQL 139
7.3.1 MySQL介紹 139
7.3.2 Node.js連線MySQL 142
7.3.3 Node.js操作MySQL 143
第8章 Vue.js數據、方法與生命周期 146
8.1 Vue.js數據 146
8.1.1 Vue.js數據同步 146
8.1.2 Vue.js數據凍結 150
8.1.3 Vue.js實例property屬性 153
8.2 Vue.js方法 156
8.2.1 觀察屬性方法 156
8.2.2 事件觸發方法 163
8.2.3 自定義事件方法 165
8.3 Vue.js生命周期 169
8.3.1 Vue.js生命周期圖示 169
8.3.2 Vue.js生命周期鉤子 171
第9章 Vue.js模板語法 180
9.1 Vue.js模板語法介紹 180
9.2 Vue.js插值 180
9.2.1 文本插值 181
9.2.2 原始HTML插值 182
9.2.3 使用JavaScript表達式 184
9.3 Vue.js指令 185
9.3.1 Vue指令概述 186
9.3.2 v-if條件表達式指令 186
9.3.3 v-show顯示指令 190
9.3.4 使用<template>元素渲染分組 192
9.3.5 v-for循環指令 195
9.4 Vue.js指令參數 199
9.4.1 Vue.js指令接收參數 199
9.4.2 Vue.js指令接收動態參數 201
9.4.3 通過Vue.js指令動態參數改變元素類型 203
9.5 Vue.js指令修飾符 205
9.5.1 Vue.js指令prevent修飾符 205
9.5.2 Vue.js指令stop修飾符 210
9.5.3 Vue.js指令once修飾符 213
9.6 Vue.js指令縮寫 215
9.7 Vue.js數據雙向綁定 219
9.7.1 v-model指令原理 219
9.7.2 .lazy修飾符 224
9.7.3 .number修飾符 227
9.7.4 .trim修飾符 231
9.8 Vue.js計算屬性 232
第10章 Vue.js樣式綁定 236
10.1 Vue.js綁定HTML Class 236
10.1.1 綁定靜態Class 236
10.1.2 綁定動態Class 238
10.1.3 綁定多個Class 242
10.2 通過數組語法綁定Class 244
10.3 Vue.js綁定HTML Style 246
10.3.1 綁定靜態Style 246
10.3.2 綁定Style對象 247
10.3.3 綁定多重值的Style 249
10.4 通過計算屬性綁定樣式 249
第11章 Vue.js組件基礎 252
11.1 Vue.js全局組件 252
11.2 Vue.js局部組件 254
11.3 通過Prop向子組件傳遞數據 256
第12章 Vue.js路由 261
12.1 安裝vue-router庫的方法 261
12.2 基於vue-router庫開發單頁面套用 262
12.3 基於vue-router庫實現動態路由 264
第13章 項目實戰:基於Vue.js+Node.js實現學生成績管理系統 266
13.1 學生成績管理系統組織架構設計 266
13.2 構建項目套用框架 267
13.3 後台數據結構 269
13.4 功能模組組件設計 269
13.5 功能模組路由設計 275
13.6 測試套用 276
第14章 項目實戰:基於Vue.js+Node.js實現城市信息查詢系統 279
14.1 全國城市信息查詢系統組織架構設計 279
14.2 構建項目套用框架 280
14.3 後台數據獲取方式 280
14.4 功能模組組件設計 281
14.5 功能模組路由設計 284
14.6 測試套用 286