Thinkphp6学习(2)验证码的实现与检验

2022-10-25 14:56:56 浏览数 (1)

Thinkphp6学习(2)验证码的实现与检

一.安装think-captcha扩展包

首先使用Composer安装think-captcha扩展包:

composer require topthink/think-captcha

二.开启Session

验证码库需要开启Session才能生效

在app目录下有一个文件middleware.php,把“thinkmiddlewareSessionInit::class”的注释去掉就行了

三.控制器中的代码要先use以下的类

<?php

……

use thinkcaptchafacadeCaptcha;

use thinkfacadeSession;

use thinkmiddlewareSessionInit;

……

才能正确使用

四、下面是在视图中使用的代码

<div>{:captcha_img()}</div>

显示如下,点击可以刷新

五。接下来要点击提交到后台进行检验啦

1.前台:加上提交的地址与方法

<form class="layui-form" action="{:url('capchick')}" method="post" >

2.后台进行检测代码

六、效果:

(1)

(2)

下面是所有的代码

代码语言:javascript复制
最后是所有的代码
控制器的php代码
<?php
namespace appcontroller;

use appBaseController;
use thinkfacadeDb;
use thinkfacadeView;
use thinkcaptchafacadeCaptcha;
use thinkfacadeSession;
use thinkmiddlewareSessionInit;
use thinkfacadeRequest;

class Captest extends BaseController
{
public function index()
{

return View::fetch();
    }

public function capchick()
{
      $data = Request::param();
//dump($data);
if(captcha_check($data['vcode'])){
echo "验证码正确";
        }else{
echo "验证码错误";
        };

    }
}
前端的代码html代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" type="text/css" href="/static/layui/css/layui.css">
<!--   <script type="text/javascript" src="/static/layui/jquery-3.4.1.min.js"></script> -->
    <script type="text/javascript" src="/static/layui/layui.js"></script>

</head>
<body>
  <div>
  <h1 >验证码测试</h1>
  </div>
  <form class="layui-form" action="{:url('capchick')}" method="post" >
    <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label">验证码</label>
          <div class="layui-input-inline">
            <input type="text" name="vcode" class="layui-input">
          </div>
        </div>
        <div class="layui-inline">
          <div width="120" height="50"> {:captcha_img()}</div>
        </div>
      </div>

    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
      </div>
    </div>
</form>


</body>
</html>

===今天学习到此===

0 人点赞