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

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

8.4 使用验证码

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

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

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/sjkxydsj/10829.html