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

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

Web技術(shù)賽項(xiàng)

（C卷）

競(jìng)

賽

試

題

工位號(hào)：________________

賽題說(shuō)明

一、競(jìng)賽內(nèi)容

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

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

滿分100分。

模塊一模塊二模塊三

任務(wù)總分

1234567891011

分值10551010101010101010100

二、競(jìng)賽時(shí)間

競(jìng)賽時(shí)間：共計(jì)240分鐘。

三、競(jìng)賽事項(xiàng)要求

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

作弊處理。

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

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

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

提供的1號(hào)計(jì)算機(jī)設(shè)備上，并提交一個(gè)完整的項(xiàng)目工程代碼到

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

第2頁(yè)/共24頁(yè)

圖1模塊提交目錄格式

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

設(shè)計(jì)說(shuō)明書文檔拷貝到1號(hào)計(jì)算機(jī)的桌面。所用的所有物品（包

括試卷和稿紙）禁止帶離賽場(chǎng)。

5.裁判以各參賽隊(duì)發(fā)布到服務(wù)器上的項(xiàng)目的運(yùn)行結(jié)果為評(píng)

分依據(jù)。嚴(yán)禁在程序及運(yùn)行結(jié)果中任何位置標(biāo)注競(jìng)賽隊(duì)的任何

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

部署后訪問(wèn)地址為：

PC端管理：00:8086

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

后臺(tái)管理用戶

用戶名：admin

密碼：123456

四、系統(tǒng)拓?fù)鋱D

第3頁(yè)/共24頁(yè)

圖2競(jìng)賽環(huán)境拓?fù)鋱D

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

能。

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

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

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

地址，進(jìn)行瀏覽訪問(wèn)：

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頁(yè)/共24頁(yè)

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

00:8080/vantui

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

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

Server快捷方式圖標(biāo)配置SVN路徑和用戶。

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

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

第5頁(yè)/共24頁(yè)

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

序編碼與排錯(cuò)能力、以及團(tuán)隊(duì)管理和協(xié)作能力，增強(qiáng)學(xué)生專業(yè)

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

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

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

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

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

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

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

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

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

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

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

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

碼實(shí)現(xiàn)。

第6頁(yè)/共24頁(yè)

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

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

競(jìng)賽任務(wù)

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

任務(wù)一移動(dòng)端商品列表功能設(shè)計(jì)說(shuō)明書文檔的編寫

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

參照U盤中“Web技術(shù)賽項(xiàng)試卷”目錄中的“系統(tǒng)設(shè)計(jì)說(shuō)明書（模板）”文

檔格式，完成移動(dòng)端地址管理模塊設(shè)計(jì)說(shuō)明書文檔的編寫。

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

提交作品：需要提交移動(dòng)端地址管理模塊設(shè)計(jì)說(shuō)明書。

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

模塊二程序排錯(cuò)

任務(wù)二在移動(dòng)商城端商城首頁(yè)的精品推薦商品顯示異常

任務(wù)描述：進(jìn)入移動(dòng)商城端的商城頁(yè)面，商城頁(yè)面顯示如圖2-1右所

示。精品推薦商品價(jià)格不顯示，正常情況應(yīng)為顯示銷售價(jià)與市場(chǎng)價(jià)如圖2-1

左圖所示，請(qǐng)查明原因并修改。

第7頁(yè)/共24頁(yè)

圖2-1APP商城頁(yè)面

要求：修改完代碼之后，應(yīng)帶有市場(chǎng)價(jià)與銷售價(jià)。

提交作品：保存修改之后的頁(yè)面。

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

任務(wù)三在移動(dòng)商城端將商城首頁(yè)四個(gè)菜單標(biāo)簽一字排開(kāi)顯

示且無(wú)邊框

任務(wù)描述：進(jìn)入移動(dòng)商城端的商城頁(yè)面，商城頁(yè)面顯示如圖2-2所示。

目前上方四個(gè)宮格為四宮格排列且?guī)в羞吙颍Ｇ闆r應(yīng)為四個(gè)宮格一字

排開(kāi)且無(wú)邊框如圖2-2右圖所示，請(qǐng)查明原因并修改。

第8頁(yè)/共24頁(yè)

圖2-2APP商城頁(yè)面

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

提交作品：保存修改之后的頁(yè)面。

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

任務(wù)四PC端商城首頁(yè)點(diǎn)擊分類無(wú)響應(yīng)。

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

類頁(yè)面，請(qǐng)查明原因并修改。如圖2-3所示。

第9頁(yè)/共24頁(yè)

圖2-3pc端商城首頁(yè)

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

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

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

第10頁(yè)/共24頁(yè)

模塊三功能編碼

任務(wù)五在移動(dòng)端，實(shí)現(xiàn)個(gè)人中心的訂單詳情功能

任務(wù)描述：在移動(dòng)商城端個(gè)人中心，進(jìn)入訂單列表頁(yè)如圖3-1所示，

點(diǎn)擊立即查看按鈕可進(jìn)入訂單詳情頁(yè)如圖3-2所示。

圖3-1訂單列表

第11頁(yè)/共24頁(yè)

圖3-2訂單詳情

要求：

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

的訂單的信息，如已發(fā)貨為“服務(wù)商已發(fā)貨”。

提交作品：保存完成的頁(yè)面。

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

其他：【API接口參考】

接口名稱訂單詳情API

API地址00:8008/api/order/detail/{key}

第12頁(yè)/共24頁(yè)

詳見(jiàn)U盤\02競(jìng)賽平臺(tái)手冊(cè)\中慧Web技術(shù)API穩(wěn)定性測(cè)試報(bào)告

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

任務(wù)描述：設(shè)計(jì)PC商城端錢包充值頁(yè)面，進(jìn)入個(gè)人中心下的錢包充值

頁(yè)面，顯示充值方案，如圖3-3所示，點(diǎn)擊充值可根據(jù)相應(yīng)的充值方案進(jìn)

行充值。

圖3-3我的錢包充值頁(yè)面

要求：

1．設(shè)計(jì)PC商城端錢包充值頁(yè)面，如圖3-3所示。

2．顯示充值方案列表。

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

提交作品：保存完成的頁(yè)面。

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

其他：【API接口參考】

接口名稱API

第13頁(yè)/共24頁(yè)

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

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

詳見(jiàn)U盤\02競(jìng)賽平臺(tái)手冊(cè)\中慧Web技術(shù)API穩(wěn)定性測(cè)試報(bào)告

任務(wù)七在移動(dòng)商城端實(shí)現(xiàn)商品列表功能

任務(wù)描述：在移動(dòng)商城端，點(diǎn)擊首頁(yè)菜單欄中的全部商品則可進(jìn)入商

品列表顯示普通商品，且可以根據(jù)綜合（后臺(tái)默認(rèn)排序）、價(jià)格（根據(jù)價(jià)格

排序）、新品，三種情況進(jìn)行排序，進(jìn)入頁(yè)面默認(rèn)為綜合排序，普通商品如

圖3-4所示，當(dāng)列表商品超過(guò)10個(gè)時(shí)，只加載十個(gè)并在最底部顯示“點(diǎn)

擊加載更多”選項(xiàng)，如圖3-5所示，并且每次點(diǎn)擊增加十條數(shù)據(jù)，當(dāng)點(diǎn)擊

排序，且列表商品超過(guò)10個(gè)時(shí)，只加載十個(gè)并在最底部顯示“點(diǎn)擊加載

更多”選項(xiàng)。

第14頁(yè)/共24頁(yè)

圖3-4全部商品

第15頁(yè)/共24頁(yè)

圖3-5點(diǎn)擊加載更多

要求：

1.點(diǎn)擊首頁(yè)菜單欄中的全部商品則可進(jìn)入商品列表顯示普通商品。

2.可以根據(jù)綜合（后臺(tái)默認(rèn)排序）、價(jià)格（根據(jù)價(jià)格排序）、新品，

三種情況進(jìn)行排序，進(jìn)入頁(yè)面默認(rèn)為綜合排序。

3.當(dāng)為任意類型排序時(shí)，且列表商品超過(guò)10個(gè)時(shí)，只加載十個(gè)并

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

提交作品：保存完成的頁(yè)面。

第16頁(yè)/共24頁(yè)

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

注：需自行完成接口部分

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

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

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

商品簡(jiǎn)介，點(diǎn)擊價(jià)格可根據(jù)價(jià)格進(jìn)行排序，默認(rèn)每頁(yè)顯示12個(gè)商品，左上

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

圖3-6搜索商品信息

要求：

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

商品名稱、商品市場(chǎng)價(jià)與商品價(jià)格，商品簡(jiǎn)介。

2．點(diǎn)擊價(jià)格可根據(jù)價(jià)格進(jìn)行排序。

第17頁(yè)/共24頁(yè)

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

稱。

提交作品：保存完成的頁(yè)面。

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

其他：【API接口參考】

接口名稱API

搜索商品API00:8086/api/products

詳見(jiàn)U盤\02競(jìng)賽平臺(tái)手冊(cè)\中慧Web技術(shù)API穩(wěn)定性測(cè)試報(bào)告

任務(wù)九在移動(dòng)端個(gè)人中心實(shí)現(xiàn)地址管理功能

任務(wù)描述：在APP端個(gè)人中心點(diǎn)擊地址管理可進(jìn)入地址管理頁(yè)面，實(shí)

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

址。

第18頁(yè)/共24頁(yè)

圖3-7地址列表

圖3-8編輯、新增地址

要求：

1.個(gè)人中心點(diǎn)擊地址管理，進(jìn)入地址列表頁(yè)如圖3-7所示，顯示名字、

電話、地址、是否默認(rèn)，如不是默認(rèn)則不顯示標(biāo)簽。

2.在地址列表頁(yè)點(diǎn)擊新增聯(lián)系人可進(jìn)入新增聯(lián)系人頁(yè)、聯(lián)系人、手機(jī)

號(hào)、選擇地址、詳細(xì)地址項(xiàng)為必填、收貨郵政編碼與設(shè)為默認(rèn)為選填，需

要相應(yīng)的校驗(yàn)。

3.在地址列表頁(yè)點(diǎn)擊編輯圖標(biāo)可進(jìn)入編輯頁(yè)面，可刪除或修改聯(lián)系人

詳細(xì)，聯(lián)系人、手機(jī)號(hào)、選擇地址、詳細(xì)地址項(xiàng)為必填、收貨郵政編碼與

設(shè)為默認(rèn)為選填，需要相應(yīng)的校驗(yàn)。

4.點(diǎn)擊列表聯(lián)系人前面的圖標(biāo)可修改默認(rèn)聯(lián)系人。

第19頁(yè)/共24頁(yè)

提交作品：保存完成的頁(yè)面。

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

接口名稱API

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

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

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

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

詳見(jiàn)U盤\02競(jìng)賽平臺(tái)手冊(cè)\中慧Web技術(shù)API穩(wěn)定性測(cè)試報(bào)告

任務(wù)十在PC端商城實(shí)現(xiàn)首頁(yè)輪播圖功能

任務(wù)描述：在PC端商城首頁(yè)實(shí)現(xiàn)首頁(yè)輪播圖如圖3-12所示。

圖3-9首頁(yè)輪播圖信息

要求：在首頁(yè)商品分類右側(cè)實(shí)現(xiàn)首頁(yè)輪播圖，多個(gè)圖片可進(jìn)行左右切

換，如3-9所示

提交作品：保存完成的頁(yè)面。

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

第20頁(yè)/共24頁(yè)

注：需自行完成接口部分

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

任務(wù)描述：在PC商城中增加商品評(píng)論功能。在待評(píng)價(jià)的訂單上對(duì)每個(gè)

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

商品詳情中可以看到評(píng)價(jià)信息。

圖3-10待評(píng)價(jià)訂單列表頁(yè)面

第21頁(yè)/共24頁(yè)

圖3-11商品評(píng)價(jià)頁(yè)面

第22頁(yè)/共24頁(yè)

圖3-1