userRouter.get('/getCaptcha', (req, res) => {
res.header('Access-Control-Allow-Origin', "*");
const cap = captcha.create({
size: 4,
ignoreChars: '0o1il',
noise: 1,
color: true,
background: '#cc9966'
});
req.session.captcha = cap.text; // session 存储
res.type('svg'); // 响应的类型
res.send(cap.data);
})
复制代码
const session = require('express-session');
app.use(session({
secret: 'luckystar',
name: 'captcha',
resave: false,
saveUninitialized: true,
cookie: { maxAge: 50000 },
rolling: true,
}));
复制代码
<el-form-item prop="password">
<el-input placeholder="请输入验证码" v-model="loginForm.captcha">
//img中的src就是node后台设置的验证码的请求地址
<img
class="captcha-img"
src="http://localhost:3003/user/getCaptcha"
slot="append"
@click="changeCaptcha"
/>
</el-input>
<i class="el-icon-edit-outline el-icon"></i>
</el-form-item>
<script>
methods:{
changeCaptcha(e){
e.target.src = `http://localhost:3003/user/getCaptcha?${Math.random()}`;
}
}
</script>
复制代码
以上这四步是将验证码显示在前端界面上,并无进行数据的提交前端