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

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

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

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

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