亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

搜索
博主信息
博文 17
粉絲 1
評論 0
訪問量 17743
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
PHP實戰(zhàn): 人員管理系統(tǒng)(續(xù))
zl的php學習博客
原創(chuàng)
3067人瀏覽過

該鏈接為這個實戰(zhàn)的前置代碼, http://ipnx.cn/blog/detail/26509.html

在上次的基礎上添加了登錄,注冊,退出登錄的功能(有簡單的驗證,如郵箱格式), 并且實現(xiàn)了一個簡單的權限管理(用戶沒有登錄的情況下只能查看,不能操作).

效果

效果圖

在之前的目錄結構上新加了兩個文件,修改了兩個文件:

<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' => '登錄失敗, 數(shù)據(jù)庫中沒有該用戶,請注冊!']);
  34.             }
  35.         } else {
  36.             echo json_encode(['code' => $stmt->errorInfo()[0], 'message' => '未知錯誤, 請聯(lián)系管理員. : ' . $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' => '未知錯誤,請聯(lián)系管理員!']);
  60.             }
  61.         } else {
  62.             echo json_encode(['code' => -20003, 'message' => '注冊失敗, 該郵箱已經(jīng)注冊過了!']);
  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">數(shù)據(jù)表</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 '創(chuàng)建時間',
  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. }
批改老師：天蓬老師天蓬老師

批改狀態(tài)：合格

老師批語：
本博文版權歸博主所有，轉載請注明地址！如有侵權、違法，請聯(lián)系admin@php.cn舉報處理！
全部評論 文明上網(wǎng)理性發(fā)言，請遵守新聞評論服務協(xié)議
0條評論
作者最新博文
關于我們 免責申明 意見反饋 講師合作 廣告合作 最新更新
php中文網(wǎng)：公益在線php培訓，幫助PHP學習者快速成長！
關注服務號 技術交流群
PHP中文網(wǎng)訂閱號
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時隨地碎片化學習
PHP中文網(wǎng)抖音號
發(fā)現(xiàn)有趣的

Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號

    • 登錄PHP中文網(wǎng)，和優(yōu)秀的人一起學習！
    全站2000+教程免費學