Web前端开发项目化教程（微课版）

遵循企业项目开发流程，展现Web前端项目设计与开发环节。

融合多种教学方法，面向零基础的读者提供工作手册式教材。

融入课程思政元素，配套教学资源丰富。

前　　言

在“互联网+”时代，Web前端开发技术是一个不可或缺的技术领域，它主要是通过HTML+CSS+JavaScript技术创建Web页面，进而实现互联网产品的用户界面交互功能。随着互联网业务不断拓展，业内竞争不断加剧，企业对Web前端开发技术人员的需求量越来越大，Web开发人员在业内的地位迅速提高。

本书讲述了两个Web前端项目—“党史学习教育网”开发和“官堰村振兴网”开发，采用情景教学法+项目教学法+任务教学法来组织教学内容并实现教学目标。本书遵循由浅入深的认知规律，每个项目各安排8个任务，读者可身临其境般地在学中做、在做中学，既掌握Web前端项目的完整开发流程，又掌握Web前端开发人员所需具备的必要知识和技能，为今后的技术深造打下坚实的基础。

本书特点

（1）遵循企业项目开发流程，展现Web前端项目的设计与开发环节。

本书以企业真实的开发流程—需求分析→原型设计→编程阶段→数据交互→软件测试为基础，为读者展示一个项目从“0”到“1”的开发过程。

（2）融合多种教学方法，面向零基础的读者提供工作手册式教材。

本书区别于传统编程书籍，是一本工作手册式新型教材，由学校教师与企业工程师合作编写。全书侧重于“学中做，做中学”，采用情景教学法+项目教学法+任务教学法，注重调动读者的兴趣，使其在实践过程中掌握相关的知识和技能，逐步增强自信，最终形成自主学习的意识和途径，获得项目开发的经验和成就感。

（3）内容丰富—Web全栈式内容。

本书不仅讲解了如何展开Web前端项目的开发工作，而且讲解了如何搭建Web服务器环境，如何通过PHP语言实现后端数据处理，将数据存储在MySQL数据库中，同时还介绍了Web后端开发的相关知识。

（4）融入课程思政元素，配套教学资源丰富。

本书中的两个项目案例—“党史学习教育网”开发和“官堰村振兴网”开发融合了课程思政元素，有助于教师通过课堂教学加强大学生思想政治教育工作。读者扫描书中的二维码即可观看相应的微课视频。

本书推荐教师采用64～96学时实施授课，学生采用“学中做，做中学”模式进行学习。

陕西国防工业职业技术学院的郭立文、刘向锋老师与北京华晟经世信息技术有限公司的运营总监王洪波、Web开发工程师苟彦昉共同合作完成了全书的设计与撰写工作，郭立文与王洪波任主编，苟彦昉与刘向锋任副主编。其中，项目一的任务1至任务8由郭立文负责编写，项目二的任务1和任务2由王洪波负责编写，项目二的任务3、任务4和任务8由苟彦昉负责编写，项目二的任务5至任务7由刘向锋负责编写。全书由郭立文与苟彦昉统稿，由陕西国防工业职业技术学院的何杰惠老师主审。

特别感谢苟彦昉工程师，他承担了项目案例设计、代码编写及调试、编辑与排版、线上配套资源建设等大量工作。另外还要感谢陕西国防工业职业技术学院的刘帆凯、刘茹、郭柏良、赵金泉、高家辉、康旭洋、于天亮、陈一凡、肖宇辉等同学，他们协助老师完成了素材收集和处理等工作。

由于时间仓促且编者水平有限，书中难免有错漏之处，恳请读者批评指正。

编　者

2021年9月

前言
项目一　“党史学习教育网”开发
单元一　项目准备阶段 2
任务1　“党史学习教育网”需求分析 2
任务2　“党史学习教育网”原型设计 8
单元二　模块开发阶段 17
任务3　“党史学习教育网”首页制作 17
任务4　构建注册登录模块 44
任务5　“党史学习教育网”功能完善 60
单元三　数据交互阶段 84
任务6　搭建Web服务器环境 84
任务7　“党史学习教育网”数据灵动 99
单元四　测试阶段 108
任务8　“党史学习教育网”运行测试 108
项目二　“官堰村振兴网”开发
单元一　项目准备阶段 115
任务1　“官堰村振兴网”需求分析 115
任务2　“官堰村振兴网”原型设计 121
单元二　模块开发阶段 128
任务3　“官堰村振兴网”首页制作 128
任务4　“官堰村振兴网”文化振兴页面制作 151
任务5　“官堰村振兴网”产业振兴页面制作 173
任务6　“官堰村振兴网”生态振兴页面制作 193
单元三　数据交互阶段 210
任务7　“官堰村振兴网”交互功能 210
单元四　测试阶段 231
任务8　“官堰村振兴网”运行测试 231
参考文献 235

1. 英语大爆炸：跟趣味情景剧学口语（微课版） [秦然　编著]
2. 机械工程制图任务跟踪训练 [主编 王瑞清 赵金考 周彦云 ]
3. 机械工程制图 [主编 覃国萍 刘百顺 禹晨]
4. 平面设计与制作项目化教程 [主编　李晨]
5. 后期影像剪辑技术 [主编　郭建伟]
6. 人工智能概论（第二版） [主编　任云晖　丁红　徐迎春 ]
7. 信息时代美育之道 [主编　刘宏宇　黎娅]
8. 数字媒体交互设计项目式教程（微课版） [主编　苏陆]
9. 动画运动规律项目实例解析（微课版） [孙珊珊　袁维坤]
10. 自然语言处理 [主编　冯建周]
11. 新媒体内容创作实务（微课版） [主编　覃思源]
12. 人工智能基础 [主编 余平 张春阳]
13. 人工智能导论 [主编 王飞 潘立武]
14. Amazing！儿童英语自然拼读分级教材（全8册） [王玲　编著]
15. Spark大数据处理技术 [主编　刘仁山　周洪翠　庄新妍]
16. 毫无PS痕迹—你的第一本Photoshop书（第二版） [赵鹏 著]
17. 电视新闻制作（活页式） [主编 王晓翠 刘传琳]
18. C语言同步案例习题精解 [主编 肖朝晖]
19. Python程序设计 [李国燕 王新强 刘佳 等编著]
20. 高等数学（下册） [秦红兵]
21. 智慧畜牧业技术 [主编 连卫民 张志明 王辉]
22. Python程序设计项目化教程（活页式） [主编　卢凤伟]
23. 人工智能算法与实践 [主编　梁琨　张翼英]
24. 网页设计与制作 [主编 王潇 章明珠]
25. Python办公自动化—玩转Excel [郝春吉 刘智杨 周永福 黄 诠]
26. 人工智能概论（第二版） [张广渊　周风余　朱振方　著]
27. Web安全基础及项目实践 [主编 郑丽 安厚霖 崔俊鹏]
28. 电路与电子技术Ⅲ——模拟电子技术 [主编 刘峰]
29. 线性代数 [主编 惠小健 王震 卢鸿艳]
30. 信息安全技术基础（第二版） [主编 张浩军 陈莉 王峰]