jquery+Express实现验证码

验证码实现思路

1. 服务端生成一个二进制验证码图片文件和对应的验证码文本
2. 客户端img标签发起网络请求，服务端响应验证码图片

服务端

第一步 : 安装第三方模块

在当前服务端项目下打开终端，执行

npm install svg-captcha

第二步 : 创建users路由并导入模块

// 导入Express模块
const express = require('express');
// 导入验证码模块
const svgCaptcha = require('svg-captcha');
// 导入Express路由模块
const router = express.Router();

第三步 : 配置路由

//获取验证码 将验证码返回
router.get("/captcha",(req,res)=>{
    //创建验证码
    //默认四位数验证码
    const captcha = svgCaptcha.create({
        noise:3 //噪声线/干扰线
    });
    //设置响应类型
    res.type("svg");
    //响应数据
    res.status(200).send(captcha.data);
})
​
//导出路由
module.exports = router;

第四步 : 在app.js中导入路由

// 导入用户路由
const usersRouter = require("./routes/users");
// 注册路由
app.use("/users",usersRouter);

客户端

第一部 : 更换img标签的src路径

<!-- 向服务端发送请求，将服务端响应的数据放在src中-->
<img class="captcha" src="/users/captcha" >

第二部 ：点击更换验证码

// 引入jQuery
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(function(){
    //更换验证码图片
    $(".captcha").click(function(){
        //避免因为url未产生改变 服务器出现数据缓存 不重新请求的情况
        //这里携带一个变量(可以选择：随机数/时间戳)
        $(this).attr("src",`/users/captcha/?${Math.random()}`);
    })
})
</script>

tips

• 本文只写了如何实现验证码，验证可以放在服务器端。

• 思路:

  1. 安装cookie-session第三方模块
  2. 配置session
  3. 将验证码的值保存(captcha.text)到session中
  4. 在登录路由中进行验证 如果觉得这片文章对您有帮助可以帮我一键三连，有问题大家也可以私信问我。