如何将前端jQuery验证码生成函数转为Node.js模块并使用

我来一步步帮你完成这个转换，核心思路就是把原来前端的验证码生成逻辑迁移到后端模块，再通过接口给前端返回生成的验证码：

1. 创建Node.js验证码生成模块 #

首先在项目根目录新建一个工具模块，比如 utils/captchaGenerator.js，把原有的验证码生成逻辑改写成CommonJS模块的形式：

// utils/captchaGenerator.js
function createCode() {
  let code = "";
  const codeLength = 6;
  const randomChars = [2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','J','K','M','N','P','Q','R', 'S','T','U','V','W','X','Y','Z'];
  
  for(let i = 0; i < codeLength; i++) {
    const index = Math.floor(Math.random() * randomChars.length);
    code += randomChars[index];
  }
  return code;
}

module.exports = { createCode };

这里我做了小优化：把数组名改成更清晰的randomChars，用randomChars.length代替硬编码的30，后续修改字符集会更方便。

2. 修改Koa路由，添加验证码接口 #

接下来在app.js里引入这个模块，新增一个GET接口用于生成并返回验证码，同时可以给原网页路由传入初始验证码（可选）：

// app.js
const Koa = require('koa');
const Router = require('koa-router'); // 假设你使用koa-router
const render = require('koa-ejs'); // 假设你使用koa-ejs
const { createCode } = require('./utils/captchaGenerator');

const app = new Koa();
const router = new Router();

// 原有网页路由：渲染页面时传入初始验证码（可选）
router.get('/webpage', async (ctx) => {
  const initialCode = createCode();
  await ctx.render('webpage', { initialCode });
});

// 新增验证码生成接口
router.get('/api/generate-captcha', async (ctx) => {
  const newCode = createCode();
  // 可选：如果后续要做验证码验证，这里可以把code存入session
  // ctx.session.captcha = newCode;
  ctx.body = {
    code: 200,
    data: newCode
  };
});

app.use(router.routes()).use(router.allowedMethods());
// ...其他Koa中间件配置（比如session、ejs渲染配置等）

3. 修改前端EJS页面代码 #

现在前端不再自行生成验证码，而是通过点击请求后端接口获取，修改webpage.ejs里的代码：

<!-- webpage.ejs -->
<a id="createACode"><%= initialCode %></a>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function(){
  // 点击a标签请求后端接口更新验证码
  $("#createACode").click(function(){
    $.get('/api/generate-captcha', function(res) {
      if(res.code === 200) {
        $("#createACode").text(res.data);
      }
    });
  });
});
</script>

如果不需要初始验证码，可以把<a>标签的初始内容留空，或者在页面加载时自动调用一次接口填充。

额外提示 #

• 如果后续需要做验证码验证，记得引入koa-session中间件，把生成的验证码存入session，验证时对比用户输入和session中的值。
• 接口返回格式可以根据你的项目规范调整，比如直接返回验证码字符串，不用包裹对象。

内容的提问来源于stack exchange，提问作者yupang