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

本书特点

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

本书以企业真实的开发流程 — 需求分析→原型设计→编程阶段→数据交互→软件测试为基础，为

读者展示一个项目从“0”到“1”的开发过程。

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

本书区别于传统编程书籍，是一本工作手册式新型教材，由学校教师与企业工程师合作编写。全书

侧重于“学中做，做中学”，采用情景教学法 + 项目教学法 + 任务教学法，注重调动读者的兴趣，使其

在实践过程中掌握相关的知识和技能，逐步增强自信，最终形成自主学习的意识和途径，获得项目开发

的经验和成就感。

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

本书不仅讲解了如何展开 Web 前端项目的开发工作，而且讲解了如何搭建 Web 服务器环境，如何通

过 PHP 语言实现后端数据处理，将数据存储在 MySQL 数据库中，同时还介绍了 Web 后端开发的相关知识。

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

在“ 互 联 网 +” 时 代，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. 信息技术基础（麒麟操作系统+WPS Office） [主编　芮雪　蒋莉　王亮亮]
2. Office高级应用项目式教程（第2版） [主编 李观金 张倩文 黎夏克 ]
3. 巧用翻译学英语：英汉互译500例 [王学文 著]
4. 高等教育多维评价体系构建与高质量发展研究 [张妍 著]
5. 系统规划与管理师章节习题与考点特训（第二版） [主编 薛大龙]
6. 计算机操作系统实践指导（openEuler版） [主编 秦光 曾陈萍 岳付强]
7. 信息系统管理工程师真题及模考卷精析（适用机考） [主 编 薛大龙 程 刚 上官绪]
8. 航海类院校体育教育教学研究 [张利超 李宁 著]
9. 新时代背景下我国职业教育产教融合长效机制建设研究 [王玉贤 著]
10. 电路分析 [主编 李飞 毛先柏]
11. 信息系统管理工程师（适用第2版大纲）一站通关 [指尖疯　编著]
12. 传统山水画论解读与实践 [陈钠 著]
13. 网络工程师备考一本通（适配第6版考纲） [夏杰 编著]
14. 陈孝云的职教理想与情怀 [祝吉太 江传瑞 张义廷 著]
15. 地方本科院校电子信息学科课程思政案例集 [王甫]
16. Excel数据处理与分析（第二版） [主编 张志明 邹 蕾]
17. 网络工程师5天修炼（适配第6版考纲） [主编　朱小平 施游]
18. 仓储管理实务（第二版） [周宁武 编著]
19. 基于AE与C#的地理信息系统二次开发 [李小根 贾艳昌 乔翠平 姜彤 ]
20. 2023年长沙市文化和旅游业发展报告 [主编 陈莉]
21. 舞台化妆造型设计 [主编 刘思彤 张 涛 张忆雨]
22. 产教融合视角高校体育专业实践教学体系构建研究 [杨柳青 叶华兵 著]
23. 知识图谱及应用案例 [张善文 黄文准 于长青 陈明淑]
24. Python程序设计案例教程（微课版） [主编　石利平　田辉平　余以胜]
25. 皓月繁星：青少年儿童心理成长手册 [主　编　林赞歌 副主编　杜志南]
26. 材料力学 [章宝华 赵新胜 徐斌]
27. 系统集成项目管理工程师考试32小时通关（第3版） [主编　薛大龙 副主编　上官绪阳]
28. 软考论文高分特训与范文10篇——系统分析师（第二版） [薛大龙 邹月平 施游]
29. 黄河海勃湾水利枢纽防凌安全运行 [王战领 王丛发 范瑜彬 著]
30. 大学生心理健康教育 [方雄 著]