基于node网站验证码

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,// 反转颜色
        width: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'));

 

posted @ 2020-06-10 11:10  pony_bug  阅读(188)  评论(0)    收藏  举报