【1+X Web前端开发中级 】样题一（理论+实操）

下载地址：Web前端开发中级样题一理+实.zip

理论部分

评分细则

一、单选题（每小题2分，共30小题，共60分）
第1题	第2题	第3题	第4题	第5题
D	A	B	B	D
第6题	第7题	第8题	第9题	第10题
C	A	D	B	D
第11题	第12题	第13题	第14题	第15题
B	C	C	C	C
第16题	第17题	第18题	第19题	第20题
C	C	D	D	D
第21题	第22题	第23题	第24题	第25题
D	B	A	A	B
第26题	第27题	第28题	第29题	第30题
A	A	D	B	C

二、多选题（每小题2分，共15小题，共30分）
第1题	第2题	第3题	第4题	第5题
CD	BCD	AB	ABD	BD
第6题	第7题	第8题	第9题	第10题
AB	AC	ABC	BD	BC
第11题	第12题	第13题	第14题	第15题
AC	ABC	ABC	BC	ABD

三、判断题（每小题2分，共5小题，共10分）
第1题	第2题	第3题	第4题	第5题
√	×	×	√	×

一、单选题（每小题2分，共30小题，共60分）
1、在Bootstrap框架中，表单元素 <input> 要加上下列哪个类，才能给表单元素 <input> 添加圆角属性和阴影效果（）。
A、.form-group		B、.form-horizontal		C、.form-inline	D、.form-control

2、Bootstrap框架中的 .img-responsive 类可以让图片支持响应式布局，它的实现原理是（）。
A、设置max-width: 100%;和height: auto;
B、设置max-width: 100%; 和height: 100%;
C、设置width: auto; 和max-height: 100%;
D、设置width: auto; 和height: auto;

3、在移动端使用Bootstrap时，导航条在屏幕显示时会被折叠，实现显示和折叠功能的按钮需要如何处理（）。
A、折叠按钮设置data-toggle=’collapsed’，折叠容器需要添加collapsed类
B、折叠按钮设置data-toggle=’collapse’，折叠容器需要添加collapse类
C、折叠按钮设置data-toggle=’scroll’，折叠容器需要添加collapse类
D、折叠按钮设置data-spy=’scroll’，折叠容器需要添加collapse类

4、在Bootstrap中实现.nav的内容按比例填充所有可用空间，应该加哪个类（）。
A、.nav-center		B、.nav-fill			C、.nav-left			D、.nav-right

5、在Bootstrap中，使用tab标签页插件，要显示的内容要放在下方哪个容器里面（）。
A、.content			B、.tab-group			C、.tab-body			D、.tab-content

6、以下哪个标签不是 HTML 5 的语义化标签（）。
A、<header></header>			B、<section></section>
C、<marquee></marquee>		D、<article></article>

7、在使用css3盒模型时，box-sizing属性设置为（），元素的宽度只是该元素内容的宽度，而不包括边框和内边距的宽度。
A、content-box			B、border-box			C、text-box			D、none

8、实现一个css3线性渐变效果，渐变的方向是从右上角到左下角，起点颜色是从白色到黑色，以下写法正确的是（）。
A、background:linear-gradient(225deg,rgba(0,0,0,1),rgba(255,255,255,1));
B、background:linear-gradient(-135deg,hsla(120,100%,0%,1),hsla(240,100%,100%,1));
C、background:linear-gradient(to top left,white,black);
D、background: linear-gradient(to bottom left, white, black);

9、使用css3过渡效果“transition: width .5s ease-in .1s;”，其中“.5s” 对应的属性是（）。
A、transition-property：对象中的参与过渡的属性
B、transition-duration：对象过渡的持续时间
C、transition-timing-function ：对象中过渡的动画类型  
D、transition-delay：对象延迟过渡的时间

10、使用SQL语句创建数据库，数据库名为mytest，下列SQL语句写法是正确的是（）。
A、create mytest					B、create table mytest
C、database mytest				D、create database mytest

11、下列哪项为查找结果按照学号降序排列（）。
A、ORDER BY DESC StuNum			B、ORDER BY StuNum DESC
C、ORDER BY StuNum ASC			D、ORDER BY ASC StuNum

12、在视图上不能完成的操作是（）。
A、查询		B、在视图上定义新的视图		C、更新视图		D、在视图上定义新的表

13、用于将事务处理写到数据库的命令是（）。
A、insert			B、rollback			C、commit			D、savepoint

14、关于PHP，下列说法错误的是（）。
A、开发PHP网页所使用的脚本语言是PHP      
B、网页中的PHP代码同html标记符一样，必须用分隔符”<”和”>”将其括起来      
C、PHP网页，运行时在客户端可查看到真实的PHP源代码      
D、PHP和html可混合编程

15、以下PHP变量名不正确的是（）。
A、$_beijing			B、$_Beijing			C、$9Beijing			D、$Beijing

16、array_push()的作用是（）。
A、将数组的第一个元素弹出			B、将数组的最后一个元素弹出
C、将一个或多个元素压入数组的末尾	D、将一个或多个元素插入数组的开头

17、以下关于继承的说法错误的是（）。
A、一个类可以在声明中用extends关键字继承另一个类的方法和属性
B、如果父类中的方法被声明为 final，则子类无法覆盖该方法
C、PHP可以多重继承，一个类可以继承多个父类
D、属性不能被定义为 final，只有类和方法才能被定义为 final

18、执行以下代码，输出结果是（）。
<?PHP
class a{ 
    function __construct(){ 
        echo "echo class a something";    
}
}
class b extends a{ 
    function __construct(){ 
        echo "echo class b something";
    } 
}
$a = new b();
?>
A、echo class a something echo class b something
B、echo class b something echo class a something
C、echo class a something 
D、echo class b something

19、下面有关PHP中require()和include()的描述，说法错误的是（）。
A、require函数通常放在 PHP 程序的最前面
B、include函数一般是放在流程控制的处理部分中
C、require_once 语句和 require 语句完全相同，唯一区别是 PHP 会检查该文件是否已经被包含过，如果是则不会再次包含
D、require在引入不存文件时产生一个警告且脚本还会继续执行，而include则会导致一个致命性错误且脚本停止执行

20、PHP用于存储用户会话信息的超级全局变量是（）。
A、$_GET		B、$_POST		C、$_FILES		D、$_SESSION

21、在PHP中用于存储cookie数据的超级全局变量是（）。
A、$_COOKIES					B、$_GETCOOKIES
C、$_GETCOOKIE				D、$_COOKIE

22、以下PHP代码，用来查询mysql数据库中的User表，若能正常连接数据库，则以下选项中能正确执行$sql的查询语句的是（）。
<?php
……
$conn = new mysqli($servername, $username, $password, $dbname);
$sql ="select * from User";
（  ）;
A、mysqli_query($conn, $sql);			B、$conn->execute($sql);
C、$conn->query($sql);					D、query($sql);

23、使用composer下载laravel时，若不指定下载版本，默认下载哪个版本的laravel（）。
A、最新版本		B、稳定版本		C、某一固定版本		D、无法下载

24、laravel中控制器所在文件路径是（）。
A、app/Http/Controller			B、routes/Http/Controller
C、app/Controller				D、app/Http

25、laravel的Blade模板中指定继承母模板的关键字是（）。
A、@section			B、@extends			C、@include			D、@yield

26、以下laravel代码中$fillable作用是（）。
class User extends Model
{
    // 定义模型关联的数据表(一个模型只操作一个表)
    protected $table = 'user';
    protected $fillable = ['user_account','user_password','email', 'create_time', 'del'];
}
A、设置允许写入的数据字段		B、设置不允许写入的数据字段
C、设置允许读取的数据字段		D、设置不允许读取的数据字段

27、下面选项中，创建XMLHttpRequest对象的语法正确的是（）。
A、xmlhttp=new XMLHttpRequest();
B、xmlhttp=new ActiveXObject(""Microsoft.XMLHTTP"");
C、xmlhttp=new XMLHttpRequest(""Microsoft.XMLHTTP"");
D、xmlhttp=new ActiveXObject();

28、使用jQuery发送AJAX请求，关于请求的类型说法正确的是 （）。
A、只能发送GET类型请求			
B、只能发送POST类型请求
C、可以发送PUT类型请求
D、可以发送GET或者POST类型请求

29、浏览器客户端向服务器发送AJAX请求，服务器接收请求，处理完毕后，返回数据为“处理成功”，AJAX获取到服务器返回的数据时，以下关于AJAX响应属性正确的是（）。
A、status = 403		B、readyState = 4		C、status = 404		D、readyState = 3

30、下面选项中，将字符串""{""姓名"":""张三"",""性别"":""男""}""解析成JSON对象，写法正确的是（）。
A、JSON.parses(""{""姓名"":""张三"",""性别"":""男""}"");
B、JSON.stringify(""{""姓名"":""张三"",""性别"":""男""}"");
C、JSON.parse(""{""姓名"":""张三"",""性别"":""男""}"");
D、JSON.string(""{""姓名"":""张三"",""性别"":""男""}"");"

二、多选题（每小题2分，共15小题，共30分）
1、在Bootstrap栅格系统中，适应移动端超小设备(<576px)和移动端平板设备(<768px)，使用的类前缀是（）。
A、.col-md-			B、.col-lg-			C、.col-		D、.col-sm-

2、下列关于Bootstrap栅格系统说法正确的是（）。
A、栅格系统每一行不能少于12列
B、通过“行(row)”在水平方向创建一组“列(column)”
C、“行(row)”必须包含在.container（固定宽度）或.container-fluid(100%宽度)中，以便为其赋予合适的排列（aligment）和内补(padding)
D、如果一“行(row)”中包含了的“列(column)”大于12，多余的“列(column)”所在的元素将被作为一个整体另起一行排列

3、在HTML 5中，用于播放视频与音频文件的元素是（）。
A、<video>元素		B、<audio>元素		C、<music>元素		D、<move>元素

4、为了适应移动设备，html页面可以用meta标签对viewport进行控制，meta标签内可以控制下面哪些属性（）。
A、initial-scale		B、user-scalable		C、max-width			D、min-width

5、在css3单位中，哪些相对font-size属性来计算（）。
A、vh				B、em				C、vw				D、rem

6、若用如下的SQL语句创建了一个SC表：
CREATE TABLE SC(S# CHAR (6) NOT NULL，C#CHAR (3) NOT NULL，SCORE INTEGER，NOTE CHAR(20)) 
向SC表插入如下数据时，哪些数据可以被成功插入（）。
A、('201009'，'111'，60，'必修')			B、('200823'，'101'，NULL，NULL)
C、(NULL，'103'，80，'选修')			D、('201132'，NULL，86，'101')

7、MySQL数据库中，创建唯一索引的方式有（）。
A、Create index					B、Create table
C、创建表时设置主键约束			D、创建表时设置唯一约束

8、XAMPP套件中包括哪些内容（）。
A、PHP			B、Apache			C、MySQL			D、Chrome

9、PHP支持的复合数据类型是（）。
A、Boolean 布尔类型					B、Array 数组
C、Resource 资源类型					D、Object 对象

10、在PHP中，以下哪些是不等运算符（）。
A、≠				B、!=				C、<>				D、><

11、PHP中可以实现循环的是（）。
A、for				B、break				C、while				D、waiting

12、在PHP类定义中，对属性或方法的访问控制，是通过在前面添加关键字来实现的，以下属于访问控制关键字的选项是（）。
A、public			B、private			C、protected			D、default

13、以下Laravel路由配置代码，若相关的控制类以及方法，模板文件都存在，正确的是（）。
A、Route::post(“/login”, “UserController@login”);
B、Route::get(“/index”, function(){ return view(“index”);});
C、Route::match([“get”, “post”], “/reg”, “UserController@regist”);
D、Route::any([“get”, “post”], “/user/{id}”, function($id){ return “user ”.$id;});

14、使用RESTful API规范设计用户管理模块接口，设计新增用户接口和查询用户接口时，分别选用动词为（）。
A、POST			B、PUT				C、GET				D、DELETE

15、在商品管理系统中，使用jQuery ajax发送请求，实现查询所有商品信息并显示至界面，最少需要在jQuery ajax中设置哪些属性（）。
A、url				B、type				C、data				D、success

三、判断题（每小题2分，共5小题，共10分。在每小题后对应括号内填入判断结果，正确的选项填写“√”，错误的选项填写“×”）
1、Bootstrap插件全部依赖jQuery（ ）。

2、某元素hidden属性为true时，元素属于不可见状态，元素内的内容也不会被浏览器创建（ ）。

3、盒阴影box-shadow中“阴影模糊值”可以为负数（ ）。

4、MySQL可使用source 命令导入本地sql脚本文件（ ）。

5、PHP可以使用“scanf”来打印输出结果（ ）。

实操部分

评分细则

试题一（30分）
【问题】（30分）
（1）css/bootstrap.min.css
（2）navbar-expand-lg
（3）navbar-toggler
（4）#navToggler
（5）dropdown
（6）container-fluid
（7）col-6 col-lg-3或col-lg-3 col-6
（8）js/bootstrap.min.js
（9）border: 1px solid white;
（10）margin: 5px
（11）linear-gradient
（12）bottom	
（13）rem
（14）transition
（15）box-shadow
（每空2分，共30分）

试题二（30分）
【问题】（30分）
（1）AUTO_INCREMENT  (大小写都可)
（2）PRIMARY KEY (大小写都可)
（3）class
（4）new mysqli
（5）function
（6）select id from users where account = ? and password = ?
或select id from users where password=? and account=?
（7）ss
（8）execute
（9）$stmt->bind_result($id, $account, $password, $telphone);
（10）array_push
（11）check.php
（12）new User()
（13）checkLogin
（14）header
（15）$_SESSION["user"]
（16）$user->queryAll()
（17）foreach($users as $u):
（18）<?php echo $u["account"];?>
（19）$u["telphone"]
（20）<?php endforeach;?>
（每空1.5分，共30分）

试题三（20分）
【问题】（20分）
（1）./loadJSON.php
（2）XMLHttpRequest
（3）open
（4）send
（5）onreadystatechange
（6）readyState
（7）status
（8）JSON.parse
（9）result.title
（10）onclick
（每空2分，共20分）


试题四（20分）
【问题】（20分）
（1）composer
（2）Controller
（3）View
（4）E
（5）B
（6）Controller
（7）paper
（8）/finish
（9）C
（10）{{ $q["answer"] }}
（每空2分，共20分）

试题一（30分）
阅读下列说明、效果图和HTML代码，进行静态网页开发，填写（1）至（15）代码。
【说明】
这是“Web技术社区”网站，该网站致力于推广和分享各种前端开发技术，现在我们需要编写该网站首页。
项目名称为web_skill，采用Bootstrap框架，包含首页index.html、css文件夹、js文件夹、img文件夹，其中，css文件夹包含index.css文件和bootstrap.min.css文件；js文件夹包含jquery-3.2.1.min.js文件和bootstrap.min.js文件；img文件夹包含bootstrap.png、php.png、mysql.png和laravel.png图片。
首页（index.html）使用Bootstrap响应式布局，PC端和移动端能够自适应显示，内容分为三部分：
一是【页头】，包括网页标题和导航栏，网页标题“Web技术社区”使用盒模型，导航栏使用了下拉插件，显示时为菜单，在移动端显示为折叠导航栏；
二是【网站介绍】，背景从上到下由黑到白渐变，鼠标悬停时“欢迎来到Web技术社区”标题字号变大为根元素大小的2.25倍；
三是【技术介绍】，采用栅格系统布局，以图片和标题的形式展示四项【技术】，屏幕宽度≥992px时显示四列，屏幕宽度<576px时显示两列。

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

图1-1
（2）导航栏“Bootstrap”项使用下拉插件，点击显示下拉菜单，内容为“布局”、“组件”、“插件”，如图1-2所示。

图1-2
（3）index.html在移动端效果如图1-3所示，导航栏和“Bootstrap”下拉插件如图1-4所示。

图1-3

图1-4

【代码：首页index.html】

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<!-- 导入css文件夹中bootstrap.min.css基础样式文件 -->
		<link rel="stylesheet" type="text/css" href="（1）" />
		<link rel="stylesheet" type="text/css" href="css/index.css" />
		<title>Web技术社区</title>
	</head>
	<body>
		<!-- 页头 -->
		<!-- 响应式导航栏 -->
		<nav class="navbar （2） navbar-dark bg-dark">
			<a class="brand" href="#">Web技术社区</a>
			<!-- 折叠导航栏 -->
			<button class="（3）" type="button" data-toggle="collapse" data-target="（4）">
				<span class="navbar-toggler-icon"></span>
			</button>
			<div class="collapse navbar-collapse" id="navToggler">
				<ul class="navbar-nav mr-auto">
					<li class="nav-item active">
						<a class="nav-link" href="#">首页</a>
					</li>
					<!-- 下拉菜单 -->
					<li class="nav-item （5）">
						<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">Bootstrap</a>
						<div class="dropdown-menu">
							<a class="dropdown-item" href="#">布局</a>
							<a class="dropdown-item" href="#">组件</a>
							<a class="dropdown-item" href="#">插件</a>
						</div>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#">PHP</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#">MySQL</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#">Laravel</a>
					</li>
				</ul>
			</div>
		</nav>		
		<div id="introduction">
			<div id="content">
				<h2>欢迎来到Web技术社区</h2>
				<p>本站包括Bootstrap、PHP、MySQL、Laravel等Web技术教程</p>
			</div>
		</div>
		<!-- 栅格系统 -->
		<!-- 最外层容器100%宽度-->
		<div class="（6）">
			<!-- 行 -->
			<div class="row">
				<!--第一张图片和标题-->
				<!-- 屏幕宽度≧992px时显示四列，屏幕宽度<576px时显示两列 -->
				<div class="（7）">
					<div class="card">
						<img class="card-img-top" src="img/bootstrap.png">
						<div class="card-body">
							<p class="card-text">Bootstrap</p>
						</div>
					</div>
				</div>
				<!--第二张图片和标题-->
				<!-- 屏幕宽度≧992px时显示四列，屏幕宽度<576px时显示两列 -->
				<div class="（7）">
					<div class="card">
						<img class="card-img-top" src="img/php.png">
						<div class="card-body">
							<p class="card-text">PHP</p>
						</div>
					</div>
				</div>
				<!--第三张图片和标题-->
				<!-- 屏幕宽度≧992px时显示四列，屏幕宽度<576px时显示两列 -->
				<div class="（7）">
					<div class="card">
						<img class="card-img-top" src="img/mysql.png">
						<div class="card-body">
							<p class="card-text">MySQL</p>
						</div>
					</div>
				</div>
				<!--第四张图片和标题-->
				<!-- 屏幕宽度≧992px时显示四列，屏幕宽度<576px时显示两列 -->
				<div class="（7）">
					<div class="card">
						<img class="card-img-top" src="img/laravel.png">
						<div class="card-body">
							<p class="card-text">Laravel</p>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 导入js文件夹里的jquery-3.2.1.min.js文件和bootstrap.min.js文件 -->
		<script src="js/jquery-3.2.1.min.js"></script>
		<script src="（8）"></script>
	</body>
</html>

【代码：CSS文件index.css】

body {	font-size: 20px;}
.navbar-dark .navbar-nav .nav-link{
	color: white;
}
.navbar {
	position: absolute;
	top:0px;
	width: 100%;
	z-index: 99;
}
.brand {
	color: white;
	/* 盒模型 */
	（9）;/* 边框1px，白色，实线 */
	padding: 5px;/* 内边距5px */
	（10）;/* 外边距5px */
}
.brand:hover {
	color: white;
	text-decoration: none;
}
#introduction {
	background: （11）(to （12）,black,white);/* 背景从上到下颜色渐变 */
	width:100%;
	height:400px;
	color: rgba(255,255,255,0.9);/* 字体颜色 */
}
#content {
	position: absolute;
	top: 16%;
	left: 16%;
	width: 68%;
	text-align: center;
}
#content h2:hover {
	font-size: 2.25（13）;/* 设置字体大小为根元素大小的2.25倍 */
	（14）: font-size 1s;/* 使用过渡，1s内标题字号变大 */
}
.card{
	margin: 10px;
	（15）: 1px 1px 5px black;/* 盒阴影 */
	text-align: center;
	align-items: center;
}
.card-img-top{ 
	margin-top: 10px;
	width: 60%;
}
.card-text { text-align: center;}

【问题】（30分，每空2分）
进行静态网页开发，补全代码，在（1）至（15）处填入正确的内容。

试题二（30分）
阅读下列说明、效果图、MySQL数据库操作和代码，进行动态网页开发，填写（1）至（20）代码。
【说明】
该程序为一个用户管理模块，使用PHP编程，采用MySQL数据库和mysqli编程。项目名称为project，包括登录login.php、处理登录请求check.php、用户管理主页index.php、用户管理数据库操作user.php，以及创建数据库脚本db.sql和初始化数据脚本init.sql。
【效果图】
（1）登录login.php
在登录页面进行登录，并进行登录请求处理，用户登录页面如下2-1所示。

图2-1
（2）用户管理主页index.php
登录成功时，用Session保存用户账号，并跳转到“用户管理主页”，主页布局如下：
在头部显示“欢迎+用户账号”信息，在中间区域用表格显示用户列表信息，每一个用户信息显示为一行，内容包含“序号、帐号、密码、手机号”。用户管理主页如2-2所示。

图2-2
【MySQL数据库操作：创建数据库脚本db.sql】
系统使用MySQL数据库，数据库名为user_center，表名为用户表users。user表包含序号、用户帐号、密码、手机号字段，其中，序号为自增字段和主键。补充下列（1）和（2）。

DROP DATABASE IF EXISTS user_center;
CREATE DATABASE user_center;
USE user_center;
CREATE TABLE `users`
(
   `id` int (11) NOT NULL （1） COMMENT '序号',
   `account` varchar (16) NOT NULL COMMENT '用户帐号,16位字符',
   `password` char (64) NOT NULL COMMENT '密码',
   `telphone` varchar (32) DEFAULT '' COMMENT '手机号',
   （2） (`id`)
)ENGINE= InnoDB DEFAULT CHARSET= utf8;

【MySQL数据库操作：初始化数据脚本init.sql】
在MySQL数据库中，向user_center数据库中users表插入用户信息数据，以便在用户管理主页index.php上显示用户列表信息，插入数据脚本如下。

USE user_center;
insert into users(account, password, telphone) value('admin', 'admin', "16871054787");
insert into users(account, password, telphone) value('admin2', 'admin2', "13871456841");
insert into users(account, password, telphone) value('admin3', 'admin3', "80041224771");
insert into users(account, password, telphone) value('admin4', 'admin4', "15874581652");
insert into users(account, password, telphone) value('admin5', 'admin5', "25417522145");
insert into users(account, password, telphone) value('admin6', 'admin6', "40014125155");
insert into users(account, password, telphone) value('admin7', 'admin7', "15847455514");
insert into users(account, password, telphone) value('admin8', 'admin8', "16854711223");

【代码：用户管理数据库操作user.php】
在user.php文件中，定义User类，进行数据库操作。在进行数据库编程中，应用mysqli。
（1）在类中定义静态属性，设置数据库连接基本参数。
（2）在类中定义静态的方法conn()，连接mysql数据库。
（3）定义checkLogin()方法，验证用户登录。
（4）定义queryAll()方法，查询全部用户信息，并返回$users二维数组。
根据要求填写（3）至（10）。

<?php
（3）User {
	static $host = "127.0.0.1";
	static $dbname = "user_center";
	static $user = "root";
	static $pass = "123456";

	static function conn() {
		$db = （4）(self::$host, self::$user, self::$pass, self::$dbname);
		if(mysqli_connect_errno()) {
			return null;
		}
		return $db;
	}

	public （5）checkLogin($account, $password) {
		$db = null;
		$stmt = null;
		try {
			$db = self::conn();
			if($db) {
				$sql = "（6）";
				$stmt = $db->prepare($sql);
				$stmt->bind_param("（7）", $account, $password);
				$stmt->bind_result($id);
				$stmt->（8）();
				if($stmt->fetch()) {
					return true;
				}
			}
		} catch(Exception $e) {
			echo "Message:" . $e->getMessage();
		} finally {
			if($stmt != null) {
				$stmt->free_result();
			}
			if($db != null) {
				$db->close();
			}
		}
		return false;
	}

	public function queryAll() {
		$db = null;
		$stmt = null;
		$users = array();
		try {
			$db = self::conn();
			$sql = "select id, account, password, telphone from users";
			$stmt = $db->prepare($sql);
			（9）
			$stmt->execute();
			while($stmt->fetch()) {
				（10）($users, array(
						"id" => $id,
						"account" => $account,
						"password" => $password,
						"telphone" => $telphone
				));
			}
		} catch(Exception $e) {
			echo "Message:" . $e->getMessage();
		} finally {
			if($stmt != null) {
				$stmt->free_result();
			}
			if($db != null) {
				$db->close();
			}
		}
		return $users;
	}
}

【代码：登录login.php】
点击“登录”按钮，将表单以POST方式提交，处理该请求的文件为check.php，填写（11）。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>登录</title>
</head>
<body>
	<form action="（11）" method="post">
		<table>
			<tr><th>用户登录</th></tr>
			<tr>
				<td>
					<label>帐号</label>
					<input name="account" type="text" value="" />
				</td>
			</tr>
			<tr>
				<td>
					<label>密码</label>
					<input name="password" type="password" value="" />
				</td>
			</tr>
			<tr>
				<td><input type="submit" value="登录" /></td>
			</tr>
		</table>
	</form>
</body>
</html>

【代码：处理登录请求check.php】
在check.php文件中，导入User类文件，并创建该类的对象$user，调用user.php中checkLogin()方法，对用户账号和密码进行验证。当登录成功时，使用Session保存用户账号，并跳转到用户管理主页index.php，当登录失败时跳转到登录页面login.php。根据要求填写（12）至（14）。

<?php
include_once "user.php";

if ($_SERVER["REQUEST_METHOD"] == "POST") {
  $account = $_POST["account"];
  $password = $_POST["password"];
	
  $user= （12）;
  if ($user->（13）($account,$password)) {
    session_start();
    $_SESSION["user"] = $account;
    （14）("location:index.php");
  } else {
    （14）("location:login.php");
  }
}

【代码：用户管理主页index.php】
在index.php文件中，将Session中保存用户账号显示到页面头部。导入User类文件，并创建该类的对象$user，调用user.php中queryAll()方法，查询全部用户信息。将查询返回用户信息，通过for循环，以表格形式进行显示，根据要求填写（15）至（20）。

<?php include_once "user.php"; ?>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>
	<header>
	<div>
      <?php
      session_start();
      if (isset(（15）)) {
        echo "欢迎 " . （15）;
      } else {
        echo "<a href='login.php'>未登录</a>";
      }
      ?> 
    </div>
	</header>
	<article>
    <?php
    $user= new User();
    $users = （16）;
    ?>
      <table>
		<tr><th>帐号</th>	<th>密码</th><th>手机号</th></tr>
        <?php （17） ?>
        <tr>
			<td>（18）</td>
			<td><?php echo $u["password"];?></td>
			<td><?php echo （19）;?></td>
		</tr>
        （20）
      </table>
	</article>
</body>
</html>

【问题】（30分，每空1.5分）
进行动态网页开发，补全代码，在（1）至（20）处填入正确的内容。

试题三（20分）
阅读下列说明、效果图和代码，进行动态网页开发，回答问题1至问题4。
【说明】
随着互联网发展，越来越多的人开始阅读电子书，本项目实现在网页上阅读JSON格式书籍，应用HTML、CSS、AJAX、JSON、PHP等技术。项目名称为book，包含主页index.html、index.css和loadJSON.php文件，其中，主页面index.html显示书籍内容；index.css为主页样式文件；loadJSON.php为主页提供数据，返回JSON格式书籍。
主页分为两个部分：左侧为按钮和“目录”，中间为章对应“内容”。点击“开始阅读”按钮，通过ajax发送请求到loadJSON.php，loadJSON.php返回JSON格式的书籍。在主页上通过ajax拿到数据后，使用JavaScript进行DOM操作，实现动态构建“目录”和“内容”。同时，为每一级“目录”绑定点击方法，当点击对应的“目录”中章时，对应“内容”部分会随之更新，如图3-1所示。

【效果图】

【代码：主页index.html】

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Web阅读器</title>
        <link rel="stylesheet" type="text/css" href="index.css"/>
	</head>
	<body>
		<div>
            <!-- 相对路径 -->
			<button onclick="  （1）  ">开始阅读</button>
		</div>
		<header></header>
		<aside class="list">
		</aside>
		<article class="content">
			<p></p>
		</article>
	</body>
	<script type="text/javascript">
		var json = {};
		/* 获取json格式文章 */
		function loadJSON(url){
			var xmlhttp;
			if (window.XMLHttpRequest) { // for IE7+, Firefox, Chrome, Opera, Safari
				xmlhttp = new   （2）  ;
			} else { // for IE6, IE5
				xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
			}
			xmlhttp.  （3）  ("GET", url, true);
			xmlhttp.  （4）  ();
			xmlhttp.  （5）  =function(){
				if (xmlhttp.  （6）   == 4 && xmlhttp.  （7）   == 200) {
					var result =   （8）  (xmlhttp.responseText);
					json = result;
					/* 构建标题 */
					var dom = document.getElementsByTagName("header")[0];
					var h1 = document.createElement("h1");
					h1.innerHTML =   （9）  ;
					dom.appendChild(h1); /* 添加节点 */
					/* 构建目录 */
					var dom = document.getElementsByTagName("aside")[0];
					for(var data in result){
						if(data.search("subject") != -1){
							var ul = document.createElement("ul");
							ul.innerHTML = result[data];
							ul.value = data;
                            /* 构建内容 */
							ul.  （10）   = function(){
								document.getElementsByTagName("p")[0].innerHTML = json["content" + this.value.split("subject")[1]];
							};
							dom.appendChild(ul);
						}
					}
				}
			}
		}
	</script>
</html>

【代码：loadJSON.php】

<?php
	$arr = array(
	"title" => "PHP教程",
	"subject1" => "第一章：PHP 语法",
	"content1" => "PHP 脚本可以放在...",
	"subject2" => "第二章：PHP 变量",
	"content2" => "变量以 $ 符号开始，后面...",
	"subject3" => "第N章：...",
	"content3" => "未完待续",
	);
	echo json_encode($arr);
?>

【代码：index.css】

*{
font-size: 30px;
}
header{
	position: absolute;
	top:15%;
	width:20%;
}
.list{
	position: absolute;
	top:20%;
	width:20%;
}
.list ul{
	font-size: 34px;
}
.list li{
	font-size: 32px;
}
.content{
	position: absolute;
	left:30%;
	width:40%;
}

【问题】（20分，每空2分）
进行动态网页开发，补全代码，在（1）至（10）处填入正确的内容。

试题四（20分）
阅读下列说明、效果图和代码，进行动态网页开发，回答问题1至问题4。
【说明】
该程序为一个问卷调查系统，使用PHP的Laravel框架编程，项目名称为survey，核心文件包括路由文件web.php、模板文件（问卷调查模板paper.blade.php和调查结果模板result.blade.php）、控制器文件SurveyController.php。页面需要的数据采用硬编码方式，存放在问卷调查控制类的静态属性中。

【效果图】
（1）问卷调查页面：对应模板文件paper.blade.php
用户访问问卷调查页面，勾选问题答案，点击“提交”按钮，如图4-1所示。

图4-1
（2）调查结果页面：对应模板文件result.blade.php
接收问卷调查页面提交数据，并进行显示，结果页面效果如图4-2所示。

图4-2

【问题1】基于Laravel框架，回答下列问题，填写（1）至（3）。
1、包管理工具
安装Laravel框架，需要使用Composer 工具：通过命令“（1） create-project laravel/laravel survey --prefer-dist”创建survey工程，创建完毕后，程序目录如图4-3所示。

2、Laravel框架MVC结构
Laravel遵循model-view-controller(MVC)模式，MVC模式的3个组件分别为模型（Model）、视图（View）和控制器（Controller）。项目核心文件如下表所示，请分析项目相关核心MVC文件，使用MVC关键词“Model、View或Controller”，填写（2）至（3）。

文件	说明	MVC关键词
routes/web.php	应用路由文件
app/Http/Controllers/SurveyController.php	问卷调查控制类	（2）
resources/views/paper.blade.php	问卷调查模板	（3）
resources/views/result.blade.php	调查结果模板

【问题2】分析项目路由，回答下列问题，填写（4）至（5）。
在浏览器中输入网址，访问问卷调查页面，用户填写问卷后，点击“提交”按钮，通过POST方式提交问卷表单，在路由文件web.php中，路由配置如下：

<?php
// 访问问卷调查页面
Route::get("/survey", "SurveyController@paper");
// 提交问卷
Route::post("/finish", "SurveyController@finish");

项目发布在本机上，本机地址为localhost，根据web.php文件中定义的路由信息，当输入下列访问地址时，分析路由情况，选择相应A至F内容，填写（4）至（5）。
在浏览器中输入“http://localhost/survey”时，路由会（4）。
在浏览器中输入“http://localhost/finish”时，路由会（5）。
A. 显示paper.blade.php模板。
B. 抛出异常，未定义该方法。
C. 将字符串“SurveyController@finish”返回并显示到页面。
D. 将字符串“SurveyController@paper”返回并显示到页面。
E. 调用SurveryController类的paper()方法。
F. 调用SurveryController类的finish()方法。
【问题3】分析项目控制器，回答下列问题，填写（6）至（7）。
在SurveyController.php文件中，定义SurveyController类，该类继承基类控制器。在SurveyController类中定义静态属性$questions，以硬编码形式保存问卷调查数据，并定义paper()方法，处理访问问卷调查页面请求，使用paper.blade.php模板文件返回问卷调查页面，将$questions传给模板文件。分析控制类SurveyController，填写（6）至（7）。

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;

class SurveyController extends （6） {
	// 问卷内容，静态
	private static $questions = array(
			"Q1" => array(
					"issue" => "选择你比较熟悉的技术：",
					"type" => "checkbox",
					"options" => array(
							"PHP",
							"Laravel",
							"Restful API",
							"Bootstrap"
					)
			),
			"Q2" => array(
					"issue" => "您会制作简单的网页吗？",
					"type" => "radio",
					"options" => array(
							"会",
							"不会"
					)
			)
	);

	// 初始问卷调查数据，并跳转到paper页面
	public function paper() {
		return view("（7）", ["questions" => self::$questions]);
	}

	// 处理用户提交的调查问卷
	public function finish(Request $request) {
		$input = $request->all();
		$result = array();
		foreach(self::$questions as $key => $question) {
			if(isset($input[$key])) {
				array_push($result, array(
						"issue" => $question["issue"],
						"answer" => join(",", $input[$key])
				));
			}
		}
		return view("result", ["result" => $result]);
	}
}

【问题4】分析模板文件，回答下列问题，填写（8）至（9）。
1、问卷调查模板paper.blade.php
（1）在问卷调查模板文件paper.blade.php中，使用for循环显示问题，显示需要数据由SurveyController类中paper()返回时传递，用户填写完问卷数据后，使用POST方式提交。分析问卷调查模板和web.php中的路由信息，填写（8）空。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
	<table>
		<form action="（8）" method="post">
			（9）
			@foreach($questions as $key=>$question)
			<tr>
				<td>
					<label>{{ ($loop->index+1). "、".$question["issue"] }}</label><br />
					@foreach($question["options"] as $option)
					<input type="{{$question['type']}}" name="{{ $key.'[]'}}"
						value="{{ $option }}">{{ $option }}</input>
					<br /> 
					@endforeach
				</td>
			</tr>
			@endforeach
			<tr>
				<td><input type="submit" value="提交" /></td>
			</tr>
		</form>
	</table>
</body>
</html>

（2）在上述代码中，当使用POST方式提交表单时，Laravel框架需要添加CSRF Token字段。对于下列选项描述，不正确的是（9）
A.
B. {{ csrf_field() }}
C. {{ csrf@ }}
D. {!! csrf_field() !!}

2、调查结果模板result.blade.php
在调查结果模板文件result.blade.php中，使用for循环显示用户填写的问题和答案，显示需要数据由SurveyController类中finish()返回时传递，分析finish()方法和调查结果模板文件，填写（10）。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
	<section>
		@foreach($result as $q)
		<label>{{ ($loop->index+1). "、".$q["issue"] }}</label><br />
		<label>（10）</label><br />
		@endforeach
	</section>
</body>
</html>