1.前端页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
input{
height:30px;
float: left;
}
</style>
<script src='js/jquery-3.4.1.js'></script>
</head>
<body>
<input type='text' name='verify' placeholder='请输入验证码'/><span id='verify'></span>
</body>
<script>
function getVerify(){
$.ajax({
url:'/verifyCode?t='+Math.random(),
type:'get',
success:function(data){
$('#verify').html(data);
}
})
}
getVerify()
$('#verify').on('click',function(){
getVerify()
})
</script>
</html>
2.node服务端代码
let express=require('express');
let template=require('art-template');
let app=express();
let path=require('path');
// 验证码
let svgCaptcha=require('svg-captcha');
// cookie
let cookoeParser=require('cookie-parser');
// 引入封装好的数据库操作
let db=require('./service/db');
// 静态资源路径
app.use(express.static(path.join(__dirname,'public')));
// 设置模板路径
app.set('views',path.join(__dirname,'views'));
// 设置模版引擎
app.set('view engine','html');
// express-art-template
app.engine('html',require('express-art-template'));
// 启用cookie
app.use(cookoeParser());// 创建一个验证码
app.get('/verifyCode',(req,res)=>{
// 创建验证码
var captcha = svgCaptcha.create({
color: true, // 彩色
//inverse:false,// 反转颜色
100, // 宽度
height:40, // 高度
fontSize:48, // 字体大小
size:4, // 验证码的长度
noise:3, // 干扰线条
ignoreChars: '0oO1ilI' // 验证码字符中排除 0o1i
});
// console.log(captcha.data); svg 直接输出到页面
// cookie里面放一份，session里面也放一份
req.session=captcha.text.toLowerCase();
// cookie放一份
res.cookie('captcha',req.session);
res.send(captcha.data);
// 往session，cookie中都存入一个验证码，并且把验证码显示在页面上
})
// 监听端口
app.listen(8080,()=>console.log('runnning'));