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属性为 验证码接口：

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！