验证码----svg-captcha

最新推荐文章于 2024-05-16 19:06:52 发布

你真的快乐吗

最新推荐文章于 2024-05-16 19:06:52 发布

阅读量5.3k

点赞数 11

分类专栏： Node 文章标签： javascript npm node.js

本文链接：https://blog.csdn.net/qq_42840755/article/details/123026816

版权

Node 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

验证码----svg-captcha

首先找或者新建一个空文件夹,下面是我新建的空文件夹
在这里插入图片描述

然后npm验证码svg-captcha模块

npm i --save svg-captcha

相信各位都知道一个node项目还要继续引入什么模块吧,可能有刚刚接触nodejs的小伙伴,我还是将需要引入什么模块展示到下面吧

npm i express
npm i body-parser

然后再yanzhengma目录下新建一个public文件夹,用来存放静态资源,然后在public文件夹下新建一个captcha.html文件,下面是我的目录结构
在这里插入图片描述
这里就不多说了,直接上代码

app.js

// 加载express模块
const express = require("express")
// 加载bodyParser模块
const bodyParser = require("body-parser")
// API网址:https://github.com/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="https://unpkg.com/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.img
          let str = res.data.str
          svg = `<div>${svg}</div>`
          aaa.innerHTML = svg
        })
      }
      refresh()
    </script>
  </body>
</html>

然后运行app.js

node app.js

在这里插入图片描述
接着浏览器访问后网页效果如下图

开发者模式控制台打印出来的数据如图

下面是数字算数随机验证码的效果和开发者模式控制台打印的数据图

这里我们可以看到,我这里出来的是"2+5",然后其计算结果为7,开发者模式控制台打印的数据下的"data.str"为"7"

感谢您能够认真看完我的文章

你真的快乐吗

关注

11
点赞
踩
18

收藏

觉得还不错? 一键收藏
打赏
6
评论
验证码----svg-captcha

验证码----svg-captcha首先找或者新建一个空文件夹,下面是我新建的空文件夹然后npm验证码svg-captcha模块npm i --save svg-captcha相信各位都知道一个node项目还要继续引入什么模块吧,可能有刚刚接触nodejs的小伙伴,我还是将需要引入什么模块展示到下面吧npm i expressnpm i body-parser然后再yanzhengma目录下新建一个public文件夹,用来存放静态资源,然后在public文件夹下新建一个captcha.h
复制链接

扫一扫