![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：qualified
Teacher's comments：
Collection
Collection
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>影视信息表</title>
<style>
body{
margin: 0px;
padding: 0px;
}
table,th,td {
border: 1px solid black;
}
table th {
background-color: lightskyblue;
}
table {
border-collapse: collapse;
width: 800px;
margin:auto;
text-align: center;
}
h3 {
text-align: center;
}
h3 a {
font-size: 0.6em;
text-decoration: none;
border:1px solid darkgrey;
border-radius: 2px;
line-height: 28px;
display: inline-block;
color: palevioletred;
height: 28px;
width: 60px;
background-color: ghostwhite;
}
h3 a:hover, .active {
background-color: lightseagreen;
color: white;
}
form {
display: inline;
}
.box ul{
float: left;
overflow: hidden;
margin: auto;
position:relative;
left:30px;
}
.box ul li{
list-style: none;
float: left;
display: block;
}
.box{
width: 800px;
height: 30px;
text-align: center;
margin: auto;
margin-top: 100px;
}
.head{
height: 80px;
width: 100%;
background-color:lightskyblue;
text-align: center;
overflow: hidden;
margin-top: -10px;
position: relative;
display: flex;
align-items: center;
}
.head ul{
position: relative;
margin: auto;
line-height: 80px;
}
.head ul li{
list-style: none;
float: left;
display: block;
padding: 1px 30px;
}
.head li:hover{
background-color: orange;
color: white;
}
.head a:hover{
color: white;
}
.footer{
width: 100%;
height: 38px;
background-color: #f4f4f4;
position: absolute;
bottom: 0px;
/*float: right;*/
overflow: hidden;
text-align: center;
display: flex;
align-items: center;
}
.footer ul{
height: 38px;
margin: auto;
}
.footer ul li {
padding:0px 10px;
float: left;
list-style: none;
}
</style>
</head>
<body>
<div class="head">
<ul>
<li><a href="">首页</a></li>
<li><a href="">今日热点</a></li>
<li><a href="">最近更新</a></li>
<li><a href="">精彩影评</a></li>
<li><a href="">联系我们</a></li>
</ul>
</div>点击 "运行实例" 按钮查看在线实例
主页面
<?php
//连接数据库获取到全部的记录
//导入分页函数库
require 'inc/header.php';
require 'lib/fun_page.php';
$db = mysqli_connect('127.0.0.1','root','root','php');
$page = isset($_GET['p']) ? $_GET['p'] : 1;
$num = 5;
$table = 'movie';
//调用分页函数
$data = fun_page($db,$table,$page,$num);
$rows = $data['rows']; //当前分页数据
$pages = $data['pages']; //总页数
?>
<div class="form">
<table>
<caption><h2>影视信息表</h2></caption>
<tr>
<th style="width: 100px">ID</th>
<th style="width: 300px">名称</th>
<th style="width: 300px">日期</th>
<th style="width: 100px">是否免费</th>
</tr>
<?php foreach ($rows as $row): ?>
<tr>
<td><?php echo $row['id']; ?></td>
<td><?php echo $row['name']; ?></td>
<td><?php echo $row['date']; ?></td>
<td><?php $charge=$row['free'];
switch ($charge){
case 1;
echo '收费';
break;
case 0;
echo'免费';
break;
}; ?></td>
</tr>
<?php endforeach;?>
</table>
</div>
<div class="box">
<h3>
<ul>
<!-- --><?php //if($page != 1): ?>
<li><a href="http://www.front.io/427/page.php?p=1">首页</a></li>
<li><a href="http://www.front.io/427/page.php?p= <?php echo (($page-1)==0)? 1 : ($page-1);?>">上一页</a></li>
<!-- --><?php //endif; ?>
<!--中间页码-->
<?php for($i=1; $i<=$pages; $i++): ?>
<!------高亮显示当前页码----------->
<li> <a class="<?php if($_GET['p']==$i){echo 'active';}?>" href="http://www.front.io/427/page.php?p=<?php echo $i ?>"><?php echo $i ?></a></li>
<?php endfor; ?>
<!-- --><?php //if($page != $pages) :?>
<li><a href="http://www.front.io/427/page.php?p=<?php echo (($page+1)>$pages)?$pages:($page+1);
?>">下一页</a></li>
<li><a href="http://www.front.io/427/page.php?p=<?php echo $pages; ?>">尾页</a></li>
<!-- --><?php //endif; ?>
<li style="margin-left: 20px">
<!--实现页面的快速跳转-->
<form action="" method="get" id="form">
第
<select name="p" id="">
<?php for($i=1; $i<=$pages; $i++): ?>
<!-- 循环输出全部页码,并锁定当前页-->
<option value="<?php echo $i; ?>" <?php if($_GET['p']==$i){echo 'selected';} ?>><?php echo $i; ?></option>
<?php endfor; ?>
</select>
页
<button style="margin-left: 15px">跳转</button>
</form>
</li>
</ul>
</h3>
</div>
<?php require 'inc/footer.php'; ?>点击 "运行实例" 按钮查看在线实例
底部
<div class="footer"> <ul> <li><a href="">友情链接</a></li> <li>|</li> <li><a href="">站长留言</a></li> <li>|</li> <li><a href="">关于我们</a></li> </ul> </div> </body> </html>
点击 "运行实例" 按钮查看在线实例
封装的分页函数
<?php
/医院
*
*/
if (!function_exists('fun_page'))
{
function fun_page($db,$table,$page=1,$num=5){
$offset = ($page-1)*$num;
$sql = "SELECT * FROM {$table} LIMIT {$offset}, {$num};";
$res = mysqli_query($db,$sql);
$rows = mysqli_fetch_all($res,MYSQLI_ASSOC);
$number = mysqli_query($db,"SELECT COUNT(*) FROM {$table}");
list($total) = mysqli_fetch_row($number); //总记录数保存到变量$total中
$pages = ceil($total / $num); //获取到总页数 $pages
return ['rows'=>$rows, 'pages'=>$pages];
}
}点击 "运行实例" 按钮查看在线实例
数据库数据
运行结果
