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. 输水管线工程风险管理 [张勇 党亥生 著]
2. 民用航空飞机标准线路施工 [主编　王志敏　陈明]
3. 不息的水脉—大运河讲谈录 [赵珩　著]
4. 实用运筹学 [主编　邢育红　于晋臣]
5. 三峡梯级电站水资源决策支持系统研究与开发 [姚华明 潘红忠 汤正]
6. 海南黎族民俗文化鉴赏 [庞国华　著]
7. 石墨烯在太赫兹及中红外频段电磁器件设计中的应用 [李艳秀 庄华伟 著]
8. 电子技术（第二版） [主编 覃爱娜 李飞]
9. 办公自动化高级应用 [陈萍 朱晓玉]
10. 信息处理技术员考试32小时通关 [薛大龙]
11. 电子产品设计案例教程（微课版）—基于嘉立创EDA（专业版） [王静 莫志宏 陈学昌 丁红]
12. C程序设计实践教程 [刘卫国]
13. C程序设计（慕课版） [刘卫国]
14. Web技术开发教程（基于.NET开源MVC框架） [王合闯 韩红玲 王青正 陈海蕊]
15. 商务英语翻译教程（笔译）（第四版） [主编 王军平]
16. 智慧零售技术与应用 [洪旭 著]
17. 建设工程法规实务 [主编 余滢]
18. 商务秘书理论与实务（第三版） [主编 张同钦]
19. 程序设计基础实践教程（C/C++语言版） [张桂芬 葛丽娜]
20. C++案例项目精讲 [主编 杨国兴]
21. 劳动争议处理实务 [主编 王秀卿 罗静]
22. 工程数学 [主编 郭立娟 王海]
23. 语音识别理论与实践 [主编　莫宏伟]
24. 信息系统项目管理师章节习题与考点特训（第二版） [主编 薛大龙]
25. 武术基础教程 [主编 李代勇 谢志民]
26. 计算机网络实训教程 [主编 张浩军 赵玉娟]
27. 画法几何与机械制图习题集（多学时） [主编 赵军]
28. HCIA-Datacom认证题库分类精讲 [主 编 韩立刚]
29. SwiftUI完全开发 [李智威 著]
30. 网络规划设计师备考一本通 [夏杰 编著]