1、Web 前端開發高級_A1.（本題 分數為：20.00）閱讀下列說明、效果圖，打開“考生文件夾20001game”文件夾中的素材，閱讀HTML代碼，進行靜態網頁開發，在空（1）至（10）處填寫正確代碼，操作完成后保存素材。【說明】圖2是某首頁頁面局部效果。現在需要編寫該效果圖部分代碼。項目名稱為game，包含首頁index.html、css文件夾、images文件夾，其中css文件夾包含style.css文件，images文件夾包含內容如圖1所示。鼠標懸停到導航文字上，導航文字會出現背景，效果如圖2所示。全部頁面效果如圖3所示。1【效果圖】【問題】（20分，每空2分）進行靜態網頁開發：1、打開

2、“考生文件夾20001game”文件夾中的文件“index.html”，在空（1）至（3）處填入正確的內容，完成后保存文件“index.html”。2、打開“考生文件夾20001gamecss”文件夾中的文件“style.css”，在空（4）至（10）處填入正確的內容，完成后保存文件“style.css”。注意：除刪除（1）至（10）填入正確的內容外，不能修改或刪除其它任何內容。2.（本題 分數為：30.00）閱讀下列說明、效果圖，打開“考生文件夾20002quiz”文件夾中的素材，進行Laravel框架開發，在空（1）至（15）處填寫正確代碼，操作完成后保存素材。【說明】編寫一個答題系統，試

3、題共4道數學題，每題3個選項，都為單選題。每道25分，共100分。每做完一題，單擊“下一題”按鈕，提交當前題目，并顯示下一題內容，如圖1所示。在最后一題，按鈕顯示為“提交”。單擊“提交”按鈕，顯示答對題數和得分情況，總分100分，如圖2所示。2文件設計如下表所示。【安裝Laravel工程quiz】:參閱“考生文件夾20002”文件夾中的“readme.txt”文件部署quiz工程，目錄如圖3所示，請打開“考生文件夾20002”文件夾中的文件“問題1.txt”，根據目錄中的內容回答問題，完成后保存文件“問題1.txt”。3【配置路由】：請根據路由的配置信息，打開“考生文件夾20002”文件夾中的

4、文件“問題2.txt”，分析后回答問題，完成后保存文件“問題2.txt”。編寫quiz/routes/web.。1、進入答題系統路由；2、提交當前題，進入下一題；3、提交最后一題，并顯示答題結果。【修改控制類QuizControllhp】：打開“考生文件夾20002quizappHttpControllers”文件夾中的文件“QuizControllhp”，閱讀代碼，填寫（4）至（10），完成后保存文件“QuizControllhp”。編寫quiz/app/Http/Controllers/QuizControllhp文件。1、定義類變量$questions保存試題數據；2、定義保存到Ses中

5、的屬性名常量；3、創建getQuestion()函數，參數為題號，試題內容；4、編寫start()函數，題目內容，并傳給模板頁面；5、編寫next()函數，獲取下一道題的題目內容；6、編寫submit()函數，從Ses中取出用戶的數組，計算數組元素個數，計算得分；7、返回到result.blade.模板頁面，將答對的題數和得分傳入。注意：除刪除（4）至（10）填入正確的內容外，不能修改或刪除其它任何內容。4【編寫模板文件quiz.blade.】回答問題和填寫代碼（11）至（13）。編寫quiz/resour/views/quiz.blade.文件，顯示答題頁面。導入CSS文件時，使用內置URL

6、類的方法來引入css 文件，默認在Web根目錄的css文件夾內，也就是public/css目錄。1、打開“考生文件夾20002”文件夾中的文件“問題3.txt”，回答問題填寫正確，完成后保存文件“問題3.txt”。2、打開“考生文件夾20002quizresourviews”文件夾中的文件“quiz.blade.”，填寫代碼（12）至（13），完成后保存文件“quiz.blade.”。注意：除刪除（12）至（13）填入正確的內容外，不能修改或刪除其它任何內容。【編寫模板文件result.blade.】：回答問題和填寫代碼（14）至（15）。編寫quiz/resour/views/result.

7、blade.文件，顯示答題結果頁面，包括答對的題數和最終得分。1、打開“考生文件夾20002”文件夾中的文件“問題4.txt”，回答問題填寫正確，完成后保存文件“問題4.txt”。2、打開“考生文件夾20002quizresourviews”文件夾中的文件“result.blade.”，填寫代碼（15），完成后保存文件“result.blade.”。注意：除刪除（15）填入正確的內容外，不能修改或刪除其它任何內容。【問題】（30分，每空2分）進行 Laravel 項目開發，在空（1）至（15）處填入正確的內容。3.（本題 分數為：30.00）閱讀下列說明、效果圖，打開“考生文件夾20003sh

8、opCard”文件夾中的素材，閱讀代碼進行前端頁面開發，在空（1）至（15）處填寫正確代碼，操作完成后保存素材。【說明】使用Vue.js在頁面中實現了一個簡單的購物車效果，可以增加和減少數量，可以刪除某個產品，還可以統計購物車商品的總價格。項目名稱為shopCard，包含頁面shopCard.html、js文件夾，其中js文件夾包含vue.js文件。頁面效果如圖1所示。5【效果圖】【問題】（30分，每空2分）打開“考生文件夾20003shopCard”文件夾中的文件“shopCard.html”，根據注釋，補全代碼，在空（1）至（15）處填入正確的內容，完成后保存文件“shopCard.htm

9、l”。注意：除刪除（1）至（15）填入正確的內容外，不能修改或刪除其它任何內容。4.（本題 分數為：20.00）閱讀下列說明、效果圖，打開“考生文件夾20004course”文件夾中的素材，閱讀代碼進行前端網頁開發，在空（1）至（10）處填寫正確代碼，操作完成后保存素材。【說明】某課程的課程列表頁效果如圖1所示，當點擊某課程后，會跳轉到課程詳情頁，效果如圖2所示。要求使用vue-cli完成列表頁和詳情頁。項目名稱為course，該項目的文件夾下包括ponents文件夾、assets文件夾、route 文件夾、文件、文件。ponents 文件夾內包括index.vue、detail.vue、layout.vue組件。【效果圖】6【問題】（20分，每空2分）根據注釋，補全代碼：1、打開“考生文件夾20004coursesrcrouter”文件夾中的文件“index.js”，在空（1）至（4）處填入正確的內容，完成后保存文件“index.js”。2、打開“考生文件夾20004coursesrc”文件夾中的文件“app.vue”，在空（5）處填入正確