本書是按照《Web前端開發職業技能等級標準2.0版》（高級）編寫的配套實踐教程，書中涉及的項目代碼使用國產的HBuilder X開發工具編譯，并且均可在主流瀏覽器中運行。本書將中、高職業院校和應用型本科院校的計算機應用、軟件技術等相關專業開設的Web前端開發方向的課程體系，與企業Web前端開發崗位能力模型相結合，依據《Web前端開發職業技能等級標準2.0版》（高級）技能要求，形成三位一體的Web前端開發技術知識地圖。案例編排以實踐能力為導向，以開發企業真實應用為目標，遵循企業軟件工程標準和技術開發要求，采用任務驅動的方式，將網頁圖形繪制、CSS預處理語言、ES9編程、Vue.js、Node.js、網站架構設計、網站性能優化等重要知識單元，充分融入實際案例和應用環境中。本書對《Web前端開發職業技能等級標準2.0版》（高級）要求的重要知識單元都進行了詳細的描述，通過案例教學，使讀者能夠很好地掌握Web前端開發的相關技術。本書針對不同知識單元設計了多個技術專題，使學員通過重點訓練，掌握每個知識單元的核心內容。本書適合作為高級Web前端開發職業技能等級證書考核實踐教學的參考用書，也可以作為Web前端開發工作者的學習指導用書。
北京新奧時代科技有限責任公司于2006年04月12日在石景山分局登記成立。公司經營范圍包括技術開發、技術推廣、技術轉讓、技術咨詢、技術服務等。
目 錄
第1章 實踐概述 1
1.1 實踐目標 1
1.2 實踐知識地圖 1
1.3 實施安排 7
第2章 開發環境：HBuilder X開發工具 9
2.1 實驗目標 9
2.2 實驗任務 9
2.3 設計思路 9
2.4 實驗實施（跟我做） 10
2.4.1 步驟一：下載并安裝
HBuilder X 10
2.4.2 步驟二：HBuilder X主界面 11
2.4.3 步驟三：創建項目 12
2.4.4 步驟四：編輯HTML文件 12
2.4.5 步驟五：運行 13
第3章 網頁圖形繪制：圖片水印 15
3.1 實驗目標 15
3.2 實驗任務 15
3.3 設計思路 16
3.4 實驗實施（跟我做） 17
3.4.1 步驟一：創建項目和文件 17
3.4.2 步驟二：準備Canvas環境 17
3.4.3 步驟三：取/存圖片 17
3.4.4 步驟四：繪制水印 18
第4章 網頁圖形繪制：貪吃蛇 19
4.1 實驗目標 19
4.2 實驗任務 19
4.3 設計思路 20
4.4 實驗實施（跟我做） 20
4.4.1 步驟一：創建項目和文件 20
4.4.2 步驟二：制作頁面 21
4.4.3 步驟三：初始化數據 21
4.4.4 步驟四：創建“蛇”對象 22
4.4.5 步驟五：生成食物方塊 25
4.4.6 步驟六：繪制蛇 25
4.4.7 步驟七：游戲開始和鍵盤事件 25
第5章 網頁圖形繪制：登錄頁面 27
5.1 實驗目標 27
5.2 實驗任務 27
5.3 設計思路 28
5.4 實驗實施（跟我做） 28
5.4.1 步驟一：通過JS生成圖片驗
證碼 28
5.4.2 步驟二：在登錄頁面中應用圖片驗證碼 31
5.4.3 步驟三：測試圖片驗證碼 32
第6章 網頁圖形繪制：Logo繪制 34
6.1 實驗目標 34
6.2 實驗任務 35
6.3 設計思路 35
6.4 實驗實施（跟我做） 37
6.4.1 步驟一：創建項目和文件 37
6.4.2 步驟二：SVG文件的結構 37
6.4.3 步驟三：創建Logo圖形 37
6.4.4 步驟四：在HTML頁面引入SVG文件 38
第7章 CSS預處理語言：頁面導航欄 39
7.1 實驗目標 39
7.2 實驗任務 39
7.3 設計思路 40
7.4 實驗實施（跟我做） 41
7.4.1 步驟一：創建項目和文件 41
7.4.2 步驟二：引入Less文件 41
7.4.3 步驟三：搭建導航結構 42
7.4.4 步驟四：設置公共變量 43
7.4.5 步驟五：使用嵌套規則設置導航
樣式 44
第8章 ES9編程：圖形計算器 47
8.1 實驗目標 47
8.2 實驗任務 48
8.3 設計思路 50
8.4 實驗實施（跟我做） 51
8.4.1 步驟一：創建項目和文件 51
8.4.2 步驟二：制作HTML頁面 51
8.4.3 步驟三：制作CSS樣式 52
8.4.4 步驟四：定義圖形數據 53
8.4.5 步驟五：選擇計算圖形 54
8.4.6 步驟六：顯示圖形界面 54
8.4.7 步驟七：計算結果 55
第9章 ES9編程：抽獎 61
9.1 實驗目標 61
9.2 實驗任務 61
9.3 設計思路 62
9.4 實驗實施（跟我做） 62
9.4.1 步驟一：創建項目和文件 62
9.4.2 步驟二：制作HTML頁面 63
9.4.3 步驟三：編寫CSS樣式 63
9.4.4 步驟四：頁面JS交互邏輯 64
第10章 Vue.js：學習日歷 66
10.1 實驗目標 66
10.2 實驗任務 67
10.3 設計思路 68
10.4 實驗實施（跟我做） 70
10.4.1 步驟一：創建項目和文件 70
10.4.2 步驟二：創建Vue實例 71
10.4.3 步驟三：渲染學習日歷頁面 73
10.4.4 步驟四：創建對話框組件dialogContent 75
10.4.5 步驟五：編輯課程表（父子組件
通信） 77
第11章 Vue.js：記事本 81
11.1 實驗目標 81
11.2 實驗任務 82
11.3 設計思路 83
11.4 實驗實施（跟我做） 85
11.4.1 步驟一：創建項目和文件 85
11.4.2 步驟二：配置Vue路由規則 85
11.4.3 步驟三：編輯登錄頁組件 86
11.4.4 步驟四：編輯記事本列表頁
組件 87
11.4.5 步驟五：創建新增記事本信息
組件 93
第12章 Vue.js：貼吧 97
12.1 實驗目標 97
12.2 實驗任務 98
12.3 設計思路 99
12.4 實驗實施（跟我做） 100
12.4.1 步驟一：創建項目和文件 100
12.4.2 步驟二：安裝和配置路由
規則 102
12.4.3 步驟三：安裝和配置
Element UI 103
12.4.4 步驟四：創建貼吧首頁 104
12.4.5 步驟五：創建帖子列表頁面 108
12.4.6 步驟六：創建帖子詳情頁面 111
第13章 Vue.js：社區團購網 117
13.1 實驗目標 117
13.2 實驗任務 118
13.3 設計思路 119
13.4 實驗實施（跟我做） 121
13.4.1 步驟一：創建項目和文件 121
13.4.2 步驟二：安裝和配置路由
規則 123
13.4.3 步驟三：安裝Vuex并配置Store 124
13.4.4 步驟四：創建頁頭組件 125
13.4.5 步驟五：引入頁頭組件 127
13.4.6 步驟六：準備商品數據和分類
數據 127
13.4.7 步驟七：創建社區團購網
首頁 128
13.4.8 步驟八：創建購物車頁面 133
第14章 Vue.js：購物車 140
14.1 實驗目標 140
14.2 實驗任務 140
14.3 設計思路 142
14.4 實驗實施（跟我做） 143
14.4.1 步驟一：實現頁面布局與基礎
樣式 143
14.4.2 步驟二：使用CSS美化頁面
樣式 144
14.4.3 步驟三：綁定數據并設置基礎
邏輯 145
14.4.4 步驟四：實現商品選擇與全選功能的 146
14.4.5 步驟五：“刪除”按鈕 147
第15章 Vue.js：備忘錄 148
15.1 實驗目標 148
15.2 實驗任務 149
15.3 設計思路 151
15.4 實驗實施（跟我做） 151
15.4.1 步驟一：實現頁面布局與
樣式 151
15.4.2 步驟二：綁定數據與渲染 152
15.4.3 步驟三：切換備忘錄的內容 153
15.4.4 步驟四：修改與刪除備忘項目的狀態 154
15.4.5 步驟五：修改備忘項目的
內容 156
第16章 Vue.js：點餐系統 159
16.1 實驗目標 159
16.2 實驗任務 160
16.3 設計思路 160
16.4 實驗實施（跟我做） 161
16.4.1 步驟一：創建項目和文件 161
16.4.2 步驟二：配置路由規則 162
16.4.3 步驟三：配置Store 162
16.4.4 步驟四：創建公共頁頭組件 163
16.4.5 步驟五：創建點餐數據列表
組件 164
16.4.6 步驟六：創建首頁組件 167
16.4.7 步驟七：創建訂單組件 168
第17章 Node.js：拍賣網 171
17.1 實驗目標 171
17.2 實驗任務 172
17.3 設計思路 172
17.4 實驗實施（跟我做） 173
17.4.1 步驟一：創建項目和文件 173
17.4.2 步驟二：完成頁面顯示 173
17.4.3 步驟三：實現請求處理 176
17.4.4 步驟四：準備數據 177
17.4.5 步驟五：完成前后端交互 178
17.4.6 步驟六：運行效果 179
第18章 Node.js：在線選課 180
18.1 實驗目標 180
18.2 實驗任務 180
18.3 設計思路 181
18.4 實驗實施（跟我做） 182
18.4.1 步驟一：創建項目和文件 182
18.4.2 步驟二：準備數據 182
18.4.3 步驟三：完成靜態頁面 183
18.4.4 步驟四：仿數據庫處理數據 185
18.4.5 步驟五：實現請求處理 186
18.4.6 步驟六：實現靜態資源訪問 188
18.4.7 步驟七：實現前后端交互 189
18.4.8 步驟八：運行效果 191
第19章 Node.js：問卷調查網 192
19.1 實驗目標 192
19.2 實驗任務 192
19.3 設計思路 193
19.4 實驗實施（跟我做） 194
19.4.1 步驟一：創建項目和文件 194
19.4.2 步驟二：完成靜態頁面 194
19.4.3 步驟三：仿數據庫處理數據 198
19.4.4 步驟四：創建服務器 199
19.4.5 步驟五：實現前臺路由 199
19.4.6 步驟六：實現后臺路由 200
19.4.7 步驟七：運行效果 201
第20章 Node.js：用戶注冊/登錄 203
20.1 實驗目標 203
20.2 實驗任務 203
20.3 設計思路 204
20.4 實驗實施（跟我做） 205
20.4.1 步驟一：下載與安裝Node.js 205
20.4.2 步驟二：創建項目和文件 206
20.4.3 步驟三：實現“用戶注冊”和“用戶登錄”頁面 207
20.4.4 步驟四：添加“用戶注冊”和“用戶登錄”頁面的CSS樣式 208
20.4.5 步驟五：創建服務器 209
20.4.6 步驟六：發送AJAX請求到服
務器 211
第21章 Node.js：用戶信息管理 214
21.1 實驗目標 214
21.2 實驗任務 215
21.3 設計思路 216
21.4 實驗實施（跟我做） 218
21.4.1 步驟一：使用Express應用生成器創建項目 218
21.4.2 步驟二：使用Express連接MySQL數據庫 219
21.4.3 步驟三：解決跨域問題 219
21.4.4 步驟四：設計路由接口 220
第22章 Node.js：圖片驗證碼 224
22.1 實驗目標 224
22.2 實驗任務 225
22.3 設計思路 225
22.4 實驗實施（跟我做） 226
22.4.1 步驟一：使用Express應用生成器創建項目 226
22.4.2 步驟二：實現驗證碼頁面 227
22.4.3 步驟三：添加驗證碼頁面的CSS樣式 227
22.4.4 步驟四：解決跨域問題 229
22.4.5 步驟五：實現路由功能 229
22.4.6 步驟六：發送AJAX請求到服
務器 230
第23章 Node.js：電商首頁 232
23.1 實驗目標 232
23.2 實驗任務 233
23.3 設計思路 234
23.4 實驗實施（跟我做） 235
23.4.1 步驟一：創建項目和文件 235
23.4.2 步驟二：安裝和引入第三方
模塊 236
23.4.3 步驟三：請求首頁數據 236
23.4.4 步驟四：編寫分類導航組件、輪播圖組件、分類專區組件 238
23.4.5 步驟五：Node.js接口 241
第24章 網站架構設計：智能公交 243
24.1 實驗目標 243
24.2 實驗任務 243
24.3 設計思路 244
24.4 實驗實施（跟我做） 245
24.4.1 步驟一：創建項目和文件 245
24.4.2 步驟二：設計并完成前端
頁面 245
24.4.3 步驟三：創建服務器 246
24.4.4 步驟四：實現前端功能 253
24.4.5 步驟五：運行效果 254
第25章 網站架構設計：職位發布系統 256
25.1 實驗目標 256
25.2 實驗任務 256
25.3 設計思路 260
25.4 實驗實施（跟我做） 261
25.4.1 步驟一：創建項目和文件 261
25.4.2 步驟二：配置路由規則 263
25.4.3 步驟三：安裝和引入Axios 264
25.4.4 步驟四：安裝Element UI 264
25.4.5 步驟五：編寫職位發布系統首頁
組件 265
25.4.6 步驟六：編寫職位列表組件 266
25.4.7 步驟七：編寫職位發布組件 270
25.4.8 步驟八：創建服務器 273
25.4.9 步驟九：實現數據庫操作 274
25.4.10 步驟十：實現后臺路由 276
25.4.11 步驟十一：請求后臺接口 277
第26章 網站性能優化：游戲網站 282
26.1 實驗目標 282
26.2 實驗任務 283
26.3 設計思路 284
26.4 實驗實施（跟我做） 285
26.4.1 步驟一：創建項目和文件 285
26.4.2 步驟二：構建頁面主體 285
26.4.3 步驟三：創建頁面頭部導航 287
26.4.4 步驟四：創建頁面主體部分 289
26.4.5 步驟五：創建頁面底部版權
部分 297
26.4.6 步驟六：使用webpack打包靜態
資源 298
第27章 網站性能優化：教學平臺 302
27.1 實驗目標 302
27.2 實驗任務 303
27.3 設計思路 304
27.4 實驗實施（跟我做） 305
27.4.1 步驟一：創建項目和文件 305
27.4.2 步驟二：編輯app.js文件，搭建Web服務器 306
27.4.3 步驟三：構建前端頁面 307
27.4.4 步驟四：前端發送獲取圖片
請求 310
27.4.5 步驟五：后臺處理請求，返回響應信息 311
27.4.6 步驟六：運行效果 312
第28章 網站性能優化：圖片懶加載 314
28.1 實驗目標 314
28.2 實驗任務 314
28.3 設計思路 315
28.4 實驗實施（跟我做） 316
28.4.1 步驟一：創建項目和文件 316
28.4.2 步驟二：搭建頁面結構 316
28.4.3 步驟三：編寫CSS樣式文件 317
28.4.4 步驟四：編寫JS代碼 317
新書資訊