Lumen企业站内容管理实战 - 后台管理之验证码

后台管理之验证码

 后台管理的登录，看页面

重要的是验证码，用户名和密码好弄。要是用验证码，咱得引入扩展包，开始命令

composer require youngyezi/captcha

到目前为止，这个扩展还不支持lumen6.0版本，如果出现安装不了该扩展包的情况，首先在composer.json文件中查看

 如果这一项不是5.8，建议你改为5.8，然后再执行命令

composer update

更新成功后，再执行命令

composer require youngyezi/captcha

 这样就安装成功了。

然后在bootstrap/app.php文件中新增一条

$app->register(\Youngyezi\Captcha\CaptchaServiceProvider::class);

然后我们在/routes/web.php文件中写个验证码路由

// 验证码
$router->get('/captcha', 'Web\\CaptchaController@create'); // 验证码

这行代码不要放到任何分组里，单独放起来，然后我我们到/app/Http/Controller/目录下建立一个Web目录，在Web目录下，再新建一个CaptchaController.php文件，如下

 然后写一个create()方法。

create();
        setcookie('captcha',$data['key']);

        $this->response->setData($data['img']);
        return $this->response->responseJSON();
    }
}

用浏览器访问：http://你的域名/captcha，会看到这样的结果

这样就对了，这个是接口返回的，把图片转成了base64格式，前端使用的时候，把接口返回的data的值付给img的src，然后验证码就会在网页上展示出来。

前端JS的主要代码

$('#LAY-user-get-vercode').click(function () {
        captcha();
    });

    captcha();
    function captcha() {
        $.getJSON('/captcha', function (data) {
            $('#LAY-user-get-vercode').attr('src', data.data);
        });
    }

一个captcha方法，在页面加载的时候调用，点击图片的时候调用

 验证码的数量有点多，我们该为4个。

我们把/verdoer/youngyezi/captcha/目录下的conf目录复制到项目目录下

 然后修改default下的length为4，height为46

'default'   => [
        'length'    => 4,
        'width'     => 120,
        'height'    => 46,
        'quality'   => 90,
    ],

然后刷新登录页面

没问题 ，