赛项名称：Web技术（网站设计与开发）
赛项组别：高职组
二、竞赛内容
Web技术（网站设计与开发）赛项基于企业真实项目的工作流程，采用市场主流软件开发架构和实际操作形式进行现场编程设计。
竞赛通过“系统设计”、“程序排错”、“功能编码”三种形式考查参赛选手对实际问题的综合分析能力、对技术架构的设计能力、对Web全栈开发技术的掌握程度以及操作的熟练程度。考核点包括：行业知识应用、项目配置和管理、HTML5、CSS3、JavaScript(ES6)、基于组件的轻量级框架MVVM（Vue.js：Element-UI，Vant-UI）、Java、SSM/SpringBoot架构设计、RESTfulAPI使用、虚拟DOM编程、MySQL数据库管理、数据分析、单页应用（SPA）设计移动Web、路由机制。
比赛项目命题由赛事组委会确定，竞赛组委会会提供给所有参赛选手一个项目框架代码（代码中包含缺陷，但项目可编译运行），一份《系统模块需求说明书》、以及项目开发所需的参考资源。
竞赛采用实际操作形式，考查参赛选手对技术掌握的程度和操作的熟练程度。赛点安装统一的集成开发环境，并将赛题需求文档、所需素材和参考资料等事先装入U盘指定目录。参赛选手比赛期间禁止携带任何形式的参考资料以及手机、平板电脑、计算机等可以与外界进行网络联系的设备。比赛期间禁止与外界沟通和联络。
三、竞赛方式
竞赛以院校为单位参赛，竞赛形式为个人赛，每校限报2名选手，每名选手限报1名指导教师，须为高职在籍学生，年龄不限。
选手按照要求独立完成任务，即1个“系统设计”任务、3个“程序排错”任务、7个“功能编码”任务。本赛项全部考核学生实际操作能力，不考核理论测试。
四、竞赛流程
竞赛期间的各项日程与详细流程安排如下表：
日期
内容
比赛前一天
14:30之前
各参赛队报到
15:00-15:30
开幕式
16:00-16:30
领队会、选手一次加密
16:30-17:00
选手熟悉赛场
17:00-18:00
竞赛现场设备调试检验
18:00-18:30
现场裁判赛前检查，封闭赛场
比赛当天
07:30
在裁判的监督下工作人员启封赛场
07:30-07:45
竞赛赛场检录、参赛编号抽签、抽取赛位号、选手二次加密
07:45-08:00
选手进入赛位、任务发放、宣布竞赛注意事项、检查竞赛环境
8:00--12:00
竞赛选手完成竞赛任务、提交、部署和运行
12:00-17:00
竞赛成绩评判
17:00—18:00
闭幕式，宣布竞赛成绩
18:00
各参赛队返回
五、竞赛规则
（一）参赛资格
参赛选手须为高职全日制在籍学生、本科院校中高职类全日制在籍学生，五年制高职四、五年级学生。凡在往届全国、全省技能大赛中获一等奖的学生，不得再参加同一项目同一组别的比赛。请各高等职业院校做好参赛学生资格核查工作。凡经省教育厅审查不符合报名条件的参赛选手将取消参赛资格，产生的空缺名额不得补报。
（二）报名要求
本赛项为个人赛。参赛选手和指导教师报名获得确认后不得随意更换。如有特殊情况需更改报名信息的，经省教育厅职教处同意向大赛组委会提交申请，审批通过后由后台工作人员统一修改。开赛前10个工作日内将不再接受更改报名信息申请。选手因特殊原因不能参加比赛时，由大赛执委会办公室根据赛项的特点决定是否可进行缺员比赛，并上报大赛执委会备案。竞赛开始后，参赛队不得更换参赛选手，若有参赛队员缺席，不得补充参赛选手。
（三）赛前准备
1.参赛队在比赛前一天组织熟悉赛场。
2.比赛场地通过抽签决定，参赛选手须按规定提前入场，入场前须携带参赛凭证和有效身份证件（身份证和学生证）及48小时内核酸阴性报告证明。不得私自携带任何软硬件工具（各种便携式电脑、各种移动存储设备等）、技术资源、通信工具等。按工位号就位，检查比赛所需竞赛设备齐全后，由参赛队队长签字确认方可开始比赛。
（四）正式比赛
1.参赛选手应严格遵守赛场纪律，服从指挥，着装整洁，仪表端庄，讲文明礼貌。各地代表队之间应团结、友好、协作，避免各种矛盾发生。
2.比赛期间参赛选手原则上不得离开比赛场地（去洗手间会有工作人员陪同），比赛结束后方可离场。
3.竞赛所需的硬件、软件和辅助工具统一提供，参赛队不得使用自带的任何有存储功能的设备，如硬盘、光盘、U盘、手机、随身听等。
5.竞赛过程中，每个参赛队内部成员之间可以互相沟通，但不得和任何其它人员讨论问题，也不得向裁判、巡视和其他必须进入考场的工作人员询问与竞赛项目的操作流程和操作方法有关的问题，成员间的沟通谈话不得影响到其他竞赛队伍。
6.在比赛过程中，参赛选手如有疑问，应举手示意，现场裁判应按要求及时予以答疑。如遇设备或软件等故障，参赛选手应举手示意，现场裁判、技术人员等应及时予以解决。确因计算机软件或硬件故障，致使操作无法继续的，经赛场裁判长确认，予以启用备用设备。
8.赛项裁判应严格遵守赛项各项规章制度，确保比赛公平、公正、公开。比赛当天7:40起，赛项裁判应上交所有通信设备，由赛项执委会统一保管并安排赛项裁判在指定区域休息或工作，直至赛项成绩评定结束。
9.比赛结束，经加密裁判对各参赛队提交的竞赛成果进行三次加密后，评分裁判方可入场进行成绩评判。
（五）成绩公示与公布
最终竞赛成绩经复核无误及裁判长、监督长签字确认后，当场宣布，并以纸质形式向全体参赛队进行公示。成绩无异议后，在闭赛式上予以公布。
其它未尽事宜，将在赛前向各领队做详细说明，一切均需符合大赛制度规定。
六、竞赛环境
1.竞赛场地。竞赛现场设置竞赛区、裁判区、服务区、技术支持区。现场保证良好的采光、照明和通风，提供稳定的水、电和供电应急设备，同时提供指导教师休息场所。
2.竞赛设备。所有竞赛设备由承办院校负责提供和保障，竞赛区按照参赛队数量准备比赛所需的软硬件平台，为参赛队提供标准竞赛设备。
5.服务区提供医疗等服务保障。
七、技术规范
（一）教学标准
序号
标准单位
中文标准名称
1
2019年7月31日教育部职业教育与成人教育司
510203-软件技术；510213-移动应用开发等。
（二）行业标准
标准号
信息技术行业职业技能第3部分：软件开发
2
系统与软件工程验证与确认
3
系统与软件工程用户文档的设计者和开发者要求
4
计算机软件开发规范
5
计算机过程控制软件开发规程
6
软件产品分类
7
软件工程软件开发成本度量规范
8
9
10
GB/T28174.1-2011
统一建模语言(UML)第1部分：基础结构
11
软件工程术语
12
GB/T16260.1-2006
软件工程产品质量第1部分:质量模型
13
八、技术平台
竞赛设备主要包括1台计算机兼服务器、1个Web技术平台，以及常用开发工具软件。
（一）硬件环境及配置
设备名称
主要功能
计算机(1台)
（竞赛选手开发使用）
li5及以上处理器（支持VT），16G及以上内存，500G及以上硬盘，显示器分辨率1920*1024及以上，百兆网络接口，USB接口。
lWindows7（64位）或更新版本操作系统。
l安装常用开发工具软件，具体如上表所示。
l部署Element-UI本地资源服务
l部署Vant-UI本地资源服务
（二）软件环境
竞赛涉及的所有软件均为正版或开源软件，如下表所示。
软件类型
软件名称
IDE开发和调试工具
HbuilderX
VisualStudioCode
Redis3.0
RedisClient2.0
IntelliJIDEA2020及以上
PostMan
浏览器
火狐浏览器
谷歌浏览器
360浏览器
前端环境
Vue.jsV2.0（Element-UI和Vant-UI）及以上
Vue-cliV3.5及以上
VueRouterV3.0及以上
VuexV3.0及以上
AxiosV0.18及以上
npm
webpack
Java环境
TomcatV8.0及以上
JavaV1.8.0
Nginx
数据库环境
Navicat
MySQL5.7
其他
MicrosoftVisio2013及以上
MicrosoftOffice2010及以上
福昕PDF阅读器
（三）软件开发平台
本赛项使用的是Web技术平台。
Web技术平台技术要求：平台采用分布式开发设计，前端采用MVVM（Vue/React）设计思想，采用Vant-UI单页应用模式设计移动商城端，通过Element-UI实现PC商城端，利用springboot架构实现服务端，提供基于RESTful接口的开放式API，采用MySQL数据库管理，构建一体化平台统一数据源。平台支持项目需求分析、系统设计、程序编码、软件测试和产品发布的软件工程模式，具备考核参赛选手软件工程设计开发的能力。Web浏览器端兼容火狐、谷歌和360。
九、成绩评定
（一）评分标准
竞赛满分为100分。比赛成绩评判将根据“系统设计”、“程序排错”和“功能编码”三个部分评分，分值权重分别为10%、20%和70%。只对参赛队评分。
竞赛总得分=系统设计得分+程序排错得分+功能编码得分
1.评分项目
考试模块
考查点
权重
描述
评分标准
系统文档
用例图的绘制
2%
符合软件规范，功能表述清晰得
结果评分（客观）
（每组2名裁判随机抽取独立评分）
类图的绘制
对类的定义、能描述出类这间的泛化关系
流程图的绘制
各个流程组件符合软件规范
时序图的绘制
时序图具有生命周期的对象3要素及消息
详细设计（方法,方法核心片段）
以标准格式列出主要功能方法，方法核心片段，展现界面原型或效果图。
程序排错
HTML5/JavaScript/Vue
10%
根据界面原型与实际显示之间的差异，定位并修改相应代码，以实现正确功能
业务逻辑
根据需求描述及对功能的理解，并位并修复系统中业务逻辑存在的错误
功能编码
HTML5/CSS3
5%
根据给定的资源和界面原型，自行设计/编写布局代码，实现与原型相一致的界面布局功能
ES6
ES6基本语法、数组操作、对象操作等
Vue
20%
单页路由、双向绑定等
Java
Java基本语法、继承、接口等
网络编程
jQuery或Axios实现ajax、JSON和Bean的数据封装、解析和转换
SSM/springboot架构
基于SSM/springboot架构，实现功能模块编码等
数据存储
MySQL数据库增删改查，以及系统核心配置文件的重要元素
RESTfulAPI
RESTfulAPI使用
注：本次赛项采用题库形式，实际抽题次序及内容可能同本表有所不同
2.评分标准
系统设计
设计：100%：按照文档要求正确编写完成
未编写/编写错误：0%
实现：100%：错误已修改，功能正确
未实现：0%
实现：100%：运行结果完全正确，功能正常，无异常出现
未实现：0%：无界面，无功能
（二）评分方法
1.本赛项裁判组成员共5人，其中裁判长1名，加密裁判、现场裁判、评分裁判共5名。
2.竞赛结果评分前，专家组根据任务类型及数量提前制定评分分配方案：每名裁判负责试卷上2-3个任务，裁判以每个竞赛团队的相同任务进行评分。评分前裁判长组织各个评分裁判自行随机抽取裁判编号，分组进行流水线式评分，每组2名裁判独立评分，具体打分原则请参见评分细则。
3.参赛队成绩由赛项裁判组统一评定，采用结果评分方式。竞赛名次按照成绩总分从高到低排序。相同成绩的依次按功能编码、程序排错、系统文档部分得分高低决定排名次序。
4.在竞赛过程中，参赛选手如有作弊、不服从裁判判决、扰乱赛场秩序等行为，裁判长按照规定扣减相应分数。情节严重的取消竞赛资格，竞赛成绩记为零分。
5.裁判长在竞赛评分结束2小时内提交赛位号评分结果，经复核无误，由裁判长、监督人员和仲裁人员签字确认后公布。
6.裁判长正式提交赛位号评分结果并复核无误后，加密裁判在监督人员监督下对加密结果进行逐层程序自动化解密。
7.为保障成绩评判的准确性，监督组对赛项总成绩排名前30%的所有参赛队伍的成绩进行复核；对其余成绩进行抽检复核，抽检覆盖率不低于15%。监督组需将复检中发现的错误以书面方式及时告知裁判长，由裁判长更正成绩并签字确认。若复核、抽检错误率超过5%，裁判组需对所有成绩进行复核。
十、奖项设定
竞赛奖项只设置个人奖，个人奖根据参赛代表队总得分，进行排序（总分相同名次并列）。设一等奖，二等奖，三等奖。获奖比例参照云南省教育厅下发的指导文件要求，获得一等奖的代表队指导老师为优秀指导教师。
十一、竞赛安全
（一）安全保障
成立安全保障工作组，负责本赛项筹备和比赛期间的各项安全工作，根据赛项具体特点做好安全事故应急预案，保证比赛筹备和实施工作全过程的安全。赛前检查消防设施，做好安全保卫工作，防止火灾、盗窃现象发生，要按时关窗锁门，确保大赛期间赛场财产的安全。竞赛结束时，要及时进行安全检查，重点做好防火、防盗以及电气、设备的安全检查，防止因疏忽而发生事故。
（二）组队责任
1.各学校组织代表队时，须安排为参赛选手购买大赛期间的人身意外伤害保险。
3.各参赛队伍须加强对参赛人员的安全管理，实现与赛场安全管理的对接。
（三）应急处理
（四）处罚措施
1.因参赛队伍原因造成重大安全事故的，取消其获奖资格。
2.参赛队伍有发生重大安全事故隐患，经赛场工作人员提示、警告无效的，可取消其继续比赛的资格。
3.赛事工作人员违规的，按照相应的制度追究责任。情节恶劣并造成重大安全事故的，由司法机关追究相应法律责任。
十二、竞赛须知
（一）参赛队须知
1.参赛队应该参加赛项承办单位组织的闭赛式等各项赛事活动。
2.在赛事期间，领队及参赛队其他成员不得私自接触裁判，凡发现有弄虚作假者，取消其参赛资格，成绩无效。
3.所有参赛人员须按照赛项规程要求按照完成赛项评价工作。
（二）参赛队领队须知
1.领队应按时参加赛前领队会议，不得无故缺席。
2.领队负责组织本校参赛队参加各项赛事活动。
3.领队应积极做好本校参赛队的服务工作，协调各参赛队与赛项组织机构、承办院校的对接。
4.参赛队认为存在不符合竞赛规定的设备、工具、软件，有失公正的评判、奖励，以及工作人员的违规行为等情况时，须由领队在该赛项竞赛结束后2小时内，向赛项仲裁组提交书面申诉材料。各参赛队领队应带头服从和执行申诉的最终仲裁结果，并要求指导教师、选手服从和执行。
（三）指导教师须知
1.各参赛代表队要发扬良好道德风尚，听从指挥，服从裁判，不弄虚作假。如发现弄虚作假者，取消参赛资格，名次无效。
3.竞赛过程中，除参加当场次竞赛的选手、执行裁判员、现场工作人员和经批准的人员外，领队、指导教师及其他人员一律不得进入竞赛现场。
5.对申诉的仲裁结果，领队要带头服从和执行，并做好选手工作。参赛选手不得因申诉或对处理意见不服而停止竞赛，否则以弃权处理。
6.指导老师应及时查看大赛专用网页有关赛项的通知和内容，认真研究和掌握本赛项竞赛的规程、技术规范和赛场要求，指导选手做好赛前的一切技术准备和竞赛准备。
（四）参赛选手须知
1．参赛选手应严格遵守赛场规章、操作规程和工艺准则，保证人身及设备安全，接受裁判员的监督和警示，文明竞赛。
3．参赛选手进入赛场前，须将身份证、学生证、参赛证交由检录人员统一保管，不得带入场内。
4．参赛选手凭竞赛工位号进入赛场，不允许携带任何电子设备及其他资料、用品。
7．参赛选手在收到开赛信号前不得启动操作。在竞赛过程中，确因计算机软件或硬件故障，致使操作无法继续的，经裁判长确认，予以启用备用计算机。
9．参赛选手需及时保存工作记录，以防止因操作系统异常及其他设备异常造成的数据丢失。对于因各种原因造成的数据丢失，由参赛选手自行负责。
10．参赛队所提交的答卷采用竞赛工位号进行标识，不得出现地名、校名、姓名、参赛证编号等信息，否则取消竞赛成绩。
11．竞赛过程中，因严重操作失误或安全事故不能进行比赛的（例如因操作原因发生短路导致赛场断电的、造成设备不能正常工作的），现场裁判员有权中止该队比赛。
14．参赛选手不得因各种原因提前结束比赛。如确因不可抗因素需要离开赛场的，须向现场裁判员举手示意，经裁判员许可并完成记录后，方可离开。
15．凡在竞赛期间内提前离开的选手，不得返回赛场。
19．符合下列情形之一的参赛选手，经裁判组裁定后中止其竞赛:
1）不服从裁判员、监考员管理、扰乱赛场秩序、干扰其他参赛选手比赛，裁判员应提出警告，二次警告后无效，或情节特别严重，造成竞赛中止的，经裁判长确认，中止比赛，并取消竞赛资格和竞赛成绩。
2）竞赛过程中，由于选手人为造成计算机、仪器设备及工具等严重损坏，负责赔偿其损失，并由裁判组裁定其竞赛结束与否、是否保留竞赛资格、是否累计其有效竞赛成绩。
3）竞赛过程中，产生重大安全事故、或有产生重大安全事故隐患，经裁判员提示没有采取措施的，裁判员可暂停其竞赛，由裁判组裁定其竞赛结束，保留竞赛资格和有效竞赛成绩。
（五）工作人员须知
1．赛场工作人员由赛项执委会统一聘用并进行工作分工，进入竞赛现场须佩戴组委会统一提供的吊牌。
2．赛场工作人员需服从赛项执委会的管理，严格执行赛项执委会制订的各项比赛规则，执行赛项执委会的工作安排，积极维护好赛场秩序，坚守岗位，为赛场提供有序的服务。
3．赛场工作人员进入现场，不得携带任何通讯工具或与竞赛无关的物品。
4．参赛队进入赛场，现场裁判及赛场工作人员应按规定审查参赛选手带入赛场的物品，如发现不允许带入赛场的物品，交由参赛队随行人员保管，赛场不提供保管服务。
5．赛场工作人员在竞赛过程中不回答选手提出的任何有关比赛技术问题，如遇争议问题，应及时报告裁判长。
十三、大赛疫情防控工作实施方案
（一）赛前准备的防控措施
1.做好防疫物资储备工作。各赛点应准备足量的额温枪、适量的水银温度计和一次性医用口罩。为所有工作人员及进入赛点的人员配备一次性口罩、手消毒剂、口罩专用垃圾桶等物品，并设置留观室。
2.实施异常状况评估。对赛前、赛中监测、检查发现的选手和工作人员身体异常，由疾控、医疗等专业人员进行专业评估，大赛组委会根据专业评估建议，综合研判选手是否具备参加比赛条件。
3.保持座位足够间隔和空气流通。选手座位尽量保持间隔1米以上，降低人员密度。尽量选择通风良好的场地或教室设置赛场。
4.加强场所清洁与消毒。比赛前一天各赛点应对所有考场重点区域进行预防性消毒，检查验收后张贴“已消毒”标识。
5.做好选手及工作人员活动轨迹核实。各赛点要逐一核实所有选手及工作人员14天内活动轨迹，仔细询问是否有疫情重点国家或中高风险地区的旅居史或与病人接触史，做好记录，经排除新冠肺炎感染，确认安全后方可参与赛事工作。
6.开展疫情防控知识业务培训和宣传。各赛点在赛前需就发热选手处置、场所消杀、体温监测、突发公共卫生事件处置等内容对全体工作人员进行防控知识培训。要在醒目位置张贴健康提示，利用多种方式宣传新冠肺炎及其他传染病防控知识。
（二）比赛期间防控措施
1.比赛入场管理。安排专人负责组织引导选手和工作人员有序入场,控制好入场间距,不得拥挤。
2.健康码查验。选手及工作人员在赛前须查验“健康码绿码”,持“健康码绿码”方可进入赛场内,不能提供“健康码绿码”的人员须提供7天内核酸检测阴性证明或提供健康状况承诺书。
3.入场体温检测。选手及工作人员入场时须进行体温检测,体温超过37.3度的人员不得进入赛场。第一次测量体温不合格的,可适当休息后使用其他设备或其他方式再次测量,仍不合格的,须经卫健部门人员进行专业评估,在保障选手及工作人员生命安全和身体健康前提下,大赛组委会依据专业评估建议,综合研判是否具备正常参加比赛的条件。
4.有关防护要求。比赛期间,选手和工作人员应尽量全程佩戴一次性用医用口罩或医用外科口罩参加考试;负责体温检测的工作人员和其他疫情防控工作人员应佩戴一次性使用医用口罩和一次性手套，必要时可穿戴防护服。选手及工作人员进入赛场前操作设备前应使用消毒液(剂)进行消毒或洗手。
（三）疫情突发事件及处置
竞赛过程中，如发现选手或工作人员中突发发热、乏力、干咳、呼吸困难等疑似新冠肺炎症状的，按以下程序处置：
1.工作人员应迅速报告大赛执行委员会；
2.疫情防控工作负责人组织疫情防控工作人员带离选手至留观室；
3.迅速联系并报告赛点疫情防控联络人；
4.在疫情防控专业人员指导下，疫情防控工作负责人组织医务人员进行体温检测。体温异常，或伴有咳嗽、干咳、呼吸困难等症状的，经医务专业人员现场核实、诊断并决定是否终止其比赛并带离赛场；
5.视情况报告当地疾控部门并按要求进行处置；
8.如有选手或工作人员被诊断为新冠肺炎疑似病例、确诊病例或无症状感染者，应立即配合有关部门排查密切接触者，配合有关部门对密切接触者进行集中隔离医学观察。
（四）其他要求
2.对选手及工作人员瞒报、谎报疫情有关情况的，依据有关规定对责任人员给予处理。构成犯罪的，依法追究刑事责任。
3.本方案自视疫情情况适时研判和调整。
十四、申诉与仲裁
1.各参赛队对不符合大赛和赛项规程规定的仪器、设备、工装、材料、物件、计算机软硬件、竞赛使用工具、用品，竞赛执裁、赛场管理、竞赛成绩，以及工作人员的不规范行为等，可向赛项仲裁组提出申诉。
2.申诉主体为参赛队领队。
4.提出申诉应在赛项比赛结束后不超过2小时内提出。超过时效不予受理。
5.赛项仲裁工作组在接到申诉报告后的2小时内组织复议，并及时将复议结果以书面形式告知申诉方。申诉方对复议结果仍有异议，可由省（市）领队向赛区仲裁委员会提出申诉。赛区仲裁委员会的仲裁结果为最终结果。
7.申诉方可随时提出放弃申诉。
云南省职业院校技能大赛（高职组）
Web技术（网站设计与开发）赛项
竞赛试题（样卷）
云南理工职业学院技能大赛组委会
2021年11月
工位号：________________
赛题说明
一、竞赛内容
本试卷适用于Window7/10平台，共一套综合题，其中包含系统设计、程序排错和功能编码3个模块，共11项任务，试卷满分100分。
任务
模块一
模块二
模块三
总分
分值
100
三、竞赛事项要求
1.参赛选手不得携带通信设备等物品进入赛场，违反者按作弊处理。
2.请根据大赛所提供的比赛环境，检查所列的硬件设备、软件清单、材料清单是否齐全，计算机设备是否能正常使用。
3.竞赛结束前，将各试题代码整合，并运行到竞赛所提供的1号计算机设备上，并提交一个完整的项目工程代码到大赛组委会提供的U盘中，目录格式如图1所示。
图1模块提交目录格式
4.竞赛结束时，请将U盘、试卷和答题纸统一提交。并将设计说明书文档拷贝到计算机的桌面。所用的所有物品（包括试卷和稿纸）禁止带离赛场。
5.裁判以各参赛队发布到计算机上的项目的运行结果为评分依据。严禁在程序及运行结果中任何位置标注竞赛队的任何信息，否则按照作弊处理。
6.计算机上IDEA工具中已经集成了SVNClient，系统已安装Mysql数据库，用户名密码分别为：root/123456。
项目本地导入编译运行后，在本地浏览器中分别键入下列地址，进行浏览访问：
管理端用户
用户名：admin
密码：123456
7.计算机上已经安装Element-UI:
Web技术赛项，主要面向Java开发工程师、软件技术支持工程师等核心岗位。通过竞赛，考察参赛选手实际软件工程文档编写能力、工程项目的需求分析理解能力、程序编码与排错能力，增强学生专业技能和职业素质，提升教学环境与产业环境之间的契合度，让参赛选手尽可能地适应未来工作岗位的需要。推进高职软件技术专业对接最新行业标准和岗位规范，提升毕业生的就业竞争力。加强以“技术+模式+生态”为核心的协同创新持续深化软件产业发展，建立健全产教融合、校企合作的人才培养机制，引领软件人才的培养，推动软件技术专业的建设。
本试卷包括三个模块：第一模块为系统设计，根据U盘Web技术赛项试卷目录中的《系统设计说明书（模板）》，完成指定模块的系统概要/详细设计说明书的编写。第二模块为程序排错，根据题目中所描述的错误信息，基于给定的工程代码定位故障位置，并修改正确。第三模块为功能编码，根据题目中所描述的需求，并参阅U盘中的辅助文档，自行设计，编码实现。
2022云南省职业院校技能大赛
Web技术赛项
竞赛任务
模块一系统设计
任务一完成移动端商品分类模块设计说明书文档的编写
任务描述：分析移动端商品分类模块的功能，根据任务九的功能需求，参照U盘中“Web技术赛项试卷”目录中的“系统设计说明书（模板）”文档格式，完成移动端商品分类模块设计说明书文档的编写。
要求：文档要符合软件规范要求。
提交作品：需要提交移动端商品分类模块设计说明书。
分值：本任务共10分。
模块二程序排错
任务二在移动商城端将商城首页四个菜单标签一字排开显示且无边框
任务描述：进入移动商城端的商城页面，商城页面显示如图2-1所示。目前上方四个宫格为四宫格排列且带有边框，正常情况应为四个宫格一字排开且无边框如图2-1右图所示，请查明原因并修改。
图2-1APP商城页面
要求：修改完代码之后，应为四个宫格一字排开且无边框。
提交作品：保存修改之后的页面。
分值：本任务共5分。
任务三在移动商城端，点击首页菜单栏中的积分商品，点击积分商品进入积分商品详情页，显示积分商品详情。
图2-2普通商品详情页（左）积分商品详情页（右）
要求：显示积分商品详情。
任务四商品规格列表中的规格值显示不正确
任务描述：在PC商城端，商品的规格型号值显示不正常如图2-3所示，正常为图2-4所示。请查明原因并修改。
图2-3当前商品规格
图2-4正常的商品规格
要求：在商品规格列表页的规格值显示正常。
模块三功能编码
任务五在移动商城端实现商品列表功能
任务描述：在移动商城端，点击首页菜单栏中的全部商品则可进入商品列表显示普通商品，如果点击积分商品则商品列表全部显示积分商品，且可以根据综合（后台默认排序）、价格（根据价格排序）、新品，三种情况进行排序，进入页面默认为综合排序，普通商品如图3-1所示，积分商品如图3-2所示，当列表商品超过10个时，只加载十个并在最底部显示“点击加载更多”选项，如图3-3所示，并且每次点击增加十条数据，当点击排序，且列表商品超过10个时，只加载十个并在最底部显示“点击加载更多”选项。
图3-1全部商品
图3-2积分商品
图3-3点击加载更多
要求：
1.点击首页菜单栏中的全部商品则可进入商品列表显示普通商品，如果点击积分商品则商品列表全部显示积分商品。
2.可以根据综合（后台默认排序）、价格（根据价格排序）、新品，三种情况进行排序，进入页面默认为综合排序。
3.当为任意类型排序时，且列表商品超过10个时，只加载十个并在最底部显示“点击加载更多”选项，并且每次点击增加十条数据。
提交作品：保存完成的页面。
其他：
API名称：商品列表API
接口名称
商品列表API
API地址
详见U盘\02竞赛平台手册\中慧Web技术平台API稳定性测试报告
任务六在移动商城端，实现个人中心的订单功能
1．任务描述：在移动商城端，实现个人中心的订单功能，共有五种状态，点击相应的状态可进入对应状态的页面，如图3-4所示。在订单页，点击相应的状态可进入对应状态的页面查看订单列表，如图3-5所示。
图3-4个人中心订单
图3-5用户订单页
1．实现个人中心的订单功能，共有五种状态，击相应的状态可进入对应状态的页面。
2．在订单页，点击相应的状态可进入对应状态的页面查看订单列表。
任务七在移动商城端实现用户钱包余额查询和充值功能
任务描述：在移动商城端，单击【个人中心】标签，进入我的个人中心页面，如图3-6所示，在我的个人中心页面单击【我的钱包】打开我的钱包充值页面，如图3-7所示，在我的钱包充值页面显示当前用户的当前总资产、累计充值、累计消费以及充值方案，点击充值可根据相应的充值方案进行充值。
图3-6我的个人中心页面图3-7我的钱包充值页面
1.在我的钱包充值页面显示当前用户的当前总资产、累计充值、累计消费以及充值方案，如图3-7所示。
2.点击充值可根据相应的充值方案进行充值。
分值：本任务共8分。
其他：【API接口参考】
API
充值方案API
查询账户API
模拟充值API
任务八移动商城端实现我的足迹功能
图3-8我的足迹页面
图3-9商品详情显示
2．点击管理，“管理”字样变成“取消”，商品左上角出现复选框，可选择一个或多个商品，在界面下方显示全选选项和删除按钮该ui为吸附状态，不会随内容的变多而改变布局位置。
3．点击删除可删除选中的足迹商品，点击全选可选中所有的足迹商品，点击商品可跳转至该商品详情页面。
任务九在移动商城端实现商品分类
任务描述：在移动商城端点击分类标签可进入商品分类页，显示所有分类，左侧为一级分类，右侧为该分类下的分类，由图片与名称组成如图3-10所示。点击右侧带图的分类可跳转至商品列表且显示当前分类的商品如3-11所示。
图3-10移动商城端商品分类页图3-11移动商城端分类商品列表页
1.显示所有分类，左侧为一级分类，右侧为该分类下的分类，由图片与名称组成如图3-10所示。
2.点击右侧带图的分类可跳转至商品列表且显示当前分类的商品如3-11所示。
3.列表商品超过10个时，只加载十个并在最底部显示“点击加载更多”选项，并且每次点击增加十条数据。
获取商品列表api
查询商品分类api
详见U盘\02竞赛平台手册\中慧Web技术平台API稳定性测试报告V2.2
任务十在PC端实现商品图片滚动功能
任务描述：在PC端实现商品图片滚动功能，单击上下箭头点击可以可查看所有商品分类，如图3-12所示。
图3-12商品分类页面
1.实现商品图片的展示功能，以箭头滚动的方式显示如图3-12所示。
2.点击【上箭头】可向上滚动一张图片，在右侧可以显示商品大图。
3.点击【下箭头】可向下滚动一张图片，在右侧可以显示商品大图。
商品详情api
任务十一移动商城端实现我的收藏功能
任务描述：设计系统移动商城端我的收藏页面，移动商城端我的收藏页面如图3-13所示，点击管理，“管理”字样变成“取消”，商品左上角出现复选框，可选择一个或多个商品，在界面下方显示全选选项和删除按钮该ui为吸附状态，不会随内容的变多而改变布局位置，点击删除可删除选中的收藏商品，点击全选可选中所有的收藏商品，点击商品可跳转至该商品详情页面如图3-14所示，在商品详情页中点击收藏按钮可收藏该商品，如果该商品已收藏则收藏图标变为红色，“收藏”字样变为“已收藏”，为收藏状态如图3-14所示。
图3-13我的收藏页面
图3-14商品详情
1．设计移动商城端我的收藏页面，如图3-13所示。
3．点击删除可删除选中的收藏商品，点击全选可选中所有的收藏商品，点击商品可跳转至该商品详情页面。
4.在商品详情页中点击收藏按钮可收藏该商品，如果该商品已收藏则收藏图标变为红色，“收藏”字样变为“已收藏”。