Web前端開發(fā)實訓案例教程（高級）

目 錄


第1章 實踐概述 1
1.1 實踐目標 1
1.2 實踐知識地圖 1
1.3 實施安排 7
第2章 開發(fā)環(huán)境：HBuilder X開發(fā)工具 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 步驟三：創(chuàng)建項目 12
2.4.4 步驟四：編輯HTML文件 12
2.4.5 步驟五：運行 13
第3章 網(wǎng)頁圖形繪制：圖片水印 15
3.1 實驗目標 15
3.2 實驗任務 15
3.3 設計思路 16
3.4 實驗實施（跟我做） 17
3.4.1 步驟一：創(chuàng)建項目和文件 17
3.4.2 步驟二：準備Canvas環(huán)境 17
3.4.3 步驟三：取/存圖片 17
3.4.4 步驟四：繪制水印 18
第4章 網(wǎng)頁圖形繪制：貪吃蛇 19
4.1 實驗目標 19
4.2 實驗任務 19
4.3 設計思路 20
4.4 實驗實施（跟我做） 20
4.4.1 步驟一：創(chuàng)建項目和文件 20
4.4.2 步驟二：制作頁面 21
4.4.3 步驟三：初始化數(shù)據(jù) 21
4.4.4 步驟四：創(chuàng)建“蛇”對象 22
4.4.5 步驟五：生成食物方塊 25
4.4.6 步驟六：繪制蛇 25
4.4.7 步驟七：游戲開始和鍵盤事件 25
第5章 網(wǎng)頁圖形繪制：登錄頁面 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章 網(wǎng)頁圖形繪制：Logo繪制 34
6.1 實驗目標 34
6.2 實驗任務 35
6.3 設計思路 35
6.4 實驗實施（跟我做） 37
6.4.1 步驟一：創(chuàng)建項目和文件 37
6.4.2 步驟二：SVG文件的結構 37
6.4.3 步驟三：創(chuàng)建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 步驟一：創(chuàng)建項目和文件 41
7.4.2 步驟二：引入Less文件 41
7.4.3 步驟三：搭建導航結構 42
7.4.4 步驟四：設置公共變量 43
7.4.5 步驟五：使用嵌套規(guī)則設置導航
樣式 44
第8章 ES9編程：圖形計算器 47
8.1 實驗目標 47
8.2 實驗任務 48
8.3 設計思路 50
8.4 實驗實施（跟我做） 51
8.4.1 步驟一：創(chuàng)建項目和文件 51
8.4.2 步驟二：制作HTML頁面 51
8.4.3 步驟三：制作CSS樣式 52
8.4.4 步驟四：定義圖形數(shù)據(jù) 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 步驟一：創(chuàng)建項目和文件 62
9.4.2 步驟二：制作HTML頁面 63
9.4.3 步驟三：編寫CSS樣式 63
9.4.4 步驟四：頁面JS交互邏輯 64
0章 Vue.js：學習日歷 66
10.1 實驗目標 66
10.2 實驗任務 67
10.3 設計思路 68
10.4 實驗實施（跟我做） 70
10.4.1 步驟一：創(chuàng)建項目和文件 70
10.4.2 步驟二：創(chuàng)建Vue實例 71
10.4.3 步驟三：渲染學習日歷頁面 73
10.4.4 步驟四：創(chuàng)建對話框組件dialogContent 75
10.4.5 步驟五：編輯課程表（父子組件
通信） 77
1章 Vue.js：記事本 81
11.1 實驗目標 81
11.2 實驗任務 82
11.3 設計思路 83
11.4 實驗實施（跟我做） 85
11.4.1 步驟一：創(chuàng)建項目和文件 85
11.4.2 步驟二：配置Vue路由規(guī)則 85
11.4.3 步驟三：編輯登錄頁組件 86
11.4.4 步驟四：編輯記事本列表頁
組件 87
11.4.5 步驟五：創(chuàng)建新增記事本信息
組件 93
2章 Vue.js：貼吧 97
12.1 實驗目標 97
12.2 實驗任務 98
12.3 設計思路 99
12.4 實驗實施（跟我做） 100
12.4.1 步驟一：創(chuàng)建項目和文件 100
12.4.2 步驟二：安裝和配置路由
規(guī)則 102
12.4.3 步驟三：安裝和配置
Element UI 103
12.4.4 步驟四：創(chuàng)建貼吧首頁 104
12.4.5 步驟五：創(chuàng)建帖子列表頁面 108
12.4.6 步驟六：創(chuàng)建帖子詳情頁面 111
3章 Vue.js：社區(qū)團購網(wǎng) 117
13.1 實驗目標 117
13.2 實驗任務 118
13.3 設計思路 119
13.4 實驗實施（跟我做） 121
13.4.1 步驟一：創(chuàng)建項目和文件 121
13.4.2 步驟二：安裝和配置路由
規(guī)則 123
13.4.3 步驟三：安裝Vuex并配置Store 124
13.4.4 步驟四：創(chuàng)建頁頭組件 125
13.4.5 步驟五：引入頁頭組件 127
13.4.6 步驟六：準備商品數(shù)據(jù)和分類
數(shù)據(jù) 127
13.4.7 步驟七：創(chuàng)建社區(qū)團購網(wǎng)
首頁 128
13.4.8 步驟八：創(chuàng)建購物車頁面 133
4章 Vue.js：購物車 140
14.1 實驗目標 140
14.2 實驗任務 140
14.3 設計思路 142
14.4 實驗實施（跟我做） 143
14.4.1 步驟一：實現(xiàn)頁面布局與基礎
樣式 143
14.4.2 步驟二：使用CSS美化頁面
樣式 144
14.4.3 步驟三：綁定數(shù)據(jù)并設置基礎
邏輯 145
14.4.4 步驟四：實現(xiàn)商品選擇與全選功能的 146
14.4.5 步驟五：“刪除”按鈕 147
5章 Vue.js：備忘錄 148
15.1 實驗目標 148
15.2 實驗任務 149
15.3 設計思路 151
15.4 實驗實施（跟我做） 151
15.4.1 步驟一：實現(xiàn)頁面布局與
樣式 151
15.4.2 步驟二：綁定數(shù)據(jù)與渲染 152
15.4.3 步驟三：切換備忘錄的內容 153
15.4.4 步驟四：修改與刪除備忘項目的狀態(tài) 154
15.4.5 步驟五：修改備忘項目的
內容 156
6章 Vue.js：點餐系統(tǒng) 159
16.1 實驗目標 159
16.2 實驗任務 160
16.3 設計思路 160
16.4 實驗實施（跟我做） 161
16.4.1 步驟一：創(chuàng)建項目和文件 161
16.4.2 步驟二：配置路由規(guī)則 162
16.4.3 步驟三：配置Store 162
16.4.4 步驟四：創(chuàng)建公共頁頭組件 163
16.4.5 步驟五：創(chuàng)建點餐數(shù)據(jù)列表
組件 164
16.4.6 步驟六：創(chuàng)建首頁組件 167
16.4.7 步驟七：創(chuàng)建訂單組件 168
7章 Node.js：拍賣網(wǎng) 171
17.1 實驗目標 171
17.2 實驗任務 172
17.3 設計思路 172
17.4 實驗實施（跟我做） 173
17.4.1 步驟一：創(chuàng)建項目和文件 173
17.4.2 步驟二：完成頁面顯示 173
17.4.3 步驟三：實現(xiàn)請求處理 176
17.4.4 步驟四：準備數(shù)據(jù) 177
17.4.5 步驟五：完成前后端交互 178
17.4.6 步驟六：運行效果 179
8章 Node.js：在線選課 180
18.1 實驗目標 180
18.2 實驗任務 180
18.3 設計思路 181
18.4 實驗實施（跟我做） 182
18.4.1 步驟一：創(chuàng)建項目和文件 182
18.4.2 步驟二：準備數(shù)據(jù) 182
18.4.3 步驟三：完成靜態(tài)頁面 183
18.4.4 步驟四：仿數(shù)據(jù)庫處理數(shù)據(jù) 185
18.4.5 步驟五：實現(xiàn)請求處理 186
18.4.6 步驟六：實現(xiàn)靜態(tài)資源訪問 188
18.4.7 步驟七：實現(xiàn)前后端交互 189
18.4.8 步驟八：運行效果 191
9章 Node.js：問卷調查網(wǎng) 192
19.1 實驗目標 192
19.2 實驗任務 192
19.3 設計思路 193
19.4 實驗實施（跟我做） 194
19.4.1 步驟一：創(chuàng)建項目和文件 194
19.4.2 步驟二：完成靜態(tài)頁面 194
19.4.3 步驟三：仿數(shù)據(jù)庫處理數(shù)據(jù) 198
19.4.4 步驟四：創(chuàng)建服務器 199
19.4.5 步驟五：實現(xiàn)前臺路由 199
19.4.6 步驟六：實現(xiàn)后臺路由 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 步驟二：創(chuàng)建項目和文件 206
20.4.3 步驟三：實現(xiàn)“用戶注冊”和“用戶登錄”頁面 207
20.4.4 步驟四：添加“用戶注冊”和“用戶登錄”頁面的CSS樣式 208
20.4.5 步驟五：創(chuàng)建服務器 209
20.4.6 步驟六：發(fā)送AJAX請求到服
務器 211
第21章 Node.js：用戶信息管理 214
21.1 實驗目標 214
21.2 實驗任務 215
21.3 設計思路 216
21.4 實驗實施（跟我做） 218
21.4.1 步驟一：使用Express應用生成器創(chuàng)建項目 218
21.4.2 步驟二：使用Express連接MySQL數(shù)據(jù)庫 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應用生成器創(chuàng)建項目 226
22.4.2 步驟二：實現(xiàn)驗證碼頁面 227
22.4.3 步驟三：添加驗證碼頁面的CSS樣式 227
22.4.4 步驟四：解決跨域問題 229
22.4.5 步驟五：實現(xiàn)路由功能 229
22.4.6 步驟六：發(fā)送AJAX請求到服
務器 230
第23章 Node.js：電商首頁 232
23.1 實驗目標 232
23.2 實驗任務 233
23.3 設計思路 234
23.4 實驗實施（跟我做） 235
23.4.1 步驟一：創(chuàng)建項目和文件 235
23.4.2 步驟二：安裝和引入第三方
模塊 236
23.4.3 步驟三：請求首頁數(shù)據(jù) 236
23.4.4 步驟四：編寫分類導航組件、輪播圖組件、分類專區(qū)組件 238
23.4.5 步驟五：Node.js接口 241
第24章 網(wǎng)站架構設計：智能公交 243
24.1 實驗目標 243
24.2 實驗任務 243
24.3 設計思路 244
24.4 實驗實施（跟我做） 245
24.4.1 步驟一：創(chuàng)建項目和文件 245
24.4.2 步驟二：設計并完成前端
頁面 245
24.4.3 步驟三：創(chuàng)建服務器 246
24.4.4 步驟四：實現(xiàn)前端功能 253
24.4.5 步驟五：運行效果 254
第25章 網(wǎng)站架構設計：職位發(fā)布系統(tǒng) 256
25.1 實驗目標 256
25.2 實驗任務 256
25.3 設計思路 260
25.4 實驗實施（跟我做） 261
25.4.1 步驟一：創(chuàng)建項目和文件 261
25.4.2 步驟二：配置路由規(guī)則 263
25.4.3 步驟三：安裝和引入Axios 264
25.4.4 步驟四：安裝Element UI 264
25.4.5 步驟五：編寫職位發(fā)布系統(tǒng)首頁
組件 265
25.4.6 步驟六：編寫職位列表組件 266
25.4.7 步驟七：編寫職位發(fā)布組件 270
25.4.8 步驟八：創(chuàng)建服務器 273
25.4.9 步驟九：實現(xiàn)數(shù)據(jù)庫操作 274
25.4.10 步驟十：實現(xiàn)后臺路由 276
25.4.11 步驟十一：請求后臺接口 277
第26章 網(wǎng)站性能優(yōu)化：游戲網(wǎng)站 282
26.1 實驗目標 282
26.2 實驗任務 283
26.3 設計思路 284
26.4 實驗實施（跟我做） 285
26.4.1 步驟一：創(chuàng)建項目和文件 285
26.4.2 步驟二：構建頁面主體 285
26.4.3 步驟三：創(chuàng)建頁面頭部導航 287
26.4.4 步驟四：創(chuàng)建頁面主體部分 289
26.4.5 步驟五：創(chuàng)建頁面底部版權
部分 297
26.4.6 步驟六：使用webpack打包靜態(tài)
資源 298
第27章 網(wǎng)站性能優(yōu)化：教學平臺 302
27.1 實驗目標 302
27.2 實驗任務 303
27.3 設計思路 304
27.4 實驗實施（跟我做） 305
27.4.1 步驟一：創(chuàng)建項目和文件 305
27.4.2 步驟二：編輯app.js文件，搭建Web服務器 306
27.4.3 步驟三：構建前端頁面 307
27.4.4 步驟四：前端發(fā)送獲取圖片
請求 310
27.4.5 步驟五：后臺處理請求，返回響應信息 311
27.4.6 步驟六：運行效果 312
第28章 網(wǎng)站性能優(yōu)化：圖片懶加載 314
28.1 實驗目標 314
28.2 實驗任務 314
28.3 設計思路 315
28.4 實驗實施（跟我做） 316
28.4.1 步驟一：創(chuàng)建項目和文件 316
28.4.2 步驟二：搭建頁面結構 316
28.4.3 步驟三：編寫CSS樣式文件 317
28.4.4 步驟四：編寫JS代碼 317