1+X Web前端等级考证 | 2020 12月Web前端开发中级实操 (试卷3) 附答案

2020-11-30 18:08 1131人阅读评论(0)

试题一（30分）

阅读下列说明、效果图和HTML代码，进行静态网页开发，填写（1）至（10）代码。
【说明】
这是一个响应式完成，用bootstrap4完成响应式轮播效果。
项目采用Bootstrap框架，包含首页index.html、css文件夹、js文件夹、img文件夹，其中，css文件夹包含style.css文件和bootstrap.min.css文件；js文件夹包含jquery.min.js文件、popper.min.js文件和bootstrap.min.js文件；img文件夹包含用到的图片。
首页（index.html）使用Bootstrap响应式布局，PC端和移动端能够自适应显示，内容为【轮播图】，适配设备屏幕大小。

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

【代码：首页index.html】

<!DOCTYPE html>
<html>
<head>
  <title>第一题--bootstrap</title>
  <meta charset="utf-8">
  <!-- （1）设置 viewport meta 标签 -->
  ___________(1)___ ____________

  <!-- （2）引入样式 -->
  ___________(2)____ ___________

  <link rel="stylesheet" href="css/style.css">
  <!-- （3）-（5）引入js文件 -->
  ___________(3)__ _____________
  ___________(4)___ ____________
  ___________(5)__ _____________
</head>
<body>

<div id="demo" class="____(6)_ carousel ____ slide" data-ride="carousel">
  <!-- 指示符 -->
  <ul class="carousel-indicators">
    <li data-target="#demo" data-slide-to="0" class="active"></li>
    <li data-target="#demo" data-slide-to="1"></li>
    <li data-target="#demo" data-slide-to="2"></li>
  </ul>
 
  <!-- 轮播图片 -->
  <div class="carousel-inner">
    <div class="___(7)_ _____ active">
      <img src="img/img_fjords_wide.jpg">
      <div class="____(8)_carousel-caption_____">
        <h3>第一张图片描述标题</h3>
        <p>描述文字!</p>
      </div>
    </div>
    <div class="___(7)______">
      <img src="img/img_nature_wide.jpg">
      <div class="____(8)______">
        <h3>第二张图片描述标题</h3>
        <p>描述文字!</p>
      </div>
    </div>
    <div class="____(7)______">
      <img src="img/img_mountains_wide.jpg">
      <div class="____(8)______">
        <h3>第三张图片描述标题</h3>
        <p>描述文字!</p>
      </div>
    </div>
  </div>
 
  <!-- 左右切换按钮 -->
  <a class="____(9)_ ____" href="#demo" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </a>
  <a class="_____(10)______" href="#demo" data-slide="next">
    <span class="carousel-control-next-icon"></span>
  </a>
 
</div>

</body>
</html>

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

试题二（45分）

阅读下列说明、效果图和代码，进行动态网页开发，补充代码（1）-（30）。
【说明】
会员中心，需要先注册后登录，先要求应用HTML、CSS、AJAX、JSON、PHP、MySql等技术实现注册和登录功能。项目包含主页index.html、style.css、login.js、register.php和login.php文件，其中，主页面index.html是首页，只显示“登录成功”字样；style.css为主页样式文件；login.php为判断登录，register.php为注册数据，返回JSON格式数据。
主页分为两个部分：登录和注册，当点击登录和注册按钮时，通过ajax发送请求到login.php或者register.php返回JSON格式的数据。在主页上通过ajax拿到数据后，使用JQuery进行DOM操作。
【问题1】根据现有的代码，补全样式代码，和效果图一致
【问题2】根据提示，完成数据库的搭建
【问题3】根据现有代码和提示，完成数据库的链接
【问题4】用ajax完成数据请求，并处理接收到的数据
【效果图】

【代码：登录页login.html】


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>第二题-登录</title>
	<link rel="stylesheet" href="css/login.css">
	<script src="js/jquery.min.js"></script>
</head>
<body>
	<div class="box">
		<div class="con">
			<ul class="title">
				<li class="cur">登录</li>
				<li>注册</li>
			</ul>
			<div class="form">
				<form class="login" style="display: block;">
					<ul>
						<li>
							<input type="text" class="loginUsername" name="username" placeholder="请输入用户名">
						</li>
						<li>
							<input type="password" class="loginPwd" name="password" placeholder="请输入密码">
						</li>
						<li>
							<button type="button" class="loginBtn">登录</button>
						</li>
					</ul>
				</form>
				<form class="register">
					<ul>
						<li>
							<input type="text" class="registerUsername" name="username" placeholder="请输入用户名">
						</li>
						<li>
							<input type="password" class="registerPwd" name="password" placeholder="请输入密码">
						</li>
						<li>
							<input type="password" class="registerPwdOk" name="passwordOk" placeholder="请确认密码">
						</li>
						<li>
							<button type="button" class="registerBtn">注册</button>
						</li>
					</ul>
				</form>	
			</div>
		</div>
	</div>
	<script src="js/login.js"></script>
</body>
</html>

【代码：style.css】

问题1的样式部分。
body,h1,h2,h3,h4,h5,h6,p,ol,ul,dl,dd{
   
	margin: 0;
	padding: 0;
}
ul,ol{
   
	list-style: none;
}
input{
   
	width: 100%;
	height: 40px;
	padding:0 10px;
	border:1px solid #d8d8d8;
	_____(1)_______;/*设置盒子大小始终是100%*/
}
.box{
   
	position: absolute;
	top:50%;
	left:50%;
_____(2)_transform:translate(-50%,-50%)______;/*设置盒子水平垂直居中，用CSS3的方法*/
	width: 400px;
	padding:20px;
	_____(3)____: 0 0 15px #ccc;/*设置盒子投影*/
	border:1px solid #ccc;
}
.box .title{
   
	_______(4)______;/*设置弹性盒子*/
	________(5)___justify-content:space-between__;/*设置弹性盒子两端对齐*/
	text-align: center;
	margin-bottom: 20px;
}
.box .title li{
   
	flex:1;
}
.box .title li.cur{
   
	____(6)__font-weight____: 600;/*文字加粗*/
	color:orange;
}
.box .title li:first-child{
   
	border-right:1px solid #ccc;
}
.box .form form{
   
	display: none;
}
.box form ul li{
   
	margin-bottom:10px;
}
button{
   
	width: 100%;
	height: 40px;
	border:none;
	____(7)_border-radius_____: 5px;/*设置圆角*/
	background-color: green;
	color:#fff;
}

【问题2】

创建数据库,数据库名为list
在list的库中创建admin表，字段为id，username，password，time
id 整型不能为空，自增1，为主键
username 不能为空
password 不能为空
time 为当前时间

//删除存在list数据库
____(8)____ DATABASE IF EXISTS list;
//创建list数据库
______(9)_________;
USE list;
CREATE TABLE `admin`
(
   `id` int (4) NOT NULL （10）auto_increment COMMENT '序号',
   `username` varchar (16) NOT NULL COMMENT '用户名',
`password` varchar (16) NOT NULL COMMENT '密码',
   `time` datetime DEFAULT ___(11)_current_timestamp___  COMMENT '创建时间',
   （12）primary key (`id`)
)ENGINE= InnoDB DEFAULT CHARSET= utf8;

【问题3 代码：conn.js】
链接数据库文件，请补全空白的代码

<?php 
// header ("Content-type: text/html; charset=utf-8")
$servername = "localhost";
$username = "root";
$password = "123456";

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

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

// 查询数据库
_____(14)_mysqli_select_db___($conn,"list");

【问题3 代码：register.php】
在注册页表单中填入数据，点击“注册”按钮，通过ajax去请求register.php页面。

<?php
//引入conn.php页面
______(15)___include(“conn.php”)____;
$username=$_POST['username'];
$password=$_POST['password'];
// 判断用户是否已经存在
$sqlUsername="____(16)_
$resultUsername = mysqli_query($conn, $sqlUsername);

if($resultUsername && mysqli_num_rows($resultUsername)>0){
	$res = array(
	    'code'=>2,
	    'message'=>'用户名已经存在'
	);
}else{
	//插入SQL语句，并发送
	$sql="___________(17)________________";
	$result = mysqli_query($conn, $sql);
	//解析结果集
	if($result){
   
	    $res = array(
		    'code'=>1,
		    'message'=>'注册成功'
		);
	}else{
   
	    $res = array(
		    'code'=>0,
		    'message'=>'注册不成功'
		);
	}
	
}
//将$res转成json
echo_____(18)_ ____;
//关闭数据库
_____(19)___ _____;
?>

【问题3 代码：login.php】
在登录页表单中填入数据，点击“登录”按钮，通过ajax去请求login.php页面,判断登录是否成功。

<?php
//引入conn.php页面
______(15)_______;

$username=$_POST['username'];
$password=$_POST['password'];

//4.定义SQL语句，并发送
$sql="_________(20)____________";
$result = mysqli_query($conn, $sql);

//5.解析结果集
if($result && mysqli_num_rows($result)>0){
   
    $res = array(
	    'code'=>1,
	    'message'=>'登录成功'
	);
}else{
   
    $res = array(
	    'code'=>0,
	    'message'=>'用户名密码输入有误'
	);
}
//将$res转成json
echo_____(18)_____;
//关闭数据库
_____(19)________;

?>

【问题4 login.js】

点击登录显示登录页面，点击注册显示注册页面
通过ajax请求数据，并对返回的数据处理

$(function(){
	$(".title li").click(function(){
//给点击的元素添加类，将其他元素的cur类移除
		$(this).____(21)_ ___('cur').siblings().___(22)_ ____('cur');
		$(".form form").eq(__(23)___).css("display","block").____(24)____().css("display","none");
	})

	$(".loginBtn").click(function(){
//获取表单中的值
		var username=$(".login .loginUsername").__(25)_val()___;
		var password=$(".login .loginPwd").__(25)_val()__;
		$.ajax({
			url: 'http://localhost/second/login.php',
			type: 'post',
			dataType: '__(26)_json___',
			___(27)__ _: {
				username: username,
				password: password
			}
		})
		.done(function(data) {
			if(data.code==1){
           //登录成功加载首页
				_____(28)_______="http://localhost/second/index.html"; 
			}else{
           //弹出后台返回的message信息
				_____(30)______;
			}
		})
		
	})

	$(".registerBtn").click(function(){
		var username=$(".register .registerUsername").__(25)___;
		var password=$(".register .registerPwd").__(25)___;
		var passwordOk=$(".register .registerPwdOk").__(25)___;
       //判断两次密码输入是否一致
		if(_____(29)______){
			$.ajax({
				url: 'http://localhost/second/register.php',
				type: 'post',
				dataType: '__(26)_ ___',
			    ___(27)___: {
					username: username,
					password: password
				}
			})
			.done(function(data) {
				if(data.code==1){
				//弹出后台返回的message信息
				    _____(30)_ _____;
					____(28)_____="http://localhost/second/login.html"; 
				}else{
				//弹出后台返回的message信息
				    _____(30)______;
				}
			})
		}else{
			alert("密码和确认密码不一致");
		}	
	})
})

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

试题三（15分）

阅读下列说明，用javascript完成交互效果。填写（1）至（5）代码。
【说明】
该项目的顶部导航，当滚动条开始滚动后，搜索框就固定在浏览器的顶端。该项目包含文件index.html,style.css,index.js文件。请根据现有的代码补全代码。
【效果图】

图3-1(未开始滚动效果)

图3-2(开始滚动后效果)
【index.html】

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>第三题--导航固定在浏览器的顶端</title>
	<link rel="stylesheet" href="css/style.css">
</head>
<body>
	<header class="header">
		<div class="main">logol</div>
	</header>
	<div class="top">
		<div class="main search">
			<div class="logol">logol</div>
			<div class="searchInput">
				<input type="text" placeholder="请在此输入要搜索的关键词">
			</div>
		</div>
	</div>
	<nav>
		<div class="main">
			这是导航区域
		</div>
	</nav>
	<section class="main section">
		<section>这是图片展示区域</section>
		<section>这是新品推荐区域</section>
		<section>这是热门推荐区域</section>
		<section>这是猜你喜欢区域</section>
	</section>
	<footer>
		底部信息
	</footer>
</body>
</html>

【style.css】

body,h1,h2,h3,h4,h5,h6,p,ul,ol,dl,dd{
	margin: 0;
	padding: 0;
}
ul,ol{
	list-style: none;
}
.main{
	width: 1000px;
	margin:0 auto;
}
.header{
	width: 100%;
	height: 100px;
	font-size: 50px;
	line-height: 100px;
}
.top{
	position: fixed;
	top:0px;
	width: 100%;
	height: 70px;
	border:1px solid #ccc;
	box-shadow: 0 0 15px #ccc;
	background-color: #f2f2f2;
	_____(1)______: .8s;/*过渡时间*/
}
.search{
	display: flex;
}
.search .logol{
	font-size: 24px;
	line-height: 70px;
	color:#333;
	margin-right:30px;
}
.search .searchInput{
	flex:1;
	display: flex;
	align-items: center;
	height: 70px;
}
.search .searchInput input{
	width: 100%;
	border:1px solid #ccc;
	border-radius: 5px;
	height: 40px;
	padding:0 10px;
	box-sizing: border-box;
}
nav{
	width: 100%;
	height: 40px;
	background-color: green;
	color:#fff;
	line-height: 40px;
}
.section{
	margin-top:20px;
}
.section  section{
	width: 100%;
	height: 400px;
	margin-bottom:20px;
	border:1px solid #ccc;
	text-align: center;
	padding:20px 0;
	box-sizing: border-box;
}
footer{
	width: 100%;
	height: 100px;
	background-color: #000;
	color:#fff;
	text-align: center;
	line-height: 100px;
}

【index.js】

//滚动事件
window.____(2)____=function(){
	// 获取id为top的元素
	var top=______(3)_______("top");
	// 判断距离顶部的距离
	if(______(4)_____>0){
		// 设置top元素的top值
		_____(5)____=0;
	}else{
		_____(5)____=-71+"px";
	}
}

【问题】（15分，每空3分）
补全代码，在（1）至（5）处填入正确的内容。

试题四（20分）

阅读下列说明、效果图和代码，补全代码（1）-（10）。
【说明】
该程序为一个学生管理系统，使用PHP的Laravel框架编程，项目名称为student，核心文件包括路由文件web.php、模板文件（信息展示模板index.blade.php）、控制器文件StudentController.php。实现分页列表展示功能。

【效果图】

图4-1

【问题】基于Laravel框架，回答下列问题，填写（1）至（10）。
【MySQL数据库操作：创建数据库脚本db.sql】
系统使用MySQL数据库，数据库名为student，表名为用户表student。student表包含序号、姓名、年龄、性别字段，其中，序号为自增字段和主键。补充下列（1）和（2）。

DROP DATABASE IF EXISTS student;
CREATE DATABASE student;
USE student;
CREATE TABLE `student`
(
   `id` int (11) NOT NULL （1） COMMENT '序号',
   `name` varchar (16) NOT NULL COMMENT '姓名',
   `age` char (64) NOT NULL COMMENT '年龄',
   `sex` varchar (32) DEFAULT '' COMMENT '性别',
   （2） (`id`)
)ENGINE= InnoDB DEFAULT CHARSET= utf8;

【MySQL数据库操作】
在MySQL数据库中，向student数据库中student表插入用户信息数据，以便在用户管理主页上显示学生列表信息，插入数据脚本如下。

USE student;
insert into student(name, age, sex) value('张三', '18', "男");
insert into student(name, age, sex) value('李四', '19', "男");
insert into student(name, age, sex) value('王五', '18', "女");
insert into student(name, age, sex) value('李丽', '19', "女");

【web.php】

<?php
Route::get('/', function () {
   
    return view('welcome');
});
Route::get('/student/index', 'StudentController@index');

【StudentController.php】
将数据库中的数据展示到index.blade.php文件上，请根据页面目录结构并分析代码，填写（3）-（6）

<?php
namespace ____(3)______;
____(4)___  DB;
class StudentController ___(5)_____  Controller
{
   
    public function index()
    {
      
	    $students=__(6)___::table('student')->paginate(1);  
        //跳转转到视图student文件夹下的index.blade.php
	    return view('___(7)___',[
	        'students'=>$students
	    ]);
    }
}

【index.blade.php】
在views目录下创建common文件夹用来存放公用布局layout.blade.php,首先需要继承公共模板，然后使用for循环显示信息，数据由StudentController类中index()方法返回,并实现分页效果，填写（8）-（10）


@extends('common.layout')
@section('content')
    
    <!-- 自定义内容区域 -->
    <div class="panel panel-default">
        <div class="panel-heading" style="line-height: 50px;">学生列表</div>
        <table class="table table-striped table-hover table-responsive">
            <thead>
            <tr>
                <th>ID</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th width="160">操作</th>
            </tr>
            </thead>
            <tbody>
                ____(8)_____($students as $student)
                <tr>
                    <th scope="row">{
   {
    $student->id }}</th>
                    <td>{
   {
   $student->name}}</td>
                    <td>{
   {
   $student->age}}</td>
                    <td>{
   {
   $student->sex}}</td>
                    <td>
                        <a href="#">详情</a>
                        <a href="#">修改</a>
                        <a href="#">删除</a>
                    </td>
                </tr>
                ___(9)______
            </tbody>

        </table>
    </div>

    <!-- 分页  -->
    <div>
        <div class="pull-right">
            _____(10)______
        </div>
    </div>
@stop

实操考试答案评分细则

试题一（20分）（每空2分，共20分）
【问题】（20分）
（1）< meta name=“viewport” content=“width=device-width, initial-scale=1”>或者
< meta name=“viewport” content=“width=device-width, initial-scale=1, shrink-to-fit=no”>
（2）< link rel=“stylesheet” href=“css/bootstrap.min.css”>
（3）< script src=“js/jquery.min.js”>
（4）< script src=“js/popper.min.js”> （4-5的答案可以换顺序）
（5）< script src=“js/bootstrap.min.js”>
（6）carousel
（7）carousel-item
（8）carousel-caption
（9）carousel-control-prev
（10）carousel-control-next

试题二（45分）（每空1.5分，共45分）
【问题】（45分）
（1）box-sizing: border-box
（2）transform: translate(-50%,-50%)
（3）box-shadow
（4）display: flex
（5）justify-content: space-between
（6）font-weight
（7）border-radius
（8）DROP（不区分大小写）
（9）CREATE DATABASE list
（10）auto_increment
（11）current_timestamp
（12）primary key
（13）new mysqli
（14）mysqli_select_db
（15）include(“conn.php”)
（16）select
（17）insert into admin(username,password) values(’$ username’,’$ password’)
（18） json_encode($ res)
（19）mysqli_close($ conn)
（20）select * from admin where username=’$ username’ and password=’$ password’
（21）addClass
（22）removeClass
（23）$(this).index()
（24）siblings
（25）val()
（26）json
（27）data
（28）window.location.href
（29）password==passwordOk
（30）alert(data.message)

试题三（15分）（每空3分，共15分）
【问题】（15分）
（1）transition
（2）onscroll
（3）document.getElementById
（4）window.pageYOffset或者document.body.scrollTop或者
document.documentElement.scrollTop
（5）top.style.top

试题四（20分）（每空2分，共20分）
【问题】（20分）
（1）auto_increment
（2）primary key
（3）App\Http\Controllers
（4）use
（5）extends
（6）DB
（7）student.index
（8）@foreach
（9）@endforeach
（10）{ {$students -> links()}}

一. 1+X Web前端中级必考 | PHP 技术与应用
 二. 1+X Web前端等级考证 | 详解jQuery基础
 三. 1+X Web前端等级考证 | 深入浅出MySQL数据库
 四. 1+X Web前端等级考证 | Web中级12月最新模拟题
…

1+X Web前端等级考证 | 2020 12月Web前端开发中级实操 (试卷3) 附答案
 1+X Web前端等级考证 | 2020 12月Web前端开发中级理论 (试卷3) 附答案
 1+X Web前端等级考证 | 2020 12月Web前端开发中级实操 (试卷4) 附答案
 1+X Web前端等级考证 | 2020 12月Web前端开发中级理论 (试卷4) 附答案

有时间会持续更新关于1+X 方面的~~

转载：https://blog.csdn.net/weixin_43853746/article/details/109754127

查看评论

飞道的博客

飞道的博客

个人资料

文章分类

文章存档

阅读排行

评论排行

推荐文章