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

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

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

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

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