试题一(每空 2 分,共 30 分)
阅读下列说明、效果图和 HTML 代码,进行静态网页开发,在红色横线处补全代码。
1.【说明】
这是 “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时显示两列。
2.【效果图】
(1)index.html 在 PC 端效果
2)导航栏 “Bootstrap” 项使用下拉插件,点击显示下拉菜单,内容为 “布局”、“组件”、“插件”
(3)index.html 在移动端效果如图 1-3 所示,导航栏和 “Bootstrap” 下拉插件
3.【代码:首页 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="***css/bootstrap.min.css***" /> <link rel="stylesheet" type="text/css" href="css/index.css" /> <title>Web技术社区</title></head><body> <!-- 页头 --> <!-- 响应式导航栏 --> <nav class="navbar ***navbar-expand-lg*** navbar-dark bg-dark"> <a class="brand" href="#">Web技术社区</a> <!-- 折叠导航栏 --> <button class="***navbar-toggler***" type="button" data-toggle="collapse" data-target="***#navToggler***"> <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 ***dropdown***"> <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=" ***container-fluid***"> <!-- 行 --> <div class="row"> <!-- 屏幕宽度≧992px时显示四列,屏幕宽度<576px时显示两列 --> <div class="***col-6 col-lg-3 或 col-lg-3 col-6***"> <!--第一张图片和标题--> <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 class="card"> <img class="card-img-top" src="img/php.png"> <div class="card-body"> <p class="card-text">PHP</p> </div> </div> <!--第三张图片和标题--> <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 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="***js/bootstrap.min.js***"></script></body></html>
4.【代码: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; /* 盒模型 */ ***border: 1px solid white***;/* 边框1px,白色,实线 */ padding: 5px;/* 内边距5px */ ***margin: 5px***;/* 外边距5px */ } .brand:hover { color: white; text-decoration: none; } #introduction { background: ***linear-gradient***(to ***bottom***,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***rem**;/* 设置字体大小为根元素大小的2.25倍 */ ***transition***: font-size 1s;/* 使用过渡,1s内标题字号变大 */ } .card{ margin: 10px; ***box-shadow:***1px 1px 5px black;/* 盒阴影 */ text-align: center; align-items: center; } .card-img-top{ margin-top: 10px; width: 60%; } .card-text { text-align: center;}
试题二(每空 1.5 分,共 30 分)
阅读下列说明、效果图、MySQL 数据库操作和代码,进行动态网页开发,请在红色横线处补充代码。
1、【说明】
该程序为一个用户管理模块,使用 PHP 编程,采用 MySQL 数据库和 mysqli 编程。项目名称为 project,包括登录 login.php、处理登录请求 check.php、用户管理主页 index.php、用户管理数据库操作 user.php,以及创建数据库脚本 db.sql 和初始化数据脚本 init.sql。
2.【效果图】
(1)登录 login.php
在登录页面进行登录,并进行登录请求处理,用户登录页面如下
(2)用户管理主页 index.php
登录成功时,用 Session 保存用户账号,并跳转到 “用户管理主页”,主页布局如下:在头部显示 “欢迎 + 用户账号” 信息,在中间区域用表格显示用户列表信息,每一个用户信息显示为一行,内容包含 “序号、帐号、密码、手机号”。用户管理主页如下:
3.【MySQL 数据库操作:创建数据库脚本 db.sql】
系统使用 MySQL 数据库,数据库名为 user_center,表名为用户表 users。user 表包含序号、用户帐号、密码、手机号字段,其中,序号为自增字段和主键。请补充两处代码。 (提示 * 中间为填空答案 )
DROP DATABASE IF EXISTS user_center; CREATE DATABASE user_center; USE user_center; CREATE TABLE `users` ( `id` int (11) NOT NULL ***auto_increment*** COMMENT '序号', `account` varchar (16) NOT NULL COMMENT '用户帐号,16位字符', `password` char (64) NOT NULL COMMENT '密码', `telphone` varchar (32) DEFAULT '' COMMENT '手机号',***primary key*** (`id`) )ENGINE= InnoDB DEFAULT CHARSET= utf8;
4.【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");
5.【代码:用户管理数据库操作 user.php】
在 user.php 文件中,定义 User 类,进行数据库操作。在进行数据库编程中,应用 mysqli。
(1)在类中定义静态属性,设置数据库连接基本参数。
(2)在类中定义静态的方法 conn (),连接 mysql 数据库。
(3)定义 checkLogin () 方法,验证用户登录。
(4)定义 queryAll () 方法,查询全部用户信息,并返回 $users 二维数组。
(提示 * 中间为填空答案 )
<?php ***class*** User { static $host = "127.0.0.1"; static $dbname = "user_center"; static $user = "root"; static $pass = "123456"; static function conn() { $db = ***new mysqli*** (self::$host, self::$user, self::$pass, self::$dbname); if(mysqli_connect_errno()) { return null; } return $db; } public ***function*** checkLogin($account, $password) { $db = null; $stmt = null; try { $db = self::conn(); if($db) { $sql = "***select id from users where account = ? and password = ? ***"; $stmt = $db->prepare($sql); $stmt->bind_param("***ss***", $account, $password); $stmt->bind_result($id); $stmt->***execute***(); 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); ***$stmt->bind_result***($id, $account, $password, $telphone); $stmt->execute(); while($stmt->fetch()) { ***array_push**($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; } }
6.【代码:登录 login.php】
点击 “登录” 按钮,将表单以 POST 方式提交,处理该请求的文件为 check.php,请在横线处补充代码。
(提示 * 中间为填空答案 )
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>登录</title></head><body> <form action="***check.php***" 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>
7.【代码:处理登录请求 check.php】
在 check.php 文件中,导入 User 类文件,并创建该类的对象 $user,调用 user.php 中 checkLogin () 方法,对用户账号和密码进行验证。
当登录成功时,使用 Session 保存用户账号,并跳转到用户管理主页 index.php,当登录失败时跳转到登录页面 login.php。请根据要求填写代码。
(提示 * 中间为填空答案 )
<?php include_once "user.php"; if ($_SERVER["REQUEST_METHOD"] == "POST") { $account = $_POST["account"]; $password = $_POST["password"]; $user= ***new User()***; if ($user->***checkLogin***($account,$password)) { session_start(); $_SESSION["user"] = $account; ***header***("location:index.php"); } else { 如前空("location:login.php"); } }
8.【代码:用户管理主页 index.php】
在 index.php 文件中,将 Session 中保存用户账号显示到页面头部。导入 User 类文件,并创建该类的对象 $user,调用 user.php 中 queryAll () 方法,查询全部用户信息。
将查询返回用户信息,通过 for 循环,以表格形式进行显示,请根据要求补充代码。
(提示 * 中间为填空答案 )
<?php include_once "user.php"; ?> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <header> <div> <?php session_start(); if (isset(***$_SESSION['user']***)) { echo "欢迎 " . 如前空; } else { echo "<a href='login.php'>未登录</a>"; } ?> </div> </header> <article> <?php $user= new User(); $users = ***$user->queryAll()***; ?> <table> <tr><th>帐号</th> <th>密码</th><th>手机号</th></tr> <?php ***foreach($users as $u):*** ?> <tr> <td>***<?php echo $u['account'];?>***</td> <td><?php echo $u["password"];?></td> <td><?php echo ***$u['telphone']*** ;?></td> </tr> ***<?php endforeach;?>*** </table> </article> </body> </html>
试题三(每空 2 分,共 20 分)
阅读下列说明、效果图和代码,进行动态网页开发,请在红色横线处补全代码。
1、【说明】
随着互联网发展,越来越多的人开始阅读电子书,本项目实现在网页上阅读 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 操作,实现动态构建 “目录” 和 “内容”。同时,为每一级 “目录” 绑定点击方法,当点击对应的 “目录” 中章时,对应 “内容” 部分会随之更新。
如下图所示:
2.【代码:主页 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="***./loadJSON.php***">开始阅读</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 ***XMLHttpRequest***; } else { // for IE6, IE5 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.***open***("GET", url, true); xmlhttp.***send***(); xmlhttp.***onreadystatechange***=function(){ if (xmlhttp.***readyState***== 4 && xmlhttp.***status***== 200) { var result = ***JSON.parse***(xmlhttp.responseText); json = result; /* 构建标题 */ var dom = document.getElementsByTagName("header")[0]; var h1 = document.createElement("h1"); h1.innerHTML = ***result.title***; 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.***onclick*** = function(){ document.getElementsByTagName("p") [0].innerHTML = json["content" + this.value.split("subject")[1]]; }; dom.appendChild(ul); } } } } } </script> </html>
3.【代码:loadJSON.php】
<?php $arr = array( "title" => "PHP教程", "subject1" => "第一章:PHP 语法", "content1" => "PHP 脚本可以放在...", "subject2" => "第二章:PHP 变量", "content2" => "变量以 $ 符号开始,后面...", "subject3" => "第N章:...", "content3" => "未完待续", ); echo json_encode($arr); ?>
4.【代码: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%; }
试题四(每空 2 分,共 20 分)
阅读下列说明、效果图和代码,进行动态网页开发,请在红色横线处补全代码或填写正确选项字母。
【说明】
该程序为一个问卷调查系统,使用 PHP 的 Laravel 框架编程,项目名称为 survey,核心文件包括路由文件 web.php、模板文件(问卷调查模板 paper.blade.php 和调查结果模板 result.blade.php)、控制器文件 SurveyController.php。页面需要的数据采用硬编码方式,存放在问卷调查控制类的静态属性中。
【效果图】
(1)问卷调查页面:对应模板文件 paper.blade.php
用户访问问卷调查页面,勾选问题答案,点击 “提交” 按钮,如图
(2)调查结果页面:对应模板文件 result.blade.php
接收问卷调查页面提交数据,并进行显示,结果页面效果如图
【问题 1】基于 Laravel 框架,在下列三个红线处补全代码。
1、包管理工具
安装 Laravel 框架,需要使用 Composer 工具:通过命令 “ composer*
create-project laravel/laravel survey --prefer-dist” 创建 survey 工程,创建完毕后,程序目录如图
2、Laravel 框架 MVC 结构
Laravel 遵循 model-view-controller (MVC) 模式,MVC 模式的 3 个组件分别为模型(Model)、视图(View)和控制器(Controller)。
项目核心文件如下表所示,请分析项目相关核心 MVC 文件,使用 MVC 关键词 “Model、View 或 Controller”,在表 1 中两个红线处补全代码。
表 1
文件 说明 MVC 关键词
routes/web.php 应用路由文件
app/Http/Controllers/SurveyController.php 问卷调查控制类 Controller
resources/views/paper.blade.php 问卷调查模板 View
resources/views/result.blade.php 调查结果模板
【问题 2】分析项目路由,在下列两个红线处填写正确选项。
在浏览器中输入网址,访问问卷调查页面,用户填写问卷后,点击“提交”按钮,通过POST方式提交问卷表单,在路由文件web.php中,路由配置如下:
<?php // 访问问卷调查页面 Route::get("/survey", "SurveyController@paper"); // 提交问卷 Route::post("/finish", "SurveyController@finish");
项目发布在本机上,本机地址为localhost,根据web.php文件中定义的路由信息,当输入下列访问地址时,分析路由情况,根据A至F内容选择相应字母,填到红线处。
在浏览器中输入“http://localhost/survey”时,路由会 *** E ***。
在浏览器中输入“http://localhost/finish”时,路由会 *** B ***。
A. 显示 paper.blade.php 模板。
B. 抛出异常,未定义该方法。
C. 将字符串 “SurveyController@finish” 返回并显示到页面。
D. 将字符串 “SurveyController@paper” 返回并显示到页面。
E. 调用 SurveryController 类的 paper () 方法。
F. 调用 SurveryController 类的 finish () 方法。
【问题 3】分析项目控制器,在下列两个红线处补全代码。
在SurveyController.php文件中,定义SurveyController类,该类继承基类控制器。在SurveyController类中定义静态属性$questions,以硬编码形式保存问卷调查数据,并定义paper()方法,处理访问问卷调查页面请求,使用paper.blade.php模板文件返回问卷调查页面,将$questions传给模板文件。分析控制类SurveyController,并补全代码。
<?php namespace App\Http\Controllers; use Illuminate\Http\Request; class SurveyController extends ***Controller***{ // 问卷内容,静态 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(" ***paper***", ["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】分析模板文件,在下列第一个红线处补全代码,第二个红线处填写正确选项。
1、问卷调查模板 paper.blade.php
(1)在问卷调查模板文件paper.blade.php中,使用for循环显示问题,显示需要数据由SurveyController类中paper()返回时传递,用户填写完问卷数据后,使用POST方式提交。分析问卷调查模板和web.php中的路由信息,在红线处填写代码。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <table> <form action="***/finish***" method="post"> 【问题】 @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字段。对于代码中【问题】处的下列选项描述,不正确的是 C
A. <input type="hidden" name="_token" value="{{csrf_token()}}">
B. {{ csrf_field() }}
C. {{ csrf@ }}
D. {!! csrf_field() !!}
2、调查结果模板 result.blade.ph
在调查结果模板文件result.blade.php中,使用for循环显示用户填写的问题和答案,显示需要数据由SurveyController类中finish()返回时传递,分析finish()方法和调查结果模板文件,在红线处补全代码。
<!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>***{{$q['answer'] }}***</label><br /> @endforeach </section> </body> </html>
本文来自HTML中文网 前端面试题 栏目!!
以上就是Web前端开发中级实操考试样题(含答案)的详细内容,更多请关注html中文网其它相关文章!