显示用户登录代码 login.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  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>用户登录</title>
  8. <style>
  9. .login {
  10. width: 480px;
  11. margin: 0 auto;
  12. padding: 20px;
  13. background-color: lightblue;
  14. }
  15. form {
  16. display: grid;
  17. gap: 0.5rem;
  18. }
  19. form * {
  20. margin: 5px 20px;
  21. }
  22. h2 {
  23. text-align: center;
  24. }
  25. </style>
  26. </head>
  27. <body>
  28. <div class="login">
  29. <h2>用户登录</h2>
  30. <form action="">
  31. <fieldset>
  32. <div>
  33. <label for="account">账 户:</label>
  34. <input
  35. type="text"
  36. id="account"
  37. name="account"
  38. required
  39. placeholder="请输入用户名"
  40. />
  41. </div>
  42. <div>
  43. <label for="password">密 码:</label>
  44. <input
  45. type="password"
  46. id="password"
  47. name="password"
  48. required
  49. placeholder="请输入密码"
  50. />
  51. </div>
  52. </fieldset>
  53. <button type="button" onclick="check(this.form)">登录</button>
  54. </form>
  55. </div>
  56. <script>
  57. function check(thisForm) {
  58. const account = thisForm.account.value.trim();
  59. const password = thisForm.password.value.trim();
  60. //加密成JSON数据
  61. const user = JSON.stringify({ account: account, password: password });
  62. fetch("check.php", { method: "post", body: user })
  63. .then((response) => response.json())
  64. .then((json) => {
  65. if (json.status != 0) {
  66. alert(json.msg);
  67. return false;
  68. }
  69. alert(json.msg);
  70. setTimeout(() => {
  71. window.location.href = "showuser.php";
  72. }, 1000);
  73. });
  74. }
  75. </script>
  76. </body>
  77. </html>

  • check.php文件
  1. <?php
  2. require_once "auto.php";
  3. session_start();
  4. header("Content-Type:application/json");
  5. $data=trim(file_get_contents('php://input'));
  6. // json 转为数组
  7. $user=json_decode($data,true);
  8. //
  9. $res=UserContr::login($user['account'],$user['password']);
  10. if($res['stutas']==0){
  11. setcookie('id',1);
  12. $_SESSION['account']=$user['account'];
  13. }
  14. echo json_encode($res);
  • UserContr.php文件UserContr类中的用户登录代码
  1. //用户登录
  2. public static function login($account,$password){
  3. $pdo =CreatePDO::Create();
  4. $sql="SELECT * FROM `php_user` WHERE account='".$account."'";
  5. $pre=$pdo->prepare($sql);
  6. $exec=$pre->execute();
  7. $arr=$pre->fetch();
  8. if(empty($arr)){
  9. $res=['status'=>1,'msg'=>'用户不存在'];
  10. }elseif($arr['password']!=md5($password)){
  11. $res=['status'=>2,'msg'=>'密码不正确'];
  12. }else{
  13. $res=['status'=>0,'msg'=>'登录成功'];
  14. }
  15. return $res;
  16. }
  • header.php 文件
  1. <?php
  2. session_start();
  3. if(empty($_COOKIE['id'])){
  4. echo "<script>window.location.href='login.html'</script>";
  5. exit;
  6. }
  7. $account=$_SESSION['account'];
  8. ?>
  9. <div class="header">
  10. <div><span><?=$account?></span> <a href="destroy.php">注销</a>
  11. </div>
  12. </div>
  13. <style>
  14. *{
  15. margin: 0;
  16. padding: 0;
  17. }
  18. .header{
  19. height: 30px;
  20. background-color: purple;
  21. }
  22. .header div{
  23. width: 15em;
  24. margin:5px 0px ;
  25. position: fixed;
  26. right: 2px;
  27. color: lightsalmon;
  28. }
  29. a{
  30. text-decoration: none;
  31. }
  32. .header a{
  33. margin:auto 1rem;
  34. color: #eee;
  35. }
  36. </style>
  • 在showuser.php文件中引入header.php文件。
  1. <?php require_once "header.php" ?>

  • 注销文件 destroy.php
  1. <?php
  2. setcookie('id',1,time());
  3. $_SESSION['account']=null;
  4. echo '<script>alert("退出登录");location.href="login.html"</script>';

更多相关文章

  1. Linux常用命令大全(最完整)
  2. 40个常用Linux命令
  3. 对 Linux 新手非常有用的 20 个命令
  4. linux常用命令--开发调试篇
  5. 玩转 Linux,掌握这些 Linux 命令就够了!
  6. 27个Linux文档编辑命令
  7. 用node和express连接mysql实现登录注册
  8. Linux命令中的find命令
  9. 使用面向对象方法实现用户信息增删改查

随机推荐

  1. 如何在MS Access查询中重复模式
  2. 连接WCF报EntityFramework.SqlServer 错
  3. SQLSERVER的中文排序规则
  4. 为什么我不能在Windows 7专业64位SP1上安
  5. Red Hat5下源码安装mysql5.6过程记录
  6. 如何编写这个SQL查询?
  7. 使用Clustered ColumnStore Index插入唯
  8. 数据库sql及索引优化
  9. [置顶] sql server中对日期字段值
  10. SQLSERVER2005调试存储过程跟函数