laravel 添加验证码

1、  安装依赖  composer require gregwar/captcha

2、使用

     

use Gregwar\Captcha\CaptchaBuilder;
use DB;
use Request;
use Session;

//生成验证码
    public function captcha() {
        //生成验证码图片的Builder对象,配置相应属性
        $builder = new CaptchaBuilder;
        //可以设置图片宽高及字体
        $builder->build($width = 250, $height = 70, $font = null);
        //获取验证码的内容
        $phrase = $builder->getPhrase();
        //把内容存入session
        Session::flash('milkcaptcha', $phrase);
        //生成图片
        header("Cache-Control: no-cache, must-revalidate");
        header('Content-Type: image/jpeg');
        $builder->output();
    }

/**
     * Show the form for creating a new resource.
     *
     * @return Response
     */
    public function create_mes(Request $request)
    {
        extract($request::all());
        if (Session::get('milkcaptcha') == $code) {
            //用户输入验证码正确
            return \Response::json(array('code' => 0, 'info' => 'ok'));
        } else {
            //用户输入验证码错误
            return \Response::json(array('code' => 2, 'info' => 'erro'));
        }

        $res = DB::insert('insert message (content,username,createtime,contract) values (?,?,now(),?)',
            [$content, $username, $contract]);
        return \Response::json(array('code' => 0, 'info' => 'ok'));
    }

  3、vue 端 , 提交失败或者成功都重新获取验证码

<img @click="changeCode()" class="vCode" ref="vCImg" :src="baseURL+'captcha'" />


changeCode() {
        let img  = this.$refs.vCImg
        img.src = baseURL+'captcha?'+new Date().getTime();
      }

submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            bolosev.create_mes(this.message).then(res=>{
                if (res.code==0){
                  this.$message.success("留言成功")
                  this.changeCode()
                  this.resetForm(formName)
                }
                else if (res.code==2)
                {
                  this.$message.error("验证码有误")
                  this.changeCode()
                }else
                  this.$message.error("留言失败")
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },

 

posted @ 2018-11-23 18:44  MvloveYouForever  阅读(163)  评论(0编辑  收藏  举报