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': '/' } },
