一、應用生成器
使用上節學習到express的知識，我們也可以從0開始，一步步把系統搭建起來。不過express中還有一個應用生成器，使用這個應用生成器可以快速的創建一個應用的框架，然后我們再在這個框架中完善我們需要的內容。
首先安裝應用生成器：
$npm install -g express-generator
運行express --version若能正常輸出版本號，則安裝成功。
我們的論壇名稱可以為node_express_forum，然后使用express創建一個框架：
$express node_express_forum
運行后，生成器會在這個目錄下生成幾個目錄和文件：
create : node_express_forum create : node_express_forum/package.json create : node_express_forum/app.js create : node_express_forum/public create : node_express_forum/public/javascri create : node_express_forum/public/images create : node_express_forum/public/styleshe create : node_express_forum/public/styleshe create : node_express_forum/routes create : node_express_forum/routes/index.js create : node_express_forum/routes/users.js create : node_express_forum/views create : node_express_forum/views/index.jad create : node_express_forum/views/layout.ja create : node_express_forum/views/error.jad create : node_express_forum/bin create : node_express_forum/bin/www install dependencies: $ cd node_express_forum && npm install run the app: $ DEBUG=node-express-form:* npm start
已經生成成功。進入到這個目錄：
$cd node_express_forum
我們來看下生成的這個框架，方便知道后面怎么進行填充。
.├── app.js ├── package.json // 依賴的模塊├── bin│ └── www├── public // 靜態文件目錄│ ├── images│ ├── javascripts│ └── stylesheets│ └── style.css├── routes // 路由，相當于控制器│ ├── index.js│ └── users.js└── views // 視圖 ├── error.jade ├── index.jade └── layout.jade
打開package.json后，我們看到還需要再安裝幾個模塊才能運行：
$npm install --save-dev
好了，到現在框架已搭建完畢，我們來運行一下：
$npm start
然后在瀏覽器中輸入127.0.0.1:3000，就可以看到了：Express Welcome to Express。
二、準備工作
基本框架已經創建好了，現在開始我們論壇的準備工作。這里我們的準備工作有3個：模板引擎，模型，數據庫，路由。
2.1 模板引擎
express里默認使用的模板引擎是jade，不過我們也可以選擇其他的模板引擎，我這里選擇了ejs，因為感覺ejs更像是個html文件，方便維護，當然，每個人都有自己的喜好。
$npm install ejs --save-dev
然后在app.js中修改模板引擎：
app.set('view engine', 'ejs'); // 原為jade，現改為ejs這里我會將views目錄中的.jade文件清空，后續使用.ejs編寫模板。
2.2 模型
這里我們說的模型是指MVC中的M，主要是進行數據庫的連接和操作。創建models目錄用來存放文件。
2.3 數據庫
我們使用mysql數據庫來存放數據，數據庫名稱可以叫做forum。里面有3張表：user, list, reply。
2.4 路由
上節我們是使用app.use()或app.get()等方式來實現路由，同時，express還提供了express.Router類來創建模塊化。可掛載的路由。Router 實例是一個完整的中間件和路由系統，因此常稱其為一個 “mini-app”。
在routes/user.js中（這里我將其users.js改為了user.js）：
var express = require('express');var router = express.Router(); // 實例化router// 定義主頁的路由router.get('/', function(req, res, next) { res.render('index', { title: 'user' }); // 加載index.ejs模板并傳遞數據給模板});router.get('/reg', function(req, res, next) { res.render('index', { title: 'reg' });});module.exports = router; 然后在app.js中加載路由模塊：
var user = require('./routes/user');//...app.use('/user', user);這樣就可以訪問/user和/user/reg頁面了。如果需要增加其他的路由，則依照此方式創建添加即可。
三、注冊與登錄
我們論壇的功能：注冊、登錄、發布主題和回復主題。這4個功能的實現都需要連接數據庫。
3.1 數據庫連接
引入mysql模塊，然后使用mysql.createPool()創建連接：
$npm install mysql --save-dev
在models目錄下創建db.js，其他需要操作數據庫的，首先引入db.js:
var mysql = require('mysql');var pool = mysql.createPool({ host : '127.0.0.1', user : 'root', password : '123', database : 'forum'});module.exports = pool; 3.2 注冊功能
注冊功能的流程我們非常熟悉了：
我們在routes/user.js中創建一個reg的get方式的路由用來加載注冊頁面：
// routes/user.js// get方式router.get('/reg', function(req, res, next) { res.render('reg', { errmsg:'' }); // 加載reg.ejs模板});在views目錄下創建reg.ejs：
<!DOCTYPE html><html> <head> <title>注冊</title> <link rel='stylesheet' href='/stylesheets/style.css' /> <style type="text/css"> .tip{color: #f00;} </style> </head> <body> <div class="container"> <p><a href="/" rel="external nofollow" rel="external nofollow" rel="external nofollow" >回到首頁</a></p> <h1>注冊</h1> <form action="/user/reg/" method="post"> <% if(errmsg){ %> <p class="tip">*<%= errmsg %></p> <% } %> <p>用 戶 名： <input type="text" name="username" required="required"></p> <p>密 碼： <input type="password" name="password" required="required"></p> <p>重復密碼： <input type="password" name="password2" required="required"></p> <p><input type="submit" name="submit" value="submit"></p> </form> <p>已有帳號？ <a href="/user/login" rel="external nofollow" >點擊登錄</a></p> </div> </body></html>運行程序，并用瀏覽器訪問127.0.0.1:3000/user/reg，注冊頁面就出來了。
然后再在routes/user.js中創建一個reg的post方式的路由用來處理提交過來的數據，post方式過來的數據并不能使用req.query變量獲取，而應該使用req.body：
// routes/user.js// post方式router.post('/reg', function(req, res, next) { var username = req.body.username || '', password = req.body.password || '', password2 = req.body.password2 || ''; if(password!=password2){ res.render('reg', {errmsg:'密碼不一致'}); return; } var password_hash = user_m.hash(password), // 對密碼進行加密 regtime = parseInt(Date.now()/1000); // 數據庫處理});凡是設計到數據庫處理的，我們都將其放到models中。這里，我們在models中創建一個user.js：
// models/user.jsvar pool = require('./db'), // 連接數據庫 crypto = require('crypto'); // 對密碼進行加密module.exports = { // 對字符串進行sha1加密 hash : function(str){ return crypto.createHmac('sha1', str).update('love').digest('hex'); }, // 注冊 // 因數據庫操作是異步操作，則需要傳入回調函數來對結果進行處理，而不能使用return的方式 reg : function(username, password, regtime, cb){ pool.getConnection(function(err, connection){ if(err) throw err; // 首先檢測用戶名是否存在 connection.query('SELECT `id` FROM `user` WHERE `username`=?', [username], function(err, sele_res){ if(err) throw err; // 若用戶名已存在，則直接回調 if(sele_res.length){ cb({isExisted:true}); connection.release(); }else{ // 否則將信息插入到數據庫中 var params = {username:username, password:password, regtime:regtime}; connection.query('INSERT INTO `user` SET ?', params, function(err, insert_res){ if(err) throw err; cb(insert_res); connection.release(); // 接下來connection已經無法使用，它已經被返回到連接池中 }) } }) }); }}我們將檢測用戶名和插入數據兩個功能放到一起處理了，實際應用中，最好是在用戶提交數據之前就對用戶名進行檢測。注冊功能的model寫好之后，就可以調用了，承接上面的代碼，從數據庫處理接著編寫。
// routes/user.jsvar user_m = require('../models/user'); // 引入model// post方式router.post('/reg', function(req, res, next) { // 與上面的代碼一樣 // 數據庫處理 user_m.reg(username, password_hash, regtime, function(result){ if(result.isExisted){ res.render('reg', {errmsg:'用戶名已存在'}); // 重新加載注冊模板，并提示用戶名已存在 }else if(result.affectedRows){ // 注冊成功 res.redirect('/'); }else{ // console.log('登錄失敗'); res.render('reg', {errmsg:'注冊失敗，請重新嘗試'}); } });});頁面若跳轉到首頁，則說明注冊成功了，查看下數據庫是否將數據正確的插入了。
到這里，注冊功能完成了，完成了嗎？還沒呢，我們這里注冊完成后僅僅是跳轉到了首頁，還缺少的操作是：
我們這里使用第1種方式，稍后講解如何記錄用戶的登錄狀態。
3.2 登錄功能
登錄過程與注冊是非常類似的，而且比注冊還要簡單，只需要查詢數據庫中是否存在對應的用戶名和密碼即可。
首先編寫一個登錄頁面：
// views/login.ejs<!DOCTYPE html><html> <head> <title>登錄</title> <link rel='stylesheet' href='/stylesheets/style.css' /> <style type="text/css"> .tip{color: #f00;} </style> </head> <body> <div class="container"> <p><a href="/" rel="external nofollow" rel="external nofollow" rel="external nofollow" >回到首頁</a></p> <h1>登錄</h1> <form action="/user/login/" method="post"> <% if(errmsg){ %> <p class="tip">*<%= errmsg %></p> <% } %> <p>用戶名： <input type="text" name="username" required="required"></p> <p>密 碼： <input type="password" name="password" required="required"></p> <p><input type="submit" name="submit" value="submit"></p> </form> <p>還沒帳號？<a href="/user/reg" rel="external nofollow" >點擊注冊</a></p> </div> </body></html>然后在model/user.js中添加上對數據庫的登錄操作：
module.exports = { // ... // 登錄 login : function(username, password, cb){ pool.getConnection(function(err, connection){ if(err) throw err; connection.query('SELECT `id` FROM `user` WHERE `username`=? AND `password`=?', [username, password], function(err, result){ if(err) throw err; cb(result); connection.release(); // 接下來connection已經無法使用，它已經被返回到連接池中 }) }); }}最后在routes/user.js中添加上登錄的路由：
// routes/user.js // 進入到登錄頁面router.get('/login', function(req, res, next) { res.render('login', {errmsg:''});});// 處理登錄請求router.post('/login', function(req, res, next) { var username = req.body.username || '', password = req.body.password || ''; var password_hash = user_m.hash(password); user_m.login(username, password_hash, function(result){ if(result.length){ // console.log( req.session ); // req.session.user = { // uid : result[0].id, // username : username // } // res.redirect('/'); res.send('登錄成功'); }else{ // console.log('登錄失敗'); res.render('login', {errmsg:'用戶名或密碼錯誤'}); } });});登錄功能也編寫好了。
3.3 保存登錄狀態
我們通常是使用session來保存用戶的登錄狀態，express框架沒有對session處理的功能，需要我們引入額外的模塊express-session：
$npm install express-session --save-dev
然后在app.js中引用：
var session = require('express-session')app.use(session({ secret: 'wenzi', // 建議使用 128 個字符的隨機字符串 cookie: { maxAge: 60*60*1000 }, // 設置時間 resave : false, saveUninitialized : true}));設置完成后，就可以使用session保存數據了。以登錄成功后保存數據為例：
user_m.login(username, password_hash, function(result){ if(result.length){ // 將數據保存到名為user的session中 req.session.user = { uid : result[0].id, username : username } res.redirect('/'); }else{ // console.log('登錄失敗'); res.render('login', {errmsg:'用戶名或密碼錯誤'}); }});還有一個問題：如何把session中的數據傳遞給模板呢，比如沒有登錄時，顯示“注冊，登錄”連接，登錄后顯示“用戶名，登錄”信息。
在app.js中添加：
app.use(function(req, res, next){ // 如果session中存在，則說明已經登錄 if( req.session.user ){ res.locals.user = { uid : req.session.user.uid, username : req.session.user.username } }else{ res.locals.user = {}; } next();})然后在模板中就可以使用user變量了：
<% if(user.uid){ %> <!-- 登錄狀態下 --><% }else{ %> <!-- 非登錄狀態下 --><% } %>四、首頁及詳情頁
我們在首頁能夠展示主題列表并能發表主題，點擊鏈接進入詳情頁后能該主題進行回復。當然發表主題和對主題進行回復都是在已經登錄的狀態進行的。
4.1 首頁
在models目錄創建list.js，從數據庫中獲取主題列表：
// models/list.jsvar pool = require('./db');module.exports = { // 獲取首頁的主題 getIndexList : function(cb){ pool.getConnection(function(err, connection){ if(err) throw err; // 連表查詢，獲取到作者的用戶名 connection.query('SELECT `list`.*, username FROM `list`, `user` WHERE `list`.`uid`=`user`.`id`', function(err, result){ if(err) throw err; cb(result); connection.release(); // 接下來connection已經無法使用，它已經被返回到連接池中 }) }); }}在routes中的index.js中調用getIndexList獲取數據，并調用index.ejs模板：
// routes/index.jsvar list_m = require('../models/list');router.get('/', function(req, res, next) { list_m.getIndexList(function(result){ res.render('index', { data:result }); // 選擇index模板并傳遞數據 })});在views/index.ejs創建首頁模板：
<h1>列表</h1><table> <tr> <td>標題</td> <td>作者</td> <td>創建時間</td> </tr> <% for(var i=0, len=data.length; i<len; i++) { %> <tr> <td><a href="/list/<%=data[i].id %>.html" rel="external nofollow" <td><%=data[i].username %></td> <td><%=data[i].createtime %></td> </tr> <% } %></table><% if(user.username){ %><!-- 在登錄狀態展示輸入框 --><div class="add"> <p><input type="text" class="title"></p> <textarea class="content" cols="100" rows="10"></textarea> <p><input type="button" class="submit" value="提交"><span class="tip"></span></p></div><% }%>展示數據完畢。
4.2 發表主題
我們在首頁上添加了可以輸入標題和內容的兩個輸入窗口，可以使用ajax的方式提交數據。
<script type="text/javascript" src="http://mat1.gtimg.com/libs/jquery/1.12.0/jquery.min.js"></script><script type="text/javascript"> var running = false; $('.submit').on('click', function(){ if(running) return; running = true; $('.tip').text(''); var content = $('.add .content').val(); if(!title || !content){ $('.tip').text('*輸入不能為空'); return; } $('.tip').text('數據正在提交中...'); $.ajax({ url : '/list/addtopic', // 提交接口 data : {title:title, content:content}, dataType : 'json', type : 'get' }).done(function(result){ if(result.code==0){ var html = '<tr><td><a href="'+result.data.url+'" rel="external nofollow" $('table').append(html); $('.tip').text(''); $('.title, .content').val(''); }else{ $('.tip').text('添加失敗'); } running = false; }) })</script>這里的提交接口是/list/addtopic，因此我們需要再創建一個這樣的路由：在routes目錄下創建list.js：
// routes/list.jsrouter.get('/addtopic', function(req, res){ // 在登錄狀態下可以添加主題 if(req.session.user){ var content = req.query.content, uid = req.session.user.uid, createtime = parseInt(Date.now()/1000); var params = {uid:uid, title:title, content:content, createtime:createtime}; list_m.addTopic(params, function(result){ // console.log(result); if(result.affectedRows){ res.json({code:0, msg:'添加成功', data:{url:'/list/'+result.insertId+'.html', title:title, author:req.session.user.username, createtime:createtime}}); }else{ res.json({code:2, msg:'添加失敗，請重新嘗試'}) } }); }else{ res.json({code:1, msg:'您還未登錄'}) }}) 這里用到了list_m.addTopic，因此需要在models/list.js中添加 addTopic 方法：
// models/list.js/* 添加主題 uid, title, content, createtime*/addTopic : function(params, cb){ pool.getConnection(function(err, connection){ if(err) throw err; connection.query('INSERT INTO `list` SET ?', params, function(err, result){ if(err) throw err; cb(result); connection.release(); // 接下來connection已經無法使用，它已經被返回到連接池中 }) });}4.3 詳情頁
在首頁列表中，可以看到，我們將詳情頁的鏈接設置為了/list/1.html的方式，也可以設置成其他的方式（比如 /list?pid=1 等），只要設置好路由就行。
// routes/list.js// http://127.0.0.1:3000/list/1.htmlrouter.get('/:pid.html', function(req, res) { var pid = req.params.pid || 1; console.log(pid);});在詳情頁中需要獲取到這個主題的詳細信息和對這個主題的回復，因此在list_m中：
// models/list.js// 根據id查詢主題的詳情信息getListById : function(id, cb){ pool.getConnection(function(err, connection){ if(err) throw err; connection.query('SELECT * FROM `list` WHERE `id`=?', [id], function(err, result){ if(err) throw err; cb(result); connection.release(); // 接下來connection已經無法使用，它已經被返回到連接池中 }) });},// 某主題的回復getReplyById : function(pid, cb){ pool.getConnection(function(err, connection){ if(err) throw err; connection.query('SELECT * FROM `reply` WHERE `pid`=?', [pid], function(err, result){ if(err) throw err; cb(result); connection.release(); // 接下來connection已經無法使用，它已經被返回到連接池中 }) });}然后在路由中進行調用，這里使用async簡單的控制了下兩個異步的流程問題：
// http://127.0.0.1:3000/list/1.htmlrouter.get('/:pid.html', function(req, res) { var pid = req.params.pid || 1; async.parallel([ function(callback){ list_m.getListById(pid, function(result){ callback(null, result[0]); }) }, function(callback){ list_m.getReplyById(pid, function(result){ callback(null, result); }) }, ], function(err, results){ // console.log( results ); // res.json(results); res.render('list', { data:results }); }) }); 稍微解釋下async.parallel的功能，下節我們會詳細的講解。 async.parallel([f1, f2, f3,…, fn], fb); 是f1到fn所有的異步都執行完了就會執行fb函數。這里我們是主題的詳情和對主題的回復都請求完成了，就可以調用模板渲染。
// views/list.ejs<p><a href="/" rel="external nofollow" rel="external nofollow" rel="external nofollow" >返回到首頁</a></p><h1>詳情</h1><p>標題： <%=data[0].title %></p><div><%=data[0].content %></div><div class="reply"> <h2>評論</h2> <div class="reply_con"> <table> <% for(var i=0, len=data[1].length; i<len; i++) { %> <tr> <td><%=(i+1) %></td> <td><%=data[1][i].content %></td> <td><%=data[1][i].createtime %></td> </tr> <% } %> </table> </div></div>對主題的回復功能可以自己實現一下。
總結
寫著寫著就發現篇幅這么大了，而且充斥了大量的代碼，需要我們細心的理解。下面給出詳細的示例代碼，大家可以下載學習，希望本文的內容對大家能有所幫助。
下載地址：點擊這里
新聞熱點
疑難解答
