微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > 博客列表 > PHP实战: 人员管理系统(续)
博主信息
博文 17
粉丝 1
评论 0
访问量 18123
专题推荐
更多>
相关推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
PHP实战: 人员管理系统(续)
zl的php学习博客
原创
3098人浏览过

该链接为这个实战的前置代码, https://www.php.cn/blog/detail/26509.html

在上次的基础上添加了登录,注册,退出登录的功能(有简单的验证,如邮箱格式), 并且实现了一个简单的权限管理(用户没有登录的情况下只能查看,不能操作).

效果

效果图

在之前的目录结构上新加了两个文件,修改了两个文件:

<span id="1.2">controller</span>

<span id="1.2.1">handle.php</span>
  1. <?php
  2. session_start();
  4. $handle = $_GET['handle'] ?? $_POST['handle'] ?? 'select';
  6. //var_dump($_POST);
  7. //echo $handle;
  8. //die();
  9. switch ($handle) {
  10.     case 'select':
  11.         require __DIR__ . '/select.php';
  12.         break;
  13.     case 'update':
  14.         require __DIR__ . '/update.php';
  15.         break;
  16.     case 'delete':
  17.         require __DIR__ . '/delete.php';
  18.         break;
  19.     case 'login':
  20.         require dirname(__DIR__) . '../config/connect.php';
  22.         $pdo = connect();
  23.         $sql = "SELECT email FROM `users` WHERE email=? AND password=md5(?);";
  24.         $stmt = $pdo->prepare($sql);
  25.         if ($stmt->execute([$_POST['email'], $_POST['password']])) {
  26.             $data = $stmt->fetch();
  27.             if (is_array($data) && count($data) === 1) {
  28.                 // 登录成功, 写入session
  29.                 $_SESSION['email'] = $_POST['email'];
  30.                 // 返回响应
  31.                 echo json_encode(['code' => 0, 'message' => '登录成功, 正在刷新页面....']);
  32.             } else {
  33.                 echo json_encode(['code' => -20005, 'message' => '登录失败, 数据库中没有该用户,请注册!']);
  34.             }
  35.         } else {
  36.             echo json_encode(['code' => $stmt->errorInfo()[0], 'message' => '未知错误, 请联系管理员. : ' . $stmt->errorInfo()[1]]);
  37.         }
  38.         break;
  39.     case 'register':
  40.         require dirname(__DIR__) . '../config/connect.php';
  42.         $pdo = connect();
  43.         $stmt = $pdo->prepare("SELECT email From `users`");
  44.         $stmt->bindColumn('email', $email);
  45.         $stmt->execute();
  46.         $emailAyy = [];
  47.         while ($stmt->fetch(PDO::FETCH_BOUND)) {
  48.             $emailAyy[] = $email;
  49.         }
  50.         if (!in_array($_POST['email'], $emailAyy)) {
  51.             $sql = "INSERT `users` SET username=?, email=?,password=md5(?)";
  52.             $stmt = $pdo->prepare($sql);
  53.             $stmt->execute([$_POST['username'], $_POST['email'], $_POST['password']]);
  54.             if ($stmt->rowCount() === 1) {
  55.                 // 注册成功,自动登录
  56.                 $_SESSION['email'] = $_POST['email'];
  57.                 echo json_encode(['code' => 0, 'message' => '注册成功,正在跳转....']);
  58.             } else {
  59.                 echo json_encode(['code' => 20004, 'message' => '未知错误,请联系管理员!']);
  60.             }
  61.         } else {
  62.             echo json_encode(['code' => -20003, 'message' => '注册失败, 该邮箱已经注册过了!']);
  63.         }
  64.         break;
  65.     case 'logout':
  66.         // 清空session
  67.         session_unset();
  68.         // 删除session文件
  69.         session_destroy();
  70.         // 退出登录成功
  71.         echo json_encode(['code' => 0, 'message' => '退成登录成功!']);
  72.         break;
  73.     default:
  74.         exit('未知错误');
  75. }

<span id="1.6">index.php</span>

  1. <?php session_start(); ?>
  2. <!DOCTYPE html>
  3. <html lang="en">
  5.     <head>
  6.         <meta charset="UTF-8">
  7.         <title>信息管理</title>
  8.         <link rel="stylesheet" href="./pure-css3-icons/icono.min.css">
  9.         <link rel="stylesheet" href="./style.css">
  10.         <link rel="stylesheet" href="./user-style.css">
  11.     </head>
  13.     <body>
  14.         <header>
  15.             <a href="#">首页</a>
  16.             <nav class="user-operation">
  17.                 <?php if (!isset($_SESSION['email'])): ?>
  18.                     <a data-handle="login">登录</a>
  19.                     <a data-handle="register">注册</a>
  20.                 <?php else: ?>
  21.                     <span><?= $_SESSION['email'] ?></span>
  22.                     <a data-handle="logout">退出登录</a>
  23.                 <?php endif; ?>
  24.             </nav>
  25.         </header>
  26.         <table>
  27.             <caption>信息管理</caption>
  28.             <thead>
  29.             <tr>
  30.                 <th>序号</th>
  31.                 <th>姓名</th>
  32.                 <th>性别</th>
  33.                 <th>年龄</th>
  34.                 <th>生日</th>
  35.                 <th>工资</th>
  36.                 <th>添加时间</th>
  37.                 <th>修改时间</th>
  38.                 <?php if (!empty($_SESSION['email'])) : ?>
  39.                     <th>操作</th>
  40.                 <?php endif; ?>
  41.             </tr>
  42.             </thead>
  43.             <tbody class="tbody"></tbody>
  44.         </table>
  45.         <div class="paging"></div>
  47.         <div class="masking">
  48.             <div class="del-confirm">
  49.                 <header>
  50.                     <h3>警告</h3>
  51.                     <button onclick="delMaskingClose()"><i class="icono-cross"></i></button>
  52.                 </header>
  53.                 <masking-body>
  54.                     确定删除
  55.                 </masking-body>
  56.                 <footer>
  57.                     <button onclick="delMaskingClose()">取消</button>
  58.                     <button onclick="delMaskingConfirm()">确定</button>
  59.                 </footer>
  60.             </div>
  61.             <div class="edit-confirm">
  62.                 <header>
  63.                     <h3>编辑</h3>
  64.                     <button onclick="editMaskingClose()"><i class="icono-cross"></i></button>
  65.                 </header>
  66.                 <masking-body class="edit-form">
  67.                 </masking-body>
  68.                 <footer>
  69.                     <button onclick="editMaskingClose()">取消</button>
  70.                     <button onclick="editMaskingConfirm()">确定</button>
  71.                 </footer>
  72.             </div>
  73.         </div>
  75.         <div class="user-masking">
  76.             <div class="user-login" style="display: block">
  77.                 <header>
  78.                     <h3>登录</h3>
  79.                     <button onclick="userMaskingClose()"><i class="icono-cross"></i></button>
  80.                 </header>
  81.                 <masking-body>
  82.                     <form id="login">
  83.                         <label for="email">邮箱: </label>
  84.                         <input type="email" name="email" id="email" required>
  85.                         <label for="password">密码: </label>
  86.                         <input type="password" name="password" id="password">
  87.                         <button type="button" class="user-submit" data-handle="login">登录</button>
  88.                         <span class="tip"></span>
  90.                         <a class="no-account">没有账号? 点击注册</a>
  91.                     </form>
  92.                 </masking-body>
  93.             </div>
  94.             <div class="user-register">
  95.                 <header>
  96.                     <h3>注册</h3>
  97.                     <button onclick="userMaskingClose()"><i class="icono-cross"></i></button>
  98.                 </header>
  99.                 <masking-body>
  100.                     <form id="register">
  101.                         <label for="username">用户名: </label>
  102.                         <input type="text" name="username" id="username">
  103.                         <label for="email">邮箱: </label>
  104.                         <input type="email" name="email" id="email">
  105.                         <label for="password">密码: </label>
  106.                         <input type="password" name="password" id="password">
  107.                         <label for="password1">确认密码: </label>
  108.                         <input type="password" name="password1" id="password1">
  109.                         <button type="button" class="user-submit" data-handle="register">注册</button>
  110.                         <span class="tip"></span>
  112.                         <a class="account">已有账号? 点击登录</a>
  113.                     </form>
  114.                 </masking-body>
  115.             </div>
  116.         </div>
  118.         <script src="./event.js"></script>
  119.         <script src="./user-operation.js"></script>
  120.     </body>
  122. </html>

<span id="1.8">数据表</span>

  1. /*
  2. Navicat MySQL Data Transfer
  4. Source Server         : php_test
  5. Source Server Version : 50726
  6. Source Host           : localhost:3306
  7. Source Database       : phpedu
  9. Target Server Type    : MYSQL
  10. Target Server Version : 50726
  11. File Encoding         : 65001
  13. Date: 2021-03-02 17:04:52
  14. */
  16. SET FOREIGN_KEY_CHECKS=0;
  18. -- ----------------------------
  19. -- Table structure for users
  20. -- ----------------------------
  21. DROP TABLE IF EXISTS `users`;
  22. CREATE TABLE `users` (
  23.   `uid` int(10) unsigned NOT NULL AUTO_INCREMENT,
  24.   `username` varchar(100) COLLATE utf8mb4_unicode_ci NOT NULL COMMENT '用户名',
  25.   `email` varchar(100) COLLATE utf8mb4_unicode_ci NOT NULL COMMENT '邮箱',
  26.   `password` varchar(150) COLLATE utf8mb4_unicode_ci NOT NULL COMMENT '密码',
  27.   `create_d` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
  28.   PRIMARY KEY (`uid`),
  29.   UNIQUE KEY `unique_email` (`email`)
  30. ) ENGINE=InnoDB AUTO_INCREMENT=3 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
  32. -- ----------------------------
  33. -- Records of users
  34. -- ----------------------------
  35. INSERT INTO `users` VALUES ('1', 'admin', 'admin@qq.com', 'e10adc3949ba59abbe56e057f20f883e', '2021-03-02 16:28:15');
  36. INSERT INTO `users` VALUES ('2', 'zhangsan', 'zhangsan@qq.com', 'e10adc3949ba59abbe56e057f20f883e', '2021-03-02 16:43:23');

<span id="1.9">user-operation.js</span>

  1. const form = document.forms;
  2. const xhr = new XMLHttpRequest();
  4. const loginEmail = document.querySelector('#login #email');
  5. const loginPassword = document.querySelector('#login #password');
  6. const registerUsername = document.querySelector('#register #username');
  7. const registerEmail = document.querySelector('#register #email');
  8. const registerPassword = document.querySelector('#register #password');
  9. const registerPassword1 = document.querySelector('#register #password1');
  11. const loginTip = document.querySelector('#login .tip');
  12. const registerTip = document.querySelector('#register .tip');
  15. xhr.responseType = 'json';
  17. [loginEmail, loginPassword, registerUsername, registerEmail, registerPassword, registerPassword1]
  18. .forEach(item => item.oninput = () => [loginTip, registerTip].forEach(it => it.innerHTML = null));
  20. document.querySelector('.user-operation').addEventListener('click', function (ev) {
  21.     ev.preventDefault();
  22.     console.log(ev.target.getAttribute('data-handle'));
  24.     switch (ev.target.getAttribute('data-handle')) {
  25.         case 'login':
  26.             document.querySelector('.user-masking').style.display = 'block';
  27.             document.querySelector('.user-login').style.display = 'block';
  28.             break;
  29.         case 'register':
  30.             document.querySelector('.user-masking').style.display = 'block';
  31.             document.querySelector('.user-register').style.display = 'block';
  32.             break;
  33.         case 'logout':
  34.             xhr.open('post', './Controller/handle.php?handle=logout');
  35.             xhr.onload = () => {
  36.                 console.log(xhr.response);
  37.                 if (xhr.response.code === 0) {
  38.                     alert(xhr.response.message);
  39.                     location.href = 'index.php';
  40.                 }
  41.             };
  42.             xhr.onerror = (error) => console.log(error);
  43.             xhr.send();
  44.             break;
  45.         default:
  46.             alert('未知错误');
  47.     }
  48. });
  50. document.querySelectorAll('.user-submit').forEach(item => item.addEventListener('click', function (ev) {
  51.     console.log(ev.target.getAttribute('data-handle'));
  52.     switch (ev.target.getAttribute('data-handle')) {
  53.         case 'login':
  54.             login();
  55.             break;
  56.         case 'register':
  57.             register();
  58.             break;
  59.         default:
  60.             alert('未知错误');
  61.     }
  62. }));
  64. /**
  65.  * 登录方法
  66.  */
  67. function login() {
  68.     const login = form.login;
  70.     if (login.email.value.trim().length > 0) { // 判断邮箱是否有值
  71.         // 判断邮箱格式是否正确
  72.         if (/^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/.test(login.email.value.trim())) {
  73.             if (login.password.value.trim().length > 0) { // 判断密码是否有值
  74.                 const formData = new FormData(login);
  75.                 formData.append('handle', 'login');
  77.                 xhr.open('post', './Controller/handle.php');
  78.                 xhr.onload = () => {
  79.                     console.log(xhr.response);
  80.                     loginTip.innerHTML = xhr.response.message;
  81.                     if (xhr.response.code === 0) {
  82.                         setTimeout(() => location.href = 'index.php', 2000);
  83.                     }
  84.                 };
  85.                 xhr.onerror = (error) => console.log(error);
  86.                 xhr.send(formData);
  87.             } else {
  88.                 loginTip.innerHTML = '请输入密码!';
  89.                 login.password.focus();
  90.             }
  91.         } else {
  92.             loginTip.innerHTML = '请输入正确格式的邮箱!';
  93.             login.email.focus();
  94.         }
  95.     } else {
  96.         loginTip.innerHTML = '请输入邮箱!';
  97.         login.email.focus();
  98.     }
  99. }
  101. /**
  102.  * 注册方法
  103.  */
  104. function register() {
  105.     const register = form.register;
  106.     console.log(register);
  107.     if (register.username.value.trim().length > 0) { // 判断用户名是否有值
  108.         if (register.email.value.trim().length > 0) { // 判断邮箱是否有值
  109.             // 判断邮箱格式是否正确
  110.             if (/^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/.test(register.email.value.trim())) {
  111.                 if (register.password.value.trim().length > 0) {// 判断密码是否有值
  112.                     if (register.password.value.trim() === register.password1.value.trim()) { // 判断两次密码是否相同
  113.                         const formData = new FormData(register);
  114.                         formData.delete('password1');
  115.                         formData.append('handle', 'register');
  117.                         xhr.open('post', './Controller/handle.php');
  118.                         xhr.onload = () => {
  119.                             console.log(xhr.response);
  120.                             registerTip.innerHTML = xhr.response.message;
  121.                             if (xhr.response.code === 0) {
  122.                                 setTimeout(() => location.href = 'index.php', 2000);
  123.                             }
  124.                         };
  125.                         xhr.onerror = (error) => console.log(error);
  126.                         xhr.send(formData);
  127.                     } else {
  128.                         registerTip.innerHTML = '请保证二次输入的密码和依次输入的密码相同!';
  129.                         register.password.focus();
  130.                     }
  131.                 } else {
  132.                     registerTip.innerHTML = '请输入密码!';
  133.                     register.password.focus();
  134.                 }
  135.             } else {
  136.                 registerTip.innerHTML = '请输入正确格式的邮箱!';
  137.                 register.email.focus();
  138.             }
  139.         } else {
  140.             registerTip.innerHTML = '请输入邮箱!';
  141.             register.email.focus();
  142.         }
  143.     } else {
  144.         registerTip.innerHTML = '请输入用户名';
  145.         register.username.focus();
  146.     }
  147. }
  150. document.querySelector('.no-account').addEventListener('click', function (ev) {
  151.     document.querySelector('.user-login').style.display = 'none';
  152.     document.querySelector('.user-register').style.display = 'block';
  153. });
  154. document.querySelector('.account').addEventListener('click', function (ev) {
  155.     document.querySelector('.user-login').style.display = 'block';
  156.     document.querySelector('.user-register').style.display = 'none';
  157. });
  159. function userMaskingClose() {
  160.     document.querySelector('.user-masking').style.display = 'none';
  161.     document.querySelector('.user-login').style.display = 'none';
  162.     document.querySelector('.user-register').style.display = 'none';
  163. }

<span id="1.10">user-style.css</span>

  1. body > header {
  2.     display: flex;
  3.     align-self: stretch;
  4.     padding: 0.5em 1em;
  5.     background-color: #333333;
  6. }
  7. body > header > a {
  8.     color: #bbbbbb;
  9. }
  10. body > header > nav {
  11.     margin-left: auto;
  12. }
  13. body > header > nav a {
  14.     color: #bbbbbb;
  15. }
  16. body > header a:hover {
  17.     color: #ffffff;
  18.     cursor: pointer;
  19. }
  21. .user-masking {
  22.     position: fixed;
  23.     top: 0;
  24.     right: 0;
  25.     bottom: 0;
  26.     left: 0;
  27.     background-color: rgba(0, 0, 0, .5);
  28.     display: none;
  29. }
  30. .user-masking .user-login,
  31. .user-masking .user-register {
  32.     width: 446px;
  33.     height: 272px;
  34.     background-color: #f4eded;
  35.     border-radius: 1em;
  36.     position: absolute;
  37.     margin: auto;
  38.     top: 0;
  39.     right: 0;
  40.     bottom: 0;
  41.     left: 0;
  42.     display: none;
  43. }
  44. .user-masking .user-register{
  45.     height: 342px;
  46. }
  48. .user-masking header {
  49.     display: flex;
  50.     justify-content: space-between;
  51.     align-items: center;
  52.     padding: 8px 16px;
  53.     border-bottom: 1px solid #3a3a3a;
  54. }
  56. .user-masking header button {
  57.     background-color: transparent;
  58.     border: none;
  59.     height: 34px;
  60.     width: 50px;
  61.     cursor: pointer;
  62. }
  64. .user-masking masking-body {
  65.     height: calc(100% - 50px);
  66.     display: block;
  67.     padding: 16px;
  68. }
  70. .user-masking masking-body form > label {
  71.     /*place-self: center;*/
  72.     text-align: left;
  73.     line-height: 2em;
  74. }
  76. .user-masking masking-body form > input{
  77.     padding: 0 .5em;
  78.     line-height: 2em;
  79. }
  81. .user-masking masking-body form {
  82.     display: grid;
  83.     gap: .5em 0;
  84.     width: 100%;
  85.     padding: 1em 1em;
  86.     grid-template-columns: 4.5em 1fr;
  87. }
  89. .user-submit{
  90.     grid-area: span 1 / span 2;
  91.     place-self: center;
  93.     border: none;
  94.     border-radius: .25em;
  95.     background-color: #3485FB;
  96.     padding: .5em 1em;
  97. }
  99. .tip{
  100.     grid-area: span 1 / span 2;
  101.     place-self: center;
  102. }
  103. .no-account,
  104. .account{
  105.     grid-area: span 1 / span 2;
  106.     place-self: center;
  107. }
  108. .no-account:hover,
  109. .account:hover{
  110.     color: #7f007f;
  111.     cursor: pointer;
  112. }
批改老师：天蓬老师天蓬老师

批改状态：合格

老师批语：
本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！
全部评论 文明上网理性发言，请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部
    • 登录PHP中文网，和优秀的人一起学习！
    全站2000+教程免费学
    微信扫码登录