本書是按照《Web前端開發(fā)職業(yè)技能等級標準》（高級）編寫的配套實踐教材，教材中所有應用技術專題和項目代碼均在主流瀏覽器中運行通過。本書結合大學計算機相關專業(yè)的Web前端開發(fā)方向課程體系、企業(yè)Web前端開發(fā)崗位能力模型和《Web前端開發(fā)職業(yè)技能等級標準》，形成Web前端開發(fā)三位一體知識地圖，以實踐能力為導向，以企業(yè)真實應用為目標，遵循企業(yè)軟件工程標準和技術，以任務為驅動，對HBuilderX工具、HTML5、CSS3、JavaScript、jQuery、MySQL、AJAX、RESTful API、Node.js、Express、Vue.js、jQuery Mobile、Less、Canvas、SVG、ES6、webpack、性能優(yōu)化等Web前端開發(fā)中的重要知識單元，結合實際案例和應用環(huán)境進行了分析和設計，并對每一個重要的知識單元進行了詳細介紹，力求使讀者真正掌握這些知識，從而在實際場景中加以應用。全書分為兩部分：第一部分為實驗，采用技術專題進行知識單元訓練，可以對應課程練習，針對不同的知識單元設計了實驗項目，重點訓練每一個知識單元內容；第二部分為綜合實踐，可以對應課程設計，用“Web聊天室”項目貫穿Web前端開發(fā)核心知識，系統(tǒng)訓練核心知識在企業(yè)真實項目中的應用。本書適合作為《Web前端開發(fā)職業(yè)技能等級標準》（高級）的實踐教學參考用書，也適合作為對Web前端開發(fā)感興趣的讀者的指導用書。
北京新奧時代科技有限責任公司于2006年04月12日在石景山分局登記成立。公司經營范圍包括技術開發(fā)、技術推廣、技術轉讓、技術咨詢、技術服務等。
目 錄
第1章 概述 1
1.1 實踐目標 1
1.2 實踐知識地圖 2
1.3 實施安排 13
1.3.1 實驗（技術專題）部分 13
1.3.2 綜合實踐部分 31
第2章 開發(fā)工具（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 步驟三：創(chuàng)建項目 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 步驟一：創(chuàng)建項目和文件 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 步驟四：創(chuàng)建項目和文件 58
4.4.5 步驟五：使用NPM包管理
工具 58
4.4.6 步驟六：創(chuàng)建服務器 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 步驟一：創(chuàng)建項目和文件 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 步驟一：創(chuàng)建項目和文件 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 步驟八：實現作者發(fā)布文章
功能 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 步驟二：使用應用程序生成器
創(chuàng)建項目 95
7.4.3 步驟三：Express目錄結構 95
7.4.4 步驟四：構建前端頁面 96
7.4.5 步驟五：安裝和連接MySQL
數據庫 98
7.4.6 步驟六：開發(fā)中間件 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 步驟一：創(chuàng)建項目和文件 105
8.4.2 步驟二：創(chuàng)建前端頁面 106
8.4.3 步驟三：創(chuàng)建HTTP
服務器 107
8.4.4 步驟四：發(fā)送跨域請求 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 步驟一：創(chuàng)建項目和文件 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 步驟五：創(chuàng)建工程 122
10.4.6 步驟六：啟動項目 123
第11章 Vue.js（文章管理） 125
11.1 實驗目標 125
11.2 實驗任務 127
11.3 設計思路 128
11.4 實驗實施（跟我做） 131
11.4.1 步驟一：創(chuàng)建項目和文件 131
11.4.2 步驟二：配置路由規(guī)則 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 步驟一：創(chuàng)建項目和文件 147
12.4.2 步驟二：配置路由規(guī)則 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 步驟一：創(chuàng)建項目和文件 160
13.4.2 步驟二：配置路由規(guī)則 161
13.4.3 步驟三：Vuex的Store
配置 161
13.4.4 步驟四：創(chuàng)建頁頭組件 162
13.4.5 步驟五：創(chuàng)建頁腳組件 163
13.4.6 步驟六：注冊頁頭和頁腳
全局組件 164
13.4.7 步驟七：準備菜品列表
數據 164
13.4.8 步驟八：創(chuàng)建美食網首頁 164
13.4.9 步驟九：創(chuàng)建購物車頁面 167
第14章 HTML和CSS代碼結構優(yōu)化（小說網首頁） 171
14.1 實驗目標 171
14.2 實驗任務 172
14.3 設計思路 172
14.4 實驗實施（跟我做） 174
14.4.1 步驟一：創(chuàng)建項目和文件 174
14.4.2 步驟二：構建HTML頁面 174
14.4.3 步驟三：使用CSS樣式美化
頁面 177
14.4.4 步驟四：使用jQuery實現動態(tài)透明效果 180
第15章 圖片資源優(yōu)化（雪碧圖） 181
15.1 實驗目標 181
15.2 實驗任務 181
15.3 設計思路 182
15.4 實驗實施（跟我做） 182
15.4.1 步驟一：創(chuàng)建項目和文件 182
15.4.2 步驟二：制作HTML頁面 183
15.4.3 步驟三：制作雪碧圖 183
15.4.4 步驟四：實現縮小和壓縮 184
15.4.5 步驟五：制作CSS樣式 184
15.4.6 步驟六：運行效果 185
第16章 前端資源加載優(yōu)化
（在線相冊） 186
16.1 實驗目標 186
16.2 實驗任務 186
16.3 設計思路 187
16.4 實驗實施（跟我做） 188
16.4.1 步驟一：創(chuàng)建項目和文件 188
16.4.2 步驟二：設計完成前端頁面，實現預加載 189
16.4.3 步驟三：前端發(fā)送獲取圖片
請求 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 步驟一：創(chuàng)建項目和文件 199
18.4.2 步驟二：創(chuàng)建移動端的
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 步驟一：創(chuàng)建項目和文件 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 步驟一：創(chuàng)建項目和文件 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 步驟一：創(chuàng)建項目和文件 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 步驟五：創(chuàng)建聯系人列表
頁面 227
22.4.6 步驟六：創(chuàng)建撥號頁面 230
22.4.7 步驟七：運行效果 231
第23章 綜合實踐（Web聊天室） 233
23.1 項目簡介 233
23.2 實踐目標 233
23.3 需求分析 234
23.4 靜態(tài)頁面設計 236
23.4.1 工作任務 236
23.4.2 設計思路 239
23.4.3 實現（跟我做） 242
23.5 數據庫設計和創(chuàng)建 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：
創(chuàng)建工程 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：
創(chuàng)建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：
消息統(tǒng)計 348
23.18.1 工作任務 348
23.18.2 設計思路 348
23.18.3 實現（跟我做） 349
23.19 第三階段Vue.js：
創(chuàng)建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 第四階段移動端開發(fā)（jQuery Mobile）：用戶登錄 409
23.26.1 工作任務 409
23.26.2 設計思路 409
23.26.3 實現（跟我做） 411
23.27 第四階段移動端開發(fā)（jQuery
Mobile）：聊天列表 415
23.27.1 工作任務 415
23.27.2 設計思路 416
23.27.3 實現（跟我做） 417
23.28 第四階段移動端開發(fā)（jQuery Mobile）：消息 421
23.28.1 工作任務 421
23.28.2 設計思路 422
23.28.3 實現（跟我做） 423
23.29 第四階段移動端開發(fā)（jQuery Mobile）：消息統(tǒng)計 428
23.29.1 工作任務 428
23.29.2 設計思路 429
23.29.3 實現（跟我做） 430
23.30 第五階段性能優(yōu)化：
圖片資源優(yōu)化 433
23.30.1 工作任務 433
23.30.2 設計思路 433
23.30.3 實現（跟我做） 434
23.31 第五階段性能優(yōu)化：
前端資源加載優(yōu)化 436
23.31.1 工作任務 436
23.31.2 設計思路 437
23.31.3 實現（跟我做） 437
23.32 第五階段性能優(yōu)化：
項目打包 438
23.32.1 工作任務 438
23.32.2 設計思路 439
23.32.3 實現（跟我做） 439
書單推薦
