蓝桥杯Web开发【大赛大纲】15届

一、 组别

Web应用开发分为:大学组和职业院校组。

每位选手只能申请参加其中一个组别的竞赛。各个组别单独评奖。

研究生和本科生只能报大学组。

其它高职高专院校可自行选择报任意组别。

二. 竞赛赛程

省赛时长:4小时。

决赛时长:4小时。

详细赛程安排以组委会公布信息为准。

三、竞赛形式

个人赛,省赛、决赛均采用封闭、限时方式进行。

选手机器通过局域网连接到各个考场的比赛服务器。

选手答题过程中不允许访问互联网,也不允许使用本机以外的资源(如USB连接)。

比赛系统以“服务器-浏览器”方式发放试题、回收选手答案。

选手将答案提交到比赛系统中,超过比赛时间将无法提交。

四、 参赛选手机器环境

选手机器配置:

X86兼容机器,内存不小于4G,硬盘不小于60G

操作系统:Windows7、Windows8、Windows10或Windows11

显示器:分辨率1024*768像素或以上

Web****前端开发环境:

(1)Google Chrome浏览器(正式版,v90以上版本),

官方下载:https://www.google.cn/chrome

(2)Visual Studio Code代码编辑器(正式版,v1.36以上版本),

官方下载:https://code.visualstudio.com

在Visual Studio Code安装Live Server插件,

官方下载:https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

(3)Node.js环境(正式版,v12.x 以上版本),

官方下载:https://nodejs.org/zh-cn/download/

(4)支持压缩.zip压缩包的压缩软件(7-Zip 16.04及以上版本),

推荐使用免费开源软件:https://www.7-zip.org

五、试题形式

试题均为场景实战题(编程实操),选手根据需求说明,通过完善程序代码、配置和管理项目的形式排除程序错误或完成预期需求。

场景实战题

场景实战题目均包含完整的题面PDF文档(Google Chrome支持浏览PDF)和基础源代码压缩包。题面文档中会详细说明题目的背景、需求、目标。选手需认真读题,结合题目给出的基础源代码,通过修改、新增代码来实现题目给出的最终目标。

部分题目可能包含前序准备步骤。例如,解压缩相应的资源文件,在浏览器中预览网页效果等。大部分情况下,我们默认选手已经掌握了前端开发过程中可能涉及的基础知识和方法,不会给予单独的提示。同时,题目不会给予IDE开发工具的使用方法提示。

特别说明:基础源代码在无明确说明的情况下,请勿随意修改文件名称、文件夹名称、文件存放结构。务必严格规范根据题意操作,否则可能会影响最终阅卷的准确性。

六、试题考查范围

试题考查选手解决实际问题的能力,侧重考查选手阅读、分析、理解需求,实现功能性需求(静态、动态页面效果,API开发与调用),实现非功能性需求(如兼容性、安全性、性能),产品交付(打包、部署)等方面的能力。知识范围包括但不限于:

参赛组别考察知识范围
职业院校组HTML5、CSS3、JavaScript、ES6、Axios、Vue.js(v3.0+)、ElementPlus(v2.3.6+)、ECharts(v5+)
大学组HTML5、CSS3、JavaScript、ES6、Axios、Vue.js(v3.0+)、ElementPlus(v2.3.6+)、ECharts(v5+)、Node.js(v12.x)

在这里插入图片描述

考察点知识点
HTML5、CSS31.HTML 基础标签2.HTML5 新特性3.HTML5本地存储4.CSS 基础语法5.盒子模型6.浮动与定位7.CSS3 新特性8.弹性盒子9.媒体查询
JavaScript1.JavaScript 基础语法2.DOM 与 BOM3.JavaScript 内置对象4.JavaScript 事件5.JavaScript AJAX6.正则表达式
ES61.let 和 const 命令2.class3.set和map4.Proxy5.字符串、函数、数组和对象的扩展6.异步编程与模块化
Axios1. Axios API2. Axios 实例3. 请求配置4. 默认配置5. 拦截器
Vue.js1.Vue 核心(常用指令、常用模板语法、生命周期、数据渲染、事件绑定、自定义指令、组合式函数、插件等)2.Vue 组件(组件定义及使用、父子组件、兄弟组件、异步组件、组件插槽、依赖注入等)3.vue-router(v4.x)使用4.pinia 使用
ElementPlus1.基础组件的使用2.表单和表格组件3.反馈组件4.导航组件
ECharts1.ECharts 基础语法2.ECharts 绘制图表3.ECharts 异步数据加载和更新4.ECharts 交互组件5.ECharts 事件处理
Node.js1. Node.js 基础2.内置模块使用(fs、http等)

七、 答案提交

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

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

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

八、评分

全部题目将使用前端自动化测试技术完成机器自动评分。

对于功能实现类型的题目,我们会基于单独的测评数据来测试功能实现的完整性。

对于页面布局类型的题目,我们会基于最终效果和目标效果的相似度进行评分。

九、其它注意事项

(1)选手必须符合参赛资格,不得弄虚作假。资格审查中一旦发现问题,则取消其报名资格;竞赛过程中发现问题,则取消竞赛资格;竞赛后发现问题,则取消竞赛成绩,收回获奖证书及奖品等,并在大赛官网上公示。

(2)参赛选手应遵守竞赛规则,赛场纪律,服从大赛组委会的指挥和安排,爱护竞赛赛场地的设备。

(3)竞赛采用机器阅卷加少量人工辅助的方式。选手需要特别注意提交答案的形式。必须仔细阅读题目的要求和示例,不要随意添加不需要的内容。

十、样题 A:用户名片

介绍

CSS 样式是前端开发的必备技能之一,下面请用你丰富的经验帮小蓝完成一个漂亮的用户名片制作吧。

准备

开始答题前,需要先打开本题的项目代码文件夹,目录结构如下:

├── css

│ └── style.css

├── images

└── index.html

其中:

· css/style.css 是样式文件。

· images 是页面布局需要用到的图片素材。

· index.html 是主页面。

在浏览器中预览 index.html 页面效果如下:

img

目标

请通过补充或者修改 css/style.css 中的样式(注意:不要修改元素大小),达到以下效果:

\1. 实现卡片(class = card) 和用户头像(class = avatar) 元素水平垂直居中。

\2. 左侧文字(class = level 和 class = points)水平居中。

完成后,最终页面效果如下:

img

规定

请勿修改已经提供的代码,以免造成判题无法通过。

请严格按照考试步骤操作,切勿修改考试默认提供项目中的文件名称、文件夹路径等。

判分标准

· 本题完全实现题目目标得满分,否则得 0 分。

答案提交

e-49ff-a100-0d5635d15246.png" alt=“img” style=“zoom:33%;” />

规定

请勿修改已经提供的代码,以免造成判题无法通过。

请严格按照考试步骤操作,切勿修改考试默认提供项目中的文件名称、文件夹路径等。

判分标准

· 本题完全实现题目目标得满分,否则得 0 分。

答案提交

本题请勿新增、修改基础源代码中的文件名称、文件夹名称、文件存放层级结构。最后将答题后的01文件夹压缩成 01.zip 压缩包(请务必使用.zip格式,其他压缩包格式无法正常判卷)后提交。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/14750.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

模板方法及设计模式——Java笔记

模板方法及设计模式 抽象类体现的就是一种模板模式的设计,抽象类作为多个子类的通用模板,子类在抽象类的基础上进行扩展、改造,但子类总体上会保留抽象类的行为方式。 解决的问题: 当功能内部一部分实现是确定的,另一…

Android 启动页闪过白色背景

Android 启动页闪过白色背景 1.解决方式&#xff1a;为启动页设置主题。直接在manifest中设置android:style“style/StartTheme” <style name"StartTheme" parent"Theme.AppCompat.Light"><item name"windowActionBar">false</…

LeetCode:279.完全平方数

class Solution:def numSquares(self, n: int) -> int:dp[i for i in range(n1)]for i in range(2,n1):for j in range(1,int(i**(0.5))1):dp[i]min(dp[i],dp[i-j*j]1)return dp[-1]代码解释 初始化 DP 数组&#xff1a; dp [i for i in range(n1)] 这里&#xff0c;dp[i]…

五分钟”手撕“图书管理系统

前言&#xff1a; 图书馆管理系统需要结合JavaSE的绝大部分知识&#xff0c;是一个很好的训练项目。 为了让大家更加方便的查阅与学习&#xff0c;我把代码放开头&#xff0c;供大家查询。 还有对代码的分析&#xff0c;我将以类为单位分开讲解。 目录 全部代码 Main类 Us…

如何排查hpet导致的CPU高负载——《OceanBase诊断系列》之十

1. 前言 我在OceanBase问答社区协助用户排查了一个CPU占用率过高的问题&#xff0c;帖子原文是&#xff1a; 《刚刚新安装的OceanBase集群&#xff0c;没有任何数据&#xff0c;CPU占用非常高&#xff0c;这正常吗&#xff1f;》。从这个场景出发&#xff0c;来分享相关的诊断…

Rabbitmq-Windows 安装

第一步&#xff1a;下载并安装erlang &#xff11;.原因&#xff1a;RabbitMQ服务端代码是使用并发式语言Erlang编写的&#xff0c;安装Rabbit MQ的前提是安装Erlang &#xff12;.下载地址&#xff1a;http://www.erlang.org/downloads 3.双击&#xff0c;点next就可以 4.选…

Android 观察者模式(OBSERVER)应用详解

文章目录 1、观察者模式设计初衷1.1. 解耦对象之间的依赖关系1.2. 允许动态的依赖关系1.3. 自动通知和更新1.4 设计初衷的详细说明1. 对象之间的解耦2. 动态依赖关系3. 自动更新 2、实现细节2.1. Subject 接口和实现2.2. Observer 接口和实现2.3. 主类 3、主要角色4、关系示意图…

【minio】minio文件访问不到问题记录

问题描述&#xff1a; 项目上上传了logo&#xff0c;但是无法回写logo&#xff0c;但是文件minio路径已经返回&#xff0c;并且到minio服务器上也能下载文件&#xff1b; 解决方案&#xff1a; 1.排查Nginx的代理的minio是否正确 2.登录minio服务查一下文件路径policy是否设置访…

ubuntu下分屏工具tmux常用操作

参考&#xff1a;基于 Tmux 的多会话终端管理示例 | Linux 中国 - 知乎 安装 sudo apt-get install tmux Tmux 默认所有命令的前置命令都是 Ctrlb 创建会话&#xff1a;tmux new -s 会话名 查看 Tmux 会话清单: tmux ls #下面的-->表示然后 水平切割窗格:Ctrlb-->&…

PWA离线优先策略:提升用户体验的关键步骤

Progressive Web Apps (PWA) 的离线优先策略是通过Service Worker和Cache API实现的&#xff0c;它允许在没有网络连接时仍然可以访问网站的部分或全部内容。 2500G计算机入门到高级架构师开发资料超级大礼包免费送&#xff01; 1. 创建Service Worker注册文件&#xff08;se…

从零开始学Vue3--模板语法

Vue的核心是MVVM,也就是数据能够影响界面&#xff0c;界面也能影响数据&#xff0c;什么意思呢&#xff1f;比如有个输入框&#xff0c;它绑定的变量name,如果你改变了name的值&#xff0c;输入框显示的值就会变化&#xff0c;如果用户在输入框里面输东西,name对应的值也会变化…

AI预测福彩3D采取888=3策略+杀断组+杀和尾缩水测试5月24日预测第1弹

哈喽&#xff0c;各位亲爱的小伙伴&#xff0c;在发布本期预测结果之前&#xff0c;先对最近的这套算法测试做一下总结。 最近的一套算法采用了88723的容差策略&#xff0c;关于容差策略相信大家都比较清楚&#xff1a;容差可以最大限度的保证初始大底中包含中奖号码&#xff0…

揭秘Python:对象类型打印

哈喽&#xff0c;大家好&#xff0c;我是木头左&#xff01; 一、Python数据类型简介 在Python的世界中&#xff0c;了解你正在处理的数据类型是至关重要的。Python提供了多种内置数据类型&#xff0c;包括数字&#xff08;整数和浮点数&#xff09;、字符串、列表、元组、字典…

解决:error: failed to push some refs to ‘https://gitee.com/***/***.git‘(高效快速)

解决方案&#xff1a; git pull --rebase origin master 具体原因&#xff1a; 主要原因是gitee(github)中的README.md文件不在本地代码目录中 要执行git pull --rebase origin master命令将README.md拉到本地 然后就可以执行git push啦 写在最后&#xff1a; 要是问题得到…

服务开机自启

目录 1、启动脚本 1)新建sh脚本 2)日志备份 2、自启动Service 1)编写Service 1)含义: 3、调整启动脚本 1)替换start():

Leetcode 3152. Special Array II

Leetcode 3152. Special Array II 1. 解题思路2. 代码实现 题目链接&#xff1a;3152. Special Array II 1. 解题思路 这一题的话思路上就是分堆&#xff0c;使用贪婪算法找到每一个元素所在的最长special子序列&#xff0c;然后判断query的首尾元素是不是属于同一个special…

51-指针_野指针,指针运算

51-1 野指针 51-1-1 什么是野指针 概念&#xff1a;野指针就是指针指向的位置是不可知的&#xff08;随机的、不正确的、没有明确限制的) 没有初始化 int main() {int* p;//p没有初始化&#xff0c;就意味着没有明确的指向//一个局部变量不初始化的话&#xff0c;放的是随机…

MySQL 插入数据的时候自动忽略重复数据

MySQL中插入数据&#xff0c;如果插入的数据在表中已经存在&#xff08;主键或者唯一键已存在&#xff09;&#xff0c;使用insert into语法的时候&#xff0c;如果遇到重复数据&#xff0c;会直接报错&#xff0c;导致事务回滚&#xff0c;所有插入数据&#xff0c;全部失败。…

TCP/IP体系模型简介

一、TCP/IP 概念 TCP&#xff08;Transmission Control Protocol 传输控制协议&#xff09;&#xff1a; 是一种面向连接的、可靠的传输层协议。通过三次握手建立连接&#xff0c;确保连接的可靠建立。对数据进行有序传输&#xff0c;并具有确认机制和重传机制来保证数据的完整…

SpringBoot多数据源启动出现循环依赖问题

在使用SpringBoot的项目中&#xff0c;如果是有使用多数据源&#xff0c;可能会存在启动时数据源循环依赖的报错&#xff0c;是因为使用了多数据源注入&#xff0c;和DataSourceAutoConfiguration数据源自动配置的DataSourceInitializerInvoker互相产生循环依赖导致。 这种错误…