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

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

效果

效果图

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

  • job
    • config
      • config.php
      • connect.php
    • controller
      • handle.php 修改
      • delete.php
      • select.php
      • update.php
    • pure-css3-icons
      • icono.min.css
    • event.js
    • style.css
    • index.php 修改
    • 数据表
    • 数据表1 用户表 新增
    • user-operation.js 新增
    • user-style.css 新增

controller" class="reference-link"><span id="1.2">controller</span>

handle.php" class="reference-link"><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. }

index.php" class="reference-link"><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>

数据表" class="reference-link"><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');

user-operation.js" class="reference-link"><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. }

user-style.css" class="reference-link"><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. }

更多相关文章

  1. 【asp.net core 系列】- 11 Service层的实现样板
  2. 辣鸡，使用CAS机制完成SSO
  3. cookie在二级域名间共享完成sso
  4. 详解微信小程序登录wx.login(Object object)
  5. 【Nest教程】Nest项目配置邮件服务器，实现发送邮件
  6. 功能测试——app测试要点最全分析
  7. 克隆虚拟机和相互登录
  8. 一套简单通用的Java后台管理系统，拿来即用，非常方便（附项目地址）
  9. 最新工具：某网盘不限速下载器KinhDown，下载速度可达10MB/S

随机推荐

  1. Android(安卓)EditText限制输入两位小数
  2. Android开发网上的一些重要知识点_2
  3. Android(安卓)Notification 基础
  4. android点击事件穿透
  5. Android(安卓)aidl Binder框架浅析
  6. android 笔记 --- 相机应用
  7. aFinal框架
  8. android开发技巧精髓十
  9. Android(安卓)Volley完全解析(二)，使用Vol
  10. android (20)