Authored by ccbikai(👎🏻🍜)

图形验证码

const _ = require('lodash');
exports.index = (req, res) => {
res.render('check', {
width750: true,
localCss: true
});
};
exports.submit = (req, res) => {
let captchaCode = _.get(req.session, 'captcha');
if (req.body.captcha === captchaCode) {
return res.send('ok');
}
return res.send('fail');
};
... ...
... ... @@ -9,9 +9,12 @@
const router = require('express').Router(); // eslint-disable-line
const cRoot = './controllers';
const ads = require(`${cRoot}/ads`);
const check = require(`${cRoot}/check`);
// routers
router.get('/ads', ads.index);
router.get('/check', check.index);
router.post('/check/submit', check.submit);
module.exports = router;
... ...
<div class="check-page">
<div id="js-img-check"></div>
<div class="submit">
确认
</div>
</div>
... ...
require('3party/check.page.css');
// 图片验证码
let ImgCheck = require('plugin/img-check');
let imgCheck = new ImgCheck('#js-img-check', {
useREM: {
rootFontSize: 40,
picWidth: 150
}
});
imgCheck.init();
$(function() {
$('.submit').on('click', function() {
$.ajax({
method: 'POST',
url: '/3party/check/submit',
data: {
captcha: $.trim(imgCheck.getResults())
}
});
});
});
... ...
@import "layout/img-check";
.check-page {
margin: 20px auto;
width: 700px;
.submit {
width: 100%;
height: 100px;
line-height: 100px;
text-align: center;
font-size: 32px;
color: #fff;
background: #5cb85c;
border-radius: 10px;
}
}
... ...