Web前端開發實訓案例教程(高級)(2023年電子工業出版社出版的圖書)

Web前端開發實訓案例教程(高級)(2023年電子工業出版社出版的圖書)

本詞條是多義詞,共2個義項
更多義項 ▼ 收起列表 ▲

《Web前端開發實訓案例教程(高級)》是電子工業出版社出版的圖書,作者是北京新奧時代科技有限責任公司。

基本介紹

  • 中文名:Web前端開發實訓案例教程(高級) 
  • 作者:北京新奧時代科技有限責任公司
  • 出版時間:2023年7月
  • 出版社:電子工業出版社
  • 頁數:328 頁
  • 字數:564千字
  • ISBN:9787121459184
  • 開本:16 開
內容簡介,圖書目錄,

內容簡介

本書是按照《Web前端開發職業技能等級標準2.0版》(高級)編寫的配套實踐教程,書中涉及的項目代碼使用國產的HBuilder X開發工具編譯,並且均可在主流瀏覽器中運行。本書將中、高職業院校和套用型本科院校的計算機套用、軟體技術等相關專業開設的Web前端開發方向的課程體系,與企業Web前端開發崗位能力模型相結合,依據《Web前端開發職業技能等級標準2.0版》(高級)技能要求,形成三位一體的Web前端開發技術知識地圖。案例編排以實踐能力為導向,以開發企業真實套用為目標,遵循企業軟體工程標準和技術開發要求,採用任務驅動的方式,將網頁圖形繪製、CSS預處理語言、ES9編程、Vue.js、Node.js、網站架構設計、網站性能最佳化等重要知識單元,充分融入實際案例和套用環境中。本書對《Web前端開發職業技能等級標準2.0版》(高級)要求的重要知識單元都進行了詳細的描述,通過案例教學,使讀者能夠很好地掌握Web前端開發的相關技術。本書針對不同知識單元設計了多個技術專題,使學員通過重點訓練,掌握每個知識單元的核心內容。本書適合作為高級Web前端開發職業技能等級證書考核實踐教學的參考用書,也可以作為Web前端開發工作者的學習指導用書。

圖書目錄

第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

相關詞條

熱門詞條

聯絡我們