![[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
在 PHP 分页导航的实践中，需要注意的细节真的很多，相对之前使用框架来做复杂太多。通过自己的慢慢学习还是把整个分页做下来，编辑和删除的交互也做好，如果 ajax 技术牛逼，效果更佳。
$dsn = "mysql:host=localhost;dbname=localhost;charset=utf8;port=3306";$username = 'root';$password = 'root';/* 连接 */try {$pdo = new PDO($dsn, $username, $password);$pdo->setAttribute(PDO::ATTR_DEFAULT_FETCH_MODE, PDO::FETCH_ASSOC);} catch (Exception $e) {die($e->getMessage());}
<?php/* 连接数据库 */require 'connect.php';/* 获取当前页码 */$page = isset($_GET['page']) ? $_GET['page'] : 1;/* 获取动作 */$action = isset($_GET['action']) ? $_GET['action'] : '';/* 获取用户 ID */$getId = isset($_GET['id']) ? $_GET['id'] : '';/* 通过 ID 获取用户名称 */if ($getId && $action != 'dodelete') {$userSql = "SELECT * FROM `users` WHERE `ID`={$getId}";$getUser = $pdo->query($userSql)->fetchAll();$getName = array_pop($getUser)['display_name'];}/**************************************************************** 获取用户数据**************************************************************//* 获取每页显示数量 */$num = 10;/* 获取总页数 */$sql = "SELECT CEIL( COUNT(`id`)/{$num} ) AS `total` FROM `users`";$pages = $pdo->query($sql)->fetch()['total'];/* 偏移量 */$offset = $num * ($page - 1);/* 当前数据 */$sql = "SELECT * FROM `users` LIMIT {$num} OFFSET {$offset} ";$users = $pdo->query($sql)->fetchAll();/**************************************************************** 获取用户数据 end**************************************************************//**************************************************************** 获取分页数据**************************************************************//* 显示多少分页 */$showPages = 9;/* 开始页 */$startPage = 1;/* 结束页 */$endPage = $pages;/* 偏移量，不能小于 $startendOffset 的值 */$offsetPage = ($showPages - 1) / 2;/* 前后页码各偏移3=前后各留出两个页码+一个省略的页码 */$startendOffset = 3;/* 最后留出的页码 */$endOffsetPage = $offsetPage + $startendOffset;/* 最后起始页码 */$endStartPage = $offsetPage * 2;// 只有当前分页条数量 < 总页数, 才有必要显示出省略标记if ($showPages < $pages) {if ($page > $offsetPage + $startendOffset) {$startOmit = '...';}/* 当前页大于偏移量 */if ($page > $offsetPage + $startendOffset) {$startPage = $page - $offsetPage;$endPage = $page + $offsetPage;if ($endPage > $pages) {$endPage = $pages;}} else {$startPage = 1;$endPage = $showPages;}/* 当前页+偏移量大于部页数 */if ($page + $offsetPage > $pages) {$startPage = $startPage - ($page + $offsetPage - $endPage);}/* 当前页码<=总页码-最后留出的页码 */if ($page <= $pages - $endOffsetPage) {/* 总页码>显示页码，当前页码+偏移量<总页码 */if ($pages > $showPages && $page + $offsetPage < $pages) {/* 显示省略 */$endOmit = '...';}} else {/* 开始页码=总页码-最后起始页码 */$startPage = $pages - $endStartPage;$endPage = $pages;}}/**************************************************************** 获取分页数据 end**************************************************************//**************************************************************** 输出提示**************************************************************//* 循环 */switch ($action) {/* 编辑 */case 'doedit':if ($getId) {$hint = sprintf('<strong>%s</strong> 用户资料更新成功！', $getName);} else {$hint = '没有用户资料被更新！';}break;/* 删除 */case 'dodelete':if ($getId) {$hint = '用户删除成功！';} else {$hint = '没有用户被删除！';}break;}/**************************************************************** 输出提示 end**************************************************************/?><!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://yfdxs.com/wp-content/themes/lensnews/assets/images/favicon.jpg" rel="shortcut icon" /><link rel="stylesheet" href="style.css"><title>分页</title></head><body><div class="container"><table class="user-table"><!-- 标题 --><caption>用户列表</caption><!-- 表头 --><thead><tr><th>ID</th><th>用户名</th><th>邮箱</th><th>网站</th><th>注册时间</th><th>操作</th></tr></thead><!-- 主体 --><tbody><?php foreach ($users as $key => $user):$user_url = $user['user_url'];$user_url = $user['user_url'] ? '<a href="' . $user_url . '" target="_blank">' . $user_url . '</a>' : '该用户没有网站';$user_email = $user['user_email'];$user_email = $user_email ? $user_email : '该用户没有邮箱';?><tr><td><?php echo $user['ID']; ?></td><td><?php echo $user['display_name']; ?></td><td><?php echo $user_email; ?></td><td><?php echo $user_url; ?></td><td><?php echo $user['user_registered']; ?></td><td><button class="button edit"onclick="location.href='handle.php?page=<?php echo $page ?>&action=edit&id=<?php echo $user['ID'] ?>'">编辑</button><button class="button delete"onclick="location.href='handle.php?page=<?php echo $page ?>&action=delete&id=<?php echo $user['ID'] ?>'">删除</button></td></tr><?php endforeach;?></tbody></table><!-- 分页 --><?php if ($pages > 1): $php_self = $_SERVER['PHP_SELF'];?><div class="pagination"><!-- 当前页码大于1才显示 --><?php if ($page > 1): ?><!-- 首页 --><a href="<?php echo $php_self . '?page=1'; ?>" class="page">首页</a><!-- 上一页 --><?php $prev = ($page == 1) ? 1 : $page - 1;?><a href="<?php echo $php_self . '?page=' . $prev; ?>" class="page">上一页</a><?php endif;?><!-- 前两页 --><?php if ($page > $offsetPage + $startendOffset): ?><!-- 循环 --><?php for ($i = 1; $i <= 2; $i++): $page_url = sprintf('%s?page=%s', $php_self, $i);?><a href="<?php echo $page_url; ?>" class="page"><?php echo $i; ?></a><?php endfor;?><?php endif;?><!-- 省略 --><?php if (isset($startOmit)): ?> <span class="page"><?php echo $startOmit; ?></span> <?php endif;?><!-- 循环 --><?php for ($i = $startPage; $i <= $endPage; $i++):$page_url = sprintf('%s?page=%s', $php_self, $i);$active = ($page == $i) ? ' active' : '';?><a href="<?php echo $page_url; ?>" class="page<?php echo $active; ?>"><?php echo $i; ?></a><?php endfor;?><!-- 循环 end --><!-- 省略 --><?php if (isset($endOmit)): ?> <span class="page"><?php echo $endOmit; ?></span> <?php endif;?><!-- 后两页 --><?php if ($page < $pages - $offsetPage - 2): ?><!-- 循环 --><?php for ($i = $pages - 1; $i <= $pages; $i++):$page_url = sprintf('%s?page=%s', $php_self, $i);?><a href="<?php echo $page_url; ?>" class="page"><?php echo $i; ?></a><?php endfor;?><?php endif;?><!-- 当前页码小于总页码才显示 --><?php if ($page < $pages): ?><!-- 下一页 --><?php $next = ($page >= $pages) ? $pages : $page + 1;?><a href="<?php echo $php_self . '?page=' . $next; ?>" class="page">下一页</a><!-- 尾页 --><a href="<?php echo $php_self . '?page=' . $pages; ?>" class="page"> 尾页</a><?php endif;?><!-- 页面跳转 --><form action="" method="get" class="jump-page"><input type="number" name="page" min="1" max="<?php echo $pages ?>"><button class="button jump">跳转</button></form></div><?php endif;?><!-- 提示，3秒后移除提示 --><?php echo isset($hint) ? '<div class="hint">' . $hint . '</div><script>window.onload=function(){ var hint = document.getElementsByClassName("hint")[0]; setTimeout( function(){hint.remove()}, 3000); }</script>' : ''; ?></div></body></html>
<?php/* 获取要编辑的用户信息 */$user = $pdo->query("SELECT * FROM `users` WHERE `ID`={$id}")->fetch();/* 链接 */$user_url = $user['user_url'];$user_url = $user['user_url'] ?? '';/* 邮箱 */$user_email = $user['user_email'];$user_email = $user_email ?? '';/* 获取当前页码 */$page = isset($_GET['page']) ? $_GET['page'] : 1;?><!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="style.css"><title>编辑用户信息</title></head><body><div class="container"><div class="edit-form"><h3>编辑用户信息</h3><form action="<?php echo $_SERVER['PHP_SELF'] . '?action=doedit&page=' . $page . '&id=' . $id ?>"method="post"><div><label for="name">姓名：</label><input type="text" id="name" name="name" value="<?php echo $user['display_name'] ?>" autofocus></div><div><label for="email">邮箱：</label><input type="text" id="email" name="email" value="<?php echo $user_email ?>"></div><div><label for="url">网站：</label><input type="text" id="url" name="url" value="<?php echo $user_url ?>"></div><div><input type="hidden" name="id" value="<?php echo $user['ID'] ?>"><button class="button save">保存更改</button></div></form></div></div></body></html>
<?php/* 获取要编辑的用户信息 */$user = $pdo->query("SELECT * FROM `users` WHERE `ID`={$id}")->fetch();/* 链接 */$user_url = $user['user_url'];$user_url = $user['user_url'] ? '<a href="' . $user_url . '" target="_blank">' . $user_url . '</a>' : '该用户没有网站';/* 邮箱 */$user_email = $user['user_email'];$user_email = $user_email ? $user_email : '该用户没有邮箱';/* 获取当前页码 */$page = isset($_GET['page']) ? $_GET['page'] : 1;?><!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="style.css"><title>删除用户</title></head><body class="delete-user"><div class="container"><table class="user-table"><!-- 标题 --><caption>删除 <?php echo $user['display_name']; ?></caption><!-- 表头 --><thead><tr><th>ID</th><th>用户名</th><th>邮箱</th><th>网站</th><th>注册时间</th></tr></thead><!-- 主体 --><tbody><tr><td><?php echo $user['ID']; ?></td><td><?php echo $user['display_name']; ?></td><td><?php echo $user_email; ?></td><td><?php echo $user_url; ?></td><td><?php echo $user['user_registered']; ?></td></tr></tbody></table><a href="<?php echo 'handle.php?action=dodelete&page=' . $page . '&id=' . $user['ID'] ?>"class="button delete">确定删除</a></div></body></html>
<?php/* 连接数据库 */require 'connect.php';/* 获取用户 ID */$id = isset($_GET['id']) ? $_GET['id'] : '';$action = isset($_GET['action']) ? $_GET['action'] : '';/* 获取当前页码 */$page = isset($_GET['page']) ? $_GET['page'] : 1;/* 循环 */switch ($action) {/* 进入编辑字段表单页面 */case 'edit':include 'edit.php';break;/* 修改并保存编辑用户表单中的数据 */case 'doedit':$sql = 'UPDATE `users` SET `display_name`=:name, `user_email`=:email, `user_url`=:url WHERE `ID`=:id';$stmt = $pdo->prepare($sql);$stmt->execute($_POST);/* 判断是否修改 */if ($stmt->rowCount() === 1) {echo '<script>alert("更新成功");location.href="pages.php?action=doedit&page=' . $page . '&id=' . $id . '";</script>';} else {echo '<script>alert("更新失败或没有内容被修改");location.href="pages.php?action=doedit&page=' . $page . '&id=0";</script>';}break;/* 预览要删除的用户 */case 'delete':include 'delete.php';break;/* 执行要删除的用户 */case 'dodelete':$sql = "DELETE FROM `users` WHERE `ID`={$id}";$stmt = $pdo->query($sql);if ($stmt->rowCount() === 1) {echo '<script>alert("删除成功");location.href="pages.php?action=dodelete&page=' . $page . '&id=' . $id . '";</script>';} else {echo '<script>alert("删除失败");location.href="pages.php?action=dodelete&page=' . $page . '&id=0";</script>';}break;}
@charset "utf-8";/*************************************************变量**************************************************//* 默认颜色 */$color:#667eea;/* 鼠标经过颜色 */$hoverColor:#4c51bf;/* 标题 */$titleColor: #1a202c;/* 描边 */$borderColor: #edf2f7;/* 表格头部背景 */$headerColor: #ebf4ff;/* 表格行背景 */$rowColor:#f7fafc;/* 当前页码颜色 */$currentColor: #bd7886;/*************************************************全局设置**************************************************/html,body,body * {margin: 0;padding: 0;border: 0;background: transparent;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}/* 标题 */h3 {font-size: 28px;line-height: 28px;color: $titleColor;letter-spacing: 2px;}/* 输入框默认样式 */input {border: 1px solid $borderColor;background-color: $rowColor;padding: 10px;width: 100%;min-width: 60px;&:focus {border-color: $color;}}/* 去除浏览器默认样式 */button,input {-webkit-appearance: none;-moz-appearance: none;appearance: none;outline: none;border-radius: 0;cursor: pointer;&:focus {outline: 0;}}/* a标签颜色 */a {color: $color;&:hover {color: $hoverColor;}}/* 去除 A 标签下划线 */a,a:active,a:hover {outline: 0;text-decoration: none;}/* 元素动画 */button,input,a {-moz-transition: ease-in-out 0.5s;-webkit-transition: ease-in-out 0.5s;-o-transition: ease-in-out 0.5s;-ms-transition: ease-in-out 0.5s;transition: ease-in-out 0.5s;}/* body 样式 */body {font-size: 12px;overflow-x: hidden;overflow-y: scroll;line-height: 24px;color: #718096;background-color: #f7fafc;font-family: "PingFang SC", "Microsoft Yahei", "Helvetica Neue", Helvetica, STHeiTi, sans-serif;}/****************************************************通用样式****************************************************//* 高度100% */html,body {height: 100%;}body {display: flex;justify-content: center;align-items: center;}/* 容器 */.container {background-color: #fff;box-shadow: 0 1px 6px rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06);padding: 120px;border-radius: 6px;/* 提示 */.hint {margin-top: 30px;text-align: center;padding: 12px;background-color: $rowColor;color: $color;}}/* 按钮 */.button {border-radius: 4px;padding: 8px 20px;color: #ffffff;display: inline-block;/* 保存 */&.jump,/* 保存 */&.save,/* 编辑 */&.edit {background-color: $color;}/* 删除 */&.delete {background-color: $titleColor;}&:hover {background-color: $hoverColor;color: #ffffff;}}/****************************************************通用样式 end****************************************************//****************************************************表格****************************************************/.user-table {border-top: 1px $borderColor solid;border-left: 1px $borderColor solid;width: 100%;border-spacing: 0;font-size: 12px;/* 表格标题 */caption {font-size: 32px;color: $titleColor;line-height: 36px;margin-bottom: 60px;}td,th {border-right: 1px $borderColor solid;border-bottom: 1px $borderColor solid;padding: 8px 16px;}/* 头部 */thead {background-color: $headerColor;}/*标题*/th {font-weight: bold;white-space: nowrap;font-size: 14px;color: $titleColor;}/* 隔行区分背景 */tbody tr:nth-child(2n) {background-color: $rowColor;}/* 按钮 */.button {margin: 0 3px;}}/****************************************************表格 end****************************************************//****************************************************分页****************************************************/.pagination {margin-top: 30px;text-align: center;span,a {border: 1px solid $borderColor;min-width: 32px;height: 32px;display: inline-block;line-height: 32px;padding: 0 8px;border-radius: 4px;margin: 0 2px;}a {color: #718096;/* 当前页码和鼠标经过 */&.page {&:hover,&.active {color: #fff;background-color: $currentColor;border-color: $currentColor;}}}/* 页面跳转 */form.jump-page {display: inline-block;vertical-align: middle;input {width: 42px;height: 32px;}}}/****************************************************分页 end****************************************************//****************************************************表单****************************************************/.edit-form {/* 表单 */form {min-width: 300px;}/* 模块 */div {margin-top: 12px;}/* 标题 */h3 {margin-bottom: 60px;text-align: center;}/* 按钮 */.save {width: 100%;padding: 12px;}}/****************************************************表单 end****************************************************//****************************************************删除用户****************************************************/body.delete-user {a.delete {margin-top: 20px;width: 120px;display: block;margin: 20px auto 0;text-align: center;}}/****************************************************删除用户 end****************************************************/