6、ThinkPHP6实战开发高大上企业站(TP6)之用户登录
前言
今天开始实战一个登录功能。
新建控制器
新建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
二维码
打赏
文章目录
关闭
共有 0 条评论