快捷導(dǎo)航

通過Nodejs搭建網(wǎng)站簡單實(shí)現(xiàn)注冊登錄流程

更新時間：2019年06月14日 11:26:39 作者：寒月十八

這篇文章主要介紹了通過Nodejs搭建網(wǎng)站簡單實(shí)現(xiàn)注冊登錄流程，Node.js 是一個基于 Chrome V8 引擎的 JavaScript 運(yùn)行環(huán)境。 Node.js 使用了一個事件驅(qū)動、非阻塞式 I/O 的模型，使其輕量又高效。,需要的朋友可以參考下

1. 使用Backbone實(shí)現(xiàn)前端hash路由

初步設(shè)想將注冊和登錄作為兩個不同的url實(shí)現(xiàn)，但登錄和注冊功能的差距只有form表單部分，用兩個url實(shí)現(xiàn)顯然開銷過大，所以最終方案為使用hash作為前端路由，根據(jù)url的hash值切換相應(yīng)的表單顯示。

很多致力于SPA開發(fā)的前端框架都具備hash路由功能，考慮到嗨貓本身是一個類博客、偏重靜態(tài)展示的網(wǎng)站，所以最后選擇了輕量級的Backbone最為前端框架。

Backbone實(shí)現(xiàn)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();

務(wù)必不要遺漏Backbone.history.start();,否則路由功能不會啟動。

隨后，將登錄和注冊的a標(biāo)簽的href分別修改為#login和#signup便實(shí)現(xiàn)了簡單的hash路由。

2. 使用jquery-validation完善前端表單驗證

前端表單驗證是必不可少的一項功能，前端的js代碼驗證表單的完整性并攔截一部分非法的表單輸入，一定程度上減少服務(wù)端的壓力。

初步想自己造輪子，但考慮到開發(fā)周期和輪子的成熟性，最終選擇jquery-validation插件作為前端表單驗證工具。

jquery-validation插件和表單元素的name屬性綁定，以登錄表單為例，其dom結(jié)構(gòu)如下：

根據(jù)input控件的name屬性，jquery-validation的驗證代碼如下：

// 登錄表單添加驗證規(guī)則
$('.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是自定義的驗證規(guī)則,signname如下：

// 添加用戶名+郵箱的雙重驗證規(guī)則
$.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) &&
reg_email.test(value));
}, '請輸入正確的用戶名或郵箱');

用戶可以使用用戶名或郵箱登錄，兩者共享一個input控件，signname驗證是用戶名還是郵箱，如果是郵箱，便保證輸入郵箱格式的正確性。

norepeat驗證密碼不能出現(xiàn)連續(xù)3次的字符

errorPlacement指明錯誤提示信息的位置，我們給它提供了一個容器。
submitHandler監(jiān)聽submit按鈕，首先攔截默認(rèn)的表單提交請求，替換為自定義的提交邏輯，本項目中使用ajax提交。

并且為了防止用戶頻繁點(diǎn)擊submit按鈕造成重復(fù)提交，我們首先將form的action屬性清空，待請求完畢后重新賦值。

3. 使用node-canvas模塊增加驗證碼功能

node-canvas是一個將canvas API遷移到nodejs使用的擴(kuò)展模塊，使用node-canvas模塊可以在nodejs服務(wù)器生成圖片（當(dāng)然它的作用不僅限于此，但項目暫時只用到生成圖片功能），下面詳細(xì)講述如何搭建登錄&注冊表單驗證碼功能。

3.1 部署node-canvas依賴環(huán)境

node-canvas需要操作系統(tǒng)安裝底層圖形庫，各操作系統(tǒng)的依賴如下：

11111111111

目前開發(fā)環(huán)境為mac，簡單記錄一下環(huán)境部署操作以及遇到的一些坑。

首先按照上圖安裝底層庫,由于brew安裝的Cairo版本過低，將會導(dǎo)致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

至此，環(huán)境部署完畢，進(jìn)入開發(fā)階段。

3.2 服務(wù)端

打開api/controllers/Auth/AuthController，添加生成驗證碼圖片的函數(shù)generateVerifyImg():

generateVerifyImg: function() {
var _verify = {
code: '',
img: ''
};
// 生成四位數(shù)字和字母的數(shù)字作為驗證碼
_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';
// 將驗證碼繪制進(jìn)canvas
ctx.strokeText(_verify.code, 10, 20);
// 生成驗證碼圖片
_verify.img = canvas.toDataURL('image/png');
return _verify;
}

然后在登錄&注冊的API中生成驗證碼圖片并渲染進(jìn)模板文件：

/**
* @desc 登錄、注冊的統(tǒng)一入口，由前端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);
}

其中非常關(guān)鍵的一步是將驗證碼通過session保存，以便進(jìn)行驗證。

隨后，在接受表單post的API中加入驗證碼過濾邏輯：

if (!req.param('verifycode') || req.param('verifycode') !== req.session
.verifycode) {
return res.json({
err: rescode.invalidVerifycode,
msg: "驗證碼不正確"
});
}

項目至此已經(jīng)具備了基本的驗證碼功能。驗證碼的一個重要需求是用戶手動刷新驗證碼，下面簡單講述實(shí)現(xiàn)過程。

3.3 實(shí)現(xiàn)驗證刷新功能

1.首先在前端js代碼中添加驗證碼圖片刷新事件監(jiān)聽：

$('.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功能非常簡單，獲取新的驗證碼圖片并返回給前端，但是必須謹(jǐn)記將驗證碼通過session記錄。

前端通過ajax獲取到新的驗證碼圖片url替換舊圖即可。

4. 實(shí)現(xiàn)登錄&注冊成功后的頁面跳轉(zhuǎn)
由前端js控制跳轉(zhuǎn)，目前統(tǒng)一跳轉(zhuǎn)到首頁：

window.location.href='/';

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: