本書是根據《Web前端開發職業技能等級標準2.0版》（中級）編寫的配套的實踐教程，其中涉及的項目代碼使用HBuilder開發工具和開源Eclipse開發工具進行編譯，并且均可在主流瀏覽器中運行。本書將中職、高職院校和應用型本科院校的計算機應用、軟件技術等相關專業開設的Web前端開發方向的課程體系，與企業Web前端開發崗位能力模型相結合，依據《Web前端開發職業技能等級標準2.0版》（中級）的技能要求，形成三位一體的Web前端開發技術知識地圖。本書以實踐能力為導向，以開發企業真實應用為目標，遵循企業軟件工程標準和技術開發要求，采用任務驅動方式，將靜態網站開發（HTML5+CSS3、JavaScript+jQuery、Bootstrap）、Web前后端數據交互（AJAX、RESTful API）、MySQL、PHP動態網站開發（PHP+Laravel或PHP+ThinkPHP）和Java動態網站開發（Java+SSM）等相關知識單元，充分融入實際案例和應用環境中。本書對《Web前端開發職業技能等級標準2.0版》（中級）涉及的重要知識單元進行了詳細的介紹，從而幫助讀者掌握Web前端開發（中級）的技能要求。本書依托實驗項目對知識單元進行介紹，并且針對不同的知識單元設計了多個實驗項目，以幫助讀者掌握每個知識單元的核心內容。本書適合作為《Web前端開發職業技能等級標準2.0版》（中級）實踐教學的參考用書，也可作為有意成為Web前端開發工作者的學習輔導用書。
北京新奧時代科技有限責任公司于2006年04月12日在石景山分局登記成立。公司經營范圍包括技術開發、技術推廣、技術轉讓、技術咨詢、技術服務等。
目 錄
第1章 實踐概述 1
1.1 實踐目標 1
1.2 實踐知識地圖 1
1.3 實施安排 8
第2章 開發環境：開發工具 10
2.1 實驗目標 10
2.2 實驗任務 10
2.3 設計思路 10
2.4 實驗實施（跟我做） 11
2.4.1 步驟一：下載并安裝HBuilder 11
2.4.2 步驟二：HBuilder的主界面 12
2.4.3 步驟三：在HBuilder中安裝
PHP插件 12
2.4.4 步驟四：創建Web項目 13
2.4.5 步驟五：創建HTML文件 14
2.4.6 步驟六：編輯HTML文件 15
2.4.7 步驟七：運行HTML文件 15
第3章 HTML5+CSS3：直播平臺 17
3.1 實驗目標 17
3.2 實驗任務 17
3.3 設計思路 19
3.4 實驗實施（跟我做） 22
3.4.1 步驟一：創建項目 22
3.4.2 步驟二：制作首頁 23
3.4.3 步驟三：添加樣式美化首頁 31
第4章 JavaScript：動態驗證碼 38
4.1 實驗目標 38
4.2 實驗任務 38
4.3 設計思路 39
4.4 實驗實施（跟我做） 42
4.4.1 步驟一：創建項目 42
4.4.2 步驟二：使用HTML文件
布局頁面 42
4.4.3 步驟三：使用CSS文件美化
頁面 43
4.4.4 步驟四：創建JavaScript文件 44
第5章 jQuery：電影選座 47
5.1 實驗目標 47
5.2 實驗任務 48
5.3 設計思路 49
5.4 實驗實施（跟我做） 51
5.4.1 步驟一：創建項目 51
5.4.2 步驟二：使用HTML代碼編寫
頁面 51
5.4.3 步驟三：使用CSS文件美化
頁面 52
5.4.4 步驟四：實現選擇座位功能 54
5.4.5 步驟五：實現切換場次功能 56
第6章 Bootstrap：互動問答頁面 59
6.1 實驗目標 59
6.2 實驗任務 60
6.3 設計思路 60
6.4 實驗實施（跟我做） 62
6.4.1 步驟一：引入Bootstrap樣式
文件 62
6.4.2 步驟二：制作頁頭導航欄 62
6.4.3 步驟三：制作提問欄 63
6.4.4 步驟四：運行效果 66
第7章 Bootstrap：民宿網 67
7.1 實驗目標 67
7.2 實驗任務 67
7.3 設計思路 69
7.4 實驗實施（跟我做） 75
7.4.1 步驟一：引入Bootstrap文件和
布局視口 75
7.4.2 步驟二：制作頁頭 75
7.4.3 步驟三：制作“輪播圖和區域
選擇”板塊 77
7.4.4 步驟四：制作“特色民宿”
板塊和“親子民宿”板塊 79
7.4.5 步驟五：制作頁腳 84
第8章 Bootstrap：電影網站 86
8.1 實驗目標 86
8.2 實驗任務 87
8.3 設計思路 87
8.4 實驗實施（跟我做） 88
8.4.1 步驟一：項目準備 88
8.4.2 步驟二：制作頁頭 89
8.4.3 步驟三：布局頁面主體 90
8.4.4 步驟四：制作“輪播圖”板塊 90
8.4.5 步驟五：制作“電影分類”
板塊 91
8.4.6 步驟六：制作“電影列表”
板塊 93
8.4.7 步驟七：制作“VIP影院”
板塊 95
8.4.8 步驟八：制作“點播排行榜”
板塊 96
8.4.9 步驟九：制作頁腳 97
第9章 Bootstrap：后臺管理系統 99
9.1 實驗目標 99
9.2 實驗任務 100
9.3 設計思路 100
9.4 實驗實施（跟我做） 101
9.4.1 步驟一：項目準備 101
9.4.2 步驟二：制作導航欄 102
9.4.3 步驟三：布局頁面主體 103
9.4.4 步驟四：制作“警告框”板塊 104
9.4.5 步驟五：制作“網站數據統計”
板塊 104
9.4.6 步驟六：制作“網站熱帖”
板塊 105
9.4.7 步驟七：制作“今日訪客統
計”板塊 106
9.4.8 步驟八：制作“服務器狀態”
板塊 107
9.4.9 步驟九：制作“團隊留言板”
板塊 108
9.4.10 步驟十：添加版權信息 110
第10章 AJAX+PHP：JavaScript手冊 111
10.1 實驗目標 111
10.2 實驗任務 112
10.3 設計思路 112
10.4 實驗實施（跟我做） 113
10.4.1 步驟一：創建項目和文件 113
10.4.2 步驟二：實現JSON格式的
數據接口 114
10.4.3 步驟三：制作HTML頁面 115
10.4.4 步驟四：使用AJAX請求
數據接口 116
10.4.5 步驟五：構建JavaScript
手冊內容 116
第11章 AJAX+PHP：用戶注冊模塊 120
11.1 實驗目標 120
11.2 實驗任務 121
11.3 設計思路 121
11.4 實驗實施（跟我做） 121
11.4.1 步驟一：創建后臺數據庫 121
11.4.2 步驟二：創建用戶注冊頁面 122
11.4.3 步驟三：通過PHP代碼檢查
用戶 125
第12章 RESTful API：RSS訂閱 127
12.1 實驗目標 127
12.2 實驗任務 128
12.3 設計思路 129
12.4 實驗實施（跟我做） 132
12.4.1 步驟一：創建項目 132
12.4.2 步驟二：實現訂閱源列表 135
12.4.3 步驟三：實現添加訂閱源 139
12.4.4 步驟四：實現添加/取消訂閱 142
第13章 MySQL：駕考寶典 144
13.1 實驗目標 144
13.2 實驗任務 145
13.3 設計思路 145
13.4 實驗實施（跟我做） 146
13.4.1 步驟一：下載XAMPP和啟動MySQL 146
13.4.2 步驟二：登錄MySQL 147
13.4.3 步驟三：創建數據庫 148
13.4.4 步驟四：創建表 148
13.4.5 步驟五：表的操作 150
13.4.6 步驟六：管理表數據 151
13.4.7 步驟七：備份與恢復數據庫 153
第14章 PHP：我的卡包 154
14.1 實驗目標 154
14.2 實驗任務 154
14.3 設計思路 156
14.4 實驗實施（跟我做） 157
14.4.1 步驟一：創建項目和文件 157
14.4.2 步驟二：創建銀行卡抽象類 158
14.4.3 步驟三：創建儲蓄卡類 159
14.4.4 步驟四：創建信用卡類 160
14.4.5 步驟五：創建腳本文件 162
14.4.6 步驟六：運行腳本文件 165
第15章 PHP：在線購票 168
15.1 實驗目標 168
15.2 實驗任務 169
15.3 設計思路 170
15.4 實驗實施（跟我做） 172
15.4.1 步驟一：制作“車次列表”
頁面 172
15.4.2 步驟二：制作“添加乘客”
頁面 175
15.4.3 步驟三：制作“訂單生成
處理”頁面 177
15.4.4 步驟四：制作“訂單信息”
頁面 178
15.4.5 步驟五：添加乘客錯誤提示 180
第16章 PHP：駕校考試系統 182
16.1 實驗目標 182
16.2 實驗任務 183
16.3 設計思路 184
16.4 實驗實施（跟我做） 187
16.4.1 步驟一：創建項目和文件 187
16.4.2 步驟二：創建數據庫 187
16.4.3 步驟三：制作用戶登錄頁面 189
16.4.4 步驟四：制作“題目列表”
頁面 192
16.4.5 步驟五：制作“做題記錄”
頁面 196
第17章 Laravel框架：醫院掛號系統 198
17.1 實驗目標 198
17.2 實驗任務 199
17.3 設計思路 199
17.4 實驗實施（跟我做） 201
17.4.1 步驟一：創建Laravel項目 201
17.4.2 步驟二：配置路由 202
17.4.3 步驟三：創建控制器類DoctorController 203
17.4.4 步驟四：編寫模板文件doctor.blade.php 203
17.4.5 步驟五：編寫模板文件next.blade.php 206
17.4.6 步驟六：編寫模板文件start.blade.php 207
17.4.7 步驟七：編寫模板文件index.blade.php 208
第18章 Laravel框架：智能記賬本 210
18.1 實驗目標 210
18.2 實驗任務 211
18.3 設計思路 212
18.4 實驗實施（跟我做） 215
18.4.1 步驟一：創建Laravel項目 215
18.4.2 步驟二：配置路由 216
18.4.3 步驟三：創建控制器類 216
18.4.4 步驟四：實現記賬頁面的
功能 217
18.4.5 步驟五：創建模型類 218
18.4.6 步驟六：顯示記賬列表 218
18.4.7 步驟七：添加賬單 220
18.4.8 步驟八：修改和刪除賬單 220
第19章 ThinkPHP框架：醫院掛號
系統 222
19.1 實驗目標 222
19.2 實驗任務 223
19.3 設計思路 223
19.4 實驗實施（跟我做） 225
19.4.1 步驟一：創建ThinkPHP
項目 225
19.4.2 步驟二：配置路由 226
19.4.3 步驟三：創建控制器類 226
19.4.4 步驟四：編寫模板文件departments.html 227
19.4.5 步驟五：編寫模板文件
next.html 230
19.4.6 步驟六：編寫模板文件
start.html 232
19.4.7 步驟七：編寫模板文件
index.html 233
第20章 ThinkPHP框架：智能記賬本 235
20.1 實驗目標 235
20.2 實驗任務 236
20.3 設計思路 237
20.4 實驗實施（跟我做） 240
20.4.1 步驟一：創建ThinkPHP
項目 240
20.4.2 步驟二：配置路由 241
20.4.3 步驟三：創建控制器類 241
20.4.4 步驟四：實現記賬頁面功能 242
20.4.5 步驟五：創建模型類 243
20.4.6 步驟六：顯示記賬列表 243
20.4.7 步驟七：添加賬單 245
20.4.8 步驟八：修改和刪除賬單 245
第21章 ThinkPHP框架：圖書App 247
21.1 實驗目標 247
21.2 實驗任務 247
21.3 設計思路 248
21.4 實驗實施（跟我做） 250
21.4.1 步驟一：創建ThinkPHP
項目 250
21.4.2 步驟二：配置路由和控制器 250
21.4.3 步驟三：安裝模板引擎和
設計靜態頁面 252
21.4.4 步驟四：配置數據庫和創建
模型 261
21.4.5 步驟五：在index.html文件
中發送AJAX請求 262
21.4.6 步驟六：在info.html文件中
接收參數并發送AJAX請求 263
第22章 ThinkPHP框架：數據統計
系統 264
22.1 實驗目標 264
22.2 實驗任務 265
22.3 設計思路 265
22.4 實驗實施（跟我做） 267
22.4.1 步驟一：創建ThinkPHP
項目 267
22.4.2 步驟二：配置路由和控制器 267
22.4.3 步驟三：安裝模板引擎和設
計靜態頁面 268
22.4.4 步驟四：配置數據庫和創建
模型 274
22.4.5 步驟五：在index.html文件中
發送AJAX請求 276
22.4.6 步驟六：品牌選擇功能 276
第23章 AJAX+Java：世界杯 277
23.1 實驗目標 277
23.2 實驗任務 278
23.3 設計思路 278
23.4 實驗實施（跟我做） 278
23.4.1 步驟一：創建項目和文件 278
23.4.2 步驟二：實現Servlet類 279
23.4.3 步驟三：制作HTML頁面 282
23.4.4 步驟四：制作CSS樣式 284
23.4.5 步驟五：編寫AJAX請求 285
第24章 Java：App開發者信息管理 287
24.1 實驗目標 287
24.2 實驗任務 288
24.3 設計思路 289
24.4 實驗實施（跟我做） 289
24.4.1 步驟一：創建開發者信息表 289
24.4.2 步驟二：搭建Java Web開發
環境 290
24.4.3 步驟三：創建頁面文件 290
24.4.4 步驟四：設計實現數據
訪問層 294
24.4.5 步驟五：編寫Servlet類 299
24.4.6 步驟六：建立頁面與請求
路徑關聯及渲染數據 300
第25章 Spring框架：構建商品模型 302
25.1 實驗目標 302
25.2 實驗任務 302
25.3 設計思路 303
25.4 實驗實施（跟我做） 303
25.4.1 步驟一：搭建Java開發環境 303
25.4.2 步驟二：創建并編寫配置
文件 304
25.4.3 步驟三：編寫實體類與
數據層 304
25.4.4 步驟四：編寫業務層與
控制層 306
25.4.5 步驟五：編寫測試類 307
第26章 Spring MVC框架：增加線上
課程 309
26.1 實驗目標 309
26.2 實驗任務 310
26.3 設計思路 311
26.4 實驗實施（跟我做） 311
26.4.1 步驟一：搭建Java Web開發
環境 311
26.4.2 步驟二：創建頁面文件 312
26.4.3 步驟三：創建并編寫配置
文件 316
26.4.4 步驟四：配置訪問靜態資源 317
26.4.5 步驟五：編寫實體類與
控制器類 318
26.4.6 步驟六：建立頁面與請求
路徑關聯及渲染數據 319
第27章 MyBatis框架：后臺系統
用戶數據管理 321
27.1 實驗目標 321
27.2 實驗任務 321
27.3 設計思路 323
27.4 實驗實施（跟我做） 324
27.4.1 步驟一：創建數據庫和
用戶表 324
27.4.2 步驟二：搭建運行環境 324
27.4.3 步驟三：配置核心配置文件 324
27.4.4 步驟四：設計用戶表實體類
模型 325
27.4.5 步驟五：創建UserMapper
接口 327
27.4.6 步驟六：配置并綁定SQL
映射文件 327
27.4.7 步驟七：編寫核心入口API
及數據操作代碼 328
第28章 SSM框架：中控后臺系統的
設計與實現 332
28.1 實驗目標 332
28.2 實驗任務 332
28.3 設計思路 333
28.4 實驗實施（跟我做） 334
28.4.1 步驟一：創建數據庫和
數據表 334
28.4.2 步驟二：搭建Web開發環境 334
28.4.3 步驟三：創建頁面 335
28.4.4 步驟四：整合SSM框架 336
28.4.5 步驟五：創建業務JavaBean 339
28.4.6 步驟六：創建數據層接口
和SQL映射文件 340
28.4.7 步驟七：編寫業務層 341
28.4.8 步驟八：編寫控制層 342
28.4.9 步驟九：綁定頁面操作 345
第29章 SSM框架：學生信息管理
系統 347
29.1 實驗目標 347
29.2 實驗任務 347
29.3 設計思路 348
29.4 實驗實施（跟我做） 349
29.4.1 步驟一：創建數據庫和學生
信息數據表 349
29.4.2 步驟二：搭建Web開發環境 349
29.4.3 步驟三：創建頁面 350
29.4.4 步驟四：整合SSM框架 352
29.4.5 步驟五：創建業務JavaBean 356
29.4.6 步驟六：創建數據層接口和
SQL映射文件 357
29.4.7 步驟七：編寫業務層 359
29.4.8 步驟八：編寫控制層 360
29.4.9 步驟九：渲染頁面數據 362
新書資訊