验证码----svg-captcha
首先找或者新建一个空文件夹,下面是我新建的空文件夹
然后npm验证码svg-captcha模块
npm i --save svg-captcha
相信各位都知道一个node项目还要继续引入什么模块吧,可能有刚刚接触nodejs的小伙伴,我还是将需要引入什么模块展示到下面吧
npm i expressnpm i body-parser
然后再yanzhengma目录下新建一个public文件夹,用来存放静态资源,然后在public文件夹下新建一个captcha.html文件,下面是我的目录结构
这里就不多说了,直接上代码
app.js
// 加载express模块const express = require("express")// 加载bodyParser模块const bodyParser = require("body-parser")// API网址:/produck/svg-captcha/blob/1.x/README_CN.md// 加载图片验证码模块const svgCaptcha = require("svg-captcha")// 创建服务器对象const server = express()server.use(bodyParser.urlencoded({extended: false,}))//静态资源管理server.use(express.static("public"))// 图片验证码接口server.get("/captcha", (req, res) => {// 设置字母随机验证码相关属性let options = {size: 4, // 4个字母noise: 2, // 干扰线2条color: true, // 文字颜色background: "#666", // 背景颜色// 数字的时候，设置下面属性。最大，最小，加或者减// mathMin: 1,// mathMax: 30,// mathOperator: "+",}//这里可以分为字母和数字随机验证码和数字算数随机验证码,//我就先展示字母和数字随机验证码了,//如果想尝试数字算数随机验证码可以将下一行取消注释,将数字算数验证码解开注释即可let captcha = svgCaptcha.create(options) //字母和数字随机验证码// let captcha = svgCaptcha.createMathExpr(options) //数字算数随机验证码let {text, data } = captcha// console.log(text,data);// text是指产生的验证码，data指svg的字节流信息res.type("svg")res.send({img: captcha.data, str: captcha.text })})// 指定服务器对象监听的端口server.listen(3000, () => {console.log("服务器启动成功...")})
public/captcha.html
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>图片验证码</title></head><body><div><div onclick="refresh()" id="aaa">验证码占位区</div></div><div>点击刷新</div><!-- 引入axiosjs文件,用来发起请求,我这里是直接引入的在线的axios文件,当然大家可以去网上下载axios文件,直接放到public文件夹里面再引入--><script src="/axios/dist/axios.min.js"></script><!-- <script src="./axios.js"></script> --><script>// 刷新方法function refresh() {// 发送请求this.axios.get("/captcha").then((res) => {console.log(res)let svg = res.data.imglet str = res.data.strsvg = `<div>${svg}</div>`aaa.innerHTML = svg})}refresh()</script></body></html>
然后运行app.js
node app.js
接着浏览器访问后网页效果如下图
开发者模式控制台打印出来的数据如图
下面是数字算数随机验证码的效果和开发者模式控制台打印的数据图
这里我们可以看到,我这里出来的是"2+5",然后其计算结果为7,开发者模式控制台打印的数据下的"data.str"为"7"
感谢您能够认真看完我的文章
