验证码---svg-captcha

效果：

1.下载安装svg-captcha模块

npm install --save svg-captcha

2.在后端app.js中写入

var svgcaptcha=require('svg-captcha')

router.get('/captcha',(req,res)=>{
  let options={
    size:4,  //4个字母
    noise:2, //2条干扰线
    color:true, //文字颜色
    background:'#666', //背景颜色
  }
  var captcha=svgcaptcha.create(options)//字母和数字随机验证码
  let {text,data}=captcha
  //text是指随机生成的验证码
  //data是指svg的字节流信息
  res.type('svg')
  res.send({
    img:captcha.data,
    str:captcha.text 
  })
})

3.前端：

<div class="box">
            <div>
              <input
                style="width: 200px; height: 40px"
                type="text"
                v-model="this.code"
                placeholder="请输入验证码"
              />
            </div>
           <div @click="frech" id="aaa"></div>
</div>

注：#aaa是用来存放验证码的

 async frech() {
      let { data } = await this.$axios.get("/captcha");
      let svg = data.img;
      let st = data.str;
      svg = `<div>${svg}</div>`;
      aaa.innerHTML = svg;
      console.log(st);
    },

4.运行代码

在开发者模式控制台中就会出来验证码的数据

完成验证码功能