员工管理添加登录验证 - 注册 - 管理授权

作业内容：将上周的员工管理系统加上登录验证功能，实现一个功能相对完整的：员工管理系统“，试试看，你行的

1. staffs 表添加 password 字段和密码为 md5 字段 id 的值作测试

  1. alter table staffs add password varchar(128) not null after name;
  2. update staffs set password = md5(id);

2. 添加前端静态页 0302.html

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>员工管理系统</title>
  9.     <link rel="stylesheet" href="style.css">
  10.     <style>
  11.         body {
  12.             margin: 0;
  13.         }
  15.         header {
  16.             display: flex;
  17.             width: 90%;
  18.             justify-content: space-between;
  19.             background-color: #333;
  20.             padding: 0.5em 1em;
  21.         }
  23.         header a {
  24.             color: #bbb;
  25.             text-decoration: none;
  26.         }
  28.         header a:hover {
  29.             color: white;
  30.         }
  32.         header nav {
  33.             margin-left: auto;
  34.         }
  35.     </style>
  36. </head>
  38. <body>
  39.     <header>
  40.         <a href="">首页</a>
  41.         <!-- 登录注册渲染区 -->
  42.         <nav></nav>
  43.     </header>
  45.     <table>
  46.         <caption>员工管理系统</caption>
  47.         <!-- 表头渲染区 -->
  48.         <thead></thead>
  49.         <!-- 数据渲染区 -->
  50.         <tbody></tbody>
  51.     </table>
  53.     <!-- 分页渲染区 -->
  54.     <p></p>
  56.     <!-- 模态框编辑区 -->
  57.     <div class="modal edit">
  58.         <div class="modal-drop"></div>
  59.         <div class="modal-body">
  60.             <button class="close">关闭</button>
  61.             <form name="editform">
  62.                 <table>
  63.                     <caption>员工信息编辑</caption>
  64.                     <tbody>
  65.                         <tr>
  66.                             <td>姓名</td>
  67.                             <td><input type="text" value="" name="name"></td>
  68.                         </tr>
  69.                         <tr>
  70.                             <td>性别</td>
  71.                             <td>
  72.                                 <select name="gender">
  73.                                     <option value="male" selected>男</option>
  74.                                     <option value="female">女</option>
  75.                                 </select>
  76.                             </td>
  77.                         </tr>
  78.                         <tr>
  79.                             <td>工资</td>
  80.                             <td><input type="text" value="" name="salary"></td>
  81.                         </tr>
  82.                         <tr>
  83.                             <td>邮箱</td>
  84.                             <td><input type="text" value="" name="email"></td>
  85.                         </tr>
  86.                         <tr>
  87.                             <td>生日</td>
  88.                             <td><input type="text" value="" name="birthday"></td>
  89.                         </tr>
  90.                         <tr>
  91.                             <td colspan="2"><button class="save">保存</button></td>
  92.                         </tr>
  93.                     </tbody>
  94.                 </table>
  95.             </form>
  96.         </div>
  97.     </div>
  99.     <!-- 模态登录区 -->
  100.     <div class="modal login">
  101.         <div class="modal-drop"></div>
  102.         <div class="modal-body">
  103.             <button class="close">关闭</button>
  104.             <form name="loginform">
  105.                 <table>
  106.                     <caption>用户登录</caption>
  107.                     <tbody>
  108.                         <tr>
  109.                             <td>邮箱</td>
  110.                             <td><input type="text" value="" name="email" placeholder="邮箱"></td>
  111.                         </tr>
  112.                         <tr>
  113.                             <td>密码</td>
  114.                             <td><input type="password" name="password" placeholder="密码"></td>
  115.                         </tr>
  116.                         <tr>
  117.                             <td colspan="2"><button type="button" class="login">登录</button>
  118.                                 <p class="tips"></p>
  119.                             </td>
  120.                         </tr>
  121.                     </tbody>
  122.                 </table>
  123.             </form>
  124.         </div>
  125.     </div>
  127.     <!-- 模态注册区 -->
  128.     <div class="modal register">
  129.         <div class="modal-drop"></div>
  130.         <div class="modal-body">
  131.             <button class="close">关闭</button>
  132.             <form name="registerform">
  133.                 <table>
  134.                     <caption>用户注册</caption>
  135.                     <tbody>
  136.                         <tr>
  137.                             <td>姓名</td>
  138.                             <td><input type="text" value="" name="name" placeholder="用户名"></td>
  139.                         </tr>
  140.                         <tr>
  141.                             <td>性别</td>
  142.                             <td>
  143.                                 <select name="gender">
  144.                                     <option value="male" selected>男</option>
  145.                                     <option value="female">女</option>
  146.                                 </select>
  147.                             </td>
  148.                         </tr>
  149.                         <tr>
  150.                             <td>工资</td>
  151.                             <td><input type="text" value="" name="salary" placeholder="薪水"></td>
  152.                         </tr>
  153.                         <tr>
  154.                             <td>邮箱</td>
  155.                             <td><input type="text" value="" name="email" placeholder="邮箱"></td>
  156.                         </tr>
  157.                         <tr>
  158.                             <td>生日</td>
  159.                             <td><input type="text" value="" name="birthday" placeholder="生日"></td>
  160.                         </tr>
  161.                         <tr>
  162.                             <td>密码</td>
  163.                             <td><input type="password" name="password" placeholder="密码"></td>
  164.                         </tr>
  165.                         <tr>
  166.                             <td>重复密码</td>
  167.                             <td><input type="password" name="password2" placeholder="重复密码"></td>
  168.                         </tr>
  169.                         <tr>
  170.                             <td colspan="2"><button type="button" class="register">注册</button>
  171.                                 <p class="tips"></p>
  172.                             </td>
  173.                         </tr>
  174.                     </tbody>
  175.                 </table>
  176.             </form>
  177.         </div>
  178.     </div>
  180.     <!-- 模态框样式 -->
  181.     <style>
  182.         /* 模态框初始化隐藏 */
  183.         .modal {
  184.             display: none;
  185.         }
  187.         /* 遮罩层 */
  188.         .modal .modal-drop {
  189.             position: fixed;
  190.             background-color: rgb(0, 0, 0, .5);
  191.             top: 0;
  192.             left: 0;
  193.             right: 0;
  194.             bottom: 0;
  195.         }
  197.         .modal .modal-body {
  198.             position: fixed;
  199.             background-color: #fff;
  200.             padding: 1em;
  201.             overflow: hidden;
  202.             max-width: 25em;
  203.             max-height: 20em;
  204.             /* 水平垂直自动居中 */
  205.             top: 0;
  206.             left: 0;
  207.             right: 0;
  208.             bottom: 0;
  209.             margin: auto;
  210.         }
  212.         /* 登录框高度 */
  213.         .modal.login .modal-body {
  214.             max-height: 14em;
  215.         }
  217.         /* 注册框高度 */
  218.         .modal.register .modal-body {
  219.             max-height: 24em;
  220.         }
  222.         /* 关闭按钮 */
  223.         .modal .modal-body .close {
  224.             position: absolute;
  225.             top: 1.1em;
  226.             right: 1.5em;
  227.             width: 3em;
  228.             height: 1.5em;
  229.         }
  230.     </style>
  232.     <!-- 引入js文件 -->
  233.     <script src="0302.js"></script>
  235. </body>
  237. </html>

3. 引入的 style.css 是默认的

  1. * {
  2.   margin: 0;
  3.   padding: 0;
  4.   box-sizing: border-box;
  5.   color: #555;
  6. }
  8. body {
  9.   display: flex;
  10.   flex-direction: column;
  11.   align-items: center;
  12. }
  14. /*表格样式*/
  15. table {
  16.   width: 90%;
  17.   border: 1px solid;
  18.   border-collapse: collapse;
  19.   text-align: center;
  20. }
  22. table caption {
  23.   font-size: 1.2rem;
  24.   margin: 10px;
  25. }
  26. table td,
  27. table th {
  28.   border: 1px solid;
  29.   padding: 5px;
  30. }
  32. table tr:hover {
  33.   background-color: #eee;
  34. }
  36. table thead tr:only-of-type {
  37.   background-color: lightcyan;
  38. }
  40. table button {
  41.   width: 56px;
  42.   height: 26px;
  43. }
  44. table button:last-of-type {
  45.   color: red;
  46. }
  47. table button {
  48.   cursor: pointer;
  49.   margin: 0 3px;
  50. }
  51. /*分页条样式*/
  52. body > p {
  53.   display: flex;
  54. }
  56. p > a {
  57.   text-decoration: none;
  58.   color: #555;
  59.   border: 1px solid #888;
  60.   padding: 5px 10px;
  61.   margin: 10px 2px;
  62. }
  64. .active {
  65.   background-color: seagreen;
  66.   color: white;
  67.   border: 1px solid seagreen;
  68. }

4. 引入 0302.js

  1. // 页面载入完成时默认渲染第一页数据
  2. window.onload = function () {
  3.     select(1);
  4. };
  6. // 增
  7. // ...
  9. // 编辑和删除记录
  10. document.querySelector('table:first-of-type tbody').addEventListener('click', ev => {
  11.     // 禁止自动点击
  12.     ev.preventDefault();
  13.     // 获取记录 id
  14.     const id = ev.target.parentNode.parentNode.querySelector('td').textContent * 1;
  15.     // 事件类型
  16.     switch (ev.target.getAttribute('class')) {
  17.         // 编辑
  18.         case 'edit':
  19.             // 显示模态框
  20.             document.querySelector('.modal.edit').style.display = 'block';
  21.             // 关闭模态框
  22.             document.querySelector('.modal.edit .close').addEventListener('click', (eve) => {
  23.                 eve.preventDefault();
  24.                 document.querySelector('.modal.edit').style.display = 'none';
  25.             });
  26.             // 保存时关闭
  27.             document.querySelector('.modal.edit .save').addEventListener('click', (eve) => {
  28.                 eve.preventDefault();
  29.                 document.querySelector('.modal.edit').style.display = 'none';
  30.             });
  31.             // 模态框外点击关闭
  32.             document.querySelector('.modal.edit .modal-drop').addEventListener('click', (eve) => {
  33.                 eve.preventDefault();
  34.                 document.querySelector('.modal.edit').style.display = 'none';
  35.             });
  37.             // 获取数据
  38.             let name = ev.target.parentNode.parentNode.querySelector('td:nth-of-type(2)').textContent;
  39.             let gender = ev.target.parentNode.parentNode.querySelector('td:nth-of-type(3)').textContent;
  40.             let salary = ev.target.parentNode.parentNode.querySelector('td:nth-of-type(4)').textContent * 1;
  41.             let email = ev.target.parentNode.parentNode.querySelector('td:nth-of-type(5)').textContent;
  42.             let birthday = ev.target.parentNode.parentNode.querySelector('td:nth-of-type(6)').textContent;
  43.             // console.log(id, name, gender, salary, email, birthday);
  45.             // 渲染到模态框
  46.             let form = document.forms.editform;
  47.             form.name.value = name;
  48.             form.gender.value = gender;
  49.             form.salary.value = salary;
  50.             form.email.value = email;
  51.             form.birthday.value = birthday;
  53.             // 编辑事件
  54.             document.querySelector('.modal .save').addEventListener('click', (eve) => {
  55.                 // 禁止默认提交和冒泡
  56.                 eve.preventDefault();
  57.                 eve.stopPropagation();
  58.                 // 获取模态框编辑数据
  59.                 name = form.name.value;
  60.                 gender = form.gender.value;
  61.                 salary = form.salary.value;
  62.                 email = form.email.value;
  63.                 birthday = form.birthday.value;
  64.                 // console.log(id, name, gender, salary, email, birthday);
  66.                 // 创建对象
  67.                 let xhr = new XMLHttpRequest();
  68.                 // 配置参数
  69.                 xhr.open('post', 'handle.php?action=update&id=' + id);
  70.                 // 处理请求
  71.                 xhr.onload = () => {
  72.                     // console.log(xhr.response);
  73.                     // 更新数据写回页面
  74.                     ev.target.parentNode.parentNode.querySelector('td:nth-of-type(2)').textContent = name;
  75.                     ev.target.parentNode.parentNode.querySelector('td:nth-of-type(3)').textContent = gender;
  76.                     ev.target.parentNode.parentNode.querySelector('td:nth-of-type(4)').textContent = salary;
  77.                     ev.target.parentNode.parentNode.querySelector('td:nth-of-type(5)').textContent = email;
  78.                     ev.target.parentNode.parentNode.querySelector('td:nth-of-type(6)').textContent = birthday;
  79.                 };
  80.                 // 发送请求
  81.                 xhr.send(new FormData(document.forms.namedItem('editform')));
  82.             });
  83.             break;
  85.         // 删除
  86.         case 'delete':
  87.             if (confirm('确认删除编号 ' + id + ' 记录?')) {
  88.                 // 创建对象
  89.                 let xhr = new XMLHttpRequest();
  90.                 // 配置参数
  91.                 xhr.open('get', 'handle.php?action=delete&id=' + id);
  92.                 // 处理请求
  93.                 xhr.onload = () => {
  94.                     // 删除节点
  95.                     ev.target.parentNode.parentNode.remove();
  96.                 };
  97.                 // 发送请求
  98.                 xhr.send(null);
  99.             }
  100.             break
  101.     }
  102. });
  104. // 查
  105. function select(page = 1) {
  106.     // 创建对象
  107.     const xhr = new XMLHttpRequest();
  108.     // 配置参数
  109.     xhr.open('get', 'handle.php?action=select&page=' + page);
  110.     // 数据类型
  111.     xhr.responseType = 'json';
  112.     // 处理请求
  113.     xhr.onload = () => {
  114.         // console.log(xhr.response);
  115.         let pages = xhr.response.pages;
  116.         let staffs = xhr.response.staffs;
  117.         // 是否登录
  118.         let is_login = xhr.response.is_login;
  119.         // 是否管理员 admin
  120.         let is_admin = xhr.response.is_admin;
  121.         // 渲染表头
  122.         document.querySelector('table:first-of-type thead').innerHTML = get_thead(is_admin);
  123.         // 渲染数据
  124.         document.querySelector('table:first-of-type tbody').innerHTML = get_datas(staffs, is_admin);
  125.         // 渲染分页
  126.         document.querySelector('p:first-of-type').innerHTML = get_pages(page, pages);
  127.         // 渲染登录注册区
  128.         show_loginout();
  129.     };
  130.     // 发送请求
  131.     xhr.send(null);
  132. }
  134. // 无刷新分页
  135. document.querySelector('p:first-of-type').addEventListener('click', ev => {
  136.     // 禁用默认跳转
  137.     ev.preventDefault();
  138.     // 点击当前激活页，无效点击
  139.     if (ev.target.classList.contains('active')) return;
  140.     // 去掉原激活样式
  141.     [...ev.currentTarget.children].forEach(ele => ele.classList.remove('active'));
  142.     // 当前页添加激活样式
  143.     ev.target.classList.add('active');
  144.     // 获取当前页
  145.     let page = get_current_page();
  146.     // 渲染点击页的数据
  147.     select(page);
  148. });
  150. // 渲染数据
  151. function get_datas(datas, is_admin = 0) {
  152.     let str = '';
  153.     for (let i = 0; i < datas.length; i++) {
  154.         str += '<tr>';
  155.         str += '<td>' + datas[i]['id'] + '</td>';
  156.         str += '<td>' + datas[i]['name'] + '</td>';
  157.         str += '<td>' + datas[i]['gender'] + '</td>';
  158.         str += '<td>' + datas[i]['salary'] + '</td>';
  159.         str += '<td>' + datas[i]['email'] + '</td>';
  160.         str += '<td>' + datas[i]['birthday'] + '</td>';
  161.         str += '<td>' + datas[i]['create_at'] + '</td>';
  162.         // 如果登录显示编辑删除
  163.         if (is_admin) {
  164.             str += '<td><button class="edit">编辑</button><button class="delete">删除</button></td>';
  165.         }
  166.         str += '</tr>';
  167.     }
  168.     return str;
  169. }
  171. // 表头渲染
  172. function get_thead(is_admin = 0) {
  173.     let str = '';
  174.     str += '<tr>';
  175.     str += '<td>编号</td>';
  176.     str += '<td>姓名</td>';
  177.     str += '<td>性别</td>';
  178.     str += '<td>工资</td>';
  179.     str += '<td>邮箱</td>';
  180.     str += '<td>生日</td>';
  181.     str += '<td>入职时间</td>';
  182.     // 如果登录显示操作
  183.     if (is_admin) {
  184.         str += '<td>操作</td>';
  185.     }
  186.     str += '</tr>';
  187.     return str;
  188. }
  190. // 分页数据
  191. function get_pages(page = 1, pages) {
  192.     let paginate = '';
  193.     let active = '';
  194.     // 首页|上一页
  195.     if (page <= 1) page = 1;
  196.     if (page !== 1) {
  197.         paginate += '<a href="' + document.URL + '?p=1">首页</a>';
  198.         paginate += '<a href="' + document.URL + '?p=' + Math.max(1, page - 1) + '">上一页</a>';
  199.     }
  200.     // 高亮分页
  201.     for (i = 1; i <= pages; i++) {
  202.         active = '';
  203.         if (page == i) active = ' class="active"';
  204.         paginate += '<a href="' + document.URL + '?p=' + i + '"' + active + '>' + i + '</a>';
  205.     }
  206.     // 下一页|尾页
  207.     if (page >= pages) page = pages;
  208.     if (page !== pages) {
  209.         paginate += '<a href="' + document.URL + '?p=' + Math.min(page + 1, pages) + '">下一页</a>';
  210.         paginate += '<a href="' + document.URL + '?p=' + pages + '">尾页</a>';
  211.     }
  212.     return paginate;
  213. }
  215. // 登录|注册模态框
  216. document.querySelector('header > nav').addEventListener('click', ev => {
  217.     // 禁止自动点击
  218.     ev.preventDefault();
  219.     // 事件类型
  220.     switch (ev.target.getAttribute('class')) {
  221.         // 登录
  222.         case 'login':
  223.             // 显示模态框
  224.             document.querySelector('.modal.login').style.display = 'block';
  225.             // 关闭模态框
  226.             document.querySelector('.modal.login .close').addEventListener('click', (eve) => {
  227.                 eve.preventDefault();
  228.                 document.querySelector('.modal.login').style.display = 'none';
  229.             });
  230.             // 模态框外点击关闭
  231.             document.querySelector('.modal.login .modal-drop').addEventListener('click', (eve) => {
  232.                 eve.preventDefault();
  233.                 document.querySelector('.modal.login').style.display = 'none';
  234.             });
  236.             // 登录事件
  237.             document.querySelector('.modal.login .login').addEventListener('click', (eve) => {
  238.                 // 获取登录框数据
  239.                 let form = document.forms.loginform;
  240.                 [form.email, form.password].forEach((item) => item.oninput = () => tips.innerHTML = null);
  241.                 // 提示框
  242.                 let tips = document.querySelector('.modal.login .tips');
  243.                 // 非空验证
  244.                 if (!form.email.value.trim().length) {
  245.                     form.email.focus();
  246.                     tips.innerHTML = '邮箱为空';
  247.                     return;
  248.                 }
  249.                 if (!form.password.value.trim().length) {
  250.                     form.password.focus();
  251.                     tips.innerHTML = '密码为空';
  252.                     return;
  253.                 }
  255.                 // 创建对象
  256.                 const xhr = new XMLHttpRequest();
  257.                 // 配置参数
  258.                 xhr.open('post', 'handle.php?action=login');
  259.                 // 响应类型
  260.                 xhr.responseType = 'json';
  261.                 // 处理请求
  262.                 xhr.onload = () => {
  263.                     // console.log(xhr.response);
  264.                     // 显示登录消息
  265.                     tips.innerHTML = xhr.response.msg;
  267.                     // 登录失败时
  268.                     if (xhr.response.status) {
  269.                         return;
  270.                     }
  272.                     // 登录成功，延时关闭登录框
  273.                     setTimeout(() => document.querySelector('.modal.login').style.display = 'none', 2000);
  275.                     // 获取当前页码
  276.                     let page = get_current_page();
  277.                     // 渲染数据
  278.                     select(page);
  279.                 };
  280.                 // 发送请求
  281.                 xhr.send(new FormData(form));
  282.             });
  284.             break;
  286.         // 添加和注册一样
  287.         case 'add':
  289.             break;
  291.         // 注册
  292.         case 'register':
  293.             // 显示模态框
  294.             document.querySelector('.modal.register').style.display = 'block';
  295.             // 关闭模态框
  296.             document.querySelector('.modal.register .close').addEventListener('click', (eve) => {
  297.                 eve.preventDefault();
  298.                 document.querySelector('.modal.register').style.display = 'none';
  299.             });
  300.             // 模态框外点击关闭
  301.             document.querySelector('.modal.register .modal-drop').addEventListener('click', (eve) => {
  302.                 eve.preventDefault();
  303.                 document.querySelector('.modal.register').style.display = 'none';
  304.             });
  306.             // 注册事件
  307.             document.querySelector('.modal.register .register').addEventListener('click', (eve) => {
  308.                 // 获取登录框数据
  309.                 let form = document.forms.registerform;
  310.                 [form.email, form.password, form.password2].forEach((item) => item.oninput = () => tips.innerHTML = null);
  311.                 // 提示框
  312.                 let tips = document.querySelector('.modal.register .tips');
  313.                 // 非空验证
  314.                 if (!form.email.value.trim().length) {
  315.                     form.email.focus();
  316.                     tips.innerHTML = '邮箱为空';
  317.                     return;
  318.                 }
  319.                 if (!form.password.value.trim().length) {
  320.                     form.password.focus();
  321.                     tips.innerHTML = '密码为空';
  322.                     return;
  323.                 }
  324.                 if (!form.password2.value.trim().length) {
  325.                     form.password2.focus();
  326.                     tips.innerHTML = '重复密码为空';
  327.                     return;
  328.                 }
  329.                 if (form.password.value !== form.password2.value) {
  330.                     form.password.focus();
  331.                     tips.innerHTML = '两次密码不一致';
  332.                     return;
  333.                 }
  335.                 // 创建对象
  336.                 const xhr = new XMLHttpRequest();
  337.                 // 配置参数
  338.                 xhr.open('post', 'handle.php?action=register');
  339.                 // 响应类型
  340.                 xhr.responseType = 'json';
  341.                 // 处理请求
  342.                 xhr.onload = () => {
  343.                     // console.log(xhr.response);
  344.                     // 显示注册消息
  345.                     tips.innerHTML = xhr.response.msg;
  347.                     // 注册失败时
  348.                     if (xhr.response.status) {
  349.                         return;
  350.                     }
  352.                     // 注册成功，延时关闭注册框
  353.                     setTimeout(() => document.querySelector('.modal.register').style.display = 'none', 2000);
  355.                     // 获取当前页码
  356.                     let page = get_current_page();
  357.                     // 渲染数据
  358.                     select(page);
  359.                 };
  360.                 //失败回调
  361.                 xhr.onerror = () => console.log('XHR Fail....');
  362.                 // 发送请求
  363.                 const data = new FormData(form);
  364.                 data.delete('password2');
  365.                 xhr.send(data);
  366.             });
  367.             break;
  369.         // 登出
  370.         case 'logout':
  371.             // 创建对象
  372.             const xhr = new XMLHttpRequest();
  373.             // 配置参数
  374.             xhr.open('post', 'handle.php?action=logout');
  375.             // 响应类型
  376.             xhr.responseType = 'json';
  377.             // 处理请求
  378.             xhr.onload = () => {
  379.                 alert('登出成功!');
  380.                 // 获取当前页码
  381.                 let page = get_current_page();
  382.                 // 渲染数据
  383.                 select(page);
  384.             };
  385.             // 发送请求
  386.             xhr.send(null);
  387.             break;
  389.         //添加记录
  390.         case 'add':
  392.             break;
  393.     }
  394. });
  396. // 计算当前页码
  397. function get_current_page() {
  398.     let page = 1;
  399.     let select = document.querySelector('p:first-of-type').children;
  400.     if (select) {
  401.         let url = [...select].filter(ele => ele.classList.contains('active')).shift().href;
  402.         if (url.indexOf("?") !== -1) {
  403.             page = url.split("=")[1];
  404.         }
  405.     }
  406.     return page;
  407. }
  409. // 渲染登录注册
  410. function show_loginout() {
  411.     // 创建对象
  412.     const xhr = new XMLHttpRequest();
  413.     // 配置参数
  414.     xhr.open('get', 'handle.php?action=loginout');
  415.     // 处理请求
  416.     xhr.onload = () => {
  417.         // 渲染登录注册区
  418.         document.querySelector('header>nav').innerHTML = xhr.response;
  419.     };
  420.     // 发送请求
  421.     xhr.send(null);
  422. }

5. ajax 请求文件 handle.php

  1. <?php
  2. $config = [
  3.     'type' => 'mysql',
  4.     'host' => '127.0.0.1',
  5.     'dbname' => 'phpedu',
  6.     'port' => '3306',
  7.     'charset' => 'utf8mb4',
  8.     'username' => 'root',
  9.     'password' => 'root',
  10. ];
  11. extract($config);
  12. $dsn = sprintf('%s:host=%s;dbname=%s;port=%s;charset=%s', $type, $host, $dbname, $port, $charset);
  13. try {
  14.     $pdo = new PDO($dsn, $username, $password);
  15.     // 设置结果集的返回类型
  16.     $pdo->setAttribute(PDO::ATTR_DEFAULT_FETCH_MODE, PDO::FETCH_ASSOC);
  17.     // var_dump($pdo,'连接成功');
  18. } catch (PDOException $e) {
  19.     die('连接失败:' . $e->getMessage());
  20. }
  22. // 会话开启
  23. if (!session_id()) session_start();
  25. // 每页显示记录数
  26. $action = $_GET['action'] ?? 'select';
  27. $page = $_GET['page'] ?? 1;
  28. switch ($action) {
  29.         // 删
  30.     case 'delete':
  31.         die(del_data($pdo, $_GET['id'] ?? 0));
  32.         break;
  34.         // 改
  35.     case 'update':
  36.         $id = $_GET['id'] ?? 0;
  37.         $name = $_POST['name'];
  38.         $gender = $_POST['gender'];
  39.         $salary = $_POST['salary'];
  40.         $email = $_POST['email'];
  41.         $birthday = $_POST['birthday'];
  42.         die(update_data($pdo, $id, $name, $gender, $salary, $email, $birthday));
  43.         break;
  45.         // 查
  46.     case 'select':
  47.         die(get_datas($pdo, $page));
  49.         // 渲染登录注册
  50.     case  'loginout':
  51.         if (isset($_SESSION['email']) && $_SESSION['email']) {
  52.             $btn = '';
  53.             // 管理权限，仅 admin 允许添加员工
  54.             if (is_admin($pdo)) {
  55.                 $btn = ' <a href="javascript:;" class="add">添加</a>';
  56.             }
  57.             die('<a href="#">' . $_SESSION['email'] . '</a> &nbsp;<a href="javascript:;" class="logout">退出</a>' . $btn);
  58.         } else {
  59.             die('<a href="javascript:;" class="login">登录</a>&nbsp;<a href="javascript:;" class="register">注册</a>');
  60.         }
  61.         break;
  63.         // 登录
  64.     case 'login':
  65.         if (isset($_SESSION['email']) && $_SESSION['email']) {
  66.             die(json_encode(['status' => 1, 'msg' => '你已经登录！']));
  67.         }
  68.         $sql = "SELECT email FROM staffs WHERE email = :email AND password = md5(:password)";
  69.         $stmt = $pdo->prepare($sql);
  70.         if ($stmt->execute($_POST)) {
  71.             if ($stmt->fetch()) {
  72.                 // 保存 session
  73.                 $_SESSION['email'] = $_POST['email'];
  74.                 die(json_encode(['status' => 0, 'msg' => $_POST['email'] . '登录成功,请稍后...']));
  75.             } else {
  76.                 die(json_encode(['status' => 1, 'msg' => '邮箱或密码错误！']));
  77.             }
  78.         }
  79.         die(json_encode(['status' => 1, 'msg' => '发生错误了，重试！']));
  80.         break;
  82.         // 增，和注册一样
  83.     case 'add':
  85.         break;
  87.         // 注册
  88.     case 'register':
  89.         if (isset($_SESSION['email']) && $_SESSION['email']) {
  90.             die(json_encode(['status' => 1, 'msg' => '你已经登录！']));
  91.         }
  92.         $sql = "SELECT COUNT(1) as count FROM staffs WHERE email = '{$_POST['email']}'";
  93.         if ($pdo->query($sql)->fetch()['count']) {
  94.             die(json_encode(['status' => 1, 'msg' => '该邮箱已被注册，换一个！']));
  95.         }
  96.         $sql = 'INSERT staffs SET name = :name, password = md5(:password), gender = :gender, salary = :salary, email = :email, birthday = :birthday';
  97.         $stmt = $pdo->prepare($sql);
  98.         if ($stmt->execute($_POST)) {
  99.             if ($stmt->rowCount()) {
  100.                 // 实现注册并自动登录
  101.                 $_SESSION['email'] = $_POST['email'];
  102.                 die(json_encode(['status' => 0, 'msg' => '注册成功，请稍后...']));
  103.             } else {
  104.                 die(json_encode(['status' => 1, 'msg' => '注册失败，请联系管理员']));
  105.             }
  106.         }
  107.         die(json_encode(['status' => 1, 'msg' => '发生错误了，重试！']));
  108.         break;
  110.         // 登出
  111.     case 'logout':
  112.         if (isset($_SESSION['email'])) unset($_SESSION['email']);
  113.         break;
  115.     default:
  116.         exit('Error!');
  117. }
  119. // 更新记录
  120. function update_data($pdo, $id, $name, $gender, $salary, $email, $birthday)
  121. {
  122.     if ($id) {
  123.         $sql = "UPDATE staffs SET name = :name, gender = :gender, salary = :salary, email = :email, birthday = :birthday WHERE id = :id";
  124.         $stmt = $pdo->prepare($sql);
  125.         $stmt->bindParam(':id', $id, PDO::PARAM_INT);
  126.         $stmt->bindParam(':name', $name);
  127.         $stmt->bindParam(':gender', $gender);
  128.         $stmt->bindParam(':salary', $salary);
  129.         $stmt->bindParam(':email', $email);
  130.         $stmt->bindParam(':birthday', $birthday);
  131.         $stmt->execute();
  132.         if ($stmt->rowCount() > 0) {
  133.             return '更新成功！';
  134.         }
  135.     }
  136.     return '更新错误！';
  137. }
  139. // 删除记录
  140. function del_data($pdo, $id = 0)
  141. {
  142.     if ($id) {
  143.         $sql = "DELETE FROM staffs WHERE id = :id";
  144.         $stmt = $pdo->prepare($sql);
  145.         $stmt->bindParam(':id', $id, PDO::PARAM_INT);
  146.         $stmt->execute();
  147.         if ($stmt->rowCount() > 0) {
  148.             return '删除成功！';
  149.         }
  150.     }
  151.     return '删除错误！';
  152. }
  154. // 数据总页数
  155. function get_pages($pdo, $page = 1, $num = 5)
  156. {
  157.     // 总页数
  158.     $num = 5;
  159.     $sql = "SELECT CEIL(COUNT(1)/{$num}) total FROM staffs";
  160.     $pages = $pdo->query($sql)->fetch()['total'];
  161.     return $pages;
  162. }
  164. // 每页显示数
  165. function get_datas($pdo, $page = 1, $num = 5)
  166. {
  167.     // 获取总页数
  168.     $pages = get_pages($pdo);
  169.     // 每页显示的数据
  170.     $offset = ($page - 1) * $num;
  171.     $sql = "SELECT * FROM `staffs` LIMIT {$offset}, {$num}";
  172.     $stmt = $pdo->prepare($sql);
  173.     $stmt->execute();
  174.     $staffs = $stmt->fetchAll();
  175.     // $staffs = $pdo->query($sql)->fetchAll();
  176.     return json_encode(['pages' => $pages, 'staffs' => $staffs, 'is_admin' => is_admin($pdo)]);
  177. }
  179. // 是否管理员 admin
  180. function is_admin($pdo)
  181. {
  182.     if (isset($_SESSION['email']) && $_SESSION['email']) {
  183.         $sql = "SELECT COUNT(1) as count FROM staffs WHERE email = '{$_SESSION['email']}' AND name = 'admin'";
  184.         if ($pdo->query($sql)->fetch()['count']) {
  185.             return true;
  186.         }
  187.     }
  188.     return false;
  189. }
  • 注册一个 root 用户名

测试

  • 注册成功后点击最后一页查看

测试

测试

  • 退出后，以 admin 的 admin@php.cn 登录

测试

  • 对管理员开放操作权限

测试

更多相关文章

  1. PHP实战: 人员管理系统(续)
  2. 【asp.net core 系列】- 11 Service层的实现样板
  3. 辣鸡，使用CAS机制完成SSO
  4. cookie在二级域名间共享完成sso
  5. 详解微信小程序登录wx.login(Object object)
  6. 你没有看错，爬网页数据，C# 也可以像 Jquery 那样
  7. 功能测试——app测试要点最全分析
  8. 克隆虚拟机和相互登录
  9. 一套简单通用的Java后台管理系统，拿来即用，非常方便（附项目地址）

随机推荐

  1. jquery常用代码片段
  2. JQuery的一些基本功能代码(CH1&2)
  3. 【jQuery】调用delay()方法延时执行动画
  4. 将JavaScript数组转换成逗号分隔列表的简
  5. 想要改进我的jQuery代码，做我想要的，太丑了
  6. Struts2使用jQuery JSONP解决跨域问题
  7. Ajax/jQuery -在页面加载时将网页内容加
  8. jQuery弹出窗口不能打开。
  9. 将php jsonencode数组结果显示为ajax成功
  10. 【JavaScript】jQuery+ajax传递json数组（