2022年全省職業(yè)院校技能大賽中職學(xué)生組web前端開(kāi)發(fā)賽項(xiàng)競(jìng)賽試題(A)

2022年全省職業(yè)院校技能大賽中職學(xué)生組Web前端開(kāi)發(fā)賽項(xiàng)競(jìng)賽試題（樣卷）第18頁(yè)共18頁(yè)2022年全省職業(yè)院校技能大賽中職學(xué)生組Web前端開(kāi)發(fā)賽項(xiàng)競(jìng)賽試題A賽題說(shuō)明一、競(jìng)賽內(nèi)容本試卷適用于Window10平臺(tái)，試題包含4個(gè)模塊，A模塊為網(wǎng)頁(yè)UI設(shè)計(jì)模塊，B模塊為網(wǎng)頁(yè)重構(gòu)模塊，C模塊網(wǎng)頁(yè)交互模塊，D模塊為數(shù)據(jù)庫(kù)操作模塊，團(tuán)隊(duì)成員分工并行，最終實(shí)現(xiàn)各個(gè)任務(wù)，試卷滿分100分，四個(gè)模塊分別所占比重為：A模塊15%，B模塊40%，C模塊25%，D模塊20%二、競(jìng)賽時(shí)間競(jìng)賽時(shí)間：共計(jì)240分鐘。三、競(jìng)賽事項(xiàng)要求參賽選手不得攜帶通信設(shè)備、存儲(chǔ)設(shè)備等物品進(jìn)入賽場(chǎng)，違反者按作弊處理。請(qǐng)根據(jù)大賽所提供的比賽環(huán)境，檢查所列的硬件設(shè)備、軟件清單、材料清單是否齊全，計(jì)算機(jī)設(shè)備是否能正常使用。競(jìng)賽結(jié)束前，將各任務(wù)代碼整合，統(tǒng)一拷貝到1號(hào)計(jì)算機(jī)的桌面（PC1），并提交一個(gè)完整的項(xiàng)目工程目錄到大賽組委會(huì)提供的U盤中，目錄格式如圖所示。競(jìng)賽結(jié)束時(shí)，請(qǐng)將U盤、試卷和答題紙統(tǒng)一提交。禁止將比賽所用的所有物品（包括試卷和稿紙）帶離賽場(chǎng)。裁判以各參賽隊(duì)部署到PC1計(jì)算機(jī)上運(yùn)行結(jié)果為評(píng)分依據(jù)。嚴(yán)禁在程序及運(yùn)行結(jié)果中任何位置標(biāo)注競(jìng)賽隊(duì)的任何信息，否則按照作弊處理。PC1：或者localhost

模塊A：WebUI設(shè)計(jì)根據(jù)任務(wù)要求完成UI效果圖設(shè)計(jì)（15分）【任務(wù)要求】根據(jù)目錄查看A模塊下素材文件夾中Images目錄中提供的圖片素材，通過(guò)Photoshopcc2018軟件設(shè)計(jì)一張“某某酒店”首頁(yè)面。首頁(yè)面需要包含以下元素：“某某酒店“l(fā)ogo,導(dǎo)航欄，導(dǎo)航欄目需設(shè)置以下幾項(xiàng)：關(guān)于我們，酒店房間，酒店餐飲，酒店分布，公司新聞，聯(lián)系我們一張banner圖片（素材已提供）通過(guò)圖片列表逐一展示“商務(wù)住宿”、“貴賓套房”、“酒吧餐飲”、“會(huì)議房間”、“休閑娛樂(lè)”、“酒店分布”。酒店概況介紹：“我們商務(wù)酒店，創(chuàng)立于2006年，定位于豪華商務(wù)連鎖酒店。以打造“城央、商務(wù)、雅致”的精品商務(wù)連鎖酒店為產(chǎn)品理念；駐足于重要商旅城市中心，專注于賓客需求與體驗(yàn)；傾力打造以品質(zhì)、高雅、時(shí)尚、智能為主題，以快捷準(zhǔn)確、尊貴禮遇的對(duì)客服務(wù)的特點(diǎn)以塑造精品商務(wù)型酒店的典范；為中產(chǎn)白領(lǐng)人士提供優(yōu)質(zhì)的酒店住宿服務(wù)，打造精品商務(wù)連鎖酒店品牌?！本频晏厣和怀觥暗乩砦恢脙?yōu)越”，“室內(nèi)豪華裝修”，“高級(jí)安全系數(shù)”，“住宿環(huán)境良好”。酒店房間掠影：通過(guò)素材庫(kù)中的圖片，展示酒店房間。網(wǎng)頁(yè)腳步提供分享至QQ、微信、微博的鏈接圖標(biāo)【任務(wù)提示】將設(shè)計(jì)好的UI設(shè)計(jì)圖，同時(shí)保存為.psd和.jpg兩種不同格式，存放于A模塊/設(shè)計(jì)效果圖目錄即可。

模塊B：網(wǎng)頁(yè)重構(gòu)根據(jù)給定網(wǎng)頁(yè)效果圖和重構(gòu)代碼文件包中的素材，通過(guò)HTML5+CSS3完成靜態(tài)頁(yè)面重構(gòu)（40分）【任務(wù)提示】推薦使用Photoshop軟件打開(kāi)給定效果圖，通過(guò)Phosotshop提供的工具，完成顏色取值、間距測(cè)量等，盡可能在CSS樣式編寫中與效果圖保持一致。B模塊/重構(gòu)代碼/images目錄中已給定了可能用到的圖片素材（不一定全部使用），請(qǐng)根據(jù)效果圖選擇使用即可；【任務(wù)要求】目錄中已存在頁(yè)面文件index.html，參賽選手編寫代碼，實(shí)現(xiàn)網(wǎng)頁(yè)重構(gòu)；空白CSS樣式文件已建立，如圖所示，所有的外觀樣式均需寫在style.css文件中，通過(guò)外鏈?zhǔn)綄⒃揷ss文件鏈入到index.html中。

模塊C：網(wǎng)頁(yè)交互根據(jù)任務(wù)要求，完成輪播圖網(wǎng)頁(yè)交互效果【任務(wù)提示】C模塊路徑如圖，C模塊根目錄index.html中，提供了靜態(tài)輪播圖代碼，提供了jQuery3.6版本的文件，放置于C模塊/js目錄中，命名為jQuery.js;index.html中已經(jīng)有靜態(tài)頁(yè)面代碼，代碼中包括了輪播圖的基本結(jié)構(gòu)和css樣式，打開(kāi)后默認(rèn)顯示最后一張圖片（slide04.jpg）?！救蝿?wù)要求】通過(guò)給已有標(biāo)簽添加id或者class類名，實(shí)現(xiàn)DOM操作；鼠標(biāo)點(diǎn)擊輪播圖中的左右方向箭頭，實(shí)現(xiàn)對(duì)應(yīng)圖片切換效果，同時(shí)對(duì)應(yīng)的小圓點(diǎn)跟著變化；設(shè)置定時(shí)器，在不點(diǎn)擊小圓點(diǎn)的情況下，圖片可以實(shí)現(xiàn)每間隔2秒，自動(dòng)切換，并且小圓點(diǎn)跟著圖片及時(shí)變化。模塊D：數(shù)據(jù)庫(kù)操作根據(jù)項(xiàng)目提示和要求，按照已給頁(yè)面代碼中的注釋提示，補(bǔ)全所有代碼，實(shí)現(xiàn)數(shù)據(jù)的查詢，刪除，修改。（20分）【任務(wù)提示】如圖，根據(jù)模塊D目錄，lst.php為數(shù)據(jù)展示頁(yè)面，add.html為添加數(shù)據(jù)的表單頁(yè)面，add.php為添加數(shù)據(jù)時(shí)的數(shù)據(jù)處理頁(yè)面，del.php為刪除數(shù)據(jù)時(shí)的數(shù)據(jù)處理頁(yè)面，sql.php為數(shù)據(jù)庫(kù)鏈接頁(yè)面，5個(gè)頁(yè)面中均有不同數(shù)量的代碼和注釋。重要提示：考試目錄有中文，PHP文件不能正常顯示，為了保證答題正常，需要將D模塊中的5個(gè)頁(yè)面全部拷貝至PHPStudy的站點(diǎn)根目錄下，也就是D:\phpstudy_pro\WWW，這樣才可以正常作答。模塊D答題結(jié)束后，把文件全部拷貝至考試目錄D模塊下即可。數(shù)據(jù)庫(kù)主機(jī)名為localhost，通過(guò)瀏覽器地址訪問(wèn)localhost/lst.php，可以看到學(xué)生數(shù)據(jù)展示頁(yè)面。如圖所示，參賽選手電腦已經(jīng)安裝MySQL數(shù)據(jù)庫(kù)，并且創(chuàng)建了名為user的數(shù)據(jù)庫(kù)，這個(gè)數(shù)據(jù)庫(kù)中，存在一張數(shù)據(jù)表，表名也是user，該數(shù)據(jù)表有四個(gè)字段，分別是id,name,age,gender，該表中有2條已存在的數(shù)據(jù)，分別是小明的數(shù)據(jù)和小紅的數(shù)據(jù)。在已給.php結(jié)尾的文件中，只要看到“補(bǔ)全代碼”四個(gè)字，就需要在當(dāng)前位置取消注釋，并補(bǔ)全符合邏輯的正確代碼?！救蝿?wù)要求】請(qǐng)參賽選手打開(kāi)sql.php文件，,根據(jù)注釋，補(bǔ)全代碼，實(shí)現(xiàn)數(shù)據(jù)庫(kù)鏈接正確；請(qǐng)參賽選手打開(kāi)lst.php文件，根據(jù)注釋，補(bǔ)全代碼，實(shí)現(xiàn)查詢數(shù)據(jù)庫(kù)成功，并把存在的兩條數(shù)據(jù)顯示在頁(yè)面中，可通過(guò)瀏覽器查看數(shù)據(jù)是否顯示成功；點(diǎn)擊lst.php操作一列下的刪除按鈕，使得頁(yè)面跳轉(zhuǎn)到del.php，在del.php中，需要再次導(dǎo)入數(shù)據(jù)庫(kù)鏈接文件sql.php，并繼續(xù)根據(jù)注釋提示，完成代碼補(bǔ)全，實(shí)現(xiàn)數(shù)據(jù)刪除操作成功；點(diǎn)擊lst.php頁(yè)面中的添加數(shù)據(jù)按鈕（藍(lán)色按鈕），頁(yè)面會(huì)跳轉(zhuǎn)到add.html表單頁(yè)面，填入需要添加的數(shù)據(jù)，點(diǎn)擊提交，使得頁(yè)面跳轉(zhuǎn)至add.php，并保證提交方式為“POST”方式；一旦頁(yè)面跳轉(zhuǎn)至add.php，就需要做數(shù)據(jù)的處理，在add.php中，首先也需要導(dǎo)入sql.php文件；在add.php文件中，需要判斷add.html提交表單的方式是GET方式還是POST方式，如