通过通过Nodejs搭建网站简单实现注册登录流程搭建网站简单实现注册登录流程
主要介绍了通过Nodejs搭建网站简单实现注册登录流程,Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运
行环境。 Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型,使其轻量又高效。,需要的朋友可以参考下
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) {
评论0