Nodejs建站教程：註冊登錄流程的簡單實現

更多騰訊海量技術文章，請關注云加社區：https://cloud.tencent.com/developer/column

作者：雲+社區用戶

1. 使用Backbone實現前端hash路由

登錄註冊頁面如下：

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

很多致力於SPA開發的前端框架都具備hash路由功能，考慮到嗨貓本身是一個類博客、偏重靜態展示的網站，所以最後選擇了輕量級的Backbone最為前端框架。

Backbone實現hash路由的代碼很簡單：

隨後，將登錄和註冊的a標籤的href分別修改為#login和#signup便實現了簡單的hash路由。

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

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

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

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

根據input控制項的name屬性，jquery-validation的驗證代碼如下：

其中signname和norepeat是自定義的驗證規則,signname如下：

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

norepeat驗證密碼不能出現連續3次的字元

errorPlacement 指明錯誤提示信息的位置，我們給它提供了一個容器。

submitHandler監聽submit按鈕，首先攔截默認的表單提交請求，替換為自定義的提交邏輯，本項目中使用ajax提交。並且為了防止用戶頻繁點擊submit按鈕造成重複提交，我們首先將form的action屬性清空，待請求完畢後重新賦值。

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

node-canvas是一個將canvas API遷移到nodejs使用的擴展模塊，使用node-canvas模塊可以在nodejs伺服器生成圖片（當然它的作用不僅限於此，但項目暫時只用到生成圖片功能），下面詳細講述如何搭建登錄&註冊表單驗證碼功能。

3.1 部署node-canvas依賴環境

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

目前開發環境為mac，簡單記錄一下環境部署操作以及遇到的一些坑。 首先按照上圖安裝底層庫,由於brew安裝的Cairo版本過低，將會導致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

至此，環境部署完畢，進入開發階段。

3.2 服務端

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

然後在登錄&註冊的API中生成驗證碼圖片並渲染進模板文件：

其中非常關鍵的一步是將驗證碼通過session保存，以便進行驗證。

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

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

3.3 實現驗證刷新功能

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

2.然後配置sails的config/route.js：

// 刷新驗證碼 "get /getverifycode": "Auth/AuthController.getVerifyImg"

3.在Auth/AuthController中添加getVerifyImg()

API接受前端的驗證碼刷新請求：

這個API功能非常簡單，獲取新的驗證碼圖片並返回給前端，但是必須謹記將驗證碼通過session記錄。

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

4. 實現登錄&註冊成功後的頁面跳轉

由前端js控制跳轉，目前統一跳轉到首頁：

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！