Laravel框架验证码的实现

Laravel框架的安装

composer create-project --prefer-dist laravel/laravel （能够指定安装的Laravel版本） 安装以后的框架以下：

Laravel+H-ui.admin实现验证码的验证

验证码的生成过程验证码的生成过程：画画布、生成干扰线、生成噪点、生成验证码、生成验证码存入session、输出图片

在Laravel框架中安装验证码的依赖

#composer require mews/captcha(关键词：captcha)

使用php artisan vendor:publish在config下生成captcha.php （对验证码的内容可进行修改）

生成访问服务端的路由

Route::group(['prefix' => 'admin'],function () {

//后台登陆的路由
Route::get('login', 'Admin\LoginController@login')->name('login');
//后台登陆处理页面
Route::post('chick', 'Admin\LoginController@chick');
//后台退出的路由
Route::get('logout', 'Admin\LoginController@logout');
复制代码

});

生成控制器

#php artisan make:contoller Admin/LoginController

控制器内容编写

<?php

namespace App\Http\Controllers\Admin;

use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use Illuminate\Support\Facades\Input;
use  Auth;

class LoginController extends Controller
{
    //登陆界面的视图
    public function login(){
        return view('admin.login');
    }
    //验证测试
    public function chick(Request $request){
        //开始自动验证
        //验证规则：  须要验证的字段名 => ‘验证规则1|验证规则2|验证规则3...’
        if (Input::method() == 'POST'){
            $this -> validate($request,[
                'username' => 'required|min:3|max:10',
                'password' => 'required|min:6',
                'captcha' => 'required|size:5|captcha'
            ]);
            //继续进行管理员的身份验证
            $data = $request -> only(['username','password']);
            $data['status'] = '2';//要求状态为启动的用户
            $result = Auth::guard('admin') -> attempt($data,$request -> get('online'));
            if ($result){
                return redirect('/admin/index/index');
            }
            else{
                return redirect('/admin/login') -> withErrors([
                    'loginError' =>  '用户名或密码错误'
                ]);
            }
        }
    }
    //退出的控制编写
    public function logout(){
        Auth::guard('admin')-> logout();
        return view('admin.login');
    }

复制代码

引入ui.admin下的index.html页面

页面内容：

<div class="row cl">
    <label class="form-label col-xs-3"><i class="Hui-iconfont">&#xe63f;</i></label>
    <div class="formControls col-xs-8 ">
        <input class="input-text size-L" type="text" placeholder="验证码" onblur="if(this.value==''){this.value='验证码:'}" onclick="if(this.value=='验证码:'){this.value='';}" value="验证码:" style="width:150px;">
        <img src="{{captcha_src()}}"/> <a id="kanbuq" href="">看不清，换一张</a> </div>
</div>
复制代码

实现验证码的刷新

先引入jQuery

<script type="text/javascript" src="/lib/jquery/1.9.1/jquery.min.js"></script>
复制代码

<script type="text/javascript">
    //定义Jquery载入事件
    //获取验证码的地址
    $(function () {
        var src = $('img').attr('src');
        $(#kanbuq).click(function () {
           $('img').attr('src',src + '&_=' + Math.random());
        });
    });
</script>
复制代码