2022年甘肃省职业技能大赛Web技术赛项(高职学生组)试题A卷

2022年甘肃省职业院校技能大赛

Web技术赛项

（A卷）

竞

赛

试

题

工位号：________________

赛题说明

一、竞赛内容

本试卷适用于Window10平台，共一套综合题，其中包含

系统设计、程序排错和功能编码3个模块，共11项任务，试卷

满分100分。

模块一模块二模块三

任务总分

1234567891011

分值1055108101010101210100

二、竞赛时间

竞赛时间：共计240分钟。

三、竞赛事项要求

1.参赛选手不得携带通信设备等物品进入赛场，违反者按

作弊处理。

2.请根据大赛所提供的比赛环境，检查所列的硬件设备、

软件清单、材料清单是否齐全，计算机设备是否能正常使用。

3.竞赛结束前，将各试题代码整合，部署并运行到竞赛所

提供的1号计算机设备上，并提交一个完整的项目工程代码到

大赛组委会提供的U盘中，目录格式如图1所示。

第2页/共25页

图1模块提交目录格式

4.竞赛结束时，请将U盘、试卷和答题纸统一提交。并将

设计说明书文档拷贝到1号计算机的桌面。所用的所有物品（包

括试卷和稿纸）禁止带离赛场。

5.裁判以各参赛队发布到服务器上的项目的运行结果为评

分依据。严禁在程序及运行结果中任何位置标注竞赛队的任何

信息，否则按照作弊处理。评判服务器（ip地址为00）

部署后访问地址为：

PC端管理：00:8086

Mobile端商城：http://00:8085

后台管理用户

用户名：admin

密码：123456

四、系统拓扑图

第3页/共25页

图2竞赛环境拓扑图

1.服务器：设备已安装SVNServer，提供代码版本管理功

能。

2.PC1、PC2、PC3：IDEA工具中已经集成了SVNClient，

系统已安装Mysql数据库，用户名密码分别为：root/123456。

项目本地导入编译运行后，在本地浏览器中分别键入下列

地址，进行浏览访问：

PC端管理：00:8086

Mobile端商城：http://00:8085

4.服务器上已经安装GitStack：00/gitstack

admin/admin

5.服务器上已经安装Element-UI:

00:8080/elementui

第4页/共25页

6.服务器上已经安装VantUI:

00:8080/vantui

7.SvnServer服务（已经安装）

服务器已经安装SvnServer服务，请点击服务器桌面上Svn

Server快捷方式图标配置SVN路径和用户。

该赛项，主要面向Web前端开发工程师、Java开发工程师、

软件技术支持工程师等核心岗位。通过竞赛，考察参赛选手实

第5页/共25页

际软件工程文档编写能力、工程项目的需求分析理解能力、程

序编码与排错能力、以及团队管理和协作能力，增强学生专业

技能和职业素质，提升教学环境与产业环境之间的契合度，让

参赛选手尽可能地适应未来工作岗位的需要。推进职业院校软

件技术专业对接最新行业标准和岗位规范，提升毕业生的就业

竞争力。加强以“技术+模式+生态”为核心的协同创新持续深

化软件产业发展，建立健全产教融合、校企合作的人才培养机

制，引领软件人才的培养，推动软件技术专业的建设。

本试卷包括三个模块：第一模块为系统设计，根据U盘

“Web技术赛项试卷”目录中的《系统设计说明书（模板）》，

完成指定模块的系统概要/详细设计说明书的编写。第二模块为

程序排错，根据题目中所描述的错误信息，基于给定的工程代

码定位故障位置，并修改正确。第三模块为功能编码，根据题

目中所描述的需求，并参阅U盘中的辅助文档，自行设计，编

码实现。

第6页/共25页

2022年度甘肃省职业院校技能竞赛

高职组Web技术赛项

竞赛任务

模块一系统设计

任务一收藏功能设计说明书文档的编写

任务描述：分析移动端收藏模块的功能，根据任务十的功能需求，参

照U盘中“Web技术试卷”目录中的“系统设计说明书（模板）”文档格式，

完成移动端收藏模块设计说明书文档的编写。

要求：文档要符合软件规范要求。

提交作品：需要提交移动端收藏模块设计说明书。

分值：本任务共10分。

模块二程序排错

任务二在移动商城端将商城首页四个菜单标签一字排开显

示且无边框

任务描述：进入移动商城端的商城页面，商城页面显示如图2-1所示。

目前上方四个宫格为四宫格排列且带有边框，正常情况应为四个宫格一字

排开且无边框如图2-1右图所示，请查明原因并修改。

第7页/共25页

图2-1APP商城页面

要求：修改完代码之后，应为四个宫格一字排开且无边框。

提交作品：保存修改之后的页面。

分值：本任务共5分。

任务三PC端商城首页点击分类无响应。

任务描述：在PC端商城首页点击分类时无反应，正常应跳转至相关分

类页面，请查明原因并修改。如图2-2所示。

第8页/共25页

图2-2pc端商城首页

要求：修改完代码之后，点击分类会跳转至相关分类页面。

提交作品：保存修改之后的代码。

分值：本任务共5分。

任务四PC端商城输入相同的手机号注册新用户时，页面显

示了SQL错误。

任务描述：在PC端商城输入相同的手机号注册新用户时，页面显示了

SQL错误。正常情况应该显示该手机号已存在。

第9页/共25页

要求：修改完代码之后，相同手机号注册时应提示手机号已存在。

提交作品：保存修改之后的代码。

分值：本任务共10分。

第10页/共25页

模块三功能编码

任务五实现移动端首页猜你喜欢列表布局

任务描述：在移动端首页实现猜你喜欢列表布局如图3-1所示，一行

一个商品，最多展示十个商品，显示商品图片、名称、市场价与销售价。

图3-1猜你喜欢列表

要求：一行一个商品，最多展示十个商品，显示商品图片、名称、市

场价与销售价如图3-1所示。点击进入相应的商品详情页面。

提交作品：保存修改之后的页面。

分值：本任务共8分。

注：需自行完成接口部分

第11页/共25页

任务六在移动端，实现个人中心的订单详情功能

任务描述：在移动商城端个人中心，进入订单列表页如图3-2所示，

点击立即查看按钮可进入订单详情页如图3-3所示。

图3-2订单列表

第12页/共25页

图3-3订单详情

要求：

1．实现订单详情页面如图3-3所示，“服务商已发货”区域显示后台返回

的订单的信息，如已发货为“服务商已发货”。点击商品进入商品详情页面。

提交作品：保存完成的页面。

分值：本任务共10分。

注：需自行完成接口部分。

任务七在移动商城端实现用户钱包余额查询和充值功能

第13页/共25页

任务描述：在移动商城端，单击【个人中心】标签，进入我的个人中

心页面，如图3-4所示，在我的个人中心页面单击【我的钱包】打开我的

钱包充值页面，如图3-5所示，在我的钱包充值页面显示当前用户的当前

总资产、累计充值、累计消费以及充值方案，点击充值可根据相应的充值

方案进行充值。

图3-4我的个人中心页面图3-5我的钱包充值页面

要求：

1.在我的钱包充值页面显示当前用户的当前总资产、累计充值、累计

消费以及充值方案，如图3-5所示。

2.点击充值可根据相应的充值方案进行充值。

提交作品：保存完成的页面。

第14页/共25页

分值：本任务共10分。

其他：【API接口参考】

接口名称API

充值方案API00:8008/api/recharge/index

查询账户API00:8008/api/user/balance

模拟充值API00:8008/api/recharge/test

详见U盘\02竞赛平台手册\中慧Web应用软件开发平台API稳定性测试报告

任务八在PC商城首页实现商品搜索功能

任务描述：在PC商城首页点击搜索栏输入搜索信息点击搜索按钮，

可查询出相关商品，显示商品图片、商品名称、商品市场价与商品价格，

商品简介，点击价格可根据价格进行排序，默认每页显示12个商品，左上

角“全部结果”后显示搜索内容名称。

图3-6搜索商品信息

第15页/共25页

要求：

1．输入搜索信息点击搜索按钮，可查询出相关商品，显示商品图片、

商品名称、商品市场价与商品价格，商品简介。

2．点击价格可根据价格进行排序。

3．默认每页显示12个商品，左上角“全部结果”后显示搜索内容名

称。

提交作品：保存完成的页面。

分值：本任务共10分。

其他：【API接口参考】

接口名称API

搜索商品API00:8086/api/products

详见U盘\02竞赛平台手册\中慧Web应用软件开发平台API稳定性测试报告

任务九在PC商城个人中心实现地址管理功能

任务描述：在PC商城端【我的收货地址】实现收货地址的管理，包括

收货地址显示、增加、删除、修改和设为默认地址。

第16页/共25页

图3-7新增地址栏

图3-8新增地址栏-所在区域

第17页/共25页

图3-9我的地址列表页

要求：

1.点击新增收货地址按钮弹出新增地址页面如图3-7，页面中有4个数

据项：所在区域、详细地址、收货人签名、手机号码。所在区域需实现三

级联动功能如图3-8所示。选中“设置为默认收货地址”时该地址被保存为默

认收货地址。

2.收货地址列表页面如图3-9所示。点击“设为默认地址”开关，该

地址被设置为默认地址；点击“修改”按钮，弹出修改地址页面进行修改；

点击“删除”按钮，提醒用户是否删除该地址，确定后进行删除。

提交作品：保存完成的页面。

分值：本任务共10分。

其他：【API接口参考】

接口名称API

第18页/共25页

获取地址列表API00:8008/api/address/list

获取城市列表API00:8008/api/city_list

新增/编辑地址API00:8008/api/address/edit

删除地址API00:8008/api/address/del

详见U盘\02竞赛平台手册\中慧Web应用软件开发平台API稳定性测试报告

任务十移动商城端实现我的收藏功能

任务描述：设计系统移动商城端我的收藏页面，移动商城端我的收藏

页面如图3-10所示，点击管理，“管理”字样变成“取消”，商品左上角出

现复选框，可选择一个或多个商品，在界面下方显示全选选项和删除按钮

该ui为吸附状态，不会随内容的变多而改变布局位置，点击删除可删除选

中的收藏商品，点击全选可选中所有的收藏商品，点击商品可跳转至该商

品详情页面如图3-11所示，在商品详情页中点击收藏按钮可收藏该商品，

如果该商品已收藏则收藏图标变为红色，“收藏”字样变为“已收藏”，为

收藏状态如图3-11所示。

第19页/共25页

图3-10我的收藏页面

图3-11商品详情

第20页/共25页

要求：

1．设计移动商城端我的收藏页面，如图3-10所示。

2．点击管理，“管理”字样变成“取消”，商品左上角出现复选框，可

选择一个或多个商品，在界面下方显示全选选项和删除按钮该ui为吸附状

态，不会随内容的变多而改变布局位置。

3．点击删除可删除选中的收藏商品，点击全选可选中所有的收藏商品，

点击商品可跳转至该商品详情页面。

4.在商品详情页中点击收藏按钮可收藏该商品，如果该商品已收藏则

收藏图标变为红色，“收藏”字样变为“已收藏”。

提交作品：保存完成的页面。

分值：本任务共12分。

注：需自行完成接口部分

任务十一PC商城订单评论功能

任务描述：在PC商城中增加商品评论功能。在待评价的订单上对每个

商品进行评论，可以提交商品评分、服务评分、评价内容、上传图片。在

商品详情中可以看到评价信息。

第21页/共25页

图3-12待评价订单列表页面

第22页/共25页

图3-13商品评价页面

第23页/共25页

图3-1