這篇文章給大家分享的是有關(guān)如何通過Nodejs搭建網(wǎng)站實(shí)現(xiàn)注冊登錄的示例的內(nèi)容。小編覺得挺實(shí)用的,因此分享給大家做個參考,一起跟隨小編過來看看吧。
成都創(chuàng)新互聯(lián)公司主營八宿網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,重慶APP開發(fā)公司,八宿h5微信小程序定制開發(fā)搭建,八宿網(wǎng)站營銷推廣歡迎八宿等地區(qū)企業(yè)咨詢
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完善前端表單驗(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('注冊成功'); } }).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) && reg_email.test(value)); }, '請輸入正確的用戶名或郵箱');
用戶可以使用用戶名或郵箱登錄,兩者共享一個input控件,signname驗(yàn)證是用戶名還是郵箱,如果是郵箱,便保證輸入郵箱格式的正確性。
norepeat驗(yàn)證密碼不能出現(xiàn)連續(xù)3次的字符
errorPlacement指明錯誤提示信息的位置,我們給它提供了一個容器。
submitHandler監(jiān)聽submit按鈕,首先攔截默認(rèn)的表單提交請求,替換為自定義的提交邏輯,本項(xiàng)目中使用ajax提交。
并且為了防止用戶頻繁點(diǎn)擊submit按鈕造成重復(fù)提交,我們首先將form的action屬性清空,待請求完畢后重新賦值。
3. 使用node-canvas模塊增加驗(yàn)證碼功能
node-canvas是一個將canvas API遷移到nodejs使用的擴(kuò)展模塊,使用node-canvas模塊可以在nodejs服務(wù)器生成圖片(當(dāng)然它的作用不僅限于此,但項(xiàng)目暫時只用到生成圖片功能),下面詳細(xì)講述如何搭建登錄&注冊表單驗(yàn)證碼功能。
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
安裝成功后,在項(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)canvas ctx.strokeText(_verify.code, 10, 20); // 生成驗(yàn)證碼圖片 _verify.img = canvas.toDataURL('image/png'); return _verify; }
然后在登錄&注冊的API中生成驗(yàn)證碼圖片并渲染進(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)鍵的一步是將驗(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)證碼的一個重要需求是用戶手動刷新驗(yà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)證碼刷新請求:
getVerifyImg: function(req, res) { var _verify = this.generateVerifyImg(); req.session.verifycode = _verify.code; return res.json({ 'img': _verify.img }); }
這個API功能非常簡單,獲取新的驗(yàn)證碼圖片并返回給前端,但是必須謹(jǐn)記將驗(yàn)證碼通過session記錄。
前端通過ajax獲取到新的驗(yàn)證碼圖片url替換舊圖即可。
4. 實(shí)現(xiàn)登錄&注冊成功后的頁面跳轉(zhuǎn)
由前端js控制跳轉(zhuǎn),目前統(tǒng)一跳轉(zhuǎn)到首頁:
window.location.href='/';
感謝各位的閱讀!關(guān)于“如何通過Nodejs搭建網(wǎng)站實(shí)現(xiàn)注冊登錄的示例”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,讓大家可以學(xué)到更多知識,如果覺得文章不錯,可以把它分享出去讓更多的人看到吧!
分享文章:如何通過Nodejs搭建網(wǎng)站實(shí)現(xiàn)注冊登錄的示例
網(wǎng)頁URL:http://redsoil1982.com.cn/article8/gsscop.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站改版、網(wǎng)站內(nèi)鏈、電子商務(wù)、網(wǎng)頁設(shè)計(jì)公司、企業(yè)網(wǎng)站制作、小程序開發(fā)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)