Web前端開發(fā)實(shí)訓(xùn)案例教程（高級(jí)）

目 錄


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