河北省高職Web技術(shù)職業(yè)技能大賽競(jìng)賽試題（樣卷）

賽題說(shuō)明一、競(jìng)賽內(nèi)容本試卷適用于Window7/10平臺(tái)，共一套綜合題，其中包含系統(tǒng)設(shè)計(jì)、程序排錯(cuò)和功能編碼3個(gè)模塊，共11項(xiàng)任務(wù)，試卷滿分100分。任務(wù)模塊一模塊二模塊三總分1234567891011分值1055101010810101012100二、競(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)賽所提供的服務(wù)器設(shè)備上，并提交一個(gè)完整的項(xiàng)目工程代碼到大賽組委會(huì)提供的U盤中，目錄格式如圖1所示。圖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ì)的任何信息，否則按照作弊處理。部署后訪問地址為：PC端管理：http://localhost:8086Mobile端商城：http://localhost:8085后臺(tái)管理用戶用戶名：admin密碼：123456四、系統(tǒng)拓?fù)鋱D圖2競(jìng)賽環(huán)境拓?fù)鋱D1.服務(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)行瀏覽訪問：PC端管理：00:8086Mobile端商城：http://00:80854.服務(wù)器上已經(jīng)安裝GitStack：00/gitstackadmin/admin5.服務(wù)器上已經(jīng)安裝Element-UI:00:8080/element-ui6.服務(wù)器上已經(jīng)安裝VantUI:00:8080/vant-ui7.SvnServer服務(wù)（已經(jīng)安裝）服務(wù)器已經(jīng)安裝SvnServer服務(wù)，請(qǐng)點(diǎn)擊服務(wù)器桌面上SvnServer快捷方式圖標(biāo)配置SVN路徑和用戶。Web技術(shù)職業(yè)技能大賽，主要面向Java開發(fā)工程師、軟件技術(shù)支持工程師等核心崗位。通過(guò)競(jìng)賽，考察參賽選手實(shí)際軟件工程文檔編寫能力、工程項(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)高職軟件技術(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ù)職業(yè)技能大賽試卷目錄中的《系統(tǒng)設(shè)計(jì)說(shuō)明書（模板）》，完成指定模塊的系統(tǒng)概要/詳細(xì)設(shè)計(jì)說(shuō)明書的編寫。第二模塊為程序排錯(cuò)，根據(jù)題目中所描述的錯(cuò)誤信息，基于給定的工程代碼定位故障位置，并修改正確。第三模塊為功能編碼，根據(jù)題目中所描述的需求，并參閱U盤中的輔助文檔，自行設(shè)計(jì)，編碼實(shí)現(xiàn)。

2022年度河北省職業(yè)院校技能競(jìng)賽高職Web技術(shù)職業(yè)技能大賽競(jìng)賽任務(wù)（樣題）模塊一系統(tǒng)設(shè)計(jì)任務(wù)一完成管理端商品分類模塊設(shè)計(jì)說(shuō)明書文檔的編寫任務(wù)描述：分析管理端商品分類管理模塊的功能，根據(jù)任務(wù)十的功能需求，參照U盤中“Web技術(shù)職業(yè)技能大賽試卷”目錄中的“系統(tǒng)設(shè)計(jì)說(shuō)明書（模板）”文檔格式，完成管理端商品分類管理模塊設(shè)計(jì)說(shuō)明書文檔的編寫。要求：文檔要符合軟件規(guī)范要求。提交作品：需要提交管理端商品分類管理模塊設(shè)計(jì)說(shuō)明書。分值：本任務(wù)共10分。模塊二程序排錯(cuò)任務(wù)二在移動(dòng)商城端將商城首頁(yè)四個(gè)菜單標(biāo)簽一字排開顯示且無(wú)邊框任務(wù)描述：進(jìn)入移動(dòng)商城端的商城頁(yè)面，商城頁(yè)面顯示如圖2-1所示。目前上方四個(gè)宮格為四宮格排列且?guī)в羞吙?，正常情況應(yīng)為四個(gè)宮格一字排開且無(wú)邊框如圖2-1右圖所示，請(qǐng)查明原因并修改。圖2-1APP商城頁(yè)面要求：修改完代碼之后，應(yīng)為四個(gè)宮格一字排開且無(wú)邊框。提交作品：保存修改之后的頁(yè)面。分值：本任務(wù)共5分。任務(wù)三在移動(dòng)商城端，點(diǎn)擊首頁(yè)菜單欄中的積分商品，點(diǎn)擊積分商品進(jìn)入積分商品詳情頁(yè)，顯示積分商品詳情。任務(wù)描述：在移動(dòng)商城端，用戶登錄成功之后，點(diǎn)擊首頁(yè)菜單欄中的積分商品，點(diǎn)擊積分商品進(jìn)入積分商品詳情頁(yè)，顯示普通商品詳情，應(yīng)顯示積分商品詳情如圖2-2所示，請(qǐng)查明原因并修改。PC主頁(yè)面如圖2-2所示。圖2-2普通商品詳情頁(yè)（左）積分商品詳情頁(yè)（右）要求：顯示積分商品詳情。提交作品：保存修改之后的頁(yè)面。分值：本任務(wù)共5分。任務(wù)四商品規(guī)格列表中的規(guī)格值顯示不正確任務(wù)描述：在管理端，在商品管理后臺(tái)的商品規(guī)格頁(yè)，列表中的規(guī)格值顯示不正常如圖2-3所示，正常為圖2-4所示。請(qǐng)查明原因并修改。圖2-3當(dāng)前商品規(guī)格列表圖2-4正常的商品規(guī)格列表要求：在商品規(guī)格列表頁(yè)的規(guī)格值顯示正常。提交作品：保存修改之后的頁(yè)面。分值：本任務(wù)共10分。

模塊三功能編碼任務(wù)五在移動(dòng)商城端實(shí)現(xiàn)商品列表功能任務(wù)描述：在移動(dòng)商城端，點(diǎn)擊首頁(yè)菜單欄中的全部商品則可進(jìn)入商品列表顯示普通商品，如果點(diǎn)擊積分商品則商品列表全部顯示積分商品，且可以根據(jù)綜合（后臺(tái)默認(rèn)排序）、價(jià)格（根據(jù)價(jià)格排序）、新品，三種情況進(jìn)行排序，進(jìn)入頁(yè)面默認(rèn)為綜合排序，普通商品如圖3-1所示，積分商品如圖3-2所示，當(dāng)列表商品超過(guò)10個(gè)時(shí)，只加載十個(gè)并在最底部顯示“點(diǎn)擊加載更多”選項(xiàng)，如圖3-3所示，并且每次點(diǎn)擊增加十條數(shù)據(jù)，當(dāng)點(diǎn)擊排序，且列表商品超過(guò)10個(gè)時(shí)，只加載十個(gè)并在最底部顯示“點(diǎn)擊加載更多”選項(xiàng)。圖3-1全部商品圖3-2積分商品圖3-3點(diǎn)擊加載更多要求：點(diǎn)擊首頁(yè)菜單欄中的全部商品則可進(jìn)入商品列表顯示普通商品，如果點(diǎn)擊積分商品則商品列表全部顯示積分商品。可以根據(jù)綜合（后臺(tái)默認(rèn)排序）、價(jià)格（根據(jù)價(jià)格排序）、新品，三種情況進(jìn)行排序，進(jìn)入頁(yè)面默認(rèn)為綜合排序。當(dāng)為任意類型排序時(shí)，且列表商品超過(guò)10個(gè)時(shí)，只加載十個(gè)并在最底部顯示“點(diǎn)擊加載更多”選項(xiàng)，并且每次點(diǎn)擊增加十條數(shù)據(jù)。提交作品：保存完成的頁(yè)面。分值：本任務(wù)共10分。其他：API名稱：商品列表API接口名稱商品列表APIAPI地址http://localhost:8008/api/products詳見U盤\02競(jìng)賽平臺(tái)手冊(cè)\中慧Web前端開發(fā)平臺(tái)API穩(wěn)定性測(cè)試報(bào)告任務(wù)六在移動(dòng)商城端，實(shí)現(xiàn)個(gè)人中心的訂單功能任務(wù)描述：在移動(dòng)商城端，實(shí)現(xiàn)個(gè)人中心的訂單功能，共有五種狀態(tài)，點(diǎn)擊相應(yīng)的狀態(tài)可進(jìn)入對(duì)應(yīng)狀態(tài)的頁(yè)面，如圖3-4所示。在訂單頁(yè)，點(diǎn)擊相應(yīng)的狀態(tài)可進(jìn)入對(duì)應(yīng)狀態(tài)的頁(yè)面查看訂單列表，如圖3-5所示。圖3-4個(gè)人中心訂單圖3-5用戶訂單頁(yè)要求：實(shí)現(xiàn)個(gè)人中心的訂單功能，共有五種狀態(tài)，擊相應(yīng)的狀態(tài)可進(jìn)入對(duì)應(yīng)狀態(tài)的頁(yè)面。在訂單頁(yè)，點(diǎn)擊相應(yīng)的狀態(tài)可進(jìn)入對(duì)應(yīng)狀態(tài)的頁(yè)面查看訂單列表。提交作品：保存完成的頁(yè)面。分值：本任務(wù)共10分。任務(wù)七在移動(dòng)商城端實(shí)現(xiàn)用戶錢包余額查詢和充值功能任務(wù)描述：在移動(dòng)商城端，單擊【個(gè)人中心】標(biāo)簽，進(jìn)入我的個(gè)人中心頁(yè)面，如圖3-6所示，在我的個(gè)人中心頁(yè)面單擊【我的錢包】打開我的錢包充值頁(yè)面，如圖3-7所示，在我的錢包充值頁(yè)面顯示當(dāng)前用戶的當(dāng)前總資產(chǎn)、累計(jì)充值、累計(jì)消費(fèi)以及充值方案，點(diǎn)擊充值可根據(jù)相應(yīng)的充值方案進(jìn)行充值。圖3-6我的個(gè)人中心頁(yè)面圖3-7我的錢包充值頁(yè)面要求：1.在我的錢包充值頁(yè)面顯示當(dāng)前用戶的當(dāng)前總資產(chǎn)、累計(jì)充值、累計(jì)消費(fèi)以及充值方案，如圖3-7所示。2.點(diǎn)擊充值可根據(jù)相應(yīng)的充值方案進(jìn)行充值。提交作品：保存完成的頁(yè)面。分值：本任務(wù)共8分。其他：【API接口參考】接口名稱API充值方案APIhttp://localhost:8008/api/recharge/index查詢賬戶APIhttp://localhost:8008/api/user/balance模擬充值A(chǔ)PIhttp://localhost:8008/api/recharge/test詳見U盤\02競(jìng)賽平臺(tái)手冊(cè)\中慧Web前端開發(fā)平臺(tái)API穩(wěn)定性測(cè)試報(bào)告任務(wù)八移動(dòng)商城端實(shí)現(xiàn)我的足跡功能任務(wù)描述：設(shè)計(jì)系統(tǒng)移動(dòng)商城端我的足跡頁(yè)面，且根據(jù)最新時(shí)間排序，移動(dòng)商城端我的足跡頁(yè)面如圖3-8所示，點(diǎn)擊管理，“管理”字樣變成“取消”，商品左上角出現(xiàn)復(fù)選框，可選擇一個(gè)或多個(gè)商品，在界面下方顯示全選選項(xiàng)和刪除按鈕該ui為吸附狀態(tài)，不會(huì)隨內(nèi)容的變多而改變布局位置，點(diǎn)擊刪除可刪除選中的足跡商品，點(diǎn)擊全選可選中所有的足跡商品，點(diǎn)擊商品可跳轉(zhuǎn)至該商品詳情頁(yè)面如圖3-9所示，且在瀏覽商品時(shí)會(huì)產(chǎn)生足跡且不會(huì)重復(fù)產(chǎn)生。我的足跡頁(yè)面商品詳情顯示要求：1．設(shè)計(jì)移動(dòng)商城端我的足跡頁(yè)面，默認(rèn)按照最新時(shí)間來(lái)排序，如圖3-8所示。2．點(diǎn)擊管理，“管理”字樣變成“取消”，商品左上角出現(xiàn)復(fù)選框，可選擇一個(gè)或多個(gè)商品，在界面下方顯示全選選項(xiàng)和刪除按鈕該ui為吸附狀態(tài)，不會(huì)隨內(nèi)容的變多而改變布局位置。3．點(diǎn)擊刪除可刪除選中的足跡商品，點(diǎn)擊全選可選中所有的足跡商品，點(diǎn)擊商品可跳轉(zhuǎn)至該商品詳情頁(yè)面。4.在瀏覽商品時(shí)會(huì)產(chǎn)生足跡且不會(huì)重復(fù)產(chǎn)生，如果為重復(fù)的只會(huì)更新該條足跡的時(shí)間產(chǎn)生時(shí)間。提交作品：保存完成的頁(yè)面。分值：本任務(wù)共10分。任務(wù)九在移動(dòng)商城端實(shí)現(xiàn)商品分類任務(wù)描述：在移動(dòng)商城端點(diǎn)擊分類標(biāo)簽可進(jìn)入商品分類頁(yè)，顯示所有分類，左側(cè)為一級(jí)分類，右側(cè)為該分類下的分類，由圖片與名稱組成如圖3-10所示。點(diǎn)擊右側(cè)帶圖的分類可跳轉(zhuǎn)至商品列表且顯示當(dāng)前分類的商品如3-11所示。圖3-10移動(dòng)商城端商品分類頁(yè) 圖3-11移動(dòng)商城端分類商品列表頁(yè)要求：1.顯示所有分類，左側(cè)為一級(jí)分類，右側(cè)為該分類下的分類，由圖片與名稱組成如圖3-10所示。2.點(diǎn)擊右側(cè)帶圖的分類可跳轉(zhuǎn)至商品列表且顯示當(dāng)前分類的商品如3-11所示。3.列表商品超過(guò)10個(gè)時(shí)，只加載十個(gè)并在最底部顯示“點(diǎn)擊加載更多”選項(xiàng)，并且每次點(diǎn)擊增加十條數(shù)據(jù)。提交作品：保存完成的頁(yè)面。分值：本任務(wù)共10分。其他：【API接口參考】接口名稱API獲取商品列表apihttp://localhost:8008/api/products查詢商品分類api75:8008/api/category詳見U盤\02競(jìng)賽平臺(tái)手冊(cè)\中慧Web前端開發(fā)平臺(tái)API穩(wěn)定性測(cè)試報(bào)告V2.2任務(wù)十在管理端實(shí)現(xiàn)商品分類管理功能任務(wù)描述：在管理端單擊【商品管理】點(diǎn)擊【商品分類】可查看所有商品分類，如圖3-12所示。圖3-12商品分類頁(yè)面要求：實(shí)現(xiàn)分類列表的查詢功能，以樹形結(jié)構(gòu)的方式展示如圖3-12所示。點(diǎn)