Web前端開發(fā)中級實操考試試題

PAGEPAGE2考生姓名 準(zhǔn)考證號2020年下半年 Web前端開發(fā)中級 實操考試（考試時間14:00-16:30共150分鐘）1.本試卷共4道題，滿分100分。2.請在指定位置或開發(fā)環(huán)境下作答。試題一（16分）閱讀下列說明、效果圖，打開“實操素材/article”文件夾，使用bootstrap4框架進(jìn)行靜態(tài)網(wǎng)頁開發(fā)，在空（1）至（8）處填寫正確代碼，操作完成后保存素材?！菊f明】這是一個bootstrap4實現(xiàn)的靜態(tài)頁面效果，包含首頁，現(xiàn)在我們需要編寫該網(wǎng)站效果圖部分代碼。項目名稱為article，包含首頁index.html、images文件夾，node_modules文件夾，其中node_modules文件夾包含是bootstrap框架文件，images文件夾包含用到的圖片?！拘Ч麍D】首頁效果【問題】（16分，每空2分）打開“實操素材/article”中的文件“article.html”，進(jìn)行靜態(tài)網(wǎng)頁開發(fā)，補(bǔ)全代碼，在（1）至（8）處填入正確的內(nèi)容，完成后保存文件“article.html”。注意：除刪除（1）至（8）填入正確的內(nèi)容外，不能修改或刪除素材中其它任何內(nèi)容。試題二（40分）閱讀下列說明、效果圖，打開“實操素材/liuyanban”文件夾中的素材，閱讀HTML代碼和js代碼，php代碼進(jìn)行動態(tài)網(wǎng)頁開發(fā)，在空（1）至（20）處填寫正確代碼，操作完成后保存素材。【說明】這是使用原生php和HTML混寫實現(xiàn)的留言板效果，使用mysqli連接數(shù)據(jù)庫，前端頁面添加留言，后端把提交內(nèi)容寫入數(shù)據(jù)庫。留言展示頁面，把數(shù)據(jù)從數(shù)據(jù)庫中取出展示到頁面。項目名稱為留言板，包含首頁add.html、add.php、conn.php、list.php、del.php、js文件夾、css文件夾,js文件夾包含common.js文件，css文件夾包含樣式文件。【效果圖】添加留言頁面展示留言頁面【問題】（40分，每空2分）進(jìn)行靜態(tài)網(wǎng)頁開發(fā)，補(bǔ)全代碼：1、打開“實操素材/liuyanban”文件夾中的文件“conn.php”，在空（1）至（4）處填入正確的內(nèi)容，完成后保存文件“conn.php”。2、打開“實操素材/liuyanban”文件夾中的文件“add.html”，在空（5）至（10）處填入正確的內(nèi)容，完成后保存文件“add.html”。3、打開“實操素材/liuyanban”文件夾中的文件“add.php”，在空（11）至（13）處填入正確的內(nèi)容，完成后保存文件“add.php”。4、打開“實操素材/liuyanban”文件夾中的文件“add.php”，在空（14）至（18）處填入正確的內(nèi)容，完成后保存文件“add.php”。4、打開“實操素材/liuyanban”文件夾中的文件“del.php”，在空（19）至（20）處填入正確的內(nèi)容，完成后保存文件“add.php”。注意：除刪除（1）至（20）填入正確的內(nèi)容外，不能修改或刪除素材中其它任何內(nèi)容。試題三（34分）閱讀下列說明、效果圖，打開“實操素材/blog2”中的素材，閱讀代碼進(jìn)行動態(tài)網(wǎng)頁開發(fā)，在空（1）至（17）處填寫正確代碼，操作完成后保存素材。【說明】這是一個使用laravel框架實現(xiàn)的blog系統(tǒng)，實現(xiàn)了后端數(shù)據(jù)庫讀取數(shù)據(jù)展示到頁面，前端登錄ajax驗證。效果如下所示。項目名稱為blog2，包含了laravel框架的目錄結(jié)構(gòu)。具體要求：首先導(dǎo)入DB目錄下邊的blog2.sql文件，編寫路由，實現(xiàn)數(shù)據(jù)展示和ajax驗證兩個功能。【效果圖】首頁效果登錄時ajax驗證用戶不存在登錄時ajax驗證用戶名正確【問題】（34分，每空2分）根據(jù)注釋，補(bǔ)全代碼：1、打開“實操素材/blog2/routes”中的文件“web.php”，在空（1）至（2）處填入正確的內(nèi)容，完成后保存文件“web.php”。2、打開“實操素材/blog2/app/Http/Controllers/web”中的文件“IndexController.php”，在空（3）至（9）處填入正確的內(nèi)容，完成后保存文件“IndexController.php”。3、打開“實操素材/blog2/resources/views/web”中的文件“index.blade.php”，在空（10）至（13）處填入正確的內(nèi)容，完成后保存文件“index.blade.php”。4、打開“實操素材/blog2/resources/views/web”中的文件“l(fā)ogin.blade.php”，在空（14）至（17）處填入正確的內(nèi)容，完成后保存文件“l(fā)ogin.blade.php”。注意：除刪除（1）至（17）填入正確的內(nèi)容外，不能修改或刪除其它任何內(nèi)容。試題四（10分）閱讀下列說明、效果圖，打開“實操素材/magnifier”文件夾中的素材，進(jìn)行動靜態(tài)頁開發(fā)，在空（1）至（10）處填寫正確代碼，操作完成后保存素材。【說明】本題實現(xiàn)了放大鏡功能的案例，效果如圖所示。項目名稱為magnifier，包含前端上傳頁面index.html、js文件夾、css文件夾?！拘Ч麍D】放大鏡效果【問題】（10分，每空1分）1、根據(jù)注釋，