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

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

Web技術(shù)賽項

（A卷）

競

賽

試

題

工位號：________________

賽題說明

一、競賽內(nèi)容

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

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

滿分100分。

模塊一模塊二模塊三

任務(wù)總分

1234567891011

分值1055108101010101210100

二、競賽時間

競賽時間：共計240分鐘。

三、競賽事項要求

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

作弊處理。

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

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

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

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

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

第2頁/共25頁

圖1模塊提交目錄格式

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

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

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

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

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

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

部署后訪問地址為：

PC端管理：00:8086

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

后臺管理用戶

用戶名：admin

密碼：123456

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

第3頁/共25頁

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

1.服務(wù)器：設(shè)備已安裝SVNServer，提供代碼版本管理功

能。

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

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

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

地址，進行瀏覽訪問：

PC端管理：00:8086

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

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

admin/admin

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

00:8080/elementui

第4頁/共25頁

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

00:8080/vantui

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

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

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

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

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

第5頁/共25頁

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

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

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

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

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

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

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

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

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

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

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

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

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

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

碼實現(xiàn)。

第6頁/共25頁

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

高職組Web技術(shù)賽項

競賽任務(wù)

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

任務(wù)一收藏功能設(shè)計說明書文檔的編寫

任務(wù)描述：分析移動端收藏模塊的功能，根據(jù)任務(wù)十的功能需求，參

照U盤中“Web技術(shù)試卷”目錄中的“系統(tǒng)設(shè)計說明書（模板）”文檔格式，

完成移動端收藏模塊設(shè)計說明書文檔的編寫。

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

提交作品：需要提交移動端收藏模塊設(shè)計說明書。

分值：本任務(wù)共10分。

模塊二程序排錯

任務(wù)二在移動商城端將商城首頁四個菜單標簽一字排開顯

示且無邊框

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

目前上方四個宮格為四宮格排列且?guī)в羞吙?，正常情況應(yīng)為四個宮格一字

排開且無邊框如圖2-1右圖所示，請查明原因并修改。

第7頁/共25頁

圖2-1APP商城頁面

要求：修改完代碼之后，應(yīng)為四個宮格一字排開且無邊框。

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

分值：本任務(wù)共5分。

任務(wù)三PC端商城首頁點擊分類無響應(yīng)。

任務(wù)描述：在PC端商城首頁點擊分類時無反應(yīng)，正常應(yīng)跳轉(zhuǎn)至相關(guān)分

類頁面，請查明原因并修改。如圖2-2所示。

第8頁/共25頁

圖2-2pc端商城首頁

要求：修改完代碼之后，點擊分類會跳轉(zhuǎn)至相關(guān)分類頁面。

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

分值：本任務(wù)共5分。

任務(wù)四PC端商城輸入相同的手機號注冊新用戶時，頁面顯

示了SQL錯誤。

任務(wù)描述：在PC端商城輸入相同的手機號注冊新用戶時，頁面顯示了

SQL錯誤。正常情況應(yīng)該顯示該手機號已存在。

第9頁/共25頁

要求：修改完代碼之后，相同手機號注冊時應(yīng)提示手機號已存在。

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

分值：本任務(wù)共10分。

第10頁/共25頁

模塊三功能編碼

任務(wù)五實現(xiàn)移動端首頁猜你喜歡列表布局

任務(wù)描述：在移動端首頁實現(xiàn)猜你喜歡列表布局如圖3-1所示，一行

一個商品，最多展示十個商品，顯示商品圖片、名稱、市場價與銷售價。

圖3-1猜你喜歡列表

要求：一行一個商品，最多展示十個商品，顯示商品圖片、名稱、市

場價與銷售價如圖3-1所示。點擊進入相應(yīng)的商品詳情頁面。

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

分值：本任務(wù)共8分。

注：需自行完成接口部分

第11頁/共25頁

任務(wù)六在移動端，實現(xiàn)個人中心的訂單詳情功能

任務(wù)描述：在移動商城端個人中心，進入訂單列表頁如圖3-2所示，

點擊立即查看按鈕可進入訂單詳情頁如圖3-3所示。

圖3-2訂單列表

第12頁/共25頁

圖3-3訂單詳情

要求：

1．實現(xiàn)訂單詳情頁面如圖3-3所示，“服務(wù)商已發(fā)貨”區(qū)域顯示后臺返回

的訂單的信息，如已發(fā)貨為“服務(wù)商已發(fā)貨”。點擊商品進入商品詳情頁面。

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

分值：本任務(wù)共10分。

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

任務(wù)七在移動商城端實現(xiàn)用戶錢包余額查詢和充值功能

第13頁/共25頁

任務(wù)描述：在移動商城端，單擊【個人中心】標簽，進入我的個人中

心頁面，如圖3-4所示，在我的個人中心頁面單擊【我的錢包】打開我的

錢包充值頁面，如圖3-5所示，在我的錢包充值頁面顯示當前用戶的當前

總資產(chǎn)、累計充值、累計消費以及充值方案，點擊充值可根據(jù)相應(yīng)的充值

方案進行充值。

圖3-4我的個人中心頁面圖3-5我的錢包充值頁面

要求：

1.在我的錢包充值頁面顯示當前用戶的當前總資產(chǎn)、累計充值、累計

消費以及充值方案，如圖3-5所示。

2.點擊充值可根據(jù)相應(yīng)的充值方案進行充值。

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

第14頁/共25頁

分值：本任務(wù)共10分。

其他：【API接口參考】

接口名稱API

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

查詢賬戶API00:8008/api/user/balance

模擬充值A(chǔ)PI00:8008/api/recharge/test

詳見U盤\02競賽平臺手冊\中慧Web應(yīng)用軟件開發(fā)平臺API穩(wěn)定性測試報告

任務(wù)八在PC商城首頁實現(xiàn)商品搜索功能

任務(wù)描述：在PC商城首頁點擊搜索欄輸入搜索信息點擊搜索按鈕，

可查詢出相關(guān)商品，顯示商品圖片、商品名稱、商品市場價與商品價格，

商品簡介，點擊價格可根據(jù)價格進行排序，默認每頁顯示12個商品，左上

角“全部結(jié)果”后顯示搜索內(nèi)容名稱。

圖3-6搜索商品信息

第15頁/共25頁

要求：

1．輸入搜索信息點擊搜索按鈕，可查詢出相關(guān)商品，顯示商品圖片、

商品名稱、商品市場價與商品價格，商品簡介。

2．點擊價格可根據(jù)價格進行排序。

3．默認每頁顯示12個商品，左上角“全部結(jié)果”后顯示搜索內(nèi)容名

稱。

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

分值：本任務(wù)共10分。

其他：【API接口參考】

接口名稱API

搜索商品API00:8086/api/products

詳見U盤\02競賽平臺手冊\中慧Web應(yīng)用軟件開發(fā)平臺API穩(wěn)定性測試報告

任務(wù)九在PC商城個人中心實現(xiàn)地址管理功能

任務(wù)描述：在PC商城端【我的收貨地址】實現(xiàn)收貨地址的管理，包括

收貨地址顯示、增加、刪除、修改和設(shè)為默認地址。

第16頁/共25頁

圖3-7新增地址欄

圖3-8新增地址欄-所在區(qū)域

第17頁/共25頁

圖3-9我的地址列表頁

要求：

1.點擊新增收貨地址按鈕彈出新增地址頁面如圖3-7，頁面中有4個數(shù)

據(jù)項：所在區(qū)域、詳細地址、收貨人簽名、手機號碼。所在區(qū)域需實現(xiàn)三

級聯(lián)動功能如圖3-8所示。選中“設(shè)置為默認收貨地址”時該地址被保存為默

認收貨地址。

2.收貨地址列表頁面如圖3-9所示。點擊“設(shè)為默認地址”開關(guān)，該

地址被設(shè)置為默認地址；點擊“修改”按鈕，彈出修改地址頁面進行修改；

點擊“刪除”按鈕，提醒用戶是否刪除該地址，確定后進行刪除。

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

分值：本任務(wù)共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應(yīng)用軟件開發(fā)平臺API穩(wěn)定性測試報告

任務(wù)十移動商城端實現(xiàn)我的收藏功能

任務(wù)描述：設(shè)計系統(tǒng)移動商城端我的收藏頁面，移動商城端我的收藏

頁面如圖3-10所示，點擊管理，“管理”字樣變成“取消”，商品左上角出

現(xiàn)復(fù)選框，可選擇一個或多個商品，在界面下方顯示全選選項和刪除按鈕

該ui為吸附狀態(tài)，不會隨內(nèi)容的變多而改變布局位置，點擊刪除可刪除選

中的收藏商品，點擊全選可選中所有的收藏商品，點擊商品可跳轉(zhuǎn)至該商

品詳情頁面如圖3-11所示，在商品詳情頁中點擊收藏按鈕可收藏該商品，

如果該商品已收藏則收藏圖標變?yōu)榧t色，“收藏”字樣變?yōu)椤耙咽詹亍?，?/p>

收藏狀態(tài)如圖3-11所示。

第19頁/共25頁

圖3-10我的收藏頁面

圖3-11商品詳情

第20頁/共25頁

要求：

1．設(shè)計移動商城端我的收藏頁面，如圖3-10所示。

2．點擊管理，“管理”字樣變成“取消”，商品左上角出現(xiàn)復(fù)選框，可

選擇一個或多個商品，在界面下方顯示全選選項和刪除按鈕該ui為吸附狀

態(tài)，不會隨內(nèi)容的變多而改變布局位置。

3．點擊刪除可刪除選中的收藏商品，點擊全選可選中所有的收藏商品，

點擊商品可跳轉(zhuǎn)至該商品詳情頁面。

4.在商品詳情頁中點擊收藏按鈕可收藏該商品，如果該商品已收藏則

收藏圖標變?yōu)榧t色，“收藏”字樣變?yōu)椤耙咽詹亍薄?/p>

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

分值：本任務(wù)共12分。

注：需自行完成接口部分

任務(wù)十一PC商城訂單評論功能

任務(wù)描述：在PC商城中增加商品評論功能。在待評價的訂單上對每個

商品進行評論，可以提交商品評分、服務(wù)評分、評價內(nèi)容、上傳圖片。在

商品詳情中可以看到評價信息。

第21頁/共25頁

圖3-12待評價訂單列表頁面

第22頁/共25頁

圖3-13商品評價頁面

第23頁/共25頁

圖3-1