网上学习资料一大堆,但如果学到的知识不成体系,遇到问题时只是浅尝辄止,不再深入研究,那么很难做到真正的技术提升。
一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!
核心代码如下:
const express = require('express');
const session = require('express-session');
const serveStatic = require('serve-static');
const bodyParser = require('body-parser');
const app = express();
// parse application/x-www-form-urlencoded so that req will has a body attribute
app.use(bodyParser.urlencoded({ extended: false }))
app.use(serveStatic('./public'));
const port = 12024;
app.use(session({
secret: '雷学委mySecret2021',
resave: false,
saveUninitialized: true,
cookie: { secure: false}
}))
const svgCaptcha = require('svg-captcha');
// a function to generate captcha and display on user screen
const captChaHandler = function(req, res){
var captcha = svgCaptcha.create();
req.session.captcha = captcha.text;
res.type('svg');
res.status(200).send(captcha.data);
}
app.get('/captcha',captChaHandler);
//user will submit form with code in request body and login handler will get captcha from session and check it with given code
app.post('/login', function(req, res){
console.log('[雷学委] try login');
console.log('[雷学委] body:', req.body);
var captchaCode = req.session.captcha
console.log('[雷学委] captchaCode:', captchaCode)
if(req.body && req.body.code == captchaCode){
res.status(200).send(req.body.user + " 登录验证成功!");
}else{
console.log('[雷学委] 验证码校验失败');
res.status(400).send("BadRequest, 验证码不对!");
}
});
console.log('listening port ' + port);
app.listen(port);
对应的我们在页面可以编写类似下面的代码(非完整,仅重点展示核心实现)
<form>
姓名: <input type="text" id="username" value="雷学委" /><br/>
验证码:<input type="text" id="code" value="" /> <img class="captcha" src="/captcha" οnclick={$(event.target).attr('src','/captcha?'+Math.random())} /> <br/>
<input type="submit" value="Submit" />
</form>
<br/><div id="result"></div>
<script src="https://cdn.staticfile.org/jquery/3.4.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("form").submit(function(e){
e.preventDefault();
var userName = $("#username").val();
var code = $("#code").val();
$.ajax({
type: 'post',
data: {user:userName, code: code},
url: "http://localhost:12024/login/",
success:function(data){$('#result').html(JSON.stringify(data));},
error:function(error){$("#result").html(JSON.stringify(error));}
})
});
}
主要是为了实现下面的form表单:
对了,学委还有这个可以关注长期阅读 =>雷学委趣味编程故事汇编
或者=> 雷学委NodeJS系列
持续学习持续开发,我是雷学委!
编程很有趣,关键是把技术搞透彻讲明白。
创作不易,请多多支持,点赞收藏支持学委吧!
更多代码可以查看/Star: LearnNodeJS代码下载
参考链接
网上学习资料一大堆,但如果学到的知识不成体系,遇到问题时只是浅尝辄止,不再深入研究,那么很难做到真正的技术提升。
一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!
/topics/618545628)**
一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!