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

目 錄
第1章 實(shí)踐概述\t1
1．1 實(shí)踐目標(biāo)\t1
1．2 實(shí)踐知識(shí)地圖\t1
1．3 實(shí)施安排\t10
1．3．1 實(shí)驗(yàn)（技術(shù)專題）部分\t10
1．3．2 綜合實(shí)踐部分\t19
第2章 開(kāi)發(fā)工具（HBuilder）\t22
2．1 實(shí)驗(yàn)?zāi)繕?biāo)\t22
2．2 實(shí)驗(yàn)任務(wù)\t22
2．3 設(shè)計(jì)思路\t22
2．4 實(shí)驗(yàn)實(shí)施（跟我做）\t22
2．4．1 步驟一：下載并安裝
HBuilder\t22
2．4．2 步驟二：HBuilder主界面\t23
2．4．3 步驟三：在HBuilder中安裝
PHP插件\t24
2．4．4 步驟四：創(chuàng)建Web項(xiàng)目
工程\t25
2．4．5 步驟五：創(chuàng)建HTML
頁(yè)面\t26
2．4．6 步驟六：編輯html文件\t27
2．4．7 步驟七：運(yùn)行\(zhòng)t28
第3章 Web靜態(tài)網(wǎng)頁(yè)開(kāi)發(fā)
（小說(shuō)網(wǎng)首頁(yè)）\t29
3．1 實(shí)驗(yàn)?zāi)繕?biāo)\t29
3．2 實(shí)驗(yàn)任務(wù)\t30
3．3 設(shè)計(jì)思路\t32
3．4 實(shí)驗(yàn)實(shí)施（跟我做）\t35
3．4．1 步驟一：創(chuàng)建工程\t35
3．4．2 步驟二：制作首頁(yè)\t35
3．4．3 步驟三：制作小說(shuō)列表
頁(yè)面\t37
3．4．4 步驟四：加載小說(shuō)列表
頁(yè)面\t39
3．4．5 步驟五：添加樣式美化
首頁(yè)\t40
3．4．6 步驟六：添加樣式美化小說(shuō)
列表頁(yè)面\t44
第4章 JavaScript開(kāi)發(fā)交互效果頁(yè)面
（房貸計(jì)算器）\t47
4．1 實(shí)驗(yàn)?zāi)繕?biāo)\t47
4．2 實(shí)驗(yàn)任務(wù)\t48
4．3 設(shè)計(jì)思路\t49
4．4 實(shí)驗(yàn)實(shí)施（跟我做）\t52
4．4．1 步驟一：創(chuàng)建工程\t52
4．4．2 步驟二：使用HTML布局
頁(yè)面\t52
4．4．3 步驟三：使用CSS樣式美化
頁(yè)面\t53
4．4．4 步驟四：創(chuàng)建house．js
文件\t56
4．4．5 擴(kuò)展：正則表達(dá)式驗(yàn)證
輸入\t59
第5章 jQuery開(kāi)發(fā)交互效果頁(yè)面
（留言頁(yè)面）\t61
5．1 實(shí)驗(yàn)?zāi)繕?biāo)\t61
5．2 實(shí)驗(yàn)任務(wù)\t62
5．3 設(shè)計(jì)思路\t63
5．4 實(shí)驗(yàn)實(shí)施（跟我做）\t64
5．4．1 步驟一：創(chuàng)建工程\t64
5．4．2 步驟二：使用HTML布局
留言頁(yè)面\t64
5．4．3 步驟三：使用CSS樣式美化
留言頁(yè)面\t65
5．4．4 步驟四：引入jQuery文件和jQuery UI文件\t66
5．4．5 步驟五：輸入留言信息\t67
5．4．6 步驟六：發(fā)布留言\t68
5．4．7 步驟七：保存留言信息\t68
第6章 Bootstrap開(kāi)發(fā)頁(yè)面
（注冊(cè)頁(yè)面）\t69
6．1 實(shí)驗(yàn)?zāi)繕?biāo)\t69
6．2 實(shí)驗(yàn)任務(wù)\t70
6．3 設(shè)計(jì)思路\t70
6．4 實(shí)驗(yàn)實(shí)施（跟我做）\t72
6．4．1 步驟一：引入Bootstrap
文件\t72
6．4．2 步驟二：制作頁(yè)頭導(dǎo)航欄\t73
6．4．3 步驟三：制作注冊(cè)欄\t73
6．4．4 步驟四：制作頁(yè)腳\t76
6．4．5 步驟五：運(yùn)行效果\t76
第7章 Bootstrap開(kāi)發(fā)頁(yè)面
（分類信息頁(yè)面）\t77
7．1 實(shí)驗(yàn)?zāi)繕?biāo)\t77
7．2 實(shí)驗(yàn)任務(wù)\t78
7．3 設(shè)計(jì)思路\t79
7．4 實(shí)驗(yàn)實(shí)施（跟我做）\t82
7．4．1 步驟一：引入Bootstrap\t82
7．4．2 步驟二：制作頁(yè)頭\t82
7．4．3 步驟三：制作產(chǎn)地篩選欄和
商品信息欄\t84
7．4．4 步驟四：制作頁(yè)腳\t86
7．4．5 步驟五：響應(yīng)到移動(dòng)端\t86
第8章 MySQL（MySQL基本
操作）\t88
8．1 實(shí)驗(yàn)?zāi)繕?biāo)\t88
8．2 實(shí)驗(yàn)任務(wù)\t88
8．3 設(shè)計(jì)思路\t89
8．4 實(shí)驗(yàn)實(shí)施（跟我做）\t89
8．4．1 步驟一：下載并安裝
MySQL\t89
8．4．2 步驟二：登錄MySQL\t90
8．4．3 步驟三：數(shù)據(jù)庫(kù)基本操作\t92
第9章 MySQL（試題信息管理）\t93
9．1 實(shí)驗(yàn)?zāi)繕?biāo)\t93
9．2 實(shí)驗(yàn)任務(wù)\t94
9．3 設(shè)計(jì)思路\t95
9．4 實(shí)驗(yàn)實(shí)施（跟我做）\t97
9．4．1 步驟一：創(chuàng)建數(shù)據(jù)庫(kù)\t97
9．4．2 步驟二：創(chuàng)建表\t97
9．4．3 步驟三：表的操作\t99
9．4．4 步驟四：視圖\t100
9．4．5 步驟五：索引\t100
9．4．6 步驟六：管理表數(shù)據(jù)\t100
9．4．7 步驟七：查詢表數(shù)據(jù)\t101
9．4．8 步驟八：導(dǎo)入和導(dǎo)出數(shù)據(jù)庫(kù)
腳本\t102
9．4．9 步驟九：事務(wù)控制\t103
9．4．10 步驟十：觸發(fā)器\t104
9．4．11 步驟十一：存儲(chǔ)過(guò)程\t105
第10章 PHP制作動(dòng)態(tài)網(wǎng)頁(yè)
（第一個(gè)PHP程序）\t107
10．1 實(shí)驗(yàn)?zāi)繕?biāo)\t107
10．2 實(shí)驗(yàn)任務(wù)\t108
10．3 設(shè)計(jì)思路\t108
10．4 實(shí)驗(yàn)實(shí)施（跟我做）\t108
10．4．1 步驟一：更改Apache的
網(wǎng)站根目錄\t108
10．4．2 步驟二：制作第一個(gè)PHP
程序\t110
10．4．3 步驟三：發(fā)布運(yùn)行\(zhòng)t111
10．4．4 步驟四：擴(kuò)展\t112
第11章 PHP制作動(dòng)態(tài)網(wǎng)頁(yè)
（日期計(jì)算器）\t113
11．1 實(shí)驗(yàn)?zāi)繕?biāo)\t113
11．2 實(shí)驗(yàn)任務(wù)\t114
11．3 設(shè)計(jì)思路\t114
11．4 實(shí)驗(yàn)實(shí)施（跟我做）\t115
11．4．1 步驟一：編寫(xiě)主頁(yè)\t115
11．4．2 步驟二：判斷閏年\t116
11．4．3 步驟三：驗(yàn)證日期\t116
11．4．4 步驟四：計(jì)算天數(shù)\t117
11．4．5 步驟五：處理請(qǐng)求\t118
11．4．6 步驟六：運(yùn)行效果\t119
第12章 PHP制作動(dòng)態(tài)網(wǎng)頁(yè)
（購(gòu)物車）\t120
12．1 實(shí)驗(yàn)?zāi)繕?biāo)\t120
12．2 實(shí)驗(yàn)任務(wù)\t121
12．3 設(shè)計(jì)思路\t123
12．4 實(shí)驗(yàn)實(shí)施（跟我做）\t124
12．4．1 步驟一：制作商品列表
頁(yè)面\t124
12．4．2 步驟二：將商品加入
購(gòu)物車\t126
12．4．3 步驟三：制作購(gòu)物車
頁(yè)面\t128
12．4．4 步驟四：改變購(gòu)物車內(nèi)的
商品數(shù)量\t129
12．4．5 步驟五：制作確認(rèn)訂單
頁(yè)面\t129
12．4．6 步驟六：制作訂單頁(yè)面\t131
第13章 PHP制作動(dòng)態(tài)網(wǎng)頁(yè)
（在線投票系統(tǒng)）\t132
13．1 實(shí)驗(yàn)?zāi)繕?biāo)\t132
13．2 實(shí)驗(yàn)任務(wù)\t133
13．3 設(shè)計(jì)思路\t133
13．4 實(shí)驗(yàn)實(shí)施（跟我做）\t135
13．4．1 步驟一：創(chuàng)建項(xiàng)目和
文件\t135
13．4．2 步驟二：頁(yè)面基類\t136
13．4．3 步驟三：姓名輸入頁(yè)面\t137
13．4．4 步驟四：投票頁(yè)面\t138
13．4．5 步驟五：數(shù)據(jù)的獲取和
寫(xiě)入\t139
第14章 PHP制作動(dòng)態(tài)網(wǎng)頁(yè)
（學(xué)生成績(jī)管理）\t141
14．1 實(shí)驗(yàn)?zāi)繕?biāo)\t141
14．2 實(shí)驗(yàn)任務(wù)\t142
14．3 設(shè)計(jì)思路\t143
14．4 實(shí)驗(yàn)實(shí)施（跟我做）\t146
14．4．1 步驟一：創(chuàng)建項(xiàng)目和
文件\t146
14．4．2 步驟二：創(chuàng)建數(shù)據(jù)庫(kù)\t147
14．4．3 步驟三：制作CSS
樣式\t147
14．4．4 步驟四：制作登錄
頁(yè)面\t147
14．4．5 步驟五：制作成績(jī)管理
頁(yè)面\t149
14．4．6 步驟六：編寫(xiě)數(shù)據(jù)庫(kù)操作
PHP代碼\t151
14．4．7 步驟七：數(shù)據(jù)的獲取和
寫(xiě)入\t153
第15章 AJAX制作動(dòng)態(tài)網(wǎng)頁(yè)
（閱讀器）\t158
15．1 實(shí)驗(yàn)?zāi)繕?biāo)\t158
15．2 實(shí)驗(yàn)任務(wù)\t159
15．3 設(shè)計(jì)思路\t160
15．4 實(shí)驗(yàn)實(shí)施（跟我做）\t161
15．4．1 步驟一：創(chuàng)建項(xiàng)目和
文件\t161
15．4．2 步驟二：實(shí)現(xiàn)XML格式
數(shù)據(jù)接口\t161
15．4．3 步驟三：實(shí)現(xiàn)JSON格式
數(shù)據(jù)接口\t162
15．4．4 步驟四：制作HTML
頁(yè)面\t163
15．4．5 步驟五：制作CSS樣式\t163
15．4．6 步驟六：編寫(xiě)AJAX
請(qǐng)求\t164
15．4．7 步驟七：構(gòu)建XML格式的
書(shū)籍內(nèi)容\t165
15．4．8 步驟八：構(gòu)建JSON格式的
書(shū)籍內(nèi)容\t166
15．4．9 步驟九：清除頁(yè)面內(nèi)容\t167
第16章 RESTful API規(guī)范
（視頻列表）\t168
16．1 實(shí)驗(yàn)?zāi)繕?biāo)\t168
16．2 實(shí)驗(yàn)任務(wù)\t169
16．3 設(shè)計(jì)思路\t170
16．4 實(shí)驗(yàn)實(shí)施（跟我做）\t172
16．4．1 步驟一：處理API
請(qǐng)求\t172
16．4．2 步驟二：返回視頻列表
數(shù)據(jù)\t175
16．4．3 步驟三：使用RESTful
API\t176
第17章 Laravel框架構(gòu)建動(dòng)態(tài)網(wǎng)站
（第一個(gè)Laravel程序）\t178
17．1 實(shí)驗(yàn)?zāi)繕?biāo)\t178
17．2 實(shí)驗(yàn)任務(wù)\t179
17．3 設(shè)計(jì)思路\t180
17．4 實(shí)驗(yàn)實(shí)施（跟我做）\t181
17．4．1 步驟一：安裝
Composer\t181
17．4．2 步驟二：配置國(guó)內(nèi)鏡像\t183
17．4．3 步驟三：創(chuàng)建Laravel
工程\t183
17．4．4 步驟四：配置虛擬主機(jī)\t184
17．4．5 步驟五：編寫(xiě)index．blade．php
文件\t186
17．4．6 步驟六：編寫(xiě)路由\t186
第18章 Laravel框架構(gòu)建動(dòng)態(tài)網(wǎng)站
（在線答題）\t187
18．1 實(shí)驗(yàn)?zāi)繕?biāo)\t187
18．2 實(shí)驗(yàn)任務(wù)\t188
18．3 設(shè)計(jì)思路\t188
18．4 實(shí)驗(yàn)實(shí)施（跟我做）\t190
18．4．1 步驟一：創(chuàng)建Laravel
工程\t190
18．4．2 步驟二：配置路由\t191
18．4．3 步驟三：創(chuàng)建控制器類QuizController\t191
18．4．4 步驟四：編寫(xiě)quiz．blade．php
文件\t192
18．4．5 步驟五：編寫(xiě)result．blade．php
文件\t193
18．4．6 步驟六：編寫(xiě)QuizController()
處理函數(shù)\t194
第19章 Laravel框架構(gòu)建動(dòng)態(tài)網(wǎng)站
（個(gè)人博客）\t197
19．1 實(shí)驗(yàn)?zāi)繕?biāo)\t197
19．2 實(shí)驗(yàn)任務(wù)\t198
19．3 設(shè)計(jì)思路\t200
19．4 實(shí)驗(yàn)實(shí)施（跟我做）\t203
19．4．1 步驟一：創(chuàng)建Laravel
工程\t203
19．4．2 步驟二：配置路由\t204
19．4．3 步驟三：創(chuàng)建控制器類\t205
19．4．4 步驟四：實(shí)現(xiàn)登錄功能
（查詢構(gòu)建器）\t205
19．4．5 步驟五：創(chuàng)建模型類\t206
19．4．6 步驟六：實(shí)現(xiàn)登錄功能\t207
19．4．7 步驟七：顯示博客列表\t208
19．4．8 步驟八：添加博客\t212
19．4．9 步驟九：修改和刪除
博客\t212
第20章 AJAX制作動(dòng)態(tài)網(wǎng)頁(yè)
（天氣預(yù)報(bào)）\t214
20．1 實(shí)驗(yàn)?zāi)繕?biāo)\t214
20．2 實(shí)驗(yàn)任務(wù)\t216
20．3 設(shè)計(jì)思路\t216
20．4 實(shí)驗(yàn)實(shí)施（跟我做）\t217
20．4．1 步驟一：創(chuàng)建工程和
文件\t217
20．4．2 步驟二：實(shí)現(xiàn)PHP數(shù)據(jù)
接口\t218
20．4．3 步驟三：制作HTML
頁(yè)面\t219
20．4．4 步驟四：制作CSS
樣式\t220
20．4．5 步驟五：編寫(xiě)AJAX
請(qǐng)求\t221
第21章 綜合實(shí)踐（淘興趣）\t223
21．1 項(xiàng)目簡(jiǎn)介\t223
21．2 實(shí)踐目標(biāo)\t223
21．3 需求分析\t224
21．4 頁(yè)面設(shè)計(jì)\t226
21．4．1 工作任務(wù)\t226
21．4．2 設(shè)計(jì)思路\t226
21．4．3 實(shí)現(xiàn)（跟我做）\t228
21．5 第一階段PHP頁(yè)面混合式：
創(chuàng)建工程\t233
21．5．1 工作任務(wù)\t233
21．5．2 設(shè)計(jì)思路\t233
21．5．3 實(shí)現(xiàn)（跟我做）\t236
21．6 第一階段PHP頁(yè)面混合式：
系統(tǒng)管理\t241
21．6．1 PHP頁(yè)面混合式：管理員
登錄\t241
21．6．2 PHP頁(yè)面混合式：興趣
管理\t246
21．7 第一階段PHP頁(yè)面混合式：
用戶注冊(cè)\t253
21．7．1 工作任務(wù)\t253
21．7．2 設(shè)計(jì)思路\t254
21．7．3 實(shí)現(xiàn)（跟我做）\t255
21．8 第一階段PHP頁(yè)面混合式：
用戶登錄\t258
21．8．1 工作任務(wù)\t258
21．8．2 設(shè)計(jì)思路\t259
21．8．3 實(shí)現(xiàn)（跟我做）\t259
21．9 第一階段PHP頁(yè)面混合式：
個(gè)人中心\t261
21．9．1 工作任務(wù)\t261
21．9．2 設(shè)計(jì)思路\t262
21．9．3 實(shí)現(xiàn)（跟我做）\t263
21．10 第一階段PHP頁(yè)面混合式：
首頁(yè)\t265
21．10．1 工作任務(wù)\t265
21．10．2 設(shè)計(jì)思路\t267
21．10．3 實(shí)現(xiàn)（跟我做）\t268
21．11 第一階段PHP頁(yè)面混合式：
趣點(diǎn)管理\t270
21．11．1 PHP頁(yè)面混合式：創(chuàng)建
趣點(diǎn)\t270
21．11．2 PHP頁(yè)面混合式：搜索
趣點(diǎn)\t275
21．11．3 PHP頁(yè)面混合式：訂閱
趣點(diǎn)\t281
21．12 第一階段PHP頁(yè)面混合式：
微博管理\t287
21．12．1 工作任務(wù)\t287
21．12．2 設(shè)計(jì)思路\t289
21．12．3 實(shí)現(xiàn)（跟我做）\t289
21．13 第二階段移動(dòng)端響應(yīng)式頁(yè)面：
首頁(yè)\t293
21．13．1 工作任務(wù)\t293
21．13．2 設(shè)計(jì)思路\t293
21．13．3 實(shí)現(xiàn)（跟我做）\t294
21．14 第三階段AJAX+JSON：
用戶注冊(cè)\t297
21．14．1 工作任務(wù)\t297
21．14．2 設(shè)計(jì)思路\t298
21．14．3 實(shí)現(xiàn)（跟我做）\t299
21．15 第三階段AJAX+JSON：
用戶登錄\t307
21．15．1 工作任務(wù)\t307
21．15．2 設(shè)計(jì)思路\t308
21．15．3 實(shí)現(xiàn)（跟我做）\t309
21．16 第三階段AJAX+JSON：
趣點(diǎn)管理\t314
21．16．1 工作任務(wù)\t314
21．16．2 設(shè)計(jì)思路\t316
21．16．3 實(shí)現(xiàn)（跟我做）\t316
21．17 第三階段AJAX+JSON：
微博管理\t328
21．17．1 工作任務(wù)\t328
21．17．2 設(shè)計(jì)思路\t330
21．17．3 實(shí)現(xiàn)（跟我做）\t330
21．18 第四階段RESTful API：
搜索趣點(diǎn)\t339
21．18．1 工作任務(wù)\t339
21．18．2 設(shè)計(jì)思路\t340
21．18．3 實(shí)現(xiàn)（跟我做）\t342
21．19 第五階段Laravel：用戶
注冊(cè)\t350
21．19．1 工作任務(wù)\t350
21．19．2 設(shè)計(jì)思路\t351
21．19．3 實(shí)現(xiàn)（跟我做）\t352
21．20 第五階段Laravel：用戶
登錄\t359
21．20．1 工作任務(wù)\t359
21．20．2 設(shè)計(jì)思路\t360
21．20．3 實(shí)現(xiàn)（跟我做）\t361