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>
複製代碼