Web前端開發‧中級(下冊)（簡體書）

面向職業院校和應用型本科院校開展1+X證書製度試點工作是落實《國家職業教育改革實施方案》的重要內容之一，為了便於X證書標準融入院校學歷教育，工業和信息化部教育與考試中心組織編寫了《Web前端開發（中級）》教材。
本教材以《Web前端開發職業技能等級標準》（中級）為編寫依據，分上、下兩冊，包括深入淺出MySQL數據庫、PHP技術與應用、Web前後端數據交互技術、響應式開發技術、網站項目實戰五篇，分別對應《Web前端開發職業技能等級標準》（中級）涉及的五門核心課程：“MySQL數據庫基礎與應用”“PHP技術與應用”“Web前後端數據交互技術”“響應式開發技術”“網站項目實戰”。
《Web前端開發（中級下冊）》以模塊化的結構組織各篇及其章節，以任務驅動的方式安排教材內容，選取動態網站開發能力和響應式網站開發的典型應用作為教學案例。本教材可用於1+X證書製度試點工作中的Web前端開發職業技能等級證書的教學和培訓，也可以作為期望從事Web前端開發職業的應屆畢業生和社會在職人員的自學參考用書。

譚志彬

北京大學無線電電子學系碩士畢業，曾在高科技企業從事辦公自動化系統的開發應用，是國家計算機和通信專業技術資格考試標準的主要起草或審定者，主持開發過考務管理系統、上機考試系統、閱卷系統。

為積極響應《國家職業教育改革實施方案》，貫徹落實《關於深化產教融合的若干意見》《國家信息化發展戰略綱要》的相關要求，應對新一輪科技革命和產業變革的挑戰，促進人才培養供給側和產業需求側結構要素全方位融合，促進教育鏈、人才鏈與產業鏈、創新鏈有機銜接，推進人力資源供給側結構性改革，深化產教融合、校企合作，健全多元化辦學體制，完善職業教育和培訓體系，著力培養高素質勞動者和技術技能人才，工業和信息化部教育與考試中心依據教育部《職業技能等級標准開髮指南》中的相關要求，以客觀反映現階段行業的水平和對從業人員的要求為目標，在遵循有關技術規程的基礎上，以專業活動為導向，以專業技能為核心，組織企業工程師、高職和本科院校的學術帶頭人共同開發了《Web前端開發職業技能等級標準》。本教材以《Web前端開發職業技能等級標準》中的職業素養和崗位技術技能為重點培養目標，以專業技能為模塊，以工作任務為驅動進行組織編寫，使讀者對Web前端開發的技術體係有更系統、更清晰的認識。
隨著新一輪科技革命與信息技術革命的到來，推動了產業結構調整與經濟轉型升級發展新業態的出現。在戰略性新興產業爆發式發展的同時，對新時代產業人才的培養捉出了新的要求與挑戰。據中國互聯網絡信息中心統計，截至2018年12月，我國網民規模達8.29億人，手機網民規模達8.17億人，網站數量達523萬個，手機App（移動應用程序）在架數量達449萬款。在“互聯網+”戰略的引導下，Web前端開發人員已經成為網站開發、手機App開發和人工智能終端設備界面開發的主要力量。企業增加門戶網站的推廣，從PC端到移動端，再到新顯示技術、智能機器人、自動駕駛、智能穿戴設備、語言翻譯、自動導航等新興領域，全部需要應用Web前端開發技術。在智能製造等戰略及新興產業的高速發展中，出現了極為明顯的人才短缺與發展不均衡現象。目前，軟件開發行業的企業對Web前端開發工程師的需求量極大，全國總缺口每年近百萬人。
隨著移動互聯網技術的高速發展，網站在靜態頁面的基礎上添加了各類桌面軟件，網頁不再只是承載單一的文字和圖片，而是被要求具備炫酷的頁面交互、跨終端的適配兼容功能，使用富媒體讓網頁的內容更加生動，從而讓用戶有更好的使用體驗，這些都基於前端技術來實現，其中包括HTML、CSS、HTML5、CSS3、AJAX、JavaScript、iQuery等，使得無論是在開發難度上還是在開發方式上，都對前端開發人員提出了越來越高的要求。
本教材包括深入淺出MySQL數據庫、PHP技術與應用、Web前後端數據交互技術、響應式開發技術、網站項目實戰5個篇目38個章節。
第一篇深入淺出MySQL數據庫。由淺入深介紹了MySQL數據庫的基礎知識和基本操作，包含MySQL的安裝與配置、MySQL數據庫管理、MySQL數據表管理、MySQL觸發器的創建使用及刪除等。其中包括第1章MySQL基礎，第2章MySQL管理，第3章SQL基本語法，第4章索引、分區與視圖，第5章存儲過程與觸發器，第6章數據庫備份與恢復。
第二篇PHP技術與應用。詳細剖析了PHP的基礎知識與操作，涵蓋PHP數組、函數、文件系統處理、圖形圖像處理，以及如何與Web頁面交互，如何應用PHP操作與管理MySQL數據庫，如何通過Session及Cookie的操作來控制會話。其中包括第7章PHP概述，第8章PHP語言基礎，第9章PHP字符串操作函數，第10章PHP數字操作函數，第11章PHP日期和時間操作函數，第12章PHP數組操作函數，第13章PHP文件系統處理，第14章PHP圖形圖像處理，第15章PHP與Web頁面交互，第16章PHP面向對象程序設計，第17章PHP操作數據庫，第18章Laravel框架。
第三篇Web前後端數據交互技術。詳細介紹了HTTP與Web交互、AJAX的工作原理與應用，以及WebSocket實現瀏覽器後台傳輸、推送交互等，最後以API設計進行了知識拓展與延伸。其中包括第19章Web數據交互技術概述，第20章HTTP概述，第21章AJAX與iframe，第22章頁面性能優化技術，第23章Socket通信。
第四篇響應式開發技術。主要通過Bootstrap的iQuery插件實戰案例介紹UI流行框架，使學習者通過大量案例和講解代碼的方式，掌握Bootstrap的內核開發原理和Bootstrap的JavaScript的插件交互設計，從而快速成為開發高手。其中包括第24章Bootstrap概述，第25章Bootstrap的基本架構，第26章Bootstrap的樣式，第27章Bootstrap的組件，第28章Sass概述，第29章Bootstrap響應式開發案例。
第五篇網站項目實戰。主要講述了CMS開發的實現，主要有後台登錄、訪問控制、模型管理、欄目管理、內容管理、廣告位管理、廣告內容管理等。其中包括第30章CMS開發，第31章CMS基礎頁面，第32章模型管理實戰，第33章欄目管理實戰，第34章內容管理實戰，第35章廣告管理實戰，第36章CMS前台頁面呈現實戰，第37章數據庫備份與恢復實戰，第38章靜態資源管理實戰。
本教材的編寫與審校工作由嚴潔萍、陳慕菁完成，董旭依據《Web前端開發職業技能等級標準》對全書做了內容統籌、章節結構設計和統稿。
由於編者水平有限，書中難免有不當之處，懇請讀者不吝賜教並提出寶貴意見，相信讀者的反饋將會為未來本教材再次修訂提供良好的幫助。

第三篇Web前後端數據交互技術
第19章Web數據交互技術概述2
19．1 Web的概念2
19．2 Web數據交互技術3
19．2．1 AJAX 3
19．2．2 iframe 4
19．2 ．3 WebSocket 4
19．3本章小結4
第20章HTTP概述5
20．1 HTTP簡介5
20．1．1 HTTP的概念5
20．1．2 HTTP的消息結構6
20．1．3 HTTP的主要特點7
20．2 HTTP的通信過程7
20．3 HTTP狀態碼匯總11
20．3．1狀態碼200 11
20．3．2狀態碼301 11
20．3．3狀態碼302 12
20．3．4狀態碼304 13
20．3．5狀態碼403 13
20．3．6狀態碼404 15
20．3．7狀態碼500 15
20．4本章小結16
第21章AJAX與iframe 17
21．1 AJAX異步通信17
21．1．1 AJAX簡介17
21．1．2 AJAX的工作原理18
21．2 iframe異步通信18
21．2．1 iframe簡介18
21．2．2使用JavaScript操作
iframe 19
21．2．3使用jQuery操作iframe 20
21．3應用實例22
21．3．1 AJAX應用實例22
21．3．2 iframe應用實例24
21．4本章小結26
第22章頁面性能優化技術28
22．1 Cookie的創建、使用和銷毀28
22．1．1創建Cookie 28
22．1．2使用Cookie 30
22．1．3銷毀Cookie 30
22．2頁面性能優化32
22．2．1減少HTTP請求次數32
22．2．2靜態資源與動態資源分離32
22．3本章小結32
第23章Socket通信34
23．1 Socket通信簡介34
23 ．1．1 Socket通信的概念34
23．1．2 Socket通信的機制35
23．1．3 Socket通信的過程36
23．2使用Socket實現聊天室功能36
23．2．1使用PHP實現Socket
服務端36
23．2．2使用jQuery實現Socket
客戶端39
23．2．3測試聊天室功能41
23．3本章小結43
第四篇響應式開發技術
第24章Bootstrap概述46
24．1 Bootstrap簡介46
24．2 Bootstrap的特性47
24．2．1 Bootstrap的構成47
24．2．2 Bootstrap的功能47
24．3 Bootstrap的應用瀏覽47
24．4 Bootstrap的開發工具48
24．5 Bootstrap的安裝和配置49
24．5．1 Bootstrap的下載和配置49
24．5． 2 Bootstrap的文件結構50
24．6本章小結51
第25章Bootstrap的基本架構53
25．1響應式開發技術53
25．1．1響應式開發的概念53
25．1．2響應式開發的流程54
25．1．3響應式佈局結構54
25．1．4設計響應式網站55
25．2 Bootstrap的柵格佈局56
25．2．1柵格佈局簡介56
25．2．2 Bootstrap的終端設備類型56
25．2．3 Bootstrap的柵格基本佈局57
25．2．4 Bootstrap的柵格水平佈局
和垂直佈局61
25．2．5 Bootstrap的柵格排序和
偏移65
25．3本章小結67
第26章Bootstrap的樣式68
26．1 Bootstrap的作用68
26．2媒體對象68
26．3文本75
26 ．4列表78
26．5表格80
26．6圖片84
26．7表單85
26．7．1基礎表單85
26．7．2行內表單87
26．7．3水平表單88
26．7．4表單大小89
26．8輔助樣式90
26．8．1背景色91
26．8．2文本顏色91
26．9本章小結92
第27章Bootstrap的組件93
27．1按鈕94
27．1．1按鈕大小95
27 ．1．2按鈕狀態95
27．2下拉菜單96
27．2．1創建下拉菜單97
27．2．2分裂式下拉菜單99
27．2．3上拉菜單100
27．2．4其他下拉菜單101
27．3按鈕組102
27．3．1工具欄103
27．3．2兩端對齊的按鈕組104
27．3．3按鈕組的嵌套105
27．4輸入框組106
27．5導航108
27．5．1定義導航108
27．5．2兩端對齊導航109
27．5．3嵌套下拉菜單110
27．5．4導航欄111
27．5．5導航欄的文字/圖標112
27．5．6導航欄其他組件113
27．5．7設置導航欄的位置114
27．5．8響應式導航欄115
27．5．9分頁導航117
27．5．10翻頁導航118
27．5．11麵包屑導航119
27．6標籤120
27．7徽章120
27．8縮略圖122
27．9警告框123
27．10進度條124
27．11版式126
27．11．1巨幕區塊126
27．11．2頁面標題126
27．11．3列表組127
27 ．11．4面板128
27．11．5 Well容器129
27．12字體圖標130
27．13本章小結131
第28章Sass概述132
28．1 Sass的概念132
28．2 Sass的安裝133
28．3 Sass的配置135
28．4 Sass的基礎語法136
28．4．1變量136
28．4．2嵌套CSS規則137
28．4． 3混合指令138
28．4．4運算141
28．4．5條件判斷和循環144
28．4．6數組147
28．4．7導入Sass文件148
28．4．8註釋149
28．4．9選擇器繼承149
28．5本章小結149
第29章Bootstrap響應式開發案例150
29．1 Bootstrap項目的搭建150
29．2頁面初始化152
29．3後台模板佈局153
29．4項目首頁160
29．5用戶中心和提醒事項164
29．6數據查詢和數據面板169
29．7動畫效果174
29．8本章小結176
第五篇網站項目實戰
第30章CMS開發178
30．1 CMS概述178
30．2 CMS的內容179
30．3搭建Laravel框架179
30．4本章小結179
第31章CMS基礎頁面180
31．1 CMS基礎頁面概述180
31．2後台登錄頁180
31．2．1創建數據庫表及寫入
記錄181
31．2．2配置後台登錄的表單
頁面182
31．2．3處理表單數據182
31．3後台首頁184
31．4訪問權限控制186
31．5本章小結188
第32章模型管理實戰189
32．1模型管理概述189
32．2模型創建190
32．3模型列表196
32．4模型修改198
32．5模型刪除202
32．6本章小結206
第33章欄目管理實戰207
33．1欄目管理概述207
33．2欄目添加208
33．3欄目列表查看213
33．4欄目修改216
33．5欄目刪除217
33．6本章小結219
第34章內容管理實戰220
34．1內容管理概述220
34．2內容添加221
34．3內容保存225
34．4內容呈現228
34．5內容修改231
34．6內容刪除236
34．7本章小結238
第35章廣告管理實戰239
35．1廣告管理概述239
35．2廣告位管理240
35．2．1廣告位添加240
35． 2．2廣告位列表查看245
35．2．3廣告位修改246
35．2．4廣告位刪除248
35．3廣告內容管理249
35．3．1廣告內容表單添加249
35．3．2廣告內容圖片呈現255
35．3．3廣告內容列表查看258
35．3．4廣告內容修改260
35．3．5廣告內容刪除262
35．4本章小結263
第36章CMS前台頁面呈現實戰264
36．1 CMS前台頁面概述265
36．2註冊服務和門面265
36．3前台首頁和導航267
36．3．1前台首頁267
36．3．2導航270
36．4文章頁面273
36．4．1新聞列表頁273
36．4．2新聞詳情頁280
36．5產品頁面284
36．5．1產品列表頁284
36．5．2產品詳情頁287
36．6其他頁面290
36．6．1 “關於我們”和“聯繫
我們” 291
36．6．2首頁廣告294
36．6．3首頁內容296
36．7本章小結300
第37章數據庫備份與恢復實戰301
37．1數據庫備份與恢復概述301
37．2數據庫備份301
37．3數據庫恢復304
37．4本章小結306
第38章靜態資源管理實戰307
38．1靜態資源管理概述307
38．2靜態資源列表展示308
38．3靜態資源上傳311
38．4靜態資源刪除312
38．5本章小結314