本系統所用技術包括：jade模板（加強的html），bootstrap（css樣式集），express（Web應用框架），js，nodejs，mysql，token驗證等。
源碼地址: https://github.com/qingywen/DEMO/tree/master/Greeni
原文鏈接：https://qingywen.github.io/2017/07/17/express-greeni/
基本功能如下：
- 初次登錄該系統首頁可瀏覽公共頁面並進行註冊。
- 成爲註冊用戶後可登錄個人中心，關閉瀏覽器仍保持一天之內可隨時登陸。
- 登錄後可註銷，此後則只能瀏覽公共頁面。
- 登錄一天後或者註銷後，若訪問個人中心則自動引導到登錄頁面。
step1
先寫前端界面，包括index.html(公共頁面)，login.html(登錄頁面)，signup.html(註冊頁面)，my.html(個人中心)，這裏用到了bootstrap的示例頁面signin，carousel和dashboard的頁面結構和樣式。
也許會有人跟我一樣剛開始接觸bootstrap並不知從何用起，以下做個簡短說明：bootstrap是一個css樣式集，用的好可以爲你的項目錦上添花，用不好反倒累贅，因此還需好好琢磨。瞭解bootstrap的菜鳥教程可以瀏覽菜鳥教程。實際上，bootstrap3的中文官網已經講解的非常詳盡。不過仍建議先閱讀菜鳥教程進行熱身。
頁面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的郵箱，我會盡快爲你回覆。