【項目實戰】TP5驗證碼的引用

 

引入驗證碼

（1）打開composer的安裝列表搜索think-captcha

 

 

（2）選擇合適的版本，配置本身的框架使用，我這裏使用的是tp5的框架，所i選擇1.08的版本

（3）cmd到本身的項目目錄下，執行composer require topthink/think-captcha 1.* -vvv

執行成功後最後就是這個樣子的

 

（4）控制器引入驗證碼

第一張圖是引入驗證碼的類，第二張圖是生成驗證碼

 

public function verify()
    {
        $config =    [
            // 關閉驗證碼雜點
            'useNoise'    =>    false,
            // 關閉曲線
            'useCurve'    =>    false
        ];
        $captcha = new Captcha($config);
        $captcha->length  = 3;
        $captcha->codeSet = '0123456789';
        return $captcha->entry();

    }

（5）視圖引入

這裏惟一一個注意點就是，在點擊驗證碼時還會更新驗證碼，因此加了個onclick事件在拼上獲取驗證碼的連接後邊追加？便可

<div class="layui-form-item">
            <label class="layui-form-label">驗證碼：</label>
            <div class="layui-input-block">
                <input type="number" name="verify" class="layui-input" lay-verify="verify" placeholder="驗證碼" maxlength="4"  max="9999"/><img id="verify_img" src="{:url('shopAdmin/login/verify')}" onclick="this.src = this.src+'?'">
            </div>
        </div>

（6）效果