Web前端開發(fā)項(xiàng)目化教程（微課版）

本書特點(diǎn)

（1）遵循企業(yè)項(xiàng)目開發(fā)流程，展現(xiàn) Web 前端項(xiàng)目的設(shè)計(jì)與開發(fā)環(huán)節(jié)。

本書以企業(yè)真實(shí)的開發(fā)流程 — 需求分析→原型設(shè)計(jì)→編程階段→數(shù)據(jù)交互→軟件測(cè)試為基礎(chǔ)，為

讀者展示一個(gè)項(xiàng)目從“0”到“1”的開發(fā)過程。

（2）融合多種教學(xué)方法，面向零基礎(chǔ)的讀者提供工作手冊(cè)式教材。

本書區(qū)別于傳統(tǒng)編程書籍，是一本工作手冊(cè)式新型教材，由學(xué)校教師與企業(yè)工程師合作編寫。全書

側(cè)重于“學(xué)中做，做中學(xué)”，采用情景教學(xué)法 + 項(xiàng)目教學(xué)法 + 任務(wù)教學(xué)法，注重調(diào)動(dòng)讀者的興趣，使其

在實(shí)踐過程中掌握相關(guān)的知識(shí)和技能，逐步增強(qiáng)自信，最終形成自主學(xué)習(xí)的意識(shí)和途徑，獲得項(xiàng)目開發(fā)

的經(jīng)驗(yàn)和成就感。

（3）內(nèi)容豐富 — Web 全棧式內(nèi)容。

本書不僅講解了如何展開 Web 前端項(xiàng)目的開發(fā)工作，而且講解了如何搭建 Web 服務(wù)器環(huán)境，如何通

過 PHP 語言實(shí)現(xiàn)后端數(shù)據(jù)處理，將數(shù)據(jù)存儲(chǔ)在 MySQL 數(shù)據(jù)庫(kù)中，同時(shí)還介紹了 Web 后端開發(fā)的相關(guān)知識(shí)。

（4）融入課程思政元素，配套教學(xué)資源豐富。

在“ 互 聯(lián) 網(wǎng) +” 時(shí) 代，Web 前 端 開 發(fā) 技 術(shù) 是 一 個(gè) 不 可 或 缺 的 技 術(shù) 領(lǐng) 域， 它 主 要 是 通 過

HTML+CSS+JavaScript 技術(shù)創(chuàng)建 Web 頁面，進(jìn)而實(shí)現(xiàn)互聯(lián)網(wǎng)產(chǎn)品的用戶界面交互功能。隨著互聯(lián)網(wǎng)業(yè)

務(wù)不斷拓展，業(yè)內(nèi)競(jìng)爭(zhēng)不斷加劇，企業(yè)對(duì) Web 前端開發(fā)技術(shù)人員的需求量越來越大，Web 開發(fā)人員在

業(yè)內(nèi)的地位迅速提高。

本書講述了兩個(gè) Web 前端項(xiàng)目 — “黨史學(xué)習(xí)教育網(wǎng)”開發(fā)和“官堰村振興網(wǎng)”開發(fā)，采用情景

教學(xué)法 + 項(xiàng)目教學(xué)法 + 任務(wù)教學(xué)法來組織教學(xué)內(nèi)容并實(shí)現(xiàn)教學(xué)目標(biāo)。本書遵循由淺入深的認(rèn)知規(guī)律，

每個(gè)項(xiàng)目各安排 8 個(gè)任務(wù)，讀者可身臨其境般地在學(xué)中做、在做中學(xué)，既掌握 Web 前端項(xiàng)目的完整開

發(fā)流程，又掌握 Web 前端開發(fā)人員所需具備的必要知識(shí)和技能，為今后的技術(shù)深造打下堅(jiān)實(shí)的基礎(chǔ)。

本書特點(diǎn)

（1）遵循企業(yè)項(xiàng)目開發(fā)流程，展現(xiàn) Web 前端項(xiàng)目的設(shè)計(jì)與開發(fā)環(huán)節(jié)。

本書以企業(yè)真實(shí)的開發(fā)流程 — 需求分析→原型設(shè)計(jì)→編程階段→數(shù)據(jù)交互→軟件測(cè)試為基礎(chǔ)，為

讀者展示一個(gè)項(xiàng)目從“0”到“1”的開發(fā)過程。

（2）融合多種教學(xué)方法，面向零基礎(chǔ)的讀者提供工作手冊(cè)式教材。

本書區(qū)別于傳統(tǒng)編程書籍，是一本工作手冊(cè)式新型教材，由學(xué)校教師與企業(yè)工程師合作編寫。全書

側(cè)重于“學(xué)中做，做中學(xué)”，采用情景教學(xué)法 + 項(xiàng)目教學(xué)法 + 任務(wù)教學(xué)法，注重調(diào)動(dòng)讀者的興趣，使其

在實(shí)踐過程中掌握相關(guān)的知識(shí)和技能，逐步增強(qiáng)自信，最終形成自主學(xué)習(xí)的意識(shí)和途徑，獲得項(xiàng)目開發(fā)

的經(jīng)驗(yàn)和成就感。

（3）內(nèi)容豐富 — Web 全棧式內(nèi)容。

本書不僅講解了如何展開 Web 前端項(xiàng)目的開發(fā)工作，而且講解了如何搭建 Web 服務(wù)器環(huán)境，如何通

過 PHP 語言實(shí)現(xiàn)后端數(shù)據(jù)處理，將數(shù)據(jù)存儲(chǔ)在 MySQL 數(shù)據(jù)庫(kù)中，同時(shí)還介紹了 Web 后端開發(fā)的相關(guān)知識(shí)。

（4）融入課程思政元素，配套教學(xué)資源豐富。

本書中的兩個(gè)項(xiàng)目案例 — “黨史學(xué)習(xí)教育網(wǎng)”開發(fā)和“官堰村振興網(wǎng)”開發(fā)融合了課程思政元素，

有助于教師通過課堂教學(xué)加強(qiáng)大學(xué)生思想政治教育工作。讀者掃描書中的二維碼即可觀看相應(yīng)的微課視頻。

本書推薦教師采用 64 ～ 96 學(xué)時(shí)實(shí)施授課，學(xué)生采用“學(xué)中做，做中學(xué)”模式進(jìn)行學(xué)習(xí)。

陜西國(guó)防工業(yè)職業(yè)技術(shù)學(xué)院的郭立文、劉向鋒老師與北京華晟經(jīng)世信息技術(shù)有限公司的運(yùn)營(yíng)總監(jiān)王

洪波、Web 開發(fā)工程師茍彥昉共同合作完成了全書的設(shè)計(jì)與撰寫工作，郭立文與王洪波任主編，茍彥昉

與劉向鋒任副主編。其中，項(xiàng)目一的任務(wù) 1 至任務(wù) 8 由郭立文負(fù)責(zé)編寫，項(xiàng)目二的任務(wù) 1 和任務(wù) 2 由王

洪波負(fù)責(zé)編寫，項(xiàng)目二的任務(wù) 3、任務(wù) 4 和任務(wù) 8 由茍彥昉負(fù)責(zé)編寫，項(xiàng)目二的任務(wù) 5 至任務(wù) 7 由劉向

鋒負(fù)責(zé)編寫。全書由郭立文與茍彥昉統(tǒng)稿，由陜西國(guó)防工業(yè)職業(yè)技術(shù)學(xué)院的何杰惠老師主審。

特別感謝茍彥昉工程師，他承擔(dān)了項(xiàng)目案例設(shè)計(jì)、代碼編寫及調(diào)試、編輯與排版、線上配套資源建

設(shè)等大量工作。另外還要感謝陜西國(guó)防工業(yè)職業(yè)技術(shù)學(xué)院的劉帆凱、劉茹、郭柏良、趙金泉、高家輝、

康旭洋、于天亮、陳一凡、肖宇輝等同學(xué)，他們協(xié)助老師完成了素材收集和處理等工作。

由于時(shí)間倉(cāng)促且編者水平有限，書中難免有錯(cuò)漏之處，懇請(qǐng)讀者批評(píng)指正。

編　者

2021 年 9 月

項(xiàng)目一　“黨史學(xué)習(xí)教育網(wǎng)”開發(fā)
單元一　項(xiàng)目準(zhǔn)備階段 ....................................................2
任務(wù) 1　“黨史學(xué)習(xí)教育網(wǎng)”需求分析 .........................2
任務(wù) 2　“黨史學(xué)習(xí)教育網(wǎng)”原型設(shè)計(jì) .........................8
單元二　模塊開發(fā)階段 ..................................................17
任務(wù) 3　“黨史學(xué)習(xí)教育網(wǎng)”首頁制作 .......................17
任務(wù) 4　構(gòu)建注冊(cè)登錄模塊 ...........................................44
任務(wù) 5　“黨史學(xué)習(xí)教育網(wǎng)”功能完善 .......................60
單元三　數(shù)據(jù)交互階段 ..................................................84
任務(wù) 6　搭建 Web 服務(wù)器環(huán)境 ......................................84
任務(wù) 7　“黨史學(xué)習(xí)教育網(wǎng)”數(shù)據(jù)靈動(dòng) .......................99
單元四　測(cè)試階段 .......................................................108
任務(wù) 8　“黨史學(xué)習(xí)教育網(wǎng)”運(yùn)行測(cè)試 .....................108
項(xiàng)目二　“官堰村振興網(wǎng)”開發(fā)
單元一　項(xiàng)目準(zhǔn)備階段 ................................................ 115
任務(wù) 1　“官堰村振興網(wǎng)”需求分析 ......................... 115
任務(wù) 2　“官堰村振興網(wǎng)”原型設(shè)計(jì) .........................121
單元二　模塊開發(fā)階段 ................................................128
任務(wù) 3　“官堰村振興網(wǎng)”首頁制作 .........................128
任務(wù) 4　“官堰村振興網(wǎng)”文化振興頁面制作 .........151
任務(wù) 5　“官堰村振興網(wǎng)”產(chǎn)業(yè)振興頁面制作 .........173
任務(wù) 6　“官堰村振興網(wǎng)”生態(tài)振興頁面制作 .........193
單元三　數(shù)據(jù)交互階段 ................................................210
任務(wù) 7　“官堰村振興網(wǎng)”交互功能 .........................210
單元四　測(cè)試階段 .......................................................231
任務(wù) 8　“官堰村振興網(wǎng)”運(yùn)行測(cè)試 .........................231
參考文獻(xiàn) .....................................................................235

1. 零基礎(chǔ)玩轉(zhuǎn)國(guó)產(chǎn)大模型DeepSeek [徐永冰 張帥 編著]
2. 網(wǎng)絡(luò)工程師5天修煉（適配第6版考綱） [主編　朱小平 施游]
3. 信息系統(tǒng)項(xiàng)目管理師考試32小時(shí)通關(guān)（適用第4版考綱） [薛大龍]
4. 信息系統(tǒng)管理工程師考試32小時(shí)通關(guān)（適配第2版考綱） [薛大龍　劉偉]
5. 土木工程材料檢測(cè)實(shí)訓(xùn) [洪曉江 達(dá)則曉麗 錢波]
6. 科技信息檢索與論文寫作實(shí)用教程 [李振華]
7. 傳統(tǒng)山水畫論解讀與實(shí)踐 [陳鈉 著]
8. Python數(shù)據(jù)庫(kù)編程 [主編 殷樹友 邢 翀]
9. 計(jì)算機(jī)基礎(chǔ)實(shí)訓(xùn)指導(dǎo) [主編 袁春萍 朱妮]
10. 嵌入式人工智能技術(shù)應(yīng)用（數(shù)字教材） [主編 胡娜 楊國(guó)勇 晏廷榮]
11. Vienna整流器技術(shù) [桂存兵 著]
12. 變頻器與伺服應(yīng)用 [陳剛 葉云飛]
13. 物聯(lián)網(wǎng)工程設(shè)計(jì)與實(shí)踐 [湯琳 李敏]
14. 爐邊夜話——深入淺出話AI [汪建　著]
15. 電商運(yùn)營(yíng)與管理 [鐘肖英 陳瀟]
16. Java面向?qū)ο蟪绦蛟O(shè)計(jì) [主編 姜春磊 陳虹潔]
17. 信息技術(shù)基礎(chǔ)（Windows 10+WPS Office）（微課版） [主編　石利平　田輝平　謝盛嘉]
18. 人工智能應(yīng)用 [主編　陳　萍　劉培培　陳孟軍]
19. 大學(xué)生職業(yè)發(fā)展與就業(yè)指導(dǎo) [主編　劉志堅(jiān)]
20. 高級(jí)辦公應(yīng)用項(xiàng)目教程 [主編 屈晶 趙成麗]
21. 微信小程序開發(fā)項(xiàng)目實(shí)戰(zhàn)（微課版） [主編 黃龍泉 郭峰 朱倩]
22. 企業(yè)檔案工作實(shí)戰(zhàn)寶典百問百答 [華俊 盧秀英 邵甜甜 著]
23. 計(jì)算機(jī)網(wǎng)絡(luò)原理及應(yīng)用 [主編 唐繼勇 葉坤 孫夢(mèng)娜]
24. 大學(xué)生創(chuàng)業(yè)基礎(chǔ) [主編 王麗莉 王 楊]
25. 船舶輔機(jī) [主編 王連海 于洋 姜淑翠]
26. 大學(xué)生就業(yè)指導(dǎo) [主編 王麗莉 董宴廷]
27. 系統(tǒng)架構(gòu)設(shè)計(jì)師章節(jié)習(xí)題與考點(diǎn)特訓(xùn) [主編 薛大龍 鄒月平]
28. 高校學(xué)生工作探索與實(shí)踐 [郭亮 著]
29. 大學(xué)生情商管理 [方雄 著]
30. 2023年長(zhǎng)沙市會(huì)展業(yè)發(fā)展報(bào)告 [主編 周棟良]