PHP:【商城后台管理系统】admin超级管理员后台登录界面部署

PHP:【商城后台管理系统】admin超级管理员后台登录界面部署

一.后台管理登录非空验证

二.后台管理登录用户信息验证

三.注意事项

  1. 需要注意储存用户password的时候需要进行加密
  2. 存储password的时候 优先选择password_hash 比 md5 更安全
  3. 如果使用md5 加密 请加严处理

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. <link rel="stylesheet" href="/static/layui-v2.6.8/layui/css/layui.css" />
  8. <script src="/static/layui-v2.6.8/layui/layui.js"></script>
  9. <title>后台登录</title>
  10. <style>
  11. body {
  12. background: lightblue;
  13. }
  14. .box {
  15. width: 500px;
  16. margin: 80px auto;
  17. }
  18. #imgs {
  19. width: 150px;
  20. height: 35px;
  21. cursor: pointer;
  22. }
  23. </style>
  24. </head>
  25. <body>
  26. <div class="box">
  27. <div style="background: #ffffff; border-radius: 4px; box-shadow: 5px 5px 20px #444444; padding: 20px">
  28. <div class="layui-form">
  29. <div class="layui-form-item">
  30. <h2 style="color: gray">后台管理系统</h2>
  31. </div>
  32. <hr />
  33. <div class="layui-form-item">
  34. <label class="layui-form-label" for="username">用户名</label>
  35. <div class="layui-input-block">
  36. <input type="text" class="layui-input" name="username" id="username" />
  37. </div>
  38. </div>
  39. <div class="layui-form-item">
  40. <label class="layui-form-label" for="password">密&nbsp;&nbsp;&nbsp;码</label>
  41. <div class="layui-input-block">
  42. <input type="password" class="layui-input" name="password" id="password" />
  43. </div>
  44. </div>
  45. <div class="layui-form-item">
  46. <label class="layui-form-label" for="captcha">验证码</label>
  47. <div class="layui-input-inline">
  48. <input type="text" class="layui-input" name="captcha" id="captcha" />
  49. </div>
  50. <img src="{:captcha_src()}" alt="captcha" onclick="captcha()" id="imgs" />
  51. </div>
  52. <div class="layui-form-item">
  53. <div style="margin-left: 110px" class="layui-input-block">
  54. <button class="layui-btn" onclick="login()">登录</button>
  55. <span id="tips" style="margin-left: 80px"></span>
  56. </div>
  57. </div>
  58. </div>
  59. </div>
  60. </div>
  61. </body>
  62. </html>
  63. <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
  64. <script type="text/javascript">
  65. //页面开始就获取焦点
  66. $("#username").focus();
  67. //点击登录
  68. function login() {
  69. let data = {};
  70. //jquery trim 截断空格
  71. data.username = $.trim($("#username").val());
  72. data.password = $("#password").val();
  73. data.captcha = $("#captcha").val();
  74. console.log(data);
  75. if (data.username == "") {
  76. layer.alert("请输入用户名",{icon:2});
  77. return;
  78. }
  79. if (data.password == "") {
  80. layer.alert("请输入密码",{icon:2});
  81. return;
  82. }
  83. if (data.captcha == "") {
  84. layer.alert("请输入验证码",{icon:2});
  85. return;
  86. }
  87. $.post(
  88. "/admin/Account/dologin",
  89. data,
  90. function (res) {
  91. if (res.id == 1) {
  92. layer.alert(res.msg,{icon:1});
  93. setTimeout(() => {
  94. window.location.href = '/admin/home/index';
  95. }, 2000);
  96. } else {
  97. captcha();
  98. layer.alert(res.msg,{icon:2});
  99. }
  100. },
  101. "json"
  102. );
  103. }
  104. //点击验证码刷新
  105. function captcha() {
  106. $("#imgs").attr("src", "{:captcha_src()}?rand=" + Math.random());
  107. }
  108. </script>

PHP 代码块

  1. <?php
  2. namespace app\admin\controller;
  3. use app\BaseController;
  4. use think\facade\Db;
  5. use think\facade\View;
  6. use think\facade\Request;
  7. use think\facade\Session;
  8. /**
  9. * 后台账号管理
  10. */
  11. class Account extends BaseController
  12. {
  13. //登录
  14. public function login()
  15. {
  16. return View::fetch('/account/login');
  17. }
  18. //登录执行
  19. public function dologin()
  20. {
  21. $username = Request::post('username');
  22. $password = Request::post('password');
  23. $captcha = Request::post('captcha');
  24. //用户名非空验证
  25. if (empty($username)) {
  26. exit(json_encode(['id'=> 0, 'msg' => '用户名不能为空']));
  27. }
  28. //密码非空验证
  29. if (empty($password)) {
  30. exit(json_encode(['id'=> 0, 'msg' => '密码不能为空']));
  31. }
  32. //验证码非空验证
  33. if (empty($captcha)) {
  34. exit(json_encode(['id'=> 0, 'msg' => '验证码不能为空']));
  35. }
  36. //验证码正确验证
  37. if (captcha_check($captcha)) {
  38. exit(json_encode(['id'=> 0, 'msg' => '验证码不正确']));
  39. }
  40. //查询用户信息
  41. $find = Db::table('admins')
  42. ->where([
  43. 'username' => $username,
  44. ])
  45. ->find();
  46. //验证用户是否存在
  47. if (empty($find)) {
  48. echo json_encode(['id'=> 0, 'msg' => '用户名不存在']);
  49. return;
  50. }
  51. //校验用户信息
  52. if ($find) {
  53. if (md5($find['username'].$password) != $find['password']) {
  54. echo json_encode(['id'=> 0, 'msg' => '密码不正确']);
  55. }else {
  56. echo json_encode(['id'=> 1, 'msg' => '登陆成功']);
  57. }
  58. }else {
  59. echo json_encode(['id'=> 0, 'msg' => '用户名不存在']);
  60. }
  61. //校验成功后 设置用户session
  62. Session::set('admin',$find);
  63. }
  64. }