《Web前端開發實訓案例教程（高級）》是2020年1月電子工業出版社出版的圖書，作者是北京新奧時代科技有限責任公司。
基本介紹
- 書名：Web前端開發實訓案例教程（高級）
- 作者：北京新奧時代科技有限責任公司
- ISBN：9787121378669
- 頁數：452
- 定價：￥82.0
- 出版社：電子工業出版社
- 出版時間：2020年1月
- 開本：16開
內容簡介,目錄,
內容簡介
本書是按照《Web前端開發職業技能等級標準》（高級）編寫的配套實踐教材，教材中所有套用技術專題和項目代碼均在主流瀏覽器中運行通過。本書結合大學計算機相關專業的Web前端開發方向課程體系、企業Web前端開發崗位能力模型和《Web前端開發職業技能等級標準》，形成Web前端開發三位一體知識地圖，以實踐能力為導向，以企業真實套用為目標，遵循企業軟體工程標準和技術，以任務為驅動，對HBuilderX工具、HTML5、CSS3、JavaScript、jQuery、MySQL、AJAX、RESTful API、Node.js、Express、Vue.js、jQuery Mobile、Less、Canvas、SVG、ES6、webpack、性能最佳化等Web前端開發中的重要知識單元，結合實際案例和套用環境進行了分析和設計，並對每一個重要的知識單元進行了詳細介紹，力求使讀者真正掌握這些知識，從而在實際場景中加以套用。
全書分為兩部分：第一部分為實驗，採用技術專題進行知識單元訓練，可以對應課程練習，針對不同的知識單元設計了實驗項目，重點訓練每一個知識單元內容；第二部分為綜合實踐，可以對應課程設計，用“Web聊天室”項目貫穿Web前端開發核心知識，系統訓練核心知識在企業真實項目中的套用。本書適合作為《Web前端開發職業技能等級標準》（高級）的實踐教學參考用書，也適合作為對Web前端開發感興趣的讀者的指導用書。
目錄
第1章 概述 1
1.1 實踐目標 1
1.2 實踐知識地圖 2
1.3 實施安排 13
1.3.1 實驗（技術專題）部分 13
1.3.2 綜合實踐部分 31
第2章 開發工具（HBuilderX工具） 36
2.1 實驗目標 36
2.2 實驗任務 36
2.3 設計思路 36
2.4 實驗實施 37
2.4.1 步驟一：下載並安裝HBuilderX 37
2.4.2 步驟二：HBuilderX
主界面 38
2.4.3 步驟三：創建項目 39
2.4.4 步驟四：編輯html檔案 39
2.4.5 步驟五：運行 40
第3章 ES6（網頁計算器） 42
3.1 實驗目標 42
3.2 實驗任務 43
3.3 設計思路 44
3.4 實驗實施（跟我做） 45
3.4.1 步驟一：創建項目和檔案 45
3.4.2 步驟二：製作HTML頁面 45
3.4.3 步驟三：製作CSS樣式 46
3.4.4 步驟四：編寫網頁計算器類 47
3.4.5 步驟五：編寫乘除
運算邏輯 47
3.4.6 步驟六：編寫加減運算邏輯 48
3.4.7 步驟七：編寫數據返回方法 48
3.4.8 步驟八：頁面互動邏輯 48
3.4.9 步驟九：運行效果 49
第4章 Node.js
（第一個Node.js程式） 52
4.1 實驗目標 52
4.2 實驗任務 53
4.3 設計思路 53
4.4 實驗實施 54
4.4.1 步驟一：Node.js的下載與
安裝 54
4.4.2 步驟二：HBuilderX的下載與
安裝 57
4.4.3 步驟三：Node.js
結構 57
4.4.4 步驟四：創建項目和檔案 58
4.4.5 步驟五：使用NPM包管理
工具 58
4.4.6 步驟六：創建伺服器 58
4.4.7 步驟七：運行效果 59
第5章 Node.js（Web便簽） 60
5.1 實驗目標 60
5.2 實驗任務 61
5.3 設計思路 61
5.4 實驗實施（跟我做） 62
5.4.1 步驟一：創建項目和檔案 62
5.4.2 步驟二：完成頁面顯示 63
5.4.3 步驟三：完成資源判斷 64
5.4.4 步驟四：實現前後端互動 66
5.4.5 步驟五：完成檔案寫入 67
5.4.6 步驟六：完成檔案讀取 67
5.4.7 步驟七：獲取便簽列表 68
5.4.8 步驟八：運行效果 68
第6章 Node.js（文學網） 70
6.1 實驗目標 70
6.2 實驗任務 70
6.3 設計思路 72
6.4 實驗實施（跟我做） 73
6.4.1 步驟一：創建項目和檔案 73
6.4.2 步驟二：準備數據 74
6.4.3 步驟三：實現文學網頁面 74
6.4.4 步驟四：實現請求處理 78
6.4.5 步驟五：實現用戶登錄 79
6.4.6 步驟六：實現退出登錄功能 81
6.4.7 步驟七：實現讀者頁面功能 81
6.4.8 步驟八：實現作者發布文章
功能 85
6.4.9 步驟九： 實現讀者接收文章
內容 86
6.4.10 步驟十：運行效果 89
第7章 Node.js（簡歷網） 91
7.1 實驗目標 91
7.2 實驗任務 92
7.3 設計思路 93
7.4 實驗實施（跟我做） 95
7.4.1 步驟一：安裝Express應用程式生成器 95
7.4.2 步驟二：使用應用程式生成器
創建項目 95
7.4.3 步驟三：Express結構 95
7.4.4 步驟四：構建前端頁面 96
7.4.5 步驟五：安裝和連線MySQL
資料庫 98
7.4.6 步驟六：開發中間件 99
7.4.7 步驟七：實現路由跳轉 99
7.4.8 步驟八：運行效果 101
第8章 JSONP（商品清單） 103
8.1 實驗目標 103
8.2 實驗任務 103
8.3 設計思路 104
8.4 實驗實施（跟我做） 105
8.4.1 步驟一：創建項目和檔案 105
8.4.2 步驟二：創建前端頁面 106
8.4.3 步驟三：創建HTTP
伺服器 107
8.4.4 步驟四：傳送跨域請求 107
8.4.5 步驟五：後台請求處理 108
8.4.6 步驟六：數據寫入頁面 108
8.4.7 步驟七：運行效果 108
第9章 RESTful API（線上答題器） 110
9.1 實驗目標 110
9.2 實驗任務 111
9.3 設計思路 111
9.4 實驗實施（跟我做） 112
9.4.1 步驟一：創建項目和檔案 112
9.4.2 步驟二：設計完成前端頁面 113
9.4.3 步驟三：實現答題功能 115
9.4.4 步驟四：前端功能實現 116
9.4.5 步驟五：運行效果 117
第10章 Vue.js（第一個Vue.js程式） 118
10.1 實驗目標 118
10.2 實驗任務 119
10.3 設計思路 120
10.4 實驗實施（跟我做） 120
10.4.1 步驟一：HBuilderX的下載和
安裝 120
10.4.2 步驟二：Node.js的下載和
安裝 121
10.4.3 步驟三：安裝webpack 121
10.4.4 步驟四：安裝Vue CLI
腳手架 121
10.4.5 步驟五：創建工程 122
10.4.6 步驟六：啟動項目 123
第11章 Vue.js（文章管理） 125
11.1 實驗目標 125
11.2 實驗任務 127
11.3 設計思路 128
11.4 實驗實施（跟我做） 131
11.4.1 步驟一：創建項目和檔案 131
11.4.2 步驟二：配置路由規則 132
11.4.3 步驟三：安裝和引入
Axios 133
11.4.4 步驟四：配置跨域請求
代理 133
11.4.5 步驟五：準備文章列表
數據 133
11.4.6 步驟六：編寫文章管理
頁面 134
11.4.7 步驟七：編寫文章添加
頁面 135
11.4.8 步驟八：準備移動端文章
列表數據 137
11.4.9 步驟九：編寫移動端文章
列表頁面 138
11.4.10 步驟十：Node.js接口 139
11.4.11 步驟十一：請求後台接口 141
11.4.12 步驟十二：運行效果 142
第12章 Vue.js（網頁聊天室） 144
12.1 實驗目標 144
12.2 實驗任務 145
12.3 設計思路 145
12.4 實驗實施（跟我做） 147
12.4.1 步驟一：創建項目和檔案 147
12.4.2 步驟二：配置路由規則 148
12.4.3 步驟三：編寫用戶登錄
頁面 149
12.4.4 步驟四：登錄信息驗證 150
12.4.5 步驟五：準備聊天室數據 150
12.4.6 步驟六：編寫聊天室頁面 151
12.4.7 步驟七：聊天頁面初始化
設定 152
12.4.8 步驟八：編寫對話框組件 152
12.4.9 步驟九：父子組件的傳值 154
12.4.10 步驟十：運行效果 155
第13章 Vue.js（美食網） 156
13.1 實驗目標 156
13.2 實驗任務 157
13.3 設計思路 158
13.4 實驗實施（跟我做） 160
13.4.1 步驟一：創建項目和檔案 160
13.4.2 步驟二：配置路由規則 161
13.4.3 步驟三：Vuex的Store
配置 161
13.4.4 步驟四：創建頁頭組件 162
13.4.5 步驟五：創建頁腳組件 163
13.4.6 步驟六：註冊頁頭和頁腳
全局組件 164
13.4.7 步驟七：準備菜品列表
數據 164
13.4.8 步驟八：創建美食網首頁 164
13.4.9 步驟九：創建購物車頁面 167
第14章 HTML和CSS代碼結構最佳化（小說網首頁） 171
14.1 實驗目標 171
14.2 實驗任務 172
14.3 設計思路 172
14.4 實驗實施（跟我做） 174
14.4.1 步驟一：創建項目和檔案 174
14.4.2 步驟二：構建HTML頁面 174
14.4.3 步驟三：使用CSS樣式美化
頁面 177
14.4.4 步驟四：使用jQuery實現動態透明效果 180
第15章 圖片資源最佳化（雪碧圖） 181
15.1 實驗目標 181
15.2 實驗任務 181
15.3 設計思路 182
15.4 實驗實施（跟我做） 182
15.4.1 步驟一：創建項目和檔案 182
15.4.2 步驟二：製作HTML頁面 183
15.4.3 步驟三：製作雪碧圖 183
15.4.4 步驟四：實現縮小和壓縮 184
15.4.5 步驟五：製作CSS樣式 184
15.4.6 步驟六：運行效果 185
第16章 前端資源載入最佳化
（線上相冊） 186
16.1 實驗目標 186
16.2 實驗任務 186
16.3 設計思路 187
16.4 實驗實施（跟我做） 188
16.4.1 步驟一：創建項目和檔案 188
16.4.2 步驟二：設計完成前端頁面，實現預載入 189
16.4.3 步驟三：前端傳送獲取圖片
請求 189
16.4.4 步驟四：後台處理請求，
返迴響應信息 190
16.4.5 步驟五：運行效果 190
第17章 webpack
（打包項目—文章管理） 191
17.1 實驗目標 191
17.2 實驗任務 192
17.3 設計思路 192
17.4 實驗實施（跟我做） 192
17.4.1 步驟一：使用NPM下載並安裝webpack和webpack-cli 192
17.4.2 步驟二：webpack配置檔案的
配置參數 192
17.4.3 步驟三：打包文章管理
項目 194
17.4.4 步驟四：部署到Express 195
17.4.5 步驟五：運行效果 195
第18章 CSS3 2D和3D
（手機相冊） 197
18.1 實驗目標 197
18.2 實驗任務 197
18.3 設計思路 199
18.4 實驗實施（跟我做） 199
18.4.1 步驟一：創建項目和檔案 199
18.4.2 步驟二：創建移動端的
HTML頁面 200
18.4.3 步驟三：使用flex彈性布局
美化頁面 200
18.4.4 步驟四：製作Y軸的旋轉
效果 201
18.4.5 步驟五：製作點擊放大
效果 201
18.4.6 步驟六：運行效果 202
第19章 Canvas（手機賬單） 203
19.1 實驗目標 203
19.2 實驗任務 204
19.3 設計思路 204
19.4 實驗實施（跟我做） 205
19.4.1 步驟一：創建項目和檔案 205
19.4.2 步驟二：製作HTML頁面 205
19.4.3 步驟三：製作數據 205
19.4.4 步驟四：製作表格 206
19.4.5 步驟五：製作坐標 207
19.4.6 步驟六：填充數據 207
19.4.7 步驟七：運行效果 208
第20章 SVG（SVG繪製圖示） 209
20.1 實驗目標 209
20.2 實驗任務 210
20.3 設計思路 210
20.4 實驗實施（跟我做） 211
20.4.1 步驟一：創建項目和檔案 211
20.4.2 步驟二：SVG圖片檔案的
結構 211
20.4.3 步驟三：繪製SVG圖片 212
20.4.4 步驟四：套用SVG圖片 212
20.4.5 步驟五：運行效果 213
第21章 Less（選單） 214
21.1 實驗目標 214
21.2 實驗任務 214
21.3 設計思路 215
21.4 實驗實施（跟我做） 216
21.4.1 步驟一：創建項目和檔案 216
21.4.2 步驟二：Less的安裝 217
21.4.3 步驟三：繪製HTML頁面 217
21.4.4 步驟四：編寫Less，
美化頁面 218
21.4.5 步驟五：Less編譯 220
21.4.6 步驟六：運行效果 221
第22章 jQuery Mobile
（手機通訊錄） 223
22.1 實驗目標 223
22.2 實驗任務 224
22.3 設計思路 224
22.4 實驗實施（跟我做） 225
22.4.1 步驟一：下載和引入 225
22.4.2 步驟二：準備數據 226
22.4.3 步驟三：下載和引入jQuery Mobile資源檔案 226
22.4.4 步驟四：jQuery Mobile
頁面結構 227
22.4.5 步驟五：創建聯繫人列表
頁面 227
22.4.6 步驟六：創建撥號頁面 230
22.4.7 步驟七：運行效果 231
第23章 綜合實踐（Web聊天室） 233
23.1 項目簡介 233
23.2 實踐目標 233
23.3 需求分析 234
23.4 靜態頁面設計 236
23.4.1 工作任務 236
23.4.2 設計思路 239
23.4.3 實現（跟我做） 242
23.5 資料庫設計和創建 268
23.5.1 工作任務 268
23.5.2 設計思路 268
23.5.3 實現（跟我做） 270
23.6 後端接口設計 274
23.6.1 工作任務 274
23.6.2 設計思路 274
23.6.3 實現（跟我做） 274
23.7 第一階段Node.js：
創建工程 276
23.7.1 工作任務 276
23.7.2 設計思路 277
23.7.3 實現（跟我做） 277
23.8 第一階段Node.js：
歡迎界面 284
23.8.1 工作任務 284
23.8.2 設計思路 285
23.8.3 實現（跟我做） 286
23.9 第二階段Express：
創建Express工程 289
23.9.1 工作任務 289
23.9.2 設計思路 289
23.9.3 實現（跟我做） 290
23.10 第二階段Express：
管理員登錄 294
23.10.1 工作任務 294
23.10.2 設計思路 295
23.10.3 實現（跟我做） 297
23.11 第二階段Express：
顯示用戶列表 302
23.11.1 工作任務 302
23.11.2 設計思路 303
23.11.3 實現（跟我做） 305
23.12 第二階段Express：
獲取用戶信息 310
23.12.1 工作任務 310
23.12.2 設計思路 310
23.12.3 實現（跟我做） 311
23.13 第二階段Express：
修改用戶信息 314
23.13.1 工作任務 314
23.13.2 設計思路 315
23.13.3 實現（跟我做） 316
23.14 第二階段Express：
用戶登錄 323
23.14.1 工作任務 323
23.14.2 設計思路 323
23.14.3 實現（跟我做） 324
23.15 第二階段Express：
顯示聊天列表 326
23.15.1 工作任務 326
23.15.2 設計思路 327
23.15.3 實現（跟我做） 328
23.16 第二階段Express：
獲取聊天信息 334
23.16.1 工作任務 334
23.16.2 設計思路 335
23.16.3 實現（跟我做） 336
23.17 第二階段Express：
保存聊天信息 341
23.17.1 工作任務 341
23.17.2 設計思路 342
23.17.3 實現（跟我做） 343
23.18 第二階段Express：
訊息統計 348
23.18.1 工作任務 348
23.18.2 設計思路 348
23.18.3 實現（跟我做） 349
23.19 第三階段Vue.js：
創建Vue工程 352
23.19.1 工作任務 352
23.19.2 設計思路 353
23.19.3 實現（跟我做） 353
23.20 第三階段Vue.js：
管理員登錄 359
23.20.1 工作任務 359
23.20.2 設計思路 360
23.20.3 實現（跟我做） 362
23.21 第三階段Vue.js：
用戶列表 370
23.21.1 工作任務 370
23.21.2 設計思路 371
23.21.3 實現（跟我做） 373
23.22 第三階段Vue.js：
用戶修改 382
23.22.1 工作任務 382
23.22.2 設計思路 383
23.22.3 實現（跟我做） 384
23.23 第三階段Vue.js：
用戶登錄 392
23.23.1 工作任務 392
23.23.2 設計思路 394
23.23.3 實現（跟我做） 394
23.24 第三階段Vue.js：
聊天列表 398
23.24.1 工作任務 398
23.24.2 設計思路 398
23.24.3 實現（跟我做） 399
23.25 第三階段Vue.js：
訊息 401
23.25.1 工作任務 401
23.25.2 設計思路 402
23.25.3 實現（跟我做） 403
23.26 第四階段移動端開發（jQuery Mobile）：用戶登錄 409
23.26.1 工作任務 409
23.26.2 設計思路 409
23.26.3 實現（跟我做） 411
23.27 第四階段移動端開發（jQuery
Mobile）：聊天列表 415
23.27.1 工作任務 415
23.27.2 設計思路 416
23.27.3 實現（跟我做） 417
23.28 第四階段移動端開發（jQuery Mobile）：訊息 421
23.28.1 工作任務 421
23.28.2 設計思路 422
23.28.3 實現（跟我做） 423
23.29 第四階段移動端開發（jQuery Mobile）：訊息統計 428
23.29.1 工作任務 428
23.29.2 設計思路 429
23.29.3 實現（跟我做） 430
23.30 第五階段性能最佳化：
圖片資源最佳化 433
23.30.1 工作任務 433
23.30.2 設計思路 433
23.30.3 實現（跟我做） 434
23.31 第五階段性能最佳化：
前端資源載入最佳化 436
23.31.1 工作任務 436
23.31.2 設計思路 437
23.31.3 實現（跟我做） 437
23.32 第五階段性能最佳化：
項目打包 438
23.32.1 工作任務 438
23.32.2 設計思路 439
23.32.3 實現（跟我做） 439,
第1章 概述 1
1.1 實踐目標 1
1.2 實踐知識地圖 2
1.3 實施安排 13
1.3.1 實驗（技術專題）部分 13
1.3.2 綜合實踐部分 31
第2章 開發工具（HBuilderX工具） 36
2.1 實驗目標 36
2.2 實驗任務 36
2.3 設計思路 36
2.4 實驗實施 37
2.4.1 步驟一：下載並安裝HBuilderX 37
2.4.2 步驟二：HBuilderX
主界面 38
2.4.3 步驟三：創建項目 39
2.4.4 步驟四：編輯html檔案 39
2.4.5 步驟五：運行 40
第3章 ES6（網頁計算器） 42
3.1 實驗目標 42
3.2 實驗任務 43
3.3 設計思路 44
3.4 實驗實施（跟我做） 45
3.4.1 步驟一：創建項目和檔案 45
3.4.2 步驟二：製作HTML頁面 45
3.4.3 步驟三：製作CSS樣式 46
3.4.4 步驟四：編寫網頁計算器類 47
3.4.5 步驟五：編寫乘除
運算邏輯 47
3.4.6 步驟六：編寫加減運算邏輯 48
3.4.7 步驟七：編寫數據返回方法 48
3.4.8 步驟八：頁面互動邏輯 48
3.4.9 步驟九：運行效果 49
第4章 Node.js
（第一個Node.js程式） 52
4.1 實驗目標 52
4.2 實驗任務 53
4.3 設計思路 53
4.4 實驗實施 54
4.4.1 步驟一：Node.js的下載與
安裝 54
4.4.2 步驟二：HBuilderX的下載與
安裝 57
4.4.3 步驟三：Node.js
結構 57
4.4.4 步驟四：創建項目和檔案 58
4.4.5 步驟五：使用NPM包管理
工具 58
4.4.6 步驟六：創建伺服器 58
4.4.7 步驟七：運行效果 59
第5章 Node.js（Web便簽） 60
5.1 實驗目標 60
5.2 實驗任務 61
5.3 設計思路 61
5.4 實驗實施（跟我做） 62
5.4.1 步驟一：創建項目和檔案 62
5.4.2 步驟二：完成頁面顯示 63
5.4.3 步驟三：完成資源判斷 64
5.4.4 步驟四：實現前後端互動 66
5.4.5 步驟五：完成檔案寫入 67
5.4.6 步驟六：完成檔案讀取 67
5.4.7 步驟七：獲取便簽列表 68
5.4.8 步驟八：運行效果 68
第6章 Node.js（文學網） 70
6.1 實驗目標 70
6.2 實驗任務 70
6.3 設計思路 72
6.4 實驗實施（跟我做） 73
6.4.1 步驟一：創建項目和檔案 73
6.4.2 步驟二：準備數據 74
6.4.3 步驟三：實現文學網頁面 74
6.4.4 步驟四：實現請求處理 78
6.4.5 步驟五：實現用戶登錄 79
6.4.6 步驟六：實現退出登錄功能 81
6.4.7 步驟七：實現讀者頁面功能 81
6.4.8 步驟八：實現作者發布文章
功能 85
6.4.9 步驟九： 實現讀者接收文章
內容 86
6.4.10 步驟十：運行效果 89
第7章 Node.js（簡歷網） 91
7.1 實驗目標 91
7.2 實驗任務 92
7.3 設計思路 93
7.4 實驗實施（跟我做） 95
7.4.1 步驟一：安裝Express應用程式生成器 95
7.4.2 步驟二：使用應用程式生成器
創建項目 95
7.4.3 步驟三：Express結構 95
7.4.4 步驟四：構建前端頁面 96
7.4.5 步驟五：安裝和連線MySQL
資料庫 98
7.4.6 步驟六：開發中間件 99
7.4.7 步驟七：實現路由跳轉 99
7.4.8 步驟八：運行效果 101
第8章 JSONP（商品清單） 103
8.1 實驗目標 103
8.2 實驗任務 103
8.3 設計思路 104
8.4 實驗實施（跟我做） 105
8.4.1 步驟一：創建項目和檔案 105
8.4.2 步驟二：創建前端頁面 106
8.4.3 步驟三：創建HTTP
伺服器 107
8.4.4 步驟四：傳送跨域請求 107
8.4.5 步驟五：後台請求處理 108
8.4.6 步驟六：數據寫入頁面 108
8.4.7 步驟七：運行效果 108
第9章 RESTful API（線上答題器） 110
9.1 實驗目標 110
9.2 實驗任務 111
9.3 設計思路 111
9.4 實驗實施（跟我做） 112
9.4.1 步驟一：創建項目和檔案 112
9.4.2 步驟二：設計完成前端頁面 113
9.4.3 步驟三：實現答題功能 115
9.4.4 步驟四：前端功能實現 116
9.4.5 步驟五：運行效果 117
第10章 Vue.js（第一個Vue.js程式） 118
10.1 實驗目標 118
10.2 實驗任務 119
10.3 設計思路 120
10.4 實驗實施（跟我做） 120
10.4.1 步驟一：HBuilderX的下載和
安裝 120
10.4.2 步驟二：Node.js的下載和
安裝 121
10.4.3 步驟三：安裝webpack 121
10.4.4 步驟四：安裝Vue CLI
腳手架 121
10.4.5 步驟五：創建工程 122
10.4.6 步驟六：啟動項目 123
第11章 Vue.js（文章管理） 125
11.1 實驗目標 125
11.2 實驗任務 127
11.3 設計思路 128
11.4 實驗實施（跟我做） 131
11.4.1 步驟一：創建項目和檔案 131
11.4.2 步驟二：配置路由規則 132
11.4.3 步驟三：安裝和引入
Axios 133
11.4.4 步驟四：配置跨域請求
代理 133
11.4.5 步驟五：準備文章列表
數據 133
11.4.6 步驟六：編寫文章管理
頁面 134
11.4.7 步驟七：編寫文章添加
頁面 135
11.4.8 步驟八：準備移動端文章
列表數據 137
11.4.9 步驟九：編寫移動端文章
列表頁面 138
11.4.10 步驟十：Node.js接口 139
11.4.11 步驟十一：請求後台接口 141
11.4.12 步驟十二：運行效果 142
第12章 Vue.js（網頁聊天室） 144
12.1 實驗目標 144
12.2 實驗任務 145
12.3 設計思路 145
12.4 實驗實施（跟我做） 147
12.4.1 步驟一：創建項目和檔案 147
12.4.2 步驟二：配置路由規則 148
12.4.3 步驟三：編寫用戶登錄
頁面 149
12.4.4 步驟四：登錄信息驗證 150
12.4.5 步驟五：準備聊天室數據 150
12.4.6 步驟六：編寫聊天室頁面 151
12.4.7 步驟七：聊天頁面初始化
設定 152
12.4.8 步驟八：編寫對話框組件 152
12.4.9 步驟九：父子組件的傳值 154
12.4.10 步驟十：運行效果 155
第13章 Vue.js（美食網） 156
13.1 實驗目標 156
13.2 實驗任務 157
13.3 設計思路 158
13.4 實驗實施（跟我做） 160
13.4.1 步驟一：創建項目和檔案 160
13.4.2 步驟二：配置路由規則 161
13.4.3 步驟三：Vuex的Store
配置 161
13.4.4 步驟四：創建頁頭組件 162
13.4.5 步驟五：創建頁腳組件 163
13.4.6 步驟六：註冊頁頭和頁腳
全局組件 164
13.4.7 步驟七：準備菜品列表
數據 164
13.4.8 步驟八：創建美食網首頁 164
13.4.9 步驟九：創建購物車頁面 167
第14章 HTML和CSS代碼結構最佳化（小說網首頁） 171
14.1 實驗目標 171
14.2 實驗任務 172
14.3 設計思路 172
14.4 實驗實施（跟我做） 174
14.4.1 步驟一：創建項目和檔案 174
14.4.2 步驟二：構建HTML頁面 174
14.4.3 步驟三：使用CSS樣式美化
頁面 177
14.4.4 步驟四：使用jQuery實現動態透明效果 180
第15章 圖片資源最佳化（雪碧圖） 181
15.1 實驗目標 181
15.2 實驗任務 181
15.3 設計思路 182
15.4 實驗實施（跟我做） 182
15.4.1 步驟一：創建項目和檔案 182
15.4.2 步驟二：製作HTML頁面 183
15.4.3 步驟三：製作雪碧圖 183
15.4.4 步驟四：實現縮小和壓縮 184
15.4.5 步驟五：製作CSS樣式 184
15.4.6 步驟六：運行效果 185
第16章 前端資源載入最佳化
（線上相冊） 186
16.1 實驗目標 186
16.2 實驗任務 186
16.3 設計思路 187
16.4 實驗實施（跟我做） 188
16.4.1 步驟一：創建項目和檔案 188
16.4.2 步驟二：設計完成前端頁面，實現預載入 189
16.4.3 步驟三：前端傳送獲取圖片
請求 189
16.4.4 步驟四：後台處理請求，
返迴響應信息 190
16.4.5 步驟五：運行效果 190
第17章 webpack
（打包項目—文章管理） 191
17.1 實驗目標 191
17.2 實驗任務 192
17.3 設計思路 192
17.4 實驗實施（跟我做） 192
17.4.1 步驟一：使用NPM下載並安裝webpack和webpack-cli 192
17.4.2 步驟二：webpack配置檔案的
配置參數 192
17.4.3 步驟三：打包文章管理
項目 194
17.4.4 步驟四：部署到Express 195
17.4.5 步驟五：運行效果 195
第18章 CSS3 2D和3D
（手機相冊） 197
18.1 實驗目標 197
18.2 實驗任務 197
18.3 設計思路 199
18.4 實驗實施（跟我做） 199
18.4.1 步驟一：創建項目和檔案 199
18.4.2 步驟二：創建移動端的
HTML頁面 200
18.4.3 步驟三：使用flex彈性布局
美化頁面 200
18.4.4 步驟四：製作Y軸的旋轉
效果 201
18.4.5 步驟五：製作點擊放大
效果 201
18.4.6 步驟六：運行效果 202
第19章 Canvas（手機賬單） 203
19.1 實驗目標 203
19.2 實驗任務 204
19.3 設計思路 204
19.4 實驗實施（跟我做） 205
19.4.1 步驟一：創建項目和檔案 205
19.4.2 步驟二：製作HTML頁面 205
19.4.3 步驟三：製作數據 205
19.4.4 步驟四：製作表格 206
19.4.5 步驟五：製作坐標 207
19.4.6 步驟六：填充數據 207
19.4.7 步驟七：運行效果 208
第20章 SVG（SVG繪製圖示） 209
20.1 實驗目標 209
20.2 實驗任務 210
20.3 設計思路 210
20.4 實驗實施（跟我做） 211
20.4.1 步驟一：創建項目和檔案 211
20.4.2 步驟二：SVG圖片檔案的
結構 211
20.4.3 步驟三：繪製SVG圖片 212
20.4.4 步驟四：套用SVG圖片 212
20.4.5 步驟五：運行效果 213
第21章 Less（選單） 214
21.1 實驗目標 214
21.2 實驗任務 214
21.3 設計思路 215
21.4 實驗實施（跟我做） 216
21.4.1 步驟一：創建項目和檔案 216
21.4.2 步驟二：Less的安裝 217
21.4.3 步驟三：繪製HTML頁面 217
21.4.4 步驟四：編寫Less，
美化頁面 218
21.4.5 步驟五：Less編譯 220
21.4.6 步驟六：運行效果 221
第22章 jQuery Mobile
（手機通訊錄） 223
22.1 實驗目標 223
22.2 實驗任務 224
22.3 設計思路 224
22.4 實驗實施（跟我做） 225
22.4.1 步驟一：下載和引入 225
22.4.2 步驟二：準備數據 226
22.4.3 步驟三：下載和引入jQuery Mobile資源檔案 226
22.4.4 步驟四：jQuery Mobile
頁面結構 227
22.4.5 步驟五：創建聯繫人列表
頁面 227
22.4.6 步驟六：創建撥號頁面 230
22.4.7 步驟七：運行效果 231
第23章 綜合實踐（Web聊天室） 233
23.1 項目簡介 233
23.2 實踐目標 233
23.3 需求分析 234
23.4 靜態頁面設計 236
23.4.1 工作任務 236
23.4.2 設計思路 239
23.4.3 實現（跟我做） 242
23.5 資料庫設計和創建 268
23.5.1 工作任務 268
23.5.2 設計思路 268
23.5.3 實現（跟我做） 270
23.6 後端接口設計 274
23.6.1 工作任務 274
23.6.2 設計思路 274
23.6.3 實現（跟我做） 274
23.7 第一階段Node.js：
創建工程 276
23.7.1 工作任務 276
23.7.2 設計思路 277
23.7.3 實現（跟我做） 277
23.8 第一階段Node.js：
歡迎界面 284
23.8.1 工作任務 284
23.8.2 設計思路 285
23.8.3 實現（跟我做） 286
23.9 第二階段Express：
創建Express工程 289
23.9.1 工作任務 289
23.9.2 設計思路 289
23.9.3 實現（跟我做） 290
23.10 第二階段Express：
管理員登錄 294
23.10.1 工作任務 294
23.10.2 設計思路 295
23.10.3 實現（跟我做） 297
23.11 第二階段Express：
顯示用戶列表 302
23.11.1 工作任務 302
23.11.2 設計思路 303
23.11.3 實現（跟我做） 305
23.12 第二階段Express：
獲取用戶信息 310
23.12.1 工作任務 310
23.12.2 設計思路 310
23.12.3 實現（跟我做） 311
23.13 第二階段Express：
修改用戶信息 314
23.13.1 工作任務 314
23.13.2 設計思路 315
23.13.3 實現（跟我做） 316
23.14 第二階段Express：
用戶登錄 323
23.14.1 工作任務 323
23.14.2 設計思路 323
23.14.3 實現（跟我做） 324
23.15 第二階段Express：
顯示聊天列表 326
23.15.1 工作任務 326
23.15.2 設計思路 327
23.15.3 實現（跟我做） 328
23.16 第二階段Express：
獲取聊天信息 334
23.16.1 工作任務 334
23.16.2 設計思路 335
23.16.3 實現（跟我做） 336
23.17 第二階段Express：
保存聊天信息 341
23.17.1 工作任務 341
23.17.2 設計思路 342
23.17.3 實現（跟我做） 343
23.18 第二階段Express：
訊息統計 348
23.18.1 工作任務 348
23.18.2 設計思路 348
23.18.3 實現（跟我做） 349
23.19 第三階段Vue.js：
創建Vue工程 352
23.19.1 工作任務 352
23.19.2 設計思路 353
23.19.3 實現（跟我做） 353
23.20 第三階段Vue.js：
管理員登錄 359
23.20.1 工作任務 359
23.20.2 設計思路 360
23.20.3 實現（跟我做） 362
23.21 第三階段Vue.js：
用戶列表 370
23.21.1 工作任務 370
23.21.2 設計思路 371
23.21.3 實現（跟我做） 373
23.22 第三階段Vue.js：
用戶修改 382
23.22.1 工作任務 382
23.22.2 設計思路 383
23.22.3 實現（跟我做） 384
23.23 第三階段Vue.js：
用戶登錄 392
23.23.1 工作任務 392
23.23.2 設計思路 394
23.23.3 實現（跟我做） 394
23.24 第三階段Vue.js：
聊天列表 398
23.24.1 工作任務 398
23.24.2 設計思路 398
23.24.3 實現（跟我做） 399
23.25 第三階段Vue.js：
訊息 401
23.25.1 工作任務 401
23.25.2 設計思路 402
23.25.3 實現（跟我做） 403
23.26 第四階段移動端開發（jQuery Mobile）：用戶登錄 409
23.26.1 工作任務 409
23.26.2 設計思路 409
23.26.3 實現（跟我做） 411
23.27 第四階段移動端開發（jQuery
Mobile）：聊天列表 415
23.27.1 工作任務 415
23.27.2 設計思路 416
23.27.3 實現（跟我做） 417
23.28 第四階段移動端開發（jQuery Mobile）：訊息 421
23.28.1 工作任務 421
23.28.2 設計思路 422
23.28.3 實現（跟我做） 423
23.29 第四階段移動端開發（jQuery Mobile）：訊息統計 428
23.29.1 工作任務 428
23.29.2 設計思路 429
23.29.3 實現（跟我做） 430
23.30 第五階段性能最佳化：
圖片資源最佳化 433
23.30.1 工作任務 433
23.30.2 設計思路 433
23.30.3 實現（跟我做） 434
23.31 第五階段性能最佳化：
前端資源載入最佳化 436
23.31.1 工作任務 436
23.31.2 設計思路 437
23.31.3 實現（跟我做） 437
23.32 第五階段性能最佳化：
項目打包 438
23.32.1 工作任務 438
23.32.2 設計思路 439
23.32.3 實現（跟我做） 439"
