1. 使用Backbone實(shí)現(xiàn)前端hash路由
初步設(shè)想將注冊(cè)和登錄作為兩個(gè)不同的url實(shí)現(xiàn)，但登錄和注冊(cè)功能的差距只有form表單部分，用兩個(gè)url實(shí)現(xiàn)顯然開銷過大，所以最終方案為使用hash作為前端路由，根據(jù)url的hash值切換相應(yīng)的表單顯示。
很多致力于SPA開發(fā)的前端框架都具備hash路由功能，考慮到嗨貓本身是一個(gè)類博客、偏重靜態(tài)展示的網(wǎng)站，所以最后選擇了輕量級(jí)的Backbone最為前端框架。
Backbone實(shí)現(xiàn)hash路由的代碼很簡(jiǎn)單：
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();,否則路由功能不會(huì)啟動(dòng)。
隨后，將登錄和注冊(cè)的a標(biāo)簽的href分別修改為#login和#signup便實(shí)現(xiàn)了簡(jiǎn)單的hash路由。
2. 使用jquery-validation完善前端表單驗(yàn)證
前端表單驗(yàn)證是必不可少的一項(xiàng)功能，前端的js代碼驗(yàn)證表單的完整性并攔截一部分非法的表單輸入，一定程度上減少服務(wù)端的壓力。
初步想自己造輪子，但考慮到開發(fā)周期和輪子的成熟性，最終選擇jquery-validation插件作為前端表單驗(yàn)證工具。
jquery-validation插件和表單元素的name屬性綁定，以登錄表單為例，其dom結(jié)構(gòu)如下：
根據(jù)input控件的name屬性，jquery-validation的驗(yàn)證代碼如下：
// 登錄表單添加驗(yàn)證規(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('注冊(cè)成功');}}).fail(function(res) {console.log('fail');}).always(function() {$form.attr('action', _action);});}});其中signname和norepeat是自定義的驗(yàn)證規(guī)則,signname如下：
// 添加用戶名+郵箱的雙重驗(yàn)證規(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) &®_email.test(value));}, '請(qǐng)輸入正確的用戶名或郵箱');用戶可以使用用戶名或郵箱登錄，兩者共享一個(gè)input控件，signname驗(yàn)證是用戶名還是郵箱，如果是郵箱，便保證輸入郵箱格式的正確性。
norepeat驗(yàn)證密碼不能出現(xiàn)連續(xù)3次的字符
并且為了防止用戶頻繁點(diǎn)擊submit按鈕造成重復(fù)提交，我們首先將form的action屬性清空，待請(qǐng)求完畢后重新賦值。
3. 使用node-canvas模塊增加驗(yàn)證碼功能
node-canvas是一個(gè)將canvas API遷移到nodejs使用的擴(kuò)展模塊，使用node-canvas模塊可以在nodejs服務(wù)器生成圖片（當(dāng)然它的作用不僅限于此，但項(xiàng)目暫時(shí)只用到生成圖片功能），下面詳細(xì)講述如何搭建登錄&注冊(cè)表單驗(yàn)證碼功能。
3.1 部署node-canvas依賴環(huán)境
node-canvas需要操作系統(tǒng)安裝底層圖形庫，各操作系統(tǒng)的依賴如下：
11111111111
目前開發(fā)環(huán)境為mac，簡(jiǎn)單記錄一下環(huán)境部署操作以及遇到的一些坑。
首先按照上圖安裝底層庫,由于brew安裝的Cairo版本過低，將會(huì)導(dǎo)致canvas不正確的繪圖（參考https://github.com/Automattic/node-canvas/issues/639）。這是Cairo的bug，所以必須保證Cairo版本在1.14.1以上。使用brew更新Cairo：
brew update
brew upgrade Cairo
安裝成功后，在項(xiàng)目根目錄下安裝node-canvas:npm install canvas --save-dev
至此，環(huán)境部署完畢，進(jìn)入開發(fā)階段。
3.2 服務(wù)端
打開api/controllers/Auth/AuthController，添加生成驗(yàn)證碼圖片的函數(shù)generateVerifyImg():
generateVerifyImg: function() {var _verify = {code: '',img: ''};// 生成四位數(shù)字和字母的數(shù)字作為驗(yàn)證碼_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';// 將驗(yàn)證碼繪制進(jìn)canvasctx.strokeText(_verify.code, 10, 20);// 生成驗(yàn)證碼圖片_verify.img = canvas.toDataURL('image/png');return _verify;}然后在登錄&注冊(cè)的API中生成驗(yàn)證碼圖片并渲染進(jìn)模板文件：
/*** @desc 登錄、注冊(cè)的統(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)鍵的一步是將驗(yàn)證碼通過session保存，以便進(jìn)行驗(yàn)證。
隨后，在接受表單post的API中加入驗(yàn)證碼過濾邏輯：
if (!req.param('verifycode') || req.param('verifycode') !== req.session.verifycode) {return res.json({err: rescode.invalidVerifycode,msg: "驗(yàn)證碼不正確"});}項(xiàng)目至此已經(jīng)具備了基本的驗(yàn)證碼功能。驗(yàn)證碼的一個(gè)重要需求是用戶手動(dòng)刷新驗(yàn)證碼，下面簡(jiǎn)單講述實(shí)現(xiàn)過程。
3.3 實(shí)現(xiàn)驗(yàn)證刷新功能
1.首先在前端js代碼中添加驗(yàn)證碼圖片刷新事件監(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：
// 刷新驗(yàn)證碼'get /getverifycode': 'Auth/AuthController.getVerifyImg'
3.在Auth/AuthController中添加getVerifyImg()API接受前端的驗(yàn)證碼刷新請(qǐng)求：
getVerifyImg: function(req, res) {var _verify = this.generateVerifyImg();req.session.verifycode = _verify.code;return res.json({'img': _verify.img});}這個(gè)API功能非常簡(jiǎn)單，獲取新的驗(yàn)證碼圖片并返回給前端，但是必須謹(jǐn)記將驗(yàn)證碼通過session記錄。
前端通過ajax獲取到新的驗(yàn)證碼圖片url替換舊圖即可。
4. 實(shí)現(xiàn)登錄&注冊(cè)成功后的頁面跳轉(zhuǎn)
由前端js控制跳轉(zhuǎn)，目前統(tǒng)一跳轉(zhuǎn)到首頁：
window.location.href='/';
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
