Community Learn Tools Library Leisure
search
English
Home > List of blog posts > PHP实战: 人员管理系统(续)
Blogger Information
Blog 17
fans 1
comment 0
visits 14438
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
PHP实战: 人员管理系统(续)
zl的php学习博客
Original
2813 people have browsed it

该链接为这个实战的前置代码, 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. }
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post