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

賽題說明一、競賽內(nèi)容本試卷適用于Window7/10平臺，共一套綜合題，其中包含系統(tǒng)設(shè)計、程序排錯和功能編碼3個模塊，共11項任務(wù)，試卷滿分100分。任務(wù)模塊一模塊二模塊三總分1234567891011分值1055101010810101012100二、競賽時間競賽時間：共計240分鐘。三、競賽事項要求1.參賽選手不得攜帶通信設(shè)備等物品進入賽場，違反者按作弊處理。2.請根據(jù)大賽所提供的比賽環(huán)境，檢查所列的硬件設(shè)備、軟件清單、材料清單是否齊全，計算機設(shè)備是否能正常使用。3.競賽結(jié)束前，將各試題代碼整合，部署并運行到競賽所提供的服務(wù)器設(shè)備上，并提交一個完整的項目工程代碼到大賽組委會提供的U盤中，目錄格式如圖1所示。圖1模塊提交目錄格式4.競賽結(jié)束時，請將U盤、試卷和答題紙統(tǒng)一提交。并將設(shè)計說明書文檔拷貝到1號計算機的桌面。所用的所有物品（包括試卷和稿紙）禁止帶離賽場。5.裁判以各參賽隊發(fā)布到服務(wù)器上的項目的運行結(jié)果為評分依據(jù)。嚴禁在程序及運行結(jié)果中任何位置標注競賽隊的任何信息，否則按照作弊處理。部署后訪問地址為：PC端管理：http://localhost:8086Mobile端商城：http://localhost:8085后臺管理用戶用戶名：admin密碼：123456四、系統(tǒng)拓撲圖圖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: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ù)，請點擊服務(wù)器桌面上SvnServer快捷方式圖標配置SVN路徑和用戶。Web技術(shù)職業(yè)技能大賽，主要面向Java開發(fā)工程師、軟件技術(shù)支持工程師等核心崗位。通過競賽，考察參賽選手實際軟件工程文檔編寫能力、工程項目的需求分析理解能力、程序編碼與排錯能力、以及團隊管理和協(xié)作能力，增強學(xué)生專業(yè)技能和職業(yè)素質(zhì)，提升教學(xué)環(huán)境與產(chǎn)業(yè)環(huán)境之間的契合度，讓參賽選手盡可能地適應(yīng)未來工作崗位的需要。推進高職軟件技術(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ù)職業(yè)技能大賽試卷目錄中的《系統(tǒng)設(shè)計說明書（模板）》，完成指定模塊的系統(tǒng)概要/詳細設(shè)計說明書的編寫。第二模塊為程序排錯，根據(jù)題目中所描述的錯誤信息，基于給定的工程代碼定位故障位置，并修改正確。第三模塊為功能編碼，根據(jù)題目中所描述的需求，并參閱U盤中的輔助文檔，自行設(shè)計，編碼實現(xiàn)。

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

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