koa2使用svg-captcha生成验证码接口（含前端vue项目中使用）-阿里云开发者社区

koa2使用svg-captcha生成验证码接口（含前端vue项目中使用）

2024-07-02 306

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： koa2使用svg-captcha生成验证码接口（含前端vue项目中使用）

koa项目中

安装插件svg-captcha

cnpm i --save svg-captcha

src\api\captcha.js

const svgCaptcha = require('svg-captcha');
 
function getCaptcha(ctx) {
    //  若创建算数式验证码，将create改为createMathExpr
    const newCaptcha = svgCaptcha.create({
        size: 4, //验证码长度
        fontSize: 45, //验证码字号
        noise: Math.floor(Math.random() * 5), //干扰线条数目_随机0-5条
        width: 120, //宽度
        height: 40, //高度
        color: true, //验证码字符是否有颜色，默认是没有，但是如果设置了背景颜色，那么默认就是有字符颜色
        background: '#ccc' //背景色
    })
 
 
    ctx.body = {
        data: newCaptcha.data,
    }
}
 
module.exports = {
    getCaptcha
}

src\routes\captchaRouter.js

const Router = require('koa-router')
const router = new Router()
 
const captchaAPI = require('../api/captcha')
 
router.get('/captcha', captchaAPI.getCaptcha)
 
module.exports = router

src\routes\routes.js 中添加captchaRouter

const combineRoutes = require('koa-combine-routers')
const userRouter = require('./userRouter')
const blogRouter = require('./blogRouter')
const captchaRouter = require('./captchaRouter')
 
module.exports = combineRoutes(userRouter, blogRouter, captchaRouter)

此时启动项目，通过访问 http://localhost:3000/captcha 便能得到验证码数据

Vue项目中

使用 v-html进行验证码图片的渲染

<div style="display: flex">
    <el-input v-model="formData.captcha" placeholder="请输入验证码"></el-input>
    <!--验证码-->
    <div @click="getCaptcha" v-html="captcha" style="margin-left: 6px">
    </div>
</div>

data中添加变量 captcha: '',

// 获取验证码
getCaptcha() {
    this.$http.get("/api/captcha")
        .then(res => {
            this.captcha = res.data.data;
        })
},

此时 vue.config.js 中的跨域配置为：

// 后端服务器地址
let url = 'http://localhost:3000/'

    devServer: {  // 开发环境跨域情况的代理配置
        proxy: {
            // 【必要】访问自己搭建的后端服务器
            '/api': {
                target: url,
                changOrigin: true,
                ws: true,
                secure: false,
                pathRewrite: {
                    '^/api': '/'
                }
            },