6、ThinkPHP6实战开发高大上企业站（TP6）之用户登录

小何 • • php • 419 阅读

前言

今天开始实战一个登录功能。

 

新建控制器

新建login控制器

php think make:controller admin@Login

 新建视图页面

新建login.html页面

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>后台登录</title>
  <link href="/public/static/admin/layui/css/layui.css" rel="stylesheet" />
  <style>
    body {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100vh;
      margin: 0;
      padding: 0;
      background: url("/public/static/admin/images/bg.jpg") no-repeat center center fixed;
      background-size: cover;
      backdrop-filter: blur(10px);
    }

    .demo-login-container {
      width: 320px;
      margin: 21px auto 0;
    }

    .demo-login-other .layui-icon {
      position: relative;
      display: inline-block;
      margin: 0 2px;
      top: 2px;
      font-size: 26px;
    }

    .h-main-wrapper {
      width: 350px;
      margin: 0 auto;
      margin-top: 15%;
      padding: 10px;
      background: #fff;
      border-radius: 5px;
      box-shadow: 0px 0px 5px 2px #00000033;
    }

    .h-main-header {
      font-size: 24px;
      text-align: center;
    }
  </style>
</head>

<body class="h-main">
  <div class="h-main-wrapper">
    <h3 class="h-main-header">后台登录</h3>
    <div class="layui-form">
      <div class="demo-login-container">
        <div class="layui-form-item">
          <div class="layui-input-wrap">
            <div class="layui-input-prefix">
              <i class="layui-icon layui-icon-username"></i>
            </div>
            <input type="text" name="username" value="" lay-verify="required" placeholder="用户名" lay-reqtext="请填写用户名"
              autocomplete="off" class="layui-input" lay-affix="clear" />
          </div>
        </div>
        <div class="layui-form-item">
          <div class="layui-input-wrap">
            <div class="layui-input-prefix">
              <i class="layui-icon layui-icon-password"></i>
            </div>
            <input type="password" name="password" value="" lay-verify="required" placeholder="密   码"
              lay-reqtext="请填写密码" autocomplete="off" class="layui-input" lay-affix="eye" />
          </div>
        </div>
        <div class="layui-form-item">
          <div class="layui-row">
            <div class="layui-col-xs7">
              <div class="layui-input-wrap">
                <div class="layui-input-prefix">
                  <i class="layui-icon layui-icon-vercode"></i>
                </div>
                <input type="text" name="captcha" value="" lay-verify="required" placeholder="验证码" lay-reqtext="请填写验证码"
                  autocomplete="off" class="layui-input" lay-affix="clear" />
              </div>
            </div>
            <div class="layui-col-xs5">
              <div style="margin-left: 10px">
                <img src={:captcha_src()} title="" onclick="this.src='{:captcha_src()}?rand='+Math.random()"
                  class="captcha" width="100%" height="38px" />
              </div>
            </div>
          </div>
        </div>
        <!-- <div class="layui-form-item">
          <input type="checkbox" name="remember" lay-skin="primary" title="记住密码" />
          <a href="#forget" style="float: right; margin-top: 7px">忘记密码？</a>
        </div> -->
        <div class="layui-form-item">
          <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="admin-login">
            登录
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
  <script src="/public/static/admin/layui/layui.js"></script>
  <script>
    layui.use(['jquery', 'form', 'layer'], function () {
      var form = layui.form
      var layer = layui.layer
      var $ = layui.jquery

      // 提交事件
      form.on("submit(admin-login)", function (data) {
        var field = data.field // 获取表单字段值
        
        $.ajax({
          url: "/admin/login", //实际使用请改成服务端真实接口
          data: field,
          method: "POST",
          success: function (res) {
            console.log(res)
             layer.msg(res.msg, {
               time: 5000
             });
          },
        });

        return false; // 阻止默认 form 跳转
      })
    });
  </script>
</body>

</html>

 编写控制器代码

<?php

declare (strict_types=1);

namespace app\admin\controller;

use think\facade\View;
use think\facade\Db;
use think\Request;
use app\admin\controller\User;

class Login extends Base
{
    public function index()
    {
        if(request()->isPost()) {
            $data = $this->request->param();

            // 校验验证码
            if(!captcha_check($data['verifycode'])) {
                // 校验失败
                return jsonError('验证码不正确', '', 422);
            }

            // 查询用户名是否存在
            $adminData = Db::name('admin')->where('username', $data['username'])->find();

            // 用户信息不存在 或者被禁用
            if(!$adminData ||  $adminData['status'] != 1) {
                return jsonError('用户不存在，或者此用户未被审核通过', '', 401);
            }

            // 用户信息存在，  根据加密规则校验
            if(password_verify($data['password'] . $adminData['salt'], $adminData['password'])) {
                return jsonError('密码不正确', '', 401);
            }

            unset($adminData['password']);
            unset($adminData['salt']);

            session('adminData', $adminData);
            return jsonSuccess('登录成功！', $adminData, 200);

        } else {
            View::config(['view_path' => APP_PATH . 'app/admin/view/']);
            return View();
        }
    }
}

 

访问网页

 

http://test.cc/admin/login

 

版权声明：
作者：小何
链接：https://ligo100.cn/houduanjishu/php/480.html
来源：小何博客
文章版权归作者所有，未经允许请勿转载。

THE END
分享
二维码
打赏
< <上一篇
下一篇>>
文章目录
关闭
目 录