使用session会话控制实现登录、注册、退出
登录login.php

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         *{
  10.             margin: 0;
  11.             padding: 0;
  12.         }
  13.         form{
  14.             display: grid;
  15.             gap: 1em;
  16.             width: 20em;
  17.             border: 1px solid #ccc;
  18.             padding: 2em 3em;
  19.             margin: 5em auto;
  20.             background-color: #efefef;
  21.             border-radius: .5em;
  22.         }
  23.     </style>
  24. </head>
  25. <body>
  26.     <form  method="post" id='login'>
  27.         <span>用户登录</span>
  28.         <input type="email" name="email" placeholder="邮箱">
  29.         <input type="password" name="password" placeholder="密码">
  30.         <button type="button" name="submit">登录</button>
  31.         <span class="tips"></span>
  32.     </form>
  33. </body>
  34. <script>
  35. const form=document.forms.login;
  36. const email=form.email;
  37. const password=form.password;
  38. const btn=form.submit;
  39. const xhr=new XMLHttpRequest;
  40. const tips=document.querySelector('.tips');
  41. btn.onclick=()=>{
  42.     if(email.value.trim().length>0 && password.value.trim().length >0){
  43.         xhr.open('post','handle.php?action=login');
  44.         xhr.responseType='json';
  45.         xhr.onload=()=>{
  46.             tips.innerHTML=xhr.response.msg;
  47.             if(xhr.response.status === 1){
  48.                 setInterval(()=>location.href='index1.php',1000);
  49.             }
  50.         }
  52.         xhr.send(new FormData(form));
  53.     }else{
  54.         tips.innerHTML='邮箱或密码不能为空';
  55.         email.focus();
  56.     }
  57.     [email,password].forEach((item)=>item.oninput=()=>tips.innerHTML='')
  58. }
  59. </script>
  60. </html>

效果图

注册页面resgiter.php

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         *{
  10.             margin: 0;
  11.             padding: 0;
  12.         }
  13.         form{
  14.             display: grid;
  15.             gap: 1em;
  16.             width: 20em;
  17.             border: 1px solid #ccc;
  18.             padding: 2em 3em;
  19.             margin: 5em auto;
  20.             background-color: #efefef;
  21.             border-radius: .5em;
  22.         }
  23.     </style>
  24. </head>
  25. <body>
  26.     <form  method="post" id='login'>
  27.         <span>用户注册</span>
  28.         <input type="text" name="name" placeholder="用户名">
  29.         <input type="email" name="email" placeholder="邮箱">
  30.         <input type="password1" name="password1" placeholder="密码">
  31.         <input type="password2" name="password2" placeholder="再次输入密码">
  32.         <button type="button" name="submit">注册</button>
  33.         <span class="tips"></span>
  34.     </form>
  35. </body>
  36. <script>
  37. const form=document.forms.login;
  38. const name=form.name;
  39. const email=form.email;
  40. const password1=form.password1;
  41. const password2=form.password2;
  42. const btn=form.submit;
  43. const xhr=new XMLHttpRequest;
  44. const tips=document.querySelector('.tips');
  45. btn.onclick=()=>{
  46.     if(email.value.trim().length>0 && password1.value.trim().length >0 && password2.value.trim().length >0 && name.value.trim().length >0){
  47.         if(password1.value !== password2.value){
  48.             tips.innerHTML='两次密码输入不一致';
  49.         }else{
  50.             xhr.open('post','handle.php?action=resgiter');
  51.         xhr.responseType='json';
  52.         xhr.onload=()=>{
  53.             console.log(xhr.response);
  54.             tips.innerHTML=xhr.response.msg;
  55.             if(xhr.response.status === 1){
  56.                 setInterval(()=>location.href='index1.php',1000);
  57.             }
  58.         }
  59.         const data=new FormData(form);
  60.         data.delete('password2')
  61.         xhr.send(data);
  62.         }
  63.     }else{
  64.         tips.innerHTML='邮箱或密码不能为空';
  65.         email.focus();
  66.     }
  67.     [name,email,password1,password2].forEach((item)=>item.oninput=()=>tips.innerHTML='')
  68. }
  69. </script>
  70. </html>

效果图

首页index1.php

  1. <?php session_start()?>
  2.  src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  3.     <style>
  4.         .active{
  5.             color: green;
  6.         }
  7.         .modal{
  8.             width: 550px;
  9.            position: absolute;
  10.            top: 0;
  11.             background-color: skyblue;
  12.             display: none;
  13.         }
  14.         a{
  15.             text-decoration: none;
  16.             color: #000;
  17.         }
  18.         *{
  19.             margin: 0;
  20.             padding: 0;
  21.         }
  22.         .header{
  23.             display: flex;
  24.             background-color: #333;
  25.             padding: .5em 1em;
  26.         }
  27.         .nav {
  28.             margin-left:auto;
  29.         }
  30.         a{
  31.             color: #aaa;
  32.             text-decoration: none;
  33.         }
  34.         a:hover{
  35.             color:#fff;
  36.         }
  37.     </style>
  38. <div class="header">
  39.      <a href="index1.php">首页</a> 
  40.         <div class="nav">
  41.         <?php if($_SESSION['email']):?>
  42.             <a href="#"><?php echo $_SESSION['email']?></a>
  43.             <a href="handle.php?action=logout">退出</a>
  44.             <?php else:?>
  45.             <a href="login.php">登录</a>
  46.             <a href="resgiter.php">注册</a>
  47.             <?php endif?>
  48.         </div>
  49.     </div>
  50.     <!-- 判断是否登录，登录才能看到数据 -->
  51. <?php if($_SESSION['email']):?>
  52.     <table>
  53.         <caption>员工列表</caption>
  54.         <thead>
  55.             <tr>
  56.                 <th>id</th>
  57.                 <th>姓名</th>
  58.                 <th>性别</th>
  59.                 <th>年龄</th>
  60.                 <th>邮箱</th>
  61.                 <th>生日</th>
  62.                 <th>入职日期</th>
  63.                 <th>操作</th>
  64.             </tr>
  65.             </thead>
  66.         <tbody>
  67.         </tbody>
  68.     </table>
  69.     <p class="page">
  70.     </p>
  71.       <div class="modal">
  72.         <button class="close">关闭</button>
  73.         <form action="" method="POST" id="edit">
  74.             <p><label for="">姓名:<input type="text" value="" name="name" id="name" /></label></p> 
  75.             <p><label for="">性别:<select name="gender" id="gender">
  76.                     <option value="male">男</option>
  77.                     <option value="female">女</option>
  78.                   </select>
  79.                 </label></p>
  80.                <p> <label for="">年龄:<input type="text" value="" name="age" id="age" /></label></p>
  81.                 <p><label for="">邮箱:<input type="email" value="" name="email" id="email" /></label></p>
  82.                 <p><label for="">生日:<input type="text" value="" name="borthday" id="borthday" /></label></p>
  83.                 <input type="hidden" value="" name="id" id="id" />
  84.                <p> <label for=""><button class="save">保存</button></label></p>
  85.         </form>
  86.     </div>
  87.     <script>
  88.     select(1);
  89.     function show(data) {
  90.         var html = '';
  91.         $.each(data, function(index, value) {
  92.             html += '<tr>';
  93.             html += '<td>' + data[index]['id'] + '</td>';
  94.             html += '<td>' + data[index]['name'] + '</td>';
  95.             html += '<td>' + data[index]['gender'] + '</td>';
  96.             html += '<td>' + data[index]['age'] + '</td>';
  97.             html += '<td>' + data[index]['email'] + '</td>';
  98.             html += '<td>' + data[index]['borthday'] + '</td>';
  99.             html += '<td>' + data[index]['create_time'] + '</td>';
  100.             html += '<td><button class="edit" data-index='+data[index]['id']+'>编辑</button><button class="del"data-index='+data[index]['id']+'>删除</button></td>';
  101.             html += '</tr>';
  102.         })
  103.         return html;
  104.     }
  105.     // 查询
  106.     function select(page = 1) {
  107.         $.get("http://127.0.0.119/pdo/limit.php?action=select&p=" + page, function(res) {
  108.             var obj = jQuery.parseJSON(res);
  109.             let pages = obj.pages;
  110.             let rows = obj.rows;
  111.             console.log(rows);
  112.             $('tbody').html(show(rows));
  113.             $('.page').html(getPage(page, pages));
  114.         })
  115.     }
  116.     function getPage(page = 1, pages) {
  117.         let p = "";
  118.         let active = "";
  119.         // 首页|上一页
  120.         if (page <= 1) page = 1;
  121.         if (page !== 1) {
  122.             p += '<a href="http://127.0.0.119/pdo/limit.php?action=select&p=1">首页</a>';
  123.             p += '<a href="http://127.0.0.119/pdo/limit.php?action=select&p= '+ Math.max(1, page - 1) + '">上一页</a>';
  124.         }
  125.         // 高亮
  126.         for (i = 1; i <= pages; i++) {
  127.             active = "";
  128.             if (page == i) active = 'class="active"';
  129.             p += '<a href="http://127.0.0.119/pdo/limit.php?action=select&p=' + i+ '"'+  active + '>' + i + '</a>';
  130.         }
  131.         // 下一页|尾页
  132.         if (page >= pages) page = pages;
  133.         if (page != pages) {
  134.             p += '<a href="http://127.0.0.119/pdo/limit.php?action=select&p=' + ( parseInt(page) +1 ) + '">下一页</a>';
  135.             p += '<a href="http://127.0.0.119/pdo/limit.php?action=select&p=' + pages + '">尾页</a>';
  136.         }
  137.         return p;
  138.     }
  139.     $('.page').on('click',
  140.         function(event){
  141.             event.preventDefault();
  142.             event.stopPropagation();
  143.             let page=$(event.target).attr('href');
  144.             page=page.split('=')[2];
  145.             select(page);
  146.         }
  147.     );
  148.     //编辑
  149.     $(' tbody').on('click','.edit',function(){
  150.         let id=$(this).attr('data-index');
  151.         $.get("http://127.0.0.119/pdo/limit.php?action=getOne&id=" + id, function(res) {
  152.             var obj = jQuery.parseJSON(res);
  153.             let rows = obj.rows;
  154.             let name=rows.name;
  155.             let gender=rows.gender;
  156.             let age=rows.age;
  157.             let email=rows.email;
  158.             let borthday=rows.borthday;
  159.             let id=rows.id;
  160.          $('#name').val(name);
  161.          if (gender=='male'){
  162.             $('#gender option').removeAttr('selected');
  163.              $('#gender option:nth-of-type(0)').attr('selected',true);
  164.          }else{
  165.             $('#gender option').removeAttr('selected');
  166.              $('#gender option:nth-of-type(2)').attr('selected',true);
  167.          }
  168.          $('#age').val(age);
  169.          $('#email').val(email);
  170.          $('#borthday').val(borthday);
  171.          $('#id').val(id);
  172.          $('.modal').show();
  173.         });
  174.     });
  175.     $('.close').click(()=>{
  176.         $('.modal').hide();
  177.     })
  178.     //保存
  179.     $('.save').on('click',function(event){
  180.         event.preventDefault();
  181.         $.post("http://127.0.0.119/pdo/limit.php?action=save", $("#edit").serialize(),function(data){
  182.             var obj = jQuery.parseJSON(data);
  183.             alert(obj.msg);
  184.             if(obj.status===1){
  185.                 $('.modal').hide();
  186.              location.reload();
  187.             }
  188.          });
  189.     })
  190.     //删除
  191.     $(' tbody').on('click','.del',function(){
  192.         let id=$(this).attr('data-index');
  193.         if(confirm('确定要删除吗？')){
  194.                 $.get("http://127.0.0.119/pdo/limit.php?action=delete&id=" + id, function(res) {
  195.                 var obj = jQuery.parseJSON(res);
  196.                 alert(obj.msg);
  197.                 if(obj.status===1)location.reload();
  198.             });
  199.         }
  200.     });
  201. </script>
  202. <?php else:?>
  203. <script>
  204. alert('没有登录请先登录');
  205. location.href='login.php';
  206. </script>
  207.  <?php endif?>
  208. </body>
  209. </html>

后端php代码

  1. $config = [
  2.     'type' => 'mysql',
  3.     'host' => '127.0.0.1',
  4.     'dbname' => 'php',
  5.     'port' => 3306,
  6.     'charset' => 'utf8mb4',
  7.     'username' => 'root',
  8.     'passwrod' => '123456',
  9. ];
  10. extract($config);
  11. $dsn = sprintf('%s:dbname=%s;', $type, $dbname);
  13. try {
  14.     $pdo = new PDO($dsn, $username, $passwrod);
  15.     //设置结果集的返回类型
  16.     $pdo->setAttribute(PDO::ATTR_DEFAULT_FETCH_MODE, PDO::FETCH_ASSOC);
  17. } catch (PDOException $e) {
  18.     die('连接失败' . $e->getMessage());
  19. }
  20. //开启session
  21. session_start();
  22. $action = $_GET['action'] ?? 'select';
  23. $page = $_GET['p'] ?? 1;
  24. $id = $_GET['id'] ?? 1;
  25. $data = $_POST;
  26. switch ($action) {
  27.     case 'select':
  28.         select($pdo, $page);
  29.         break;
  30.     case 'getOne':
  31.         getOne($pdo, $id);
  32.         break;
  33.     case 'save':
  34.         save($pdo, $data);
  35.         break;
  36.     case 'delete':
  37.         delete($pdo, $id);
  38.         break;
  39.     case 'login':
  40.         login($pdo, $data);
  41.         break;
  42.     case 'resgiter':
  43.         resgiter($pdo, $data);
  44.         break;
  45.     case 'logout':
  46.         logout();
  47.         break;
  48. }
  49. //查询所有数据
  50. function select($pdo, $page = 1, $num = 5)
  51. {
  52.     //计算当前页的起始偏移量
  53.     $offset = ($page - 1) * $num;
  54.     //ceil()向上取整
  55.     $sql = "SELECT CEIL(COUNT(1)/{$num}) total FROM user";
  56.     $row = $pdo->query($sql);
  57.     $pages = $row->fetch()['total'];
  58.     // print_r($row);
  59.     //每页显示的数据
  60.     $sql = "SELECT * FROM `user` LIMIT {$offset},{$num}";
  61.     $stmt = $pdo->prepare($sql);
  62.     $stmt->execute();
  63.     $rows = $stmt->fetchAll();
  64.     echo json_encode(['pages' => $pages, 'rows' => $rows]);
  65. }
  66. //获取单条信息
  67. function getOne($pdo, $id)
  68. {
  69.     $sql = "SELECT *  FROM user WHERE id={$id}";
  70.     $stmt = $pdo->prepare($sql);
  71.     $stmt->execute();
  72.     $rows = $stmt->fetch();
  73.     echo json_encode(['rows' => $rows]);
  74. }
  75. //更新数据
  76. function save($pdo, $data)
  77. {
  78.     if ($_SESSION['email'] != 'admin@admin.com') {
  79.         echo json_encode(['status' => 0, 'msg' => '没有权限，请联系管理员']);
  80.     }else{
  81.         $sql = "UPDATE `user` SET name = :name, gender = :gender, age = :age, email = :email, borthday = :borthday WHERE id=:id";
  82.         $stmt = $pdo->prepare($sql);
  83.         $stmt->bindParam(':name', $data['name'], PDO::PARAM_STR);
  84.         $stmt->bindParam(':gender', $data['gender'], PDO::PARAM_STR);
  85.         $stmt->bindParam(':age', $data['age'], PDO::PARAM_STR);
  86.         $stmt->bindParam(':email', $data['email'], PDO::PARAM_STR);
  87.         $stmt->bindParam(':borthday', $data['borthday'], PDO::PARAM_STR);
  88.         $stmt->bindParam(':id', $data['id'], PDO::PARAM_INT);
  89.         $stmt->execute();
  90.         if ($stmt->rowCount() > 0) {
  91.             echo  json_encode(['status' => 1, 'msg' => '更新成功']);
  92.         } else {
  93.             echo json_encode(['status' => 0, 'msg' => '更新失败']);
  94.         }
  95.     }
  96. }
  97. //删除数据
  98. function delete($pdo, $id)
  99. {
  100.     if ($_SESSION['email'] !== 'admin@admin.com') {
  101.         echo json_encode(['status' => 0, 'msg' => '没有权限，请联系管理员']);
  102.     }else{
  103.         $sql = "DELETE  FROM `user`  WHERE id=:id";
  104.         $stmt = $pdo->prepare($sql);
  105.         $stmt->bindParam(':id', $id, PDO::PARAM_INT);
  106.         $stmt->execute();
  107.         if ($stmt->rowCount() > 0) {
  108.             echo  json_encode(['status' => 1, 'msg' => '删除成功']);
  109.         } else {
  110.             echo json_encode(['status' => 0, 'msg' => '删除失败']);
  111.         }
  112.     }
  113. }
  114. // 登录
  115. function login($pdo, $data)
  116. {
  117.     $sql = "SELECT *  FROM users WHERE email=:email AND password=md5(:password)";
  118.     $stmt = $pdo->prepare($sql);
  119.     $stmt->execute($data);
  120.     if ($stmt->fetch()) {
  121.         $_SESSION['email'] = $data['email'];
  122.         echo json_encode(['status' => 1, 'msg' => '登录成功,正在跳转首页...']);
  123.     } else {
  124.         echo json_encode(['status' => 0, 'msg' => '邮箱或密码错误，登录失败']);
  125.     }
  126. }
  127. // 注册
  128. function resgiter($pdo, $data)
  129. {
  130.     $sql = "SELECT *  FROM users ";
  131.     $stmt = $pdo->prepare($sql);
  132.     $stmt->bindColumn('email', $email);
  133.     $stmt->execute();
  134.     $emails = [];
  135.     while ($stmt->fetch(PDO::FETCH_BOUND)) {
  136.         $emails[] = $email;
  137.     }
  138.     if (in_array($data['email'], $emails)) {
  139.         echo json_encode(['status' => 0, 'msg' => '邮箱已经注册,请直接登录']);
  140.     } else {
  141.         $sql = 'insert users set name=:name,email=:email,password=md5(:password1)';
  142.         $stmt = $pdo->prepare($sql);
  143.         $stmt->execute($data);
  144.         if ($stmt->rowCount() === 1) {
  145.             $_SESSION['email'] = $data['email'];
  146.             echo json_encode(['status' => 1, 'msg' => '注册成功，正在跳转到首页']);
  147.         } else {
  148.             echo json_encode(['status' => 0, 'msg' => '注册失败']);
  149.         }
  150.     }
  151. }
  152. // 退出
  153. function logout()
  154. {
  155.     session_unset();
  156.     echo '<script>alert("退出成功");location.href="login.php";</script>';
  157. }

普通用户登录没有编辑和删除的权限

如果没有登录打开首页则提示登录并且跳转到登录页面

管理员登录可以删除和编辑

注册

更多相关文章

  1. 苏宁首页仿写，及grid布局相关属性预习
  2. flex基础：flex项目上的三个属性以及利用flex完成移动商城首页的页
  3. flex模拟移动商城首页页面布局/grid布局的相关属性
  4. 利用flex布局模仿某商城首页
  5. flex项目上的三个属性及移动商城首页的页眉和页脚的布局
  6. 【案例】使用flex弹性布局仿写移动端苏宁首页并了解grid布局的相
  7. Authing 双周动态：支持飞书登录（3.13-3.27）
  8. css之flex项目属性与商城首页布局实战
  9. 移动商城首页的页眉和页脚的布局和flex项目三个属性

随机推荐

  1. Android开发之——底层驱动开发（-）
  2. Android IOS WebRTC 音视频开发总结（十五）-
  3. [转]Android媒体的一些使用总结
  4. ANDROID相对布局详细说明
  5. Android中如何用好多线程
  6. [每日100问][2011-10-01]iphone开发笔记，
  7. Android_RelativeLayout属性
  8. Android消息处理机制(Handler)
  9. Android登录注册功能 数据库SQLite验证
  10. 《Android》Lesson17-用Fragment实现简易