Web 应用开发竞赛真题实战特训教程 图解版

版权信息

书名：Web 应用开发竞赛真题实战特训教程　图解版

ISBN：978-7-115-69228-3

本书由人民邮电出版社发行数字版。版权所有，侵权必究。

您购买的人民邮电出版社电子书仅供您个人使用，未经授权，不得以任何方式复制和传播本书内容。

我们愿意相信读者具有这样的良知和觉悟，与我们共同保护知识产权。

如果购买者有侵权行为，我们可能对该用户实施包括但不限于关闭该帐号等维权措施，并可能追究法律责任。

版　　权

组  编 蓝桥杯大赛组委会

编  著 王春艳 王 婧 李世正

责任编辑 罗 芬

人民邮电出版社出版发行　　北京市丰台区成寿寺路11号

邮编　100164 　电子邮件　315@ptpress.com.cn

网址　http://www.ptpress.com.cn

读者服务热线：(010)81055410

反盗版热线：(010)81055315

内容提要

本书旨在为蓝桥杯全国大学生软件和信息技术大赛（原“蓝桥杯全国软件和信息技术专业人才大赛”）软件类赛项（简称蓝桥杯软件赛）中的 Web 应用开发科目提供备赛指导，从历届真题中精选具有代表性的题目作为例题进行分类详解。

本书共 6 章，由浅入深、由易到难地介绍各类例题，主要涉及 HTML、CSS、JavaScript、ES6、Vue、Element Plus、ECharts和Node.js等方面的知识点。每一类例题的讲解，不是简单地给出解析及参考代码，而是注重通过不同的解题方案训练读者的计算思维、编程思维，不仅有助于读者提高解题能力和竞赛水平，还有助于读者形成自己的编程思想，实现“以赛促学”的目标。

本书不仅适合作为蓝桥杯软件赛（Web应用开发科目）的备赛用书，还适合作为本科生和研究生相关编程语言课程的教材或参考资料。

写在前面的话

从早期的“三剑客”（HTML、CSS和JavaScript）到如今的复杂生态系统，前端开发经历了巨大的变革。这一过程不仅涉及技术本身的演进，还反映了用户需求、开发工具和框架的快速迭代，对相关行业从业者的要求也在提高，从业门槛逐步抬高。在这个竞争日益激烈的市场中，从业者仅掌握基础的HTML、CSS和JavaScript知识已远远不能满足需求。许多企业开始寻求那些不仅能编写代码，还能理解用户需求、掌握版本控制工具、熟悉前后端协作的全能型人才。因此，从业者需要不断学习和适应新技术，如React、Vue等现代框架，以及Node.js等后端技术。

蓝桥杯软件赛设立了Web应用开发科目，旨在以赛促学，让未来希望从事前端开发的学生了解行业核心技术技能，使他们能够在进入职场时具备更强的竞争力。比赛不仅能激发学生的学习热情，还能提供一个真实的项目环境，让学生在实践中运用所学知识。通过基于真实场景的实战题目，即使是尚未进入企业的学生，也能对主流应用的开发场景和开发思路有更深入的理解，从而掌握必要的技术，更重要的是培养解决实际问题的能力。

最后，谈谈本书的起源与定位。虽然网络上有丰富的前端资源，但作为Web应用开发科目的教研团队，我们始终在思考什么样的资源对参赛选手真正有帮助。最终，我们讨论的焦点回到了题目本身。作为开发者，大家在学习过程中可能有过这样的体会：看似已经掌握了某些知识点，但在动手编码时，却发现实际操作并不如预期顺利。这正是知识灵活运用能力不足的体现。因此，本书的定位便是“真题实战解析”。我们从历届真题中挑选了一些具有代表性的题目，通过对这些题目进行深度剖析，不仅帮助读者理解特定题目的解题思路，更希望他们能够掌握同类型或同考点题目的解题技巧。本书不仅提供了每道题目的详细解题过程，还分析了相关的技术点和高频失分点，以帮助读者更全面地理解知识的应用。

如何学习本书

本书适合具有一定前端基础，对蓝桥杯软件赛（Web 应用开发科目）有浓厚兴趣的 Web 应用开发爱好者及高校计算机相关专业的师生阅读。

建议读者结合本书配套线上课程（链接为https://www.lanqiao.cn/courses/60086）同步学习，以达到“边学边练”的效果。如需了解Web应用开发科目更多历年真题，可访问蓝桥杯大赛官方题库（链接为https://www.lanqiao.cn/problems/），在题库中选择“场景实战”标签下的“蓝桥杯前端真题”，即可查看相关题目。

本书在编写时考虑了不同编程水平读者的学习特点和竞赛需求。下面详细介绍本书所设置的章节结构，以便读者在了解我们的编写思路之后，能更好地应用本书来进行学习和备赛。

本书大部分题目及其解答过程的讲解，主要分为题目信息、懒人速读、题目分析等栏目，其具体构成如下页图所示。

（1）题目信息。此栏目主要提供两类题目信息：一类是基本的“竞赛信息”，如该试题的所属场次、组别、分值等；另一类是完整的试题信息，包括介绍、准备、目标、规定、判分标准 5 个模块。

（2）懒人速读。部分真题的描述较烦琐，不利于读者快速把握题目的核心考点，因此我们通过此栏目带领读者高效地解读题目、准确地领会考点，帮助读者节约阅读题目与理解题意的时间，从而快速投入解题的思考过程。

（3）题目分析。此栏目下设置了两个重要模块：一是核心考点，即题目主要考查的知识点；二是解题思路，从参赛选手的角度一步一步引出思考与解决问题的方法。

蓝桥杯大赛官方资源的获取

蓝桥云课是蓝桥杯大赛的官方资源平台。读者可以在蓝桥云课上对包括本书所提供的题目在内的各类题目进行模拟训练。蓝桥云课内嵌了评测脚本，能进行自动判断，并返回有关正误的提示，从而帮助用户完全自主地高效学习编程。除了历届真题，最新的赛项通知、直播讲座、模拟赛和备考课程等资源也都可以在蓝桥云课上找到，相关链接如下。

• 本书配套线上课程：https://www.lanqiao.cn/courses/60086。

• 蓝桥杯大赛官网：https://dasai.lanqiao.cn/。

• 蓝桥杯大赛历届真题：https://www.lanqiao.cn/courses/2786。

• 蓝桥杯大赛备赛专区：https://www.lanqiao.cn/cup/。

• 蓝桥杯大赛官网题库：https://www.lanqiao.cn/problems/。

致谢

在编写本书的过程中，我们得到了许多人的支持与帮助。感谢所有参与Web应用开发赛项的同学，你们的热情是我们不断前行的动力。感谢为比赛题目提供编写灵感和反馈的行业专家与蓝桥杯大赛参赛选手，你们的建议和指导让我们的内容变得更加丰富和实用。最后，感谢所有读者的支持与关注，希望本书能为你们的学习和职业发展提供帮助。

若有任何对本书的意见和建议，欢迎随时与我们联系，我们的邮箱是 LQbook@lanqiao.cn，出版社责任编辑的联系邮箱是luofen@ptpress.com.cn。

期待您的反馈！

编　者    

2025年8月

第1章　蓝桥杯软件赛（Web应用开发科目）介绍

蓝桥杯全国大学生软件和信息技术大赛（原“蓝桥杯全国软件和信息技术专业人才大赛”，简称蓝桥杯大赛），是全国性大学生学科类竞赛，由蓝桥杯全国大学生软件和信息技术大赛组委会（简称组委会）主办，由国信蓝桥教育科技股份有限公司承办。第一届蓝桥杯大赛于 2010 年举办，在十多年的发展中，该大赛的举办得到了各地教育主管部门和相关院校的积极响应。2025年，蓝桥杯大赛参赛高校超过 2100 所，参赛选手总人数突破 150 万。蓝桥杯大赛连续 5 年入选中国高等教育学会“全国普通高校学科竞赛排行榜”，目前已成为参赛人数最多的大学计算机编程竞赛之一。

蓝桥杯软件赛分为C/C++程序设计、Java软件开发、Python程序设计、Web应用开发、软件测试、网络安全6个科目。

其中，蓝桥杯软件赛（Web 应用开发科目）自 2021 年（第十三届）正式设立以来，参赛人数持续快速增长。

蓝桥杯软件赛（Web应用开发科目）紧密贴合实际Web前端开发岗位的核心技能要求，彰显了“岗赛融合”的特色。参赛选手需灵活运用HTML、CSS、JavaScript以及Vue等前沿Web前端技术，设计并构建功能完备的Web应用程序。这既是对学生编程技能的检验，更是对他们需求理解能力、实际问题解决能力等综合素质的全面考查。通过与行业企业深度合作，大赛精心设计赛题与评判标准，帮助学生在实战中深入洞察行业前沿技术和岗位要求，为未来顺利就业奠定坚实基础。

1.1　蓝桥杯软件赛（Web应用开发科目）的竞赛规则

蓝桥杯软件赛（Web应用开发科目）的参赛对象：具有正式全日制学籍并且符合相关科目报名要求的研究生、本科及高职高专学生（以报名时状态为准），以个人为单位进行比赛。本节内容参考的是《第十七届蓝桥杯全国大学生软件和信息技术大赛软件赛（Web应用开发科目）竞赛规则及说明》。

1．组别

该科目分为大学组和职业院校组两个组别，每个组别单独评奖。每位选手只能申请参加其中一个组别的竞赛。研究生、本科院校学生只能选报大学组；高职高专学生可自行选报大学组或职业院校组。

2．竞赛赛程

竞赛在每年的春季举办，有省赛和全国总决赛，获省赛一等奖即可参加全国总决赛。每次竞赛的时长为4小时，所有组别同时进行。

3．竞赛形式

个人赛，一人一机，全程机考。选手计算机通过局域网连接到各个赛场的竞赛服务器。选手在答题过程中不允许访问互联网，也不允许使用本机以外的资源（如USB连接）。竞赛系统以“服务器—浏览器”方式发放赛题、回收选手答案。

4．参赛选手的计算机配置与开发环境

以第十七届蓝桥杯全国大学生软件和信息技术大赛软件赛（Web应用开发科目）竞赛规则及说明为例。

选手计算机配置：x86兼容计算机，内存不小于4GB，硬盘不小于60GB。操作系统：Windows 7、Windows 8、Windows 10或Windows 11。显示器：分辨率为1024px × 768px或以上。

Web应用开发环境：Chrome浏览器（正式版，v100以上版本）、Visual Studio Code代码编辑器（正式版，v1.36以上版本，在Visual Studio Code安装Live Server插件）、Node.js环境（正式版，v12.x及以上版本）、解压缩软件（WinRAR 5.71及以上版本）。

提示：正式比赛中使用的Visual Studio Code代码编辑器除了会安装好Live Server插件，不会提供其他插件（如Visual Studio Code汉化插件、Vue开发插件等），且比赛过程中也无法自行安装插件。建议参赛选手在日常备赛练习过程中，不要过度依赖本地安装的Visual Studio Code（后文简称VS Code）插件。

5．赛题形式

一场比赛共包含10道赛题，满分为150分，10道赛题分值依次为5分、5分、10分、10分、15分、15分、20分、20分、25分、25分，每道赛题难度根据分值递增。

赛题均为场景实战题（编程实操），选手根据需求说明，通过完善程序代码、配置和管理项目的形式排除程序错误或完成预期需求。赛题大部分采用开放式作答方式，不会限定选手使用的技能点，最终成绩评判依据选手作答的最终效果是否与题目要求的效果一致，不存在使用不同技能点实现的效果有高低之分的情况。选手无论采用的是最优解法还是暴力解法，只要最终效果满足题目要求就可以拿到分。

场景实战题均包含完整的题面PDF文档（Chrome浏览器支持浏览PDF文档）和基础源代码压缩包。题面PDF文档中会详细说明题目的背景、需求、目标。选手需认真读题，结合题目给出的基础源代码，通过修改、新增代码来实现题目给出的最终目标。部分题目可能包含前序准备步骤，如解压缩相应的资源文件、在浏览器中预览网页效果等。大部分情况下，我们默认选手已经掌握了前端开发过程中可能涉及的基础知识和方法，不会给予单独的提示。同时，题目不会给予IDE开发工具的使用方法提示。

特别说明：对于基础源代码，在无明确说明的情况下，不允许自行修改文件名称、文件夹名称、文件存放结构。务必根据题意严格规范操作，否则将影响最终成绩。

6．赛题考查范围

赛题考查选手解决实际问题的能力，侧重考查选手阅读、分析、理解需求，实现功能性需求（静态、动态页面效果，API开发与调用），实现非功能性需求（如兼容性、安全性、性能），产品交付（打包、部署）等方面的能力。考查知识范围详见软件赛知识点大纲（大赛官网—“关于大赛”—“比赛大纲”—软件赛知识点大纲）。

7．答案提交

选手只有在比赛时间内提交的答案内容才可以用来评测，比赛之后的任何提交均无效。选手应使用比赛指定的网页来提交代码，任何其他方式（如邮件、U盘）的提交都不作为评测依据。

选手可在比赛中的任何时间查看自己之前提交的代码，也可以重新提交任何题目的答案，对于每个赛题，以最后一次提交作为评测依据。在比赛中，评测结果不会显示给选手，选手应当在没有反馈的情况下自行调试。

最后，由于题目考查内容的差异，每道题目最终需提交的资料和步骤均会在题面PDF文档中详细说明，请严格按照相应要求进行操作。

8．评分

全部题目将使用前端自动化测试技术完成机器自动评分。对于功能实现类型的题目，组委会会基于单独的测评数据来测试功能实现的完整性。对于页面布局类型的题目，组委会会基于最终效果和目标效果的相似度进行评分。

1.2　场景实战题示例

蓝桥杯软件赛（Web应用开发科目）的竞赛题目均为场景实战题，下面为场景实战题样题题面（样题A：用户名片）。

1
2
3
4

├── css
│ └── style.css
├── images
└── index.html

1.3　蓝桥杯软件赛（Web应用开发科目）知识点总览

蓝桥杯软件赛（Web应用开发科目）所涉知识点及难度如表1-1所示，知识点按1～10难度系数标记（其中，1为最简单，10为最难）。

表1-1　蓝桥杯软件赛（Web应用开发科目）所涉知识点及难度

说明：（1）Web 应用开发科目区分职业院校组与大学组，在考查知识点覆盖面上，大学组较职业院校组多Node.js相关知识点，另外，同一知识点在职业院校组与大学组的难度可能会有不同；（2）上述列举内容仅供参考，实际比赛内容不限于上述列举内容。

1.4　历届真题知识点统计

本节盘点 2021—2025 年（第十三届～第十六届）蓝桥杯软件赛（Web 应用开发科目）省赛与全国总决赛（以下简称国赛）题目的知识点，所涉知识点如表1-2所示。

表1-2　2021—2025年（第十三届～第十六届）蓝桥杯软件赛（Web应用开发科目）题目所涉知识点

需要注意的是，表1-2是列出Web应用开发科目自2021年（第十三届）举办以来至2025年（第十六届）的核心题目所涉知识点，但是在2024年（第十五届）Web应用开发科目竞赛规则做了修订，对所涉知识点进行了变更，主要变化如下：

• 竞赛规则中考点范围删除了jQuery；

• 竞赛规则中知识点Vue版本由原来的2.x升级为3.x，与之配套的第三方库版本也进行升级，包括Vuex升级为Pinia、Vue Router 3.x升级为Vue Router 4.x和Element UI升级为Element Plus。

提示：关于涉及发生变更的知识点，选手在备赛过程中应主要参考第十五届与第十六届的题目。

竞赛规则考点的变更部分源于前端开发生态的升级与完善。在现代前端开发中，随着ES6等较新JavaScript版本的普及，许多jQuery提供的功能可以通过原生JavaScript实现，并且伴随Vue等前端框架的普及，组件化开发逐渐成为前端开发的首选。Vue作为优秀的前端框架，随着社区的不断发展与技术的不断进步，始终在探索和完善自身的功能与生态系统。2020年9月，Vue 3.0（One Piece）版本正式发布，这是Vue的又一个里程碑。随着Vue 3的不断完善，Vue开发团队正式宣布已于2023年12月31日停止维护Vue 2。目前Vue 3已经成为个人开发者和企业开发团队的首选，蓝桥杯软件赛（Web应用开发科目）教研团队始终秉持“岗赛融合”的理念，以岗为导向，充分结合岗位需求和比赛内容，确保所设计的考题能够真实反映行业标准与实际应用。通过这种方法，提升选手的实践能力和解决问题的能力，使其能够迅速适应真实工作环境并在其中发挥作用。

1.5　参赛攻略

如果用“打怪升级”来形容备赛过程，那真是再贴切不过了。下面针对应该如何高效备赛，在哪些题目上要多花些时间，如何在有效的比赛时间内拿到更高的分数等一系列选手们关心的问题分享一些心得。

1．制订备考计划

有的同学会问：我需要花多长时间备赛？3个月？6个月？还是更长时间？其实备赛时间完全因人而异，每个人的基础不同，备赛花费的时间也就不一样。表1-3和表1-4分别是从蓝桥杯软件赛（Web应用开发科目）教研团队和连续3届获得国赛一等奖的选手大连理工大学刘佳林的视角给出的备考计划，仅供参赛选手参考。

表1-3　备考计划——蓝桥杯软件赛（Web应用开发科目）教研团队

表1-4　备考计划——连续3届获得国赛一等奖的选手大连理工大学刘佳林

2．赛中答题阶段

（1）做“速度王者”

各位选手一定要明白Web应用开发科目和其他科目的不同点，即该科目不存在所谓的最优解法，或者得20%分数、40%分数的解法。Web应用开发科目的赛题均为场景实战题，每道题目的判分标准都基于效果或功能是否按题目目标完全实现，只有对和错两种情况。所以无论选手在编写代码时采用优雅的写法还是较直接的写法都不会影响得分。在答题过程中，非常重要的一点就是“速度”，在最短的时间内完成题目目标才是取胜的关键。下面分享几点“提速”的方法。

• 题面PDF文档速读。

一道题目的题面PDF文档由5部分组成，如图1-1所示，其中有一部分对答题来说无关紧要，如第1部分“介绍”和第2部分“准备”，选手在阅读文档时，可以快速阅读这两部分，而将重心定位到第3部分“目标”和第4部分“规定”。由于Web应用开发科目的评分使用前端自动化测试技术完成机器自动评分，这就要求选手要认真读题，将代码补充至正确的位置，以及不要改动初始项目代码。第5部分“判分标准”常常被选手忽视，但实际上，这一部分内容对选手的答题有很大帮助。特别是在处理复杂题目时，判分标准将题目目标拆分为多个目标，并为每个目标标明具体分值。当目标之间没有关联时，选手可以优先选择分值最高的目标进行作答，以最大化答题的“性价比”。

图1-1　题面PDF文档组成

• 自定义答题顺序。

一场比赛共包含10道题目，题目分值依次为5分、5分、10分、10分、15分、15分、20分、20分、25分、25分。分值越高，题目也就越难，而题目与题目之间是没有任何关联的，选手可以根据自己擅长的技术情况，自定义答题顺序，优先完成稳得分的题目，再攻关难题。应避免因为死磕难题耽误了答题时间，导致大多数题目都没有得分。

• 善用Chrome开发者工具。

没有人可以保证自己写的代码不会出错，哪怕是工作多年的资深职员。所以学会调试也是提速的关键。当遇到没有思路的情况时可以借助Chrome开发者工具辅助完成编码或调试。比如，比赛的第1题常常考查CSS基础语法，这时候借助Chrome开发者工具给出的代码自动提示就可以快速完成题目。或者，在完成复杂的JavaScript题目时，随着代码越来越多，逻辑也变得混乱，这时候通过断点调试可以梳理答题思路。

（2）细节决定成败

Web 应用开发科目截至2025年（第十六届）已经举办了4届，但是仍然有很多同学因为一些细节问题败北，这无疑是非常可惜的。下面总结了一些常见的问题，这些问题与答题选手的技术水平无关，只要细心一些完全可以避免。

• 提交单文件导致得 0 分。题目中多处声明最后提交答案时应提交完整程序代码，提交单文件将不得分。

• 提交的压缩包设置密码。请选手们一定要注意，提交的压缩包不要设置任何密码，当压缩包无法解压成功时，相应题目将为0分。

• 提交题目答案时上传次序错误，如将第1题的答案提交至第2题的位置。

• 提交的程序报错，导致程序无法正常运行或代码陷入死循环。

（3）答案提交

很多选手参赛时会习惯在比赛结束前集中进行所有题目的答案提交，但由于临近比赛结束，提交的人数较多，这时可能会出现提交失败等情况，为了避免这类问题，建议各位选手每完成一道题目就立即提交一次答案。即使后续需要修改已经提交的题目答案也不用担心，因为提交程序会以选手最后一次提交的答案为准。另外，当临近比赛结束时，如果还有题目未完成而且正在作答，选手应每完成一个题目的目标就立即提交一次答案，避免因为比赛时间截止，提交程序关闭，从而影响该题已完成目标的得分。