Node学习（九）062-管理系统之登录和注册-使用验证码——验证码插件-svg-captcha & 前端生成动态验证码图片 & 服务端验证验证码数据

Node学习（九）062-管理系统之登录和注册-使用验证码——验证码插件-svg-captcha & 前端生成动态验证码图片 & 服务端验证验证码数据

8.4 使用验证码

csdn参考链接——https://blog.csdn.net/qq_28027903/article/details/78656333

gihub参考链接——https://github.com/lemonce/svg-captcha

npm 安装 npm i svg-captcha

可以去github.com网站去搜一下这个插件，然后将使用的代码复制到你的app.js中即可：

验证码方法

验证码接口

验证码页面效果

代码

验证码页面部分

 <div class="form-group">
                  <label for="vCode" class="col-sm-2 control-label">验证码</label>
                  <div class="col-sm-6">
                    <input type="text" name="vcode" class="form-control" id="vcode" placeholder="请输入验证码" />
                  </div>
                  <div class="col-sm-4">
                    <!-- 设置验证码的路由地址即可 -->
                    <img class="vCode" src="/captcha" onclick="this.src='/captcha?t=' + Date.now()" />
                  </div>
                </div>

验证码接口部分

// 8. 生成验证码的接口
var svgCaptcha = require('svg-captcha');

app.get('/captcha', function (req, res) {
    
    
	// var captcha = svgCaptcha.createMathExpr({ // 使用数字之和当做验证码
    
	var captcha = svgCaptcha.create({
    
    
        color: true,
        background: '#ed52c9'
    });

    // req.session.captcha = captcha.text; // 把这行代码先注释了，否则会报错
    // 输出验证码字符的结果：
    console.log(captcha.text);  // 数字之和或输入的验证码字母
	
	res.type('svg');
	res.status(200).send(captcha.data); // 响应给浏览器一张验证码“图片”
});

下一步可以通过浏览器单独测试验证码：127.0.0.1:3000/captcha 查看是否可以看到验证码图片。

在登录页面 （login.html）中，设置验证码图片的src属性为 验证码接口：