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

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