Web前端开发中级模拟测试（一）下午题

总题数: 4 总分: 100 分

考试时间：150分钟，可以使用HBuild编辑器

1、有序填空题, 25.0分 (难度:水平题评分标准:全对给分 )

阅读下列说明、效果图和代码，进行动态网页开发，回答问题1至问题4。

【说明】

在我们的生活中，当加载的内容看完后，再次下拉，就会加载出更多的内容，本项目实现下拉加载功能，应用HTML、CSS、AJAX、JSON、PHP等技术。项目名称为news，包含主页index.html、style.css和adminList.php文件，其中，主页面index.html显示新闻内容；style.css为主页样式文件；adminList.php为主页提供数据，返回JSON格式数据。
主页分为两个部分：焦点图和新闻列表，当滚动条触底，通过ajax发送请求到adminList.php，adminList.php返回JSON格式的数据。在主页上通过ajax拿到数据后，使用JQuery进行DOM操作，实现动态加载数据。如图所示。

【效果图】

【代码：主页index.html】
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>列表页</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery.min.js"></script>
</head>
<body>
<div></div>
<div>
<div>新闻列表</div>
<ul>

</ul>
</div>
<script src="js/index.js"></script>
</body>
</html>
【代码：style.css】
body,h1,h2,h3,h4,h5,h6,p,ol,ul,dl,dd{
margin: 0;
padding: 0;
}
ul,ol{
list-style: none;
}
a{
text-decoration: none;
}
.box{
width: 100%;
height: 300px;
background: url("../img/timg.jpg") center;
}
.list{
width: 700px;
margin:0 auto 50px;
}
.list .title{
font-size: 22px;
line-height: 60px;
}
.list ul{
1 ;/*设置盒子投影，颜色为#CCC,模糊度为15px*/
}
.list ul li{
position: relative;
padding:20px;
border-bottom:1px dashed #ccc;
}
.list ul li h2{
width: 500px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-weight: normal;
font-size: 16px;
}
.list ul li h2 a{
color:#333;
}
.list ul li span{
position: absolute;
top:20px;
right:20px;
}
【代码：adminList.php】
<?php
// header ("Content-type: text/html; charset=utf-8")
$servername = "localhost";
$username = "root";
$password = "123456";

// 创建连接
$conn = 2 ($servername, $username, $password);
// 检测连接
if ($conn->connect_error) {
die("连接失败: " . $conn->connect_error);
}

mysqli_query($conn,'set names utf8');

// 查询数据库
mysqli_select_db($conn,"list");
// 求信息总数
$sqlCount=" 3 ";# 查询所有数据的sql语句
$resultC = 4 ( 5 , 6 );# 执行数据库

$count=mysqli_num_rows($resultC);

$num=$_GET["num"];
$pageCount=$_GET["pageCount"];
$start= 7 ;#求开始查询的索引值
// 返回指定数据
$sql = " 8 ";#返回指定数据的sql语句
$result = mysqli_query($conn, $sql);
$res = array('count'=>$count);
$jarr=array();
// 遍历数据
while($row = 9 ($result)) {
array_push($jarr,$row);
}
$res = array(
'count'=>$count,
'list'=>$jarr
);
echo json_encode($res);
mysqli_close($conn);
?>
【代码：index.js】
$(function(){
var num=1;//当前页数
var pageCount=7;//每页显示的数量
var pageNum=0;//总页数
function ajaxDate(num){
$.ajax({
url: 'http://localhost/second/adminList.php',
type: 'get',
dataType: 'json',
data: {

10 //传递的参数
},
success:function(res){
pageNum= 11 ;//请求的总页数
res.list.forEach(function(data){
var str="<li>"+
"<h2><a href=''>"+data.title+"</a></h2>"+
"<span>"+ data.time+"</span>"+
"</li>";
12 ;//将字符串追加到指定的位置
})
}
})
}
ajaxDate(num);

$(window).scroll(function(){
var sTop= 13 ;//获取滚动条卷进去的距离，用jquery
var sHeight= 14 ;//获取可视区域的高度，用jquery
var bodyH= 15 ;//获取页面所有内容的高度，用jquery
if(sTop+sHeight>bodyH-1){//请写出判断条件
num++;
if(num<=pageNum){//请写出判断条件
console.log(num);
ajaxDate(num);//调用函数请求加载数据
}
}
})

})

2、有序填空题, 25.0分 (难度:水平题评分标准:全对给分 )

阅读下列说明、效果图和代码，进行动态网页开发，回答问题1至问题4。

【说明】

该程序为一个问卷调查系统，使用PHP的Laravel框架编程，项目名称为XXX，核心文件包括路由文件web.php、模板文件（信息展示模板news.blade.php）、控制器文件newscontroller.php。实现批量删除功能。

【效果图】

先选中需要删除的数据，点击“批量删除”按钮，如图所示。

【问题】基于Laravel框架，回答下列问题，填写（1）至（10）。

【web.php】
<?php
Route::get('/', function () {
return view('welcome');
});

// 后台首页
Route:: 1 (['namespace'=>'Admin','prefix'=>'admin'],function(){
// 后台商品管理模块
Route::resource('goods','GoodsController');
Route::get('news_ajax',"Newscontroller@aajax");

});
【GoodsController.php】
将数据库中的数据展示到news.blade.php文件上，请根据页面目录结构并分析代码，填写（2）-（4）
<?php
namespace 2 ;
use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
3 ; //使用数据库
class GoodsController extends Controller{
// 定义list方法
public function index(){
$data=DB::table('product')->get();
return view('admin.news')-> 4 ("data",$data);//返回结果数据

}
}
【Newscontroller.php】
当点击‘批量删除’时，需要请求一个地址从数据库中删除选中的数据。分析相关的控制器文件和模板文件，填写（5）-（7）
<?php
namespace App\Http\Controllers\admin;
use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use DB;

class Newscontroller extends Controller{
public function aajax(){

//获取到ajax传来的需要删除的id
$id = $_GET['str'];
//把传来的所有id改为数组形式 explode 字符串转数组
$str = 5 (",",$id);
//利用循环将需要删除的id 一个一个进行执行sql；
foreach($str as $v){
DB::table('product')-> 6 ->delete();//删除数据的条件
}
7 ;//返回删除的数据id
}
}

2、信息展示模板news.blade.php
在信息展示模板文件news.blade.php中，使用for循环显示信息，显示需要数据由GoodsController类中index()返回时传递，点击‘批量删除按钮’，批量删除选中的数据，分析index()方法和模板文件，填写（8）-（10）。
8 ('muban.admin')
@section('content')
<div class="content">
<table>
9
<tr>
<td align="center">
<input type="checkbox" name="box" value="{{$v->id}}" class="box"/>
</td>
<td>{{$v->id}}</td>
<td>{{$v->title}}</td>
<td>{{$v->pric}}</td>
<td>删除</td>
<tr>

@endforeach
</table>
<input type="button" value="批量删除" id="but">
</div>
<script>

$("#but").click(function(){
//获取到所有的input
var box = $("input[name='box']");
//去所有的input长度
length =box.length;
// alert(length);
var str ="";
for(var i=0;i<length;i++){
//如果数组中的checked 为true 就将他的id进行拼接
if(box[i].checked==true){
str =str+","+box[i].value;
}
}
//将拼接的字符串第一个，号删除
str= str.substr(1);

//ajax 将id传入后台
$.ajax({
url:" 10 ",
type:"get",
data:{str:str},
success:function (a) {
a.forEach(function(ele){
$("input").each(function(){
if($(this).val()==ele){
$(this).parents("tr").remove();
}
})
})
}
})
})

</script>
@endsection

3、有序填空题, 25.0分 (难度:水平题评分标准:全对给分 )

阅读下列说明、效果图和HTML代码，进行静态网页开发，填写（1）至（15）代码。

【说明】

这是一个响应式完成，用bootstrap4完成。

项目名称为callio，采用Bootstrap框架，包含首页index.html、css文件夹、js文件夹、img文件夹，其中，css文件夹包含style.css文件和bootstrap.min.css文件；js文件夹包含jquery.min.js文件和bootstrap.min.js文件；img文件夹包含用到的图片。

首页（index.html）使用Bootstrap响应式布局，PC端和移动端能够自适应显示，内容分为四部分：

一是【页头】，包括网页标题和导航栏，导航栏使用了下拉插件，显示时为菜单，在移动端显示为折叠导航栏；

二是【轮播图】，图片切换时呈现由大缩小的动画；

三是【网站介绍】，主要是介绍分类，采用栅格系统布局，以图片和标题的形式展示，鼠标经过图片放大，且不能溢出；

四是【表单提交】，利用弹性盒子实现表单左侧的介绍相对于表单的高度垂直对居。

【效果图】

（1）index.html在PC端效果如图1-1所示。

（2）index.html在移动端效果如图1-2所示。

【代码：首页index.html】
<!DOCTYPE html>
<html>
<head>
<title>callio</title>
<meta charset="utf-8">
<meta name="viewport" content="width= 1 , initial-scale=1, shrink-to-fit=no">

4、有序填空题, 25.0分 (难度:水平题评分标准:全对给分 )

阅读下列说明，用MySQL操作数据库。填写（1）至（10）代码。
【说明】
给项目“信息管理系统”设计一个数据库，采用MySQL数据库。主要创建产品信息管理模块，主要有新闻分类和新闻信息两个表。
【MySQL数据库操作：创建数据库脚本db.sql】
系统使用MySQL数据库，数据库名为info_manage，表名为newtype。newtype表包含序号、分类名称、时间，其中，序号为自增字段和主键。另一表明为news,news表包含序号、新闻标题、新闻内容、时间。补充下列（1）和（5），以下是对（1）-（5）的说明。
(1) 删除已经存在的数据库
(2) 创建数据库info_manage
(3) id为自增字段
(4) 默认是当前时间
(5) 设置主键
1 DATABASE IF EXISTS user_center;
2 ;
USE info_manage;
CREATE TABLE `newtype`
(
`id` int (4) NOT NULL 3 COMMENT '序号',
`typename` varchar (16) NOT NULL COMMENT '分类名称',
`time` datetime DEFAULT 4 COMMENT '创建时间',
5 (`id`)
)ENGINE= InnoDB DEFAULT CHARSET= utf8;

CREATE TABLE `news`
(
`id` int (4) NOT NULL auto_increment COMMENT '序号',
`title` varchar (16) NOT NULL COMMENT '新闻标题',
`body` text(20000) COMMENT '新闻内容',
`time` datetime DEFAULT current_timestamp COMMENT '创建时间',
primary key (`id`)
)ENGINE= InnoDB DEFAULT CHARSET= utf8;

【MySQL数据库操作：初始化数据脚本init.sql】
在MySQL数据库中，向info_manage数据库中newtype表插入信息分类数据，插入数据脚本如下。
USE info_manage;
6 newtype(typename) value('行业新闻');
insert into newtype(typename) value('集团新闻');
insert into newtype(typename) value('通知公告');
【MySQL数据库操作：修改news表】
在news表中，字段‘新闻分类’未创建，现需要修改news表,将‘新闻分类’字段插入到字段‘新闻标题’后，修改表脚本如下。
USE info_manage;
7 table news 8 newtype int(4) 9 title;
【MySQL数据库操作：修改news表】
由于newtype输入的是数字，为了提高用户体验，现在需要将所有信息的分类名显示，显示的字段有新闻序号，新闻标题，新闻分类名。执行脚本如下：
USE info_manage;
create view newsinfo as select n.id,n.title,t.typename from news as n,newtype as t where 10 ;

关闭

Web前端开发中级模拟测试（一）下午题

1、有序填空题, 25.0分 (难度:水平题 评分标准:全对给分 )

2、有序填空题, 25.0分 (难度:水平题 评分标准:全对给分 )

3、有序填空题, 25.0分 (难度:水平题 评分标准:全对给分 )

4、有序填空题, 25.0分 (难度:水平题 评分标准:全对给分 )

1、有序填空题, 25.0分 (难度:水平题评分标准:全对给分 )

2、有序填空题, 25.0分 (难度:水平题评分标准:全对给分 )

3、有序填空题, 25.0分 (难度:水平题评分标准:全对给分 )

4、有序填空题, 25.0分 (难度:水平题评分标准:全对给分 )