Web應用初體驗——登入登出驗證系統
- 初次登入該系統首頁可瀏覽公共頁面並進行註冊。
- 成為註冊使用者後可登入個人中心，關閉瀏覽器仍保持一天之內可隨時登陸。
- 登入後可登出，此後則只能瀏覽公共頁面。
- 登入一天後或者登出後，若訪問個人中心則自動引導到登入頁面。
step1
先寫前端介面，包括index.html(公共頁面)，login.html(登入頁面)，signup.html(註冊頁面)，my.html(個人中心)，這裡用到了bootstrap的示例頁面signin，carousel和dashboard的頁面結構和樣式。
也許會有人跟我一樣剛開始接觸bootstrap並不知從何用起，以下做個簡短說明：bootstrap是一個css樣式集，用的好可以為你的專案錦上添花，用不好反倒累贅，因此還需好好琢磨。瞭解bootstrap的菜鳥教程可以瀏覽
頁面js主要功能為表單提交，提交前先進行簡單的驗證，再序列化表單，接著用ajax提交到伺服器，最後關閉表單的預設提交功能。
step2
前端介面搭建好後，我們來新建一個數據庫，資料庫表中只有一個users表，結構如下：
| Field | Type | Null | Key | Default | Extra |
|---|---|---|---|---|---|
| P_Id | int(11) | No | PRI | NULL | auto_increment |
| varchar(255) | NO | UNI | NULL | ||
| password | varchar(255) | NO | NULL |
現在表資料如下：
| P_Id | password | |
|---|---|---|
| 1 | [email protected] | 123 |
| 9 | [email protected] | 123 |
| 12 | [email protected] | 123 |
| 14 | [email protected] | 123 |
資料庫匯出檔案為greeni.sql，在本地資料庫中將sql檔案匯入新建資料庫greeni即可。
step3
前端、資料庫搭建好後，我們即可開始整個應用的系統搭建，通過後臺邏輯將前端和資料庫連線起來。
這裡在一個新資料夾中用express進行專案初始化，當然前提是本地用npm安裝了express。接著在package.json中加入db、ejs、jsonwebtoken三個模組，然後用cnpm install進行安裝。
這裡我們需要將app.js檔案中預設的渲染引擎從jade改為ejs。
// view engine setup
app.set('views', path.join(__dirname, 'views'));
pp.engine('.html', require('ejs').__express);
app.set('view engine', 'jade');修改routes資料夾下index.js、my.js的路由定向和事件控制代碼，此時要用到資料庫，因此新建db資料夾，在db目錄下新建DBConfig.js和SQL.js，分別用作資料庫的連線配置檔案和SQL語句模組。
在寫登入驗證的邏輯時，我們根據使用者郵箱用jsonwebtoken隨機生成一個令牌，併發送使用者，使用者在cookie中儲存此令牌，在下次請求私有資源時則不必明文傳送密碼，而是在傳送請求時隨著cookie自動將令牌傳送給伺服器，伺服器收到令牌驗證成功後則返回使用者所請求的資源，否則令牌有可能被惡意更改，則拒絕請求。
此時系統搭建完畢，我麼可以用npm start來啟動專案，注意bin資料夾寫的埠號為8000，因此訪問地址為：127.0.0.1:8000。
step4
最後我們想做一個小優化，如果每個使用者登入到個人中心的頁面都一樣的話，這個個人中心恐怕是個假個人中心，因此我們需要對不同的使用者請求返回一樣的頁面結構但是不同的使用者資訊。為求簡易，這裡我們只對每個使用者返回各自的email，並新增到頁面上。
因為頁面首先需要在伺服器上渲染才能返回給客戶端，最經濟的思路當然是在服務端渲染出不同的頁面再返回給客戶端。而html並沒有變數的功能，因此我們使用jade模板（現更名為pug，但jade模組仍有效）來代替html。jade是一個非常高效的模板引擎，提供了變數、for迴圈等功能。有一個非常好的jade語法學習網站安利給大家。這裡我們需要將之前的html轉為jade，手動改編太麻煩，用這個html2jade的網站來轉化吧。
得到jade格式的前端檔案，我們修改app.js的模板引擎設定，將ejs引擎改回預設的jade引擎：
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');在routes下的my.js中，返回個人中心頁面同時，返回使用者的email：
res.render('my',{email: decoded.email});修改views資料夾下my.jade檔案中的標題，用來接收伺服器傳送來的email變數：
a.navbar-brand(href='#') #{email}此後大功告成，每個使用者登陸後訪問個人中心的頁面，其頁面標題都是自己用來註冊的email，因此此個人中心成立。
其他
- 表單序列化方法
serialize()和阻止表單預設提交方式preventDefault()來自《JS高階程式設計》。 - 登入後通過令牌驗證來避免密碼洩露用到
jwt.sign() jwt.verify()，建議細看jsonwebtoken包下的README.md，講解很詳細。 - README.md檔案是個好東西，許多網上的經驗貼都沒有官方使用文件講的簡單易懂。sublime有許多markdown實時閱覽外掛很方便，此博主有分享。
- 原始碼是最後版本，因此前文所述中間過程可能不能詳盡體現，但可以按照上述方式進行此係統的構建。這篇記錄不是使用說明，僅作一個Guide，有問題Google和百度並行解決。若解決不了可聯絡資料庫中P_Id為1的郵箱，我會盡快為你回覆。