2023年金砖国家职业技能大赛——BRICS-FS-01_Web技术_国际-技术描述TD(线下)

Web 技术项目指根据项目需求进行站点设计，实现能够在各种终端使用的 B/S架构业务及功能的竞赛项目。选手要熟练地使用 JAVA 框架开发服务器端 API 接口；使用 HTML5 及 CSS3 实现页面，并完成各种交互效果的开发；使用 JavaScript 及前端框架完成前后端数据交互并显示在页面上。此外还要对代码编写过程中发生的异常进行妥善处理，最终的作品还要兼顾常用浏览器以及软硬件之间的

你可知这世上再难遇我

2382人浏览 · 2023-12-05 17:52:14

你可知这世上再难遇我 · 2023-12-05 17:52:14 发布

一、赛项名称

赛项名称：Web 技术

赛项归属：电子信息产业

二、技术描述

（一）赛项描述

Web 技术项目指根据项目需求进行站点设计，实现能够在各种终端使用的 B/S 架构业务及功能的竞赛项目。选手要熟练地使用 JAVA 框架开发服务器端 API 接口；使用 HTML5 及 CSS3 实现页面，并完成各种交互效果的开发；使用 JavaScript 及前端框架完成前后端数据交互并显示在页面上。此外还要对代码编写过程中发生的异常进行妥善处理，最终的作品还要兼顾常用浏览器以及软硬件之间的兼容性。

在实际工作中，选手要能理解 Web 的相关技术和艺术价值。技术的运用是为了帮助网站经营者更好更高效地自动化工作。网站的颜色、字体、图形以及布局则需要富有创意的设计技巧，用户界面要确保具有良好的可用性。网站制作者也必须理解项目工作、内容制作和网站管理的基础知识。

（二）基本知识与能力要求

工作组织、管理

个人需要知道和理解：

. 有助于产品可持续性的方案和实践。

. 使用现有工具解决问题和需求。

理论

	. 在多方案中选择合适的方案，正确的时间预估和分配。
	个人应能够： . 考虑功能限时和项目截止日期。 . 能够在限定时间内调试和处理错误。 . 使用计算机设备、服务器和软件。 . 根据行业发展，应用和研究新技术及技能。 . 根据可用时间安排工作计划。	实操
2	页面设计
	个人需要知道和理解： . 如何遵循设计原则和模式，以产生美观和创造性的设计。 . 如何为 Web 创建和调整图形。 . 如何满足不同的目标市场的设计要素。 . 不同设备对应的屏幕分辨率参数。	理论
	个人应能够： . 为传达错误信息创建、分析和开发视觉反馈，包括理解层级结构排版，美学和构架。 . 为项目创建、控制和优化图片。 . 识别目标市场和创建设计概念。	实操

	. 创建响应式设计，在多种屏幕分辨率/设备上正常运行 . 将想法融入具有美观和创意的设计。 . 评判并选择合适的草图设计、颜色和原型。
3	网站重构
	个人需要知道和理解： . 万维网联盟（W3C）的 HTML 和 CSS 标准。 . 如何定位元素和页面的布局方法。 . 页面元素的可用性和页面交互设计。 . 对有特殊需要的用户的可访问性和交互方式。 . 浏览器兼容性。	理论
	个人应能够： . 创建符合 W3C 标准并能通过 W3C 标准验证的代码。 . 为各种设备和屏幕分辨率创建可正常访问和可用的网站。 . 创建网站的动画和交互功能，帮助解释页面内容和增加视觉吸引力。 . 使用 CSS 或其他外部文件修改网站的外观 . 使用 CSS 预处理/后处理器。 . 在需要的地方嵌入和集成动画，音频和视频。	实操

4	前端开发
	个人需要知道和理解： . Vue 编程语言 . 如何使用 Vue 集成库，框架和其他系统或功能。	理论
	个人应能够： . 使用 Vue 代码来增强网站功能性、可用性和美观性。 . 使用 Vue 来操作数据和自定义媒体。 . 创建模块化和可复用性的 JavaScript 代码。	实操
5	后端开发
	个人需要知道和理解： . 面向对象的 JAVA 编程。 . 开源后端类库和框架（如：Spring Boot 等）。 . 如何使用 MySQL 来设计和实现数据库。 . FTP（文件传输协议）服务器和客户端的关联和软件包。 . 如何管理服务器和客户端系统之间的数据交换。 . 软件设计模式（例如：MVC）。 . 网站应用程序的安全性。	理论
	个人应能够： . 使用编程技能来操作数据，包括本地储存、数据库	实操

和前后端通讯。

. 使用 JAVA 语言和常见框架开发后端逻辑功能。

. 创建易读、可维护、可重用的后端代码模块。

三、竞赛队要求

本赛项为个人赛，16-35 岁均可参赛，性别不限，每支参赛队可配备 1 名专家。

四、竞赛项目

本次比赛共计两天，包含四个模块，分别针对本文件第二点中所列举项目选手应该具备的五方面能力。每个模块中选手提交的作品及源代码应具备网站制作规范。

（一）竞赛任务

任务名称	模块编号	模块名称	竞赛时间
API 开发任务	A	Sunshop 页面 API 开发	C1
API 开发任务	B	Sunshop Management 页面 API 开发	C1
前端开发任务	C	Sunshop 页面开发	C2
前端开发任务	D	Sunshop Management 页面开发	C2

（二）竞赛模块

模块编号	模块名称	竞赛时长（分钟）	分数
A	Sunshop 页面 API 开发	150	50
B	Sunshop Management 页面 API 开发	150	50
C	Sunshop 页面开发	150	50

D	Sunshop Management 页面开发	150
总计		600	100

（三）任务简述

Sunshop 是中国本土一家专注数码产品销售的线上商城，他们目前需要对现有的线上商城系统进行重新开发，以适应于客户使用不同终端设备访问他们的商城进行浏览和选购等操作。

Sunshop 指定你需要使用符合 RESTfull 标准完成 API 开发，并使用一个 Vue 应用完成线上商场的功能网页，包括员工的后台管理页面，其中面向客户的浏览、选购和订单等页面需要支持不同类型的设备分辨率。

（四）模块简述

1 、模块 A 、B: API 开发

根据题目要求完成符合 RESTfull 标准的 API 功能开发工作。选手应当充分利用比赛提供的框架特点，巧妙减少不必要的开发工作量。并且选手制作 API 时，同时应考虑到模块 C 、D 的前端页面工作的适配方式，在第二天的开发中需要调用本模块制作的 API 功能。

a) 模块 A （Sunshop 页面 API 开发）

选手将完成包含用户登录、用户注册、用户注销、获取用户信息、获取商品分类列表、获取商品列表等关于 Sunshop 页面的 API 开发工作。

b) 模块 B （Sunshop Management 页面 API 开发）

选手将完成包含获取用户列表、修改用户信息、删除用户、

Web 技术

上传图片、创建 Banner 图片、用户充值、创建商品等关于Sunshop Management 页面的 API 开发工作。

2 、模块 C 、D: 前端开发

选手使用第一天制作的 API 功能，完成赛题中要求的商场系统前端功能的 Vue 程序与页面的编写工作。选手应当充分利用比赛提供的框架特点，巧妙减少不必要的开发工作量。你的前端程序需要与你 A、B 模块所完成的 RESTfull API 进行对接，你可以对你完成的 RESTfullAPI 进行修改，但不会影响你 A 、B 模块的得分。

a) 模块 C （Sunshop 页面开发）

选手将使用 Vue框架根据 A 模块完成的用户登录、用户注册、用户注销、获取用户信息、获取商品分类列表、获取商品列表等 API 完成 Sunshop 前端页面的开发工作。

b) 模块 D （Sunshop Management 页面开发）

选手将使用 Vue 框架根据 A 模块完成的获取用户列表、修改用户信息、删除用户、上传图片、创建 Banner 图片、用户充值、创建商品等 API 完成 Sunshop Management 前端页面的开发工作。

五、评分规则

竞赛的评分工作，所有专家在首席专家的织下以分组的形式进行评分。裁判员分工协作，严格按照评分标准评分，评分过程执行回避原则，即裁判员应自行回避本代表队选手的评判工作。

（一）主观分

主观分（Subjective）打分方式：按模块设置若干个评分组，三名专家为一组，各自给出该模块主观评分项的权重分值，该评分项的最高得分除以三后乘以三名专家的平均权重分值得到该主观评分项的实际得分。各位专家相互间的权重分差必须小于等于 1 分，否则需要给出确切理由并在首席专家的监督下进行调分。

权重表如下：

权重分值	要求描述
0 分	作品低于行业标准
1 分	作品符合行业标准
2 分	作品符合行业标准，且在某些方面高于行业标准
3 分	作品全方位超过行业标准，接近完美

（二）客观分

客观分（Objective）打分方式：按模块设置若干个评分组，三名专家为一组，每个组所有专家一起商议，在对该选手在该项中的实际得分达成一致后最终给出一个分值。若各位专家无法商议出同一分值，则需要给出确切理由并在首席专家的监督下进行给分。

客观分评分准则样例表：

类型	示例	最高分值	正确分值	不正确分值
满分或零分	网站地图动态链接至菜单	0.50	0.50	0
从满分中扣除	CSS 代码能通过验证[每种错误扣 0.5 分]	2.00	2.00	0 – 1.5
从零分开始加	CSS 代码有注释(0.5 分) HTML 代码有注释(0.5 分)	1.0	1.0	0 – 0.5