2022年甘肅省職業(yè)技能大賽Web技術賽項(高職學生組)試題B卷

2022年甘肅省職業(yè)院校技能大賽

Web技術賽項

（B卷）

競

賽

試

題

工位號：________________

賽題說明

一、競賽內(nèi)容

本試卷適用于Window10平臺，共一套綜合題，其中包含

系統(tǒng)設計、程序排錯和功能編碼3個模塊，共11項任務，試卷

滿分100分。

模塊一模塊二模塊三

任務總分

1234567891011

分值1055108101010101210100

二、競賽時間

競賽時間：共計240分鐘。

三、競賽事項要求

1.參賽選手不得攜帶通信設備等物品進入賽場，違反者按

作弊處理。

2.請根據(jù)大賽所提供的比賽環(huán)境，檢查所列的硬件設備、

軟件清單、材料清單是否齊全，計算機設備是否能正常使用。

3.競賽結(jié)束前，將各試題代碼整合，部署并運行到競賽所

提供的1號計算機設備上，并提交一個完整的項目工程代碼到

大賽組委會提供的U盤中，目錄格式如圖1所示。

第2頁/共23頁

圖1模塊提交目錄格式

4.競賽結(jié)束時，請將U盤、試卷和答題紙統(tǒng)一提交。并將

設計說明書文檔拷貝到1號計算機的桌面。所用的所有物品（包

括試卷和稿紙）禁止帶離賽場。

5.裁判以各參賽隊發(fā)布到服務器上的項目的運行結(jié)果為評

分依據(jù)。嚴禁在程序及運行結(jié)果中任何位置標注競賽隊的任何

信息，否則按照作弊處理。評判服務器（ip地址為00）

部署后訪問地址為：

PC端管理：00:8086

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

后臺管理用戶

用戶名：admin

密碼：123456

四、系統(tǒng)拓撲圖

第3頁/共23頁

圖2競賽環(huán)境拓撲圖

1.服務器：設備已安裝SVNServer，提供代碼版本管理功

能。

2.PC1、PC2、PC3：IDEA工具中已經(jīng)集成了SVNClient，

系統(tǒng)已安裝Mysql數(shù)據(jù)庫，用戶名密碼分別為：root/123456。

項目本地導入編譯運行后，在本地瀏覽器中分別鍵入下列

地址，進行瀏覽訪問：

PC端管理：00:8086

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

4.服務器上已經(jīng)安裝GitStack：00/gitstack

admin/admin

5.服務器上已經(jīng)安裝Element-UI:

00:8080/elementui

第4頁/共23頁

6.服務器上已經(jīng)安裝VantUI:

00:8080/vantui

7.SvnServer服務（已經(jīng)安裝）

服務器已經(jīng)安裝SvnServer服務，請點擊服務器桌面上Svn

Server快捷方式圖標配置SVN路徑和用戶。

該賽項，主要面向Web前端開發(fā)工程師、Java開發(fā)工程師、

軟件技術支持工程師等核心崗位。通過競賽，考察參賽選手實

第5頁/共23頁

際軟件工程文檔編寫能力、工程項目的需求分析理解能力、程

序編碼與排錯能力、以及團隊管理和協(xié)作能力，增強學生專業(yè)

技能和職業(yè)素質(zhì)，提升教學環(huán)境與產(chǎn)業(yè)環(huán)境之間的契合度，讓

參賽選手盡可能地適應未來工作崗位的需要。推進職業(yè)院校軟

件技術專業(yè)對接最新行業(yè)標準和崗位規(guī)范，提升畢業(yè)生的就業(yè)

競爭力。加強以“技術+模式+生態(tài)”為核心的協(xié)同創(chuàng)新持續(xù)深

化軟件產(chǎn)業(yè)發(fā)展，建立健全產(chǎn)教融合、校企合作的人才培養(yǎng)機

制，引領軟件人才的培養(yǎng)，推動軟件技術專業(yè)的建設。

本試卷包括三個模塊：第一模塊為系統(tǒng)設計，根據(jù)U盤

“Web技術賽項試卷”目錄中的《系統(tǒng)設計說明書（模板）》，

完成指定模塊的系統(tǒng)概要/詳細設計說明書的編寫。第二模塊為

程序排錯，根據(jù)題目中所描述的錯誤信息，基于給定的工程代

碼定位故障位置，并修改正確。第三模塊為功能編碼，根據(jù)題

目中所描述的需求，并參閱U盤中的輔助文檔，自行設計，編

碼實現(xiàn)。

第6頁/共23頁

2022年度甘肅省職業(yè)院校技能競賽

高職組Web技術賽項

競賽任務

模塊一系統(tǒng)設計

任務一移動端商品列表功能設計說明書文檔的編寫

任務描述：分析移動端商品列表模塊的功能，根據(jù)任務八的功能需求，

參照U盤中“Web技術賽項試卷”目錄中的“系統(tǒng)設計說明書（模板）”文

檔格式，完成移動端首頁搜索模塊設計說明書文檔的編寫。

要求：文檔要符合軟件規(guī)范要求。

提交作品：需要提交移動端首頁搜索模塊設計說明書。

分值：本任務共10分。

模塊二程序排錯

任務二在移動商城端商城首頁的精品推薦商品顯示異常

任務描述：進入移動商城端的商城頁面，商城頁面顯示如圖2-1右所

示。精品推薦商品價格不顯示，正常情況應為顯示銷售價與市場價如圖2-1

左圖所示，請查明原因并修改。

第7頁/共23頁

圖2-1APP商城頁面

要求：修改完代碼之后，應帶有市場價與銷售價。

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

分值：本任務共5分。

任務三在PC端商城，點擊分類進入商品列表，在商品列表

頁點擊價格排序無反應。

任務描述：在PC商城端，點擊首頁分類進入商品列表頁，點擊價格排

序無反應。如圖2-2所示。

第8頁/共23頁

圖2-2商品列表

要求：點擊價格排序根據(jù)商品價格進行升序或降序。

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

分值：本任務共5分。

任務四PC端商城購物車合計金額不能正確顯示。

任務描述：在PC端商城進入購物車頁面，選中購物車里面的商品，修

改商品數(shù)量，下方合計金額不能正確顯示。

第9頁/共23頁

圖2-3購物車

要求：修改完代碼之后，選中商品、修改商品數(shù)量后可成功計算出合

計金額。

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

分值：本任務共10分。

第10頁/共23頁

模塊三功能編碼

任務五在PC端商城，實現(xiàn)加入購物車功能

任務描述：在PC商城端，點擊商品進入商品詳情頁面，如圖3-1所示，

點擊加入購物車按鈕可將該商品加入到購物車，可在右上角購物車選項預

覽購物車列表，如圖3-2所示。

圖3-1商品詳情頁面

第11頁/共23頁

圖3-2購物車預覽

要求：

1．在商品詳情頁面，點擊加入購物車按鈕可將選中規(guī)格的商品加入到購

物車列表。

2．鼠標移入右上角購物車選項可預覽購物車列表，點擊刪除按鈕可刪除

購物車里面的商品，如圖3-2所示。

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

分值：本任務共10分。

其他：【API接口參考】

接口名稱API

添加購物車API00:8008/api/cart/add

購物車列表API00:8008/api/cart/list

詳見U盤\02競賽平臺手冊\中慧Web技術API穩(wěn)定性測試報告

第12頁/共23頁

任務六在PC商城端實現(xiàn)錢包充值功能

任務描述：設計PC商城端錢包充值頁面，進入個人中心下的錢包充值

頁面，顯示充值方案，如圖3-3所示，點擊充值可根據(jù)相應的充值方案進

行充值。

圖3-3我的錢包充值頁面

要求：

1．設計PC商城端錢包充值頁面，如圖3-3所示。

2．顯示充值方案列表。

3．點擊立即使用按鈕可根據(jù)充值方案進行充值。

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

分值：本任務共10分。

其他：【API接口參考】

接口名稱API

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

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

第13頁/共23頁

詳見U盤\02競賽平臺手冊\中慧Web技術API穩(wěn)定性測試報告

任務七在移動商城端實現(xiàn)商品列表功能

任務描述：在移動商城端，點擊首頁菜單欄中的全部商品則可進入商

品列表顯示普通商品，且可以根據(jù)綜合（后臺默認排序）、價格（根據(jù)價格

排序）、新品，三種情況進行排序，進入頁面默認為綜合排序，普通商品如

圖3-6所示，當列表商品超過10個時，只加載十個并在最底部顯示“點

擊加載更多”選項，如圖3-7所示，并且每次點擊增加十條數(shù)據(jù)，當點擊

排序，且列表商品超過10個時，只加載十個并在最底部顯示“點擊加載

更多”選項。

第14頁/共23頁

圖3-6全部商品

第15頁/共23頁

圖3-7點擊加載更多

要求：

1.點擊首頁菜單欄中的全部商品則可進入商品列表顯示普通商品。

2.可以根據(jù)綜合（后臺默認排序）、價格（根據(jù)價格排序）、新品，

三種情況進行排序，進入頁面默認為綜合排序。

3.當為任意類型排序時，且列表商品超過10個時，只加載十個并

在最底部顯示“點擊加載更多”選項，并且每次點擊增加十條數(shù)據(jù)。

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

第16頁/共23頁

分值：本任務共10分。

注：需自行完成接口部分

任務八移動端實現(xiàn)首頁搜索功能

任務描述：在移動商城端個人中心點擊頂部搜索框進入搜索頁面，如

圖3-4所示，輸入關鍵字可查詢出匹配的商品并顯示最近搜索與熱門搜索

如圖3-5所示。

第17頁/共23頁

圖3-4商品搜索

圖3-5搜索結(jié)果

要求：

1．實現(xiàn)輸入關鍵字可查詢出匹配的商品。

2．顯示最近搜索與熱門搜索關鍵字如圖3-5所示。

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

分值：本任務共10分。

其他：【API接口參考】

接口名稱API

熱門搜索api00:8008/api/search/keyword

搜索商品api00:8008/api/products?keyword={keyword}

第18頁/共23頁

詳見U盤\02競賽平臺手冊\中慧Web技術API穩(wěn)定性測試報告

任務九在移動端個人中心實現(xiàn)地址管理功能

任務描述：在APP端個人中心點擊地址管理可進入地址管理頁面，實

現(xiàn)收貨地址的管理，包括收貨地址顯示、增加、刪除、修改和設為默認地

址。

圖3-9地址列表

第19頁/共23頁

圖3-10編輯、新增地址

要求：

1.個人中心點擊地址管理，進入地址列表頁如圖3-9所示，顯示名字、

電話、地址、是否默認，如不是默認則不顯示標簽。

2.在地址列表頁點擊新增聯(lián)系人可進入新增聯(lián)系人頁、聯(lián)系人、手機

號、選擇地址、詳細地址項為必填、收貨郵政編碼與設為默認為選填，需

要相應的校驗。

3.在地址列表頁點擊編輯圖標可進入編輯頁面，可刪除或修改聯(lián)系人

詳細，聯(lián)系人、手機號、選擇地址、詳細地址項為必填、收貨郵政編碼與

設為默認為選填，需要相應的校驗。

4.點擊列表聯(lián)系人前面的圖標可修改默認聯(lián)系人。

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

第20頁/共23頁

分值：本任務共10分。

接口名稱API

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

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

新增/編輯地址API00:8008/api/address/edit

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

詳見U盤\02競賽平臺手冊\中慧Web技術API穩(wěn)定性測試報告

任務十在PC商城個人中心實現(xiàn)收藏商品功能

任務描述：在PC商城首頁點擊我的-個人信息-我的收藏可進入收藏

頁面，如圖3-11所示。每行五件商品顯示圖片、名稱、價格、取消收藏按

鈕、查看詳情按鈕，點擊取消收藏可取消收藏該商品，點擊查看詳情按鈕

可跳轉(zhuǎn)至商品詳情頁、點擊批量管理，右上角