![[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">
<title>最新影视剧介绍</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid black;
}
thead > tr{
background-color: lightblue;
}
ul, li {
padding: 0;
margin: 5px auto;
list-style: none;
text-align: center;
overflow: hidden;
}
a {
display: inline-block;
width: 30px;
height: 20px;
border: 1px solid black;
margin-left: 3px;
text-decoration: none;
}
li:hover {
background-color: lightblue;
cursor: pointer;
}
/*设置当前页高亮样式*/
.active {
background-color: lightblue;
}
</style>
</head>
<body>
<table>
<caption>最新影视剧介绍</caption>
<thead>
<tr>
<th>序号</th>
<th>片名</th>
<th>简介</th>
</tr>
</thead>
<tbody id>
<!-- 这里显示影视信息列表-->
</tbody>
</table>
<ul>
</ul>
</body>
</html>
<script>
// 获取表格显示区
var tbody = document.getElementsByTagName('tbody').item(0);
// 获取页码显示区
var ul = document.getElementsByTagName('ul').item(0);
// 当前页码: 默认显示第一页
var p = <?=$_GET['p'] ?? 1?>;
// 创建 Ajax对象
var request = new XMLHttpRequest();
// 监听文档的load事件,在页面加载完成后通过Ajax方式获取数据
window.addEventListener('load', showData, false);
// load事件方法
function showData() {
// 监听Ajax成功回调
request.addEventListener('readystatechange', getData, false);
// 配置请求
request.open('GET', 'get_movies.php?p='+p, true);
// 发送请求
request.send(null);
}
function getData() {
if (request.readyState === 4) {
// console.log(request.responseText);
// 1. 获取Ajax返回的数据并解析为JavaScript变量
var obj = JSON.parse(request.responseText);
var pages = obj['pages'];
var movies = obj['movies'];
// 2. 生成表格数据
var str = '';
movies.forEach(function (movie) {
str += '<tr>';
str += '<td>' + movie['mov_id']+ '</td>';
str += '<td>' + movie.name+ '</td>';
str += '<td>' + movie.detail+ '</td>';
str += '</tr>';
});
// 将数据添加到表格中
tbody.innerHTML = str;
// 上一页
if (p === 1){
ul.innerHTML += '<a href="?p=1" class="'+ active +'">' + '《' + '</a>';
}else{
ul.innerHTML += '<a href="?p='+(p-1)+'" class="'+ active +'">' + '《' + '</a>';
}
// 3. 生成页码
for (var i = 1; i <= pages; i++) {
// 设置当前页码是否高亮?
var active = (i === p) ? 'active' : '';
ul.innerHTML += '<a class="'+ active +'">' + i + '</a>';
}
// 下一页
if (p != pages){
ul.innerHTML += '<a href="?p='+(p+1)+'">' + '》' + '</a>';
}else{
ul.innerHTML += '<a href="?p='+pages+'">' + '》' + '</a>';
}
// 判断p大于总页码数&&并且小于1，跳转到页面为1的页面
if (p > pages || p < 1) {
location.assign('?p=1');
}
}
}
// 给页码添加点击事件
ul.addEventListener('click', set_page, false);
function set_page(ev) {
console.log(ev.target.innerText);
location.search = '?p=' + ev.target.innerText;
}
// 作业:
// 添加上一下, 下一页功能, 注意判断页码越界的问题, 例如到了第一页再前翻怎么处理, 到了最后一页再后翻如何处理?
</script>点击 "运行实例" 按钮查看在线实例
<?php
// 获取当前要显示的页数
$page = intval($_GET['p'] ?? 1);
$pdo = new PDO('mysql:dbname=php', 'root', 'root');
// 每页显示数量
$num = 5;
// 总页数: 需要分二步, 第一求出总记录数量, 第二总记录数量除以每页显示的记录数量,再向上取整
$sql = "SELECT CEIL(COUNT(`mov_id`)/{$num}) FROM `movies`";
$stmt = $pdo->prepare($sql);
$stmt->execute();
$pages = $stmt->fetchColumn(0);
// 每页的显示起止位置: 偏移量
// 偏移量 = 当前显示数量 * (当前页码 - 1)
$offset = $num * ($page - 1);
$sql = "SELECT `mov_id`,`name`, CONCAT(LEFT(`detail`,20),'...') AS `detail` FROM `movies` LIMIT {$num} OFFSET {$offset} ";
$stmt = $pdo->prepare($sql);
$stmt->execute();
$movies = $stmt->fetchAll(PDO::FETCH_ASSOC);
echo json_encode(['pages'=>$pages, 'movies'=>$movies]);点击 "运行实例" 按钮查看在线实例