Web前端开发中级实操考试试题

PAGEPAGE2考生姓名 准考证号2020年下半年 Web前端开发中级 实操考试（考试时间14:00-16:30共150分钟）1.本试卷共4道题，满分100分。2.请在指定位置或开发环境下作答。试题一（16分）阅读下列说明、效果图，打开“实操素材/article”文件夹，使用bootstrap4框架进行静态网页开发，在空（1）至（8）处填写正确代码，操作完成后保存素材。【说明】这是一个bootstrap4实现的静态页面效果，包含首页，现在我们需要编写该网站效果图部分代码。项目名称为article，包含首页index.html、images文件夹，node_modules文件夹，其中node_modules文件夹包含是bootstrap框架文件，images文件夹包含用到的图片。【效果图】首页效果【问题】（16分，每空2分）打开“实操素材/article”中的文件“article.html”，进行静态网页开发，补全代码，在（1）至（8）处填入正确的内容，完成后保存文件“article.html”。注意：除删除（1）至（8）填入正确的内容外，不能修改或删除素材中其它任何内容。试题二（40分）阅读下列说明、效果图，打开“实操素材/liuyanban”文件夹中的素材，阅读HTML代码和js代码，php代码进行动态网页开发，在空（1）至（20）处填写正确代码，操作完成后保存素材。【说明】这是使用原生php和HTML混写实现的留言板效果，使用mysqli连接数据库，前端页面添加留言，后端把提交内容写入数据库。留言展示页面，把数据从数据库中取出展示到页面。项目名称为留言板，包含首页add.html、add.php、conn.php、list.php、del.php、js文件夹、css文件夹,js文件夹包含common.js文件，css文件夹包含样式文件。【效果图】添加留言页面展示留言页面【问题】（40分，每空2分）进行静态网页开发，补全代码：1、打开“实操素材/liuyanban”文件夹中的文件“conn.php”，在空（1）至（4）处填入正确的内容，完成后保存文件“conn.php”。2、打开“实操素材/liuyanban”文件夹中的文件“add.html”，在空（5）至（10）处填入正确的内容，完成后保存文件“add.html”。3、打开“实操素材/liuyanban”文件夹中的文件“add.php”，在空（11）至（13）处填入正确的内容，完成后保存文件“add.php”。4、打开“实操素材/liuyanban”文件夹中的文件“add.php”，在空（14）至（18）处填入正确的内容，完成后保存文件“add.php”。4、打开“实操素材/liuyanban”文件夹中的文件“del.php”，在空（19）至（20）处填入正确的内容，完成后保存文件“add.php”。注意：除删除（1）至（20）填入正确的内容外，不能修改或删除素材中其它任何内容。试题三（34分）阅读下列说明、效果图，打开“实操素材/blog2”中的素材，阅读代码进行动态网页开发，在空（1）至（17）处填写正确代码，操作完成后保存素材。【说明】这是一个使用laravel框架实现的blog系统，实现了后端数据库读取数据展示到页面，前端登录ajax验证。效果如下所示。项目名称为blog2，包含了laravel框架的目录结构。具体要求：首先导入DB目录下边的blog2.sql文件，编写路由，实现数据展示和ajax验证两个功能。【效果图】首页效果登录时ajax验证用户不存在登录时ajax验证用户名正确【问题】（34分，每空2分）根据注释，补全代码：1、打开“实操素材/blog2/routes”中的文件“web.php”，在空（1）至（2）处填入正确的内容，完成后保存文件“web.php”。2、打开“实操素材/blog2/app/Http/Controllers/web”中的文件“IndexController.php”，在空（3）至（9）处填入正确的内容，完成后保存文件“IndexController.php”。3、打开“实操素材/blog2/resources/views/web”中的文件“index.blade.php”，在空（10）至（13）处填入正确的内容，完成后保存文件“index.blade.php”。4、打开“实操素材/blog2/resources/views/web”中的文件“login.blade.php”，在空（14）至（17）处填入正确的内容，完成后保存文件“login.blade.php”。注意：除删除（1）至（17）填入正确的内容外，不能修改或删除其它任何内容。试题四（10分）阅读下列说明、效果图，打开“实操素材/magnifier”文件夹中的素材，进行动静态页开发，在空（1）至（10）处填写正确代码，操作完成后保存素材。【说明】本题实现了放大镜功能的案例，效果如图所示。项目名称为magnifier，包含前端上传页面index.html、js文件夹、css文件夹。【效果图】放大镜效果【问题】（10分，每空1分）1、根据注释，