通过Nodejs搭建网站简单实现注册登录流程

let $formBox = $('.box_form_container'),
$navitems = $('.box_nav_item'),
$nav_item_signup = $('.box_nav_item_signup'),
$nav_item_login = $('.box_nav_item_login');
let pwdRouter = Backbone.Router.extend({
routes: {
'login': 'login',
'signup': 'signup'
},
login: function() {
$formBox.removeClass('box_form_container_signup').addClass(
'box_form_container_login');
$navitems.removeClass('box_nav_item-current');
$nav_item_login.addClass('box_nav_item-current');
},
signup: function() {
$formBox.removeClass('box_form_container_login').addClass(
'box_form_container_signup');
$navitems.removeClass('box_nav_item-current');
$nav_item_signup.addClass('box_nav_item-current');
}
});
let router = new pwdRouter();
Backbone.history.start();

// 登录表单添加验证规则
$('.login_form').validate({
rules: {
signname: {
required: true,
signname: true
},
password: {
required: true,
norepeat: true
},
verifycode: {
required: true
}
},
errorPlacement: function(error, element) {
let container = element.parent().find('.form_error');
error.appendTo(container);
container.show();
},
submitHandler: function(form) {
var $form = $(form);
let _action = $form.attr('action');
$form.attr('action', '');
$.ajax({
type: 'post',
url: _action,
data: $form.serialize(),
dataType: 'json'
}).done(function(res) {
console.log('done');
if (res.code !== '100') {
alert(res.msg);
} else {
alert('注册成功');
}
}).fail(function(res) {
console.log('fail');
}).always(function() {
$form.attr('action', _action);
});
}
});

// 添加用户名+邮箱的双重验证规则
$.validator.addMethod('signname', function(value, element) {
let reg_isemail = /[@]/,
reg_email =
/^[a-z]([a-z0-9]*[-_]"color: #ff0000">3. 使用node-canvas模块增加验证码功能


node-canvas是一个将canvas API迁移到nodejs使用的扩展模块，使用node-canvas模块可以在nodejs服务器生成图片（当然它的作用不仅限于此，但项目暂时只用到生成图片功能），下面详细讲述如何搭建登录&注册表单验证码功能。
3.1 部署node-canvas依赖环境


node-canvas需要操作系统安装底层图形库，各操作系统的依赖如下：
11111111111
目前开发环境为mac，简单记录一下环境部署操作以及遇到的一些坑。


首先按照上图安装底层库,由于brew安装的Cairo版本过低，将会导致canvas不正确的绘图（参考https://github.com/Automattic/node-canvas/issues/639）。这是Cairo的bug，所以必须保证Cairo版本在1.14.1以上。使用brew更新Cairo：
brew update

brew upgrade Cairo


安装成功后，在项目根目录下安装node-canvas:npm install canvas --save-dev 
至此，环境部署完毕，进入开发阶段。
3.2 服务端


打开api/controllers/Auth/AuthController，添加生成验证码图片的函数generateVerifyImg():


generateVerifyImg: function() {
var _verify = {
code: '',
img: ''
};
// 生成四位数字和字母的数字作为验证码
_verify.code = Math.random().toString(16).slice(2, 6);
var Image = Canvas.Image,
canvas = new Canvas(60, 30),
ctx = canvas.getContext('2d');
var _rotate = (Math.random()).toFixed(2);
ctx.fillStyle = '#ffcc99';
ctx.fillRect(0, 0, 60, 30);
ctx.rotate(_rotate);
ctx.font = 'italic 20px serif';
ctx.strokeStyle = '#424952';
// 将验证码绘制进canvas
ctx.strokeText(_verify.code, 10, 20);
// 生成验证码图片
_verify.img = canvas.toDataURL('image/png');
return _verify;
}


然后在登录&注册的API中生成验证码图片并渲染进模板文件：


/**
* @desc 登录、注册的统一入口，由前端Backbone的hash路由判断展示表单
* @param req
* @param res
*/
toAuth: function(req, res) {
var _verify = this.generateVerifyImg();
req.session.verifycode = _verify.code;
var view = swig.renderFile('./views/passport/main.swig', {
verify_img: _verify.img
});
return res.send(view);
}


其中非常关键的一步是将验证码通过session保存，以便进行验证。
随后，在接受表单post的API中加入验证码过滤逻辑：


if (!req.param('verifycode') || req.param('verifycode') !== req.session
.verifycode) {
return res.json({
err: rescode.invalidVerifycode,
msg: "验证码不正确"
});
}


项目至此已经具备了基本的验证码功能。验证码的一个重要需求是用户手动刷新验证码，下面简单讲述实现过程。
3.3 实现验证刷新功能


1.首先在前端js代码中添加验证码图片刷新事件监听：


$('.hc_container').on('click', '.form_img_verifycode', function() {
console.log('换一换');
var $img = $(this);
$.ajax({
url: '/getverifycode',
type: 'get',
dataType: 'json'
}).done(function(res) {
console.log('getverifycode success');
$img.attr('src', res.img);
}).fail(function(res) {
console.log('getverifycode failed');
});
});


2.然后配置sails的config/route.js：


// 刷新验证码
'get /getverifycode': 'Auth/AuthController.getVerifyImg'


3.在Auth/AuthController中添加getVerifyImg()API接受前端的验证码刷新请求：


getVerifyImg: function(req, res) {
var _verify = this.generateVerifyImg();
req.session.verifycode = _verify.code;
return res.json({
'img': _verify.img
});
}


这个API功能非常简单，获取新的验证码图片并返回给前端，但是必须谨记将验证码通过session记录。
前端通过ajax获取到新的验证码图片url替换旧图即可。
4. 实现登录&注册成功后的页面跳转

由前端js控制跳转，目前统一跳转到首页：
window.location.href='/';
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。