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

1. 使用Backbone实现前端hash路由

初步设想将注册和登录作为两个不同的url实现，但登录和注册功能的差距只有form表单部分，用两个url实现显然开销过大，所以最终方案为使用hash作为前端路由，根据url的hash值切换相应的表单显示。

很多致力于SPA开发的前端框架都具备hash路由功能，考虑到嗨猫本身是一个类博客、偏重静态展示的网站，所以最后选择了轻量级的Backbone最为前端框架。

Backbone实现hash路由的代码很简单：

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();

务必不要遗漏Backbone.history.start();,否则路由功能不会启动。

随后，将登录和注册的a标签的href分别修改为#login和#signup便实现了简单的hash路由。

2. 使用jquery-validation完善前端表单验证

前端表单验证是必不可少的一项功能，前端的js代码验证表单的完整性并拦截一部分非法的表单输入，一定程度上减少服务端的压力。

初步想自己造轮子，但考虑到开发周期和轮子的成熟性，最终选择jquery-validation插件作为前端表单验证工具。

jquery-validation插件和表单元素的name属性绑定，以登录表单为例，其dom结构如下：

根据input控件的name属性，jquery-validation的验证代码如下：

// 登录表单添加验证规则$('.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);});}});

其中signname和norepeat是自定义的验证规则,signname如下：

// 添加用户名+邮箱的双重验证规则$.validator.addMethod('signname', function(value, element) {let reg_isemail = /[@]/,reg_email =/^[a-z]([a-z0-9]*[-_]?[a-z0-9]+)*@([a-z0-9]*[-_]?[a-z0-9]+)+[/.][a-z]{2,3}([/.][a-z]{2})?$/i;return !reg_isemail.test(value) || (reg_isemail.test(value) &®_email.test(value));}, '请输入正确的用户名或邮箱');