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

PAGEPAGE2考生姓名 准考证号2020年下半年 Web前端开发中级 实操考试（考试时间14:00-16:30共150分钟）1.本试卷共4道题，满分100分。2.请在指定位置或开发环境下作答。试题一（20分）阅读下列说明、效果图，打开“实操素材/news”文件夹，使用bootstrap4框架进行静态网页开发，在空（1）至（10）处填写正确代码，操作完成后保存素材。【说明】这是一个bootstrap4实现的静态页面效果，包含首页和登录页。现在我们需要编写该网站效果图部分代码。项目名称为news，包含首页index.html、login.html,web文件夹，其中web文件夹包含用到的资源，其中images文件夹包含用到的图片。Dist文件夹是bootstrap4框架用到的文件，css是样式文件夹。首页点击“登录”，会跳转到登录页面，登录页面点击“提交”会验证用户名是否为空。页面效果如下图所示。【效果图】首页效果登录页效果【问题】（20分，每空2分）打开“实操素材/news”中的文件“index.html”，进行静态网页开发，补全代码，在（1）至（8）处填入正确的内容，完成后保存文件“index.html”。2、打开“实操素材/news”中的文件“login.html”，进行静态网页开发，补全代码，在（9）至（10）处填入正确的内容，完成后保存文件“login.html”。注意：除删除（1）至（10）填入正确的内容外，不能修改或删除素材中其它任何内容。试题二（28分）阅读下列说明、效果图，打开“实操素材/mysite”文件夹中的素材，阅读HTML代码和js代码进行静态网页开发，在空（1）至（14）处填写正确代码，操作完成后保存素材。【说明】这是使用HTML5实现的响应式页面效果。当设备宽度大于1440px的时候主体内容显示为三列布局，当设备宽度在1000px和1440px之间的时候主体内容显示为两列布局，当设备宽度小于1000px的时候主体内容显示为一列布局，轮播图部分会根据页面大小自动缩放，使用ajax向后台发起请求。项目名称为mysite，包含首页index.html、images文件夹、js文件夹、php文件夹、css文件夹等，其中images文件夹包含用到的图片，css文件夹包含样式文件。【效果图】大于1440px的页面效果1000px到1440px之间的效果小于1000px页面效果【问题】（28分，每空2分）进行静态网页开发，补全代码：1、打开“实操素材/mysite”文件夹中的文件“index.html”，在空（1）至（4）处填入正确的内容，完成后保存文件“index.html”。2、打开“实操素材/mysite/js”文件夹中的文件“lunbo.js”，在空（5）至（6）处填入正确的内容，完成后保存文件“lunbo.js”。3、打开“实操素材/mysite/js”文件夹中的文件“search.js”，在空（7）至（14）处填入正确的内容，完成后保存文件“search.js”。注意：除删除（1）至（14）填入正确的内容外，不能修改或删除素材中其它任何内容。试题三（40分）阅读下列说明、效果图，打开“实操素材/dormitory”中的素材，阅读代码进行动态网页开发，在空（1）至（20）处填写正确代码，操作完成后保存素材。【说明】这是一个使用laravel框架实现的学生宿舍管理系统，实现了添加学生违纪和展示学生违纪列表。效果如下所示。项目名称为dormitory，包含了laravel框架的目录结构。具体要求：首先导入DB目录下边的sql文件，编写路由，实现添加学生违纪信息和展示学生违纪列表两个功能。【效果图】首页效果添加违纪信息页面展示违纪信息页面【问题】（40分，每空2分）根据注释，补全代码：1、打开“实操素材/dormitory/routes”中的文件“web.php”，在空（1）至（3）处填入正确的内容，完成后保存文件“web.php”。2、打开“实操素材/dormitory/app/Http/Controllers/school”中的文件“DisciplineController.php”，在空（4）至（12）处填入正确的内容，完成后保存文件“DisciplineController.php”。3、打开“实操素材/dormitory/resources/views/school/muban”中的文件“temp.blade.php”，在空（13）至（14）处填入正确的内容，完成后保存文件“temp.blade.php”。4、打开“实操素材/dormitory/resources/views/school/”中的文件“addDiscipline.blade.php”，在空（15）至（20）处填入正确的内容，完成后保存文件“addDiscipline.blade.php”。注意：除删除（1）至（20）填入正确的内容外，不能修改或删除其它任何内容。试题四（12分）阅读下列说明、效果图，打开“实操素材/upload”文件夹中的素材，进行动态网页开发，在空（1）至（6）处填写正确代码，操作完成后保存素材。【说明】本题实现了上传图片功能的案例，效果如图所示。项目名称为upload，包含前端上传页面index.html、后端处理上传的upload.php页面，存放上传图片的文件夹。【效果图】上传页面上传结果页面【问题】（12分，每空2分）1、根据注释，补全代码，打开“实操素材/upload”中的文件“index.html”，在空（1）至（2）处填入正确的内容，完成后保存文件“index