當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

第1章 Express MongoDB 搭建多人博客

發(fā)布時(shí)間：2023/12/18 编程问答 20 豆豆

生活随笔收集整理的這篇文章主要介紹了第1章 Express MongoDB 搭建多人博客小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

學(xué)習(xí)環(huán)境

Node.js ： 0.10.22 +

Express ： 3.4.4 +

MongoDB ： 2.4.8 +

快速開(kāi)始

安裝 Express

express 是 Node.js 上最流行的 Web 開(kāi)發(fā)框架，正如他的名字一樣，使用它我們可以快速的開(kāi)發(fā)一個(gè) Web 應(yīng)用。我們用 express 來(lái)搭建我們的博客，打開(kāi)命令行，輸入：

$ npm install -g express

我們需要用全局模式安裝 express，因?yàn)橹挥羞@樣我們才能在命令行中使用它。

新建一個(gè)工程

筆者是在 Windows 下開(kāi)發(fā)和撰寫(xiě)的教程，假如你在 Linux 或 Mac 操作系統(tǒng)下開(kāi)發(fā)應(yīng)用，本教程也幾乎同樣適用。

我們約定今后的學(xué)習(xí)把 D:\blog 文件夾作為我們的工程目錄。

windows 下打開(kāi) cmd 切換到 D 盤(pán)，輸入：

$ express -e blog

注意：express 3.x 中使用 ejs 不再是 -t ejs 而是 -e，可以輸入 express -h 查看。

然后輸入：

$ cd blog & npm install

安裝所需模塊，如下圖所示：

安裝完成后輸入：

$ node app

此時(shí)命令行中會(huì)顯示 Express server listening on port 3000，在瀏覽器里訪問(wèn) localhost:3000，如下所示：

至此，我們用 express 初始化了一個(gè)工程項(xiàng)目，并指定使用 ejs 模板引擎，下一節(jié)我們講解工程的內(nèi)部結(jié)構(gòu)。

工程結(jié)構(gòu)

我們回頭看看生成的工程目錄里面都有什么，打開(kāi)我們的 blog 文件夾，里面如圖所示：

app.js：啟動(dòng)文件，或者說(shuō)入口文件
package.json：存儲(chǔ)著工程的信息及模塊依賴(lài)，當(dāng)在 dependencies 中添加依賴(lài)的模塊時(shí)，運(yùn)行 npm install，npm 會(huì)檢查當(dāng)前目錄下的 package.json，并自動(dòng)安裝所有指定的模塊
node_modules：存放 package.json 中安裝的模塊，當(dāng)你在 package.json 添加依賴(lài)的模塊并安裝后，存放在這個(gè)文件夾下
public：存放 image、css、js 等文件
routes：存放路由文件
views：存放視圖文件或者說(shuō)模版文件

打開(kāi) app.js，讓我們看看里面究竟有什么東西：

/*** Module dependencies.*/var express = require('express'); var routes = require('./routes'); var user = require('./routes/user'); var http = require('http'); var path = require('path');var app = express();// all environments app.set('port', process.env.PORT || 3000); app.set('views', __dirname + '/views'); app.set('view engine', 'ejs'); app.use(express.favicon()); app.use(express.logger('dev')); app.use(express.bodyParser()); app.use(express.methodOverride()); app.use(app.router); app.use(express.static(path.join(__dirname, 'public')));// development only if ('development' == app.get('env')) {app.use(express.errorHandler()); }app.get('/', routes.index); app.get('/users', user.list);http.createServer(app).listen(app.get('port'), function(){console.log('Express server listening on port ' + app.get('port')); });

這里我們通過(guò) require() 加載了 express、http、path 模塊，以及 routes 文件夾下的 index.js 和 user.js 文件。更多關(guān)于模塊及模塊加載順序的信息請(qǐng)查閱官方文檔的 Modules 章節(jié)。

因?yàn)?express 框架是嚴(yán)重依賴(lài) connect 框架（一個(gè) Node.js 的中間件框架）創(chuàng)建而成的，所以我們可查閱：

connect 文檔： http://www.senchalabs.org/connect/
express 文檔： http://expressjs.com/api.html

了解更多內(nèi)容。

app.set('port', process.env.PORT || 3000)：設(shè)置端口為 process.env.PORT 或 3000。
app.set('views', __dirname + '/views')：設(shè)置 views 文件夾為存放視圖文件的目錄，即存放模板文件的地方，__dirname 為全局變量，存儲(chǔ)當(dāng)前正在執(zhí)行的腳本所在的目錄。
app.set('view engine', 'ejs')：設(shè)置視圖模版引擎為 ejs。
app.use(express.favicon())：connect 內(nèi)建的中間件，使用默認(rèn)的 favicon 圖標(biāo)，如果想使用自己的圖標(biāo)，需改為 app.use(express.favicon(__dirname + '/public/images/favicon.ico')); 這里我們把自定義的 favicon.ico 放到了 /public/images 文件夾下。
app.use(express.logger('dev'))：connect 內(nèi)建的中間件，在開(kāi)發(fā)環(huán)境下使用，在終端顯示簡(jiǎn)單的日志，比如在啟動(dòng) app.js 后訪問(wèn) localhost:3000，終端會(huì)輸出：

Express server listening on port 3000 GET / 200 21ms - 206b GET /stylesheets/style.css 304 4ms

假如你去掉這一行代碼，不管你怎么刷新網(wǎng)頁(yè)，終端都只有一行 Express server listening on port 3000。
app.use(express.bodyParser())：connect 內(nèi)建的中間件，用來(lái)解析請(qǐng)求體，支持 application/json， application/x-www-form-urlencoded, 和 multipart/form-data。

注意：最新的 Express 生成的工程也許刪除了 app.use(express.bodyParser()) ，使用了：

app.use(express.json()); app.use(express.urlencoded());

其實(shí)，app.use(express.bodyParser()) 相當(dāng)于：

app.use(express.json()); app.use(express.urlencoded()); app.use(express.multipart());

這里我們?nèi)匀皇褂?bodyParser ，刪除 app.use(express.json()); 和 app.use(express.urlencoded());，添加 app.use(express.bodyParser())。

app.use(express.methodOverride())：connect 內(nèi)建的中間件，可以協(xié)助處理 POST 請(qǐng)求，偽裝 PUT、DELETE 和其他 HTTP 方法。
app.use(app.router)：調(diào)用路由解析的規(guī)則。
app.use(express.static(path.join(__dirname, 'public')))：connect 內(nèi)建的中間件，設(shè)置根目錄下的 public 文件夾為存放 image、css、js 等靜態(tài)文件的目錄。

if ('development' == app.get('env')) {app.use(express.errorHandler()); }

開(kāi)發(fā)環(huán)境下的錯(cuò)誤處理，輸出錯(cuò)誤信息。
app.get('/', routes.index)：路由控制器，如果用戶(hù)訪問(wèn) / （主頁(yè)），則由 routes.index 來(lái)處理，routes/index.js 內(nèi)容如下：

exports.index = function(req, res){res.render('index', { title: 'Express' }); };

通過(guò) exports.index 導(dǎo)出 index 函數(shù)接口，app.get('/', routes.index) 相當(dāng)于：

app.get('/', function(req, res){res.render('index', { title: 'Express' }); });

res.render('index', { title: 'Express' })：使用 ejs 模板引擎解析 views/index.ejs（因?yàn)槲覀冎巴ㄟ^(guò) app.set('views', __dirname + '/views') 設(shè)置了模版文件默認(rèn)存儲(chǔ)在 views 文件夾下），并傳入一個(gè)對(duì)象，這個(gè)對(duì)象只有一個(gè) title 屬性，它的值為字符串 Express ，即用字符串 Express 替換 views/index.ejs 中所有 title 變量，這就是我們所說(shuō)的渲染視圖，或者說(shuō)渲染模版。后面我們將會(huì)了解更多關(guān)于模板引擎的內(nèi)容。

http.createServer(app).listen(app.get('port'), function(){console.log('Express server listening on port ' + app.get('port')); });

這段代碼的意思是創(chuàng)建 http 服務(wù)器并監(jiān)聽(tīng) 3000 端口，成功后在命令行中顯示 Express server listening on port 3000，然后我們就可以在瀏覽器訪問(wèn) localhost:3000 了。

這一小節(jié)我們學(xué)習(xí)了如何創(chuàng)建一個(gè)工程并啟動(dòng)它，了解了工程的大體結(jié)構(gòu)，下一節(jié)我們將學(xué)習(xí) express 的基本使用及路由控制。

路由控制

工作原理

前面提到過(guò) app.js 中 app.get('/', routes.index) 可以用以下代碼取代：

app.get('/', function(req, res){res.render('index', { title: 'Express' }); };)

這段代碼的意思是當(dāng)訪問(wèn)主頁(yè)時(shí)，調(diào)用 ejs 模板引擎，來(lái)渲染 index.ejs 模版文件（即將 title 變量全部替換為字符串 Express），生成靜態(tài)頁(yè)面并顯示在瀏覽器中。

我們來(lái)作一些修改，以上代碼實(shí)現(xiàn)了路由的功能，我們當(dāng)然可以不要 routes/index.js 文件，把實(shí)現(xiàn)路由功能的代碼都放在 app.js 里，但隨著時(shí)間的推移 app.js 會(huì)變得臃腫難以維護(hù)，這也違背了代碼模塊化的思想，所以我們把實(shí)現(xiàn)路由功能的代碼都放在 routes/index.js 里。官方給出的寫(xiě)法是在 app.js 中實(shí)現(xiàn)了簡(jiǎn)單的路由分配，然后再去 index.js 中找到對(duì)應(yīng)的路由函數(shù)，最終實(shí)現(xiàn)路由功能。我們不妨把路由控制器和實(shí)現(xiàn)路由功能的函數(shù)都放到 index.js 里，app.js 中只有一個(gè)總的路由接口。

打開(kāi) app.js，刪除：

app.get('/', routes.index); app.get('/users', user.list);

注意：目前我們用不到 routes/user.js，也可以刪除這個(gè)文件，同時(shí)刪除 app.js 中 var user = require('./routes/user');。

在 app.js 最后添加一行代碼：

routes(app);

修改 index.js 如下：

module.exports = function(app) {app.get('/', function (req, res) {res.render('index', { title: 'Express' });}); };

現(xiàn)在，再運(yùn)行你的 app，你會(huì)發(fā)現(xiàn)主頁(yè)毫無(wú)二致。這里我們?cè)?routes/index.js 中通過(guò) module.exports 導(dǎo)出了一個(gè)函數(shù)接口，在 app.js 中通過(guò) require 加載了 index.js 然后通過(guò) routes(app) 調(diào)用了 index.js 導(dǎo)出的函數(shù)。

路由規(guī)則

express 封裝了多種 http 請(qǐng)求方式，我們主要只使用 get 和 post 兩種，即 app.get() 和 app.post() 。

app.get() 和 app.post() 的第一個(gè)參數(shù)都為請(qǐng)求的路徑，第二個(gè)參數(shù)為處理請(qǐng)求的回調(diào)函數(shù)，回調(diào)函數(shù)有兩個(gè)參數(shù)分別是 req 和 res，代表請(qǐng)求信息和響應(yīng)信息。路徑請(qǐng)求及對(duì)應(yīng)的獲取路徑有以下幾種形式：

req.query

// GET /search?q=tobi+ferret req.query.q // => "tobi ferret" // GET /shoes?order=desc&shoe[color]=blue&shoe[type]=converse req.query.order // => "desc" req.query.shoe.color // => "blue" req.query.shoe.type // => "converse"

req.body

// POST user[name]=tobi&user[email]=tobi@learnboost.com req.body.user.name // => "tobi" req.body.user.email // => "tobi@learnboost.com" // POST { "name": "tobi" } req.body.name // => "tobi"

req.params

// GET /user/tj req.params.name // => "tj" // GET /file/javascripts/jquery.js req.params[0] // => "javascripts/jquery.js" **req.param(name)**// ?name=tobi req.param('name') // => "tobi" // POST name=tobi req.param('name') // => "tobi" // /user/tobi for /user/:name req.param('name') // => "tobi"

不難看出：

req.query：處理 get 請(qǐng)求，獲取 get 請(qǐng)求參數(shù)
req.params：處理 /:xxx 形式的 get 或 post 請(qǐng)求，獲取請(qǐng)求參數(shù)
req.body：處理 post 請(qǐng)求，獲取 post 請(qǐng)求體
req.param()：處理 get 和 post 請(qǐng)求，但查找優(yōu)先級(jí)由高到低為 req.params→req.body→req.query

路徑規(guī)則還支持正則表達(dá)式，更多請(qǐng)查閱 Express 官方文檔。

添加路由規(guī)則

當(dāng)我們?cè)L問(wèn) localhost:3000 時(shí)，會(huì)顯示：

當(dāng)我們?cè)L問(wèn) localhost:3000/nswbmw 這種不存在的頁(yè)面時(shí)就會(huì)顯示：

這是因?yàn)椴淮嬖?/nswbmw 的路由規(guī)則，而且它也不是一個(gè) public 目錄下的文件，所以 express 返回了 404 Not Found 的錯(cuò)誤。下面我們來(lái)添加這條路由規(guī)則，使得當(dāng)訪問(wèn) localhost:3000/nswbmw 時(shí)，頁(yè)面顯示 hello,world!

注意：以下修改僅用于測(cè)試，看到效果后再把代碼還原回來(lái)。

修改 index.js，在 app.get('/') 函數(shù)后添加一條路由規(guī)則：

app.get('/nswbmw', function (req, res) {res.send('hello.world!'); });

此時(shí)，訪問(wèn) localhost:3000/nswbmw 頁(yè)面顯示如下：

很簡(jiǎn)單吧？這一節(jié)我們學(xué)習(xí)了基本的路由規(guī)則及如何添加一條路由規(guī)則，下一節(jié)我們將學(xué)習(xí)模板引擎的知識(shí)。

模版引擎

什么是模板引擎

模板引擎（Template Engine）是一個(gè)將頁(yè)面模板和要顯示的數(shù)據(jù)結(jié)合起來(lái)生成 HTML 頁(yè)面的工具。
如果說(shuō)上面講到的 express 中的路由控制方法相當(dāng)于 MVC 中的控制器的話(huà)，那模板引擎就相當(dāng)于 MVC 中的視圖。

模板引擎的功能是將頁(yè)面模板和要顯示的數(shù)據(jù)結(jié)合起來(lái)生成 HTML 頁(yè)面。它既可以運(yùn) 行在服務(wù)器端又可以運(yùn)行在客戶(hù)端，大多數(shù)時(shí)候它都在服務(wù)器端直接被解析為 HTML，解析完成后再傳輸給客戶(hù)端，因此客戶(hù)端甚至無(wú)法判斷頁(yè)面是否是模板引擎生成的。有時(shí)候模板引擎也可以運(yùn)行在客戶(hù)端，即瀏覽器中，典型的代表就是 XSLT，它以 XML 為輸入，在客戶(hù)端生成 HTML 頁(yè)面。但是由于瀏覽器兼容性問(wèn)題，XSLT 并不是很流行。目前的主流還是由服務(wù)器運(yùn)行模板引擎。

在 MVC 架構(gòu)中，模板引擎包含在服務(wù)器端。控制器得到用戶(hù)請(qǐng)求后，從模型獲取數(shù)據(jù)，調(diào)用模板引擎。模板引擎以數(shù)據(jù)和頁(yè)面模板為輸入，生成 HTML 頁(yè)面，然后返回給控制器，由控制器交回客戶(hù)端。

——《Node.js開(kāi)發(fā)指南》

什么是 ejs ?

ejs 是模板引擎的一種，也是我們這個(gè)教程中使用的模板引擎，因?yàn)樗褂闷饋?lái)十分簡(jiǎn)單，而且與 express 集成良好。

使用模板引擎

前面我們通過(guò)以下兩行代碼設(shè)置了模板文件的存儲(chǔ)位置和使用的模板引擎：

app.set('views', __dirname + '/views'); app.set('view engine', 'ejs');

注意：我們通過(guò) express -e blog 只是初始化了一個(gè)使用 ejs 模板引擎的工程而已，比如 node_modules 下添加了 ejs 模塊，views 文件夾下有 index.ejs 。并不是說(shuō)強(qiáng)制該工程只能使用 ejs 不能使用其他的模板引擎比如 jade，真正指定使用哪個(gè)模板引擎的是 app.set('view engine', 'ejs'); 。

在 routes/index.js 中通過(guò)調(diào)用 res.render() 渲染模版，并將其產(chǎn)生的頁(yè)面直接返回給客戶(hù)端。它接受兩個(gè)參數(shù)，第一個(gè)是模板的名稱(chēng)，即 views 目錄下的模板文件名，擴(kuò)展名 .ejs 可選。第二個(gè)參數(shù)是傳遞給模板的數(shù)據(jù)對(duì)象，用于模板翻譯。

打開(kāi) views/index.ejs ，內(nèi)容如下：

index.ejs

<!DOCTYPE html> <html><head><title><%= title %></title><link rel='stylesheet' href='/stylesheets/style.css' /></head><body><h1><%= title %></h1><p>Welcome to <%= title %></p></body> </html>

當(dāng)我們 res.render('index', { title: 'Express' }); 時(shí)，模板引擎會(huì)把 <%= title %> 替換成 Express，然后把替換后的頁(yè)面顯示給用戶(hù)。

渲染后生成的頁(yè)面代碼為：

<!DOCTYPE html> <html><head><title>Express</title><link rel='stylesheet' href='/stylesheets/style.css' /></head><body><h1>Express</h1><p>Welcome to Express</p></body> </html>

注意：我們通過(guò) app.use(express.static(path.join(__dirname, 'public'))) 設(shè)置了靜態(tài)文靜目錄為 public 文件夾，所以上面代碼中的 href='/stylesheets/style.css' 就相當(dāng)于 href='public/stylesheets/style.css' 。

ejs 的標(biāo)簽系統(tǒng)非常簡(jiǎn)單，它只有以下三種標(biāo)簽：

<% code %>：JavaScript 代碼。
<%= code %>：顯示替換過(guò) HTML 特殊字符的內(nèi)容。
<%- code %>：顯示原始 HTML 內(nèi)容。

注意： <%= code %> 和 <%- code %> 的區(qū)別，當(dāng)變量 code 為普通字符串時(shí)，兩者沒(méi)有區(qū)別。當(dāng) code 比如為 <h1>hello</h1> 這種字符串時(shí)，<%= code %> 會(huì)原樣輸出 <h1>hello</h1>，而 <%- code %> 則會(huì)顯示 H1 大的 hello 字符串。

我們可以在 <% %> 內(nèi)使用 JavaScript 代碼。下面是 ejs 的官方示例：

The Data

supplies: ['mop', 'broom', 'duster']

The Template

The Result

<ul><li>mop</li><li>broom</li><li>duster</li> </ul>

我們可以用上述三種標(biāo)簽實(shí)現(xiàn)頁(yè)面模板系統(tǒng)能實(shí)現(xiàn)的任何內(nèi)容。

頁(yè)面布局

Express 3.x 中我們不再使用 layout.ejs 進(jìn)行頁(yè)面布局，轉(zhuǎn)而使用 include 來(lái)替代。include 的簡(jiǎn)單使用如下：

index.ejs

<%- include a %> hello,world! <%- include b %>

a.ejs

this is a.ejs

b.ejs

this is b.ejs

最終 index.ejs 會(huì)顯示：

this is a.ejs hello,world! this is b.ejs

這一節(jié)我們學(xué)習(xí)了模版引擎的相關(guān)知識(shí)，下一節(jié)我們正式開(kāi)始學(xué)習(xí)如何從頭開(kāi)始搭建一個(gè)多人博客。

搭建多人博客

功能分析

搭建一個(gè)簡(jiǎn)單的具有多人注冊(cè)、登錄、發(fā)表文章、登出功能的博客。

設(shè)計(jì)目標(biāo)

未登錄：主頁(yè)左側(cè)導(dǎo)航顯示 home、login、register，右側(cè)顯示已發(fā)表的文章、發(fā)表日期及作者。
登陸后：主頁(yè)左側(cè)導(dǎo)航顯示 home、post、logout，右側(cè)顯示已發(fā)表的文章、發(fā)表日期及作者。
用戶(hù)登錄、注冊(cè)、發(fā)表成功以及登出后都返回到主頁(yè)。

未登錄：

主頁(yè)：

登錄頁(yè)：

注冊(cè)頁(yè)：

登錄后：

主頁(yè):

發(fā)表頁(yè)：

注意：沒(méi)有登出頁(yè)，當(dāng)點(diǎn)擊 LOGOUT 后，退出登陸并返回到主頁(yè)。

路由規(guī)劃

我們已經(jīng)把設(shè)計(jì)的構(gòu)想圖貼出來(lái)了，接下來(lái)的任務(wù)就是完成路由規(guī)劃了。路由規(guī)劃，或者說(shuō)控制器規(guī)劃是整個(gè)網(wǎng)站的骨架部分，因?yàn)樗幱谡麄€(gè)架構(gòu)的樞紐位置，相當(dāng)于各個(gè)接口之間的粘合劑，所以應(yīng)該優(yōu)先考慮。

根據(jù)構(gòu)思的設(shè)計(jì)圖，我們作以下路由規(guī)劃：

/ ：首頁(yè) /login ：用戶(hù)登錄 /reg ：用戶(hù)注冊(cè) /post ：發(fā)表文章 /logout ：登出

我們要求 /login 和 /reg 只能是未登錄的用戶(hù)訪問(wèn)，而 /post 和 /logout 只能是已登錄的用戶(hù)訪問(wèn)。左側(cè)導(dǎo)航列表則針對(duì)已登錄和未登錄的用戶(hù)顯示不同的內(nèi)容。

修改 index.js 如下：

module.exports = function(app) {app.get('/', function (req, res) {res.render('index', { title: '主頁(yè)' });});app.get('/reg', function (req, res) {res.render('reg', { title: '注冊(cè)' });});app.post('/reg', function (req, res) {});app.get('/login', function (req, res) {res.render('login', { title: '登錄' });});app.post('/login', function (req, res) {});app.get('/post', function (req, res) {res.render('post', { title: '發(fā)表' });});app.post('/post', function (req, res) {});app.get('/logout', function (req, res) {}); };

如何針對(duì)已登錄和未登錄的用戶(hù)顯示不同的內(nèi)容呢？或者說(shuō)如何判斷用戶(hù)是否已經(jīng)登陸了呢？進(jìn)一步說(shuō)如何記住用戶(hù)的登錄狀態(tài)呢？我們通過(guò)引入會(huì)話(huà)（session）機(jī)制記錄用戶(hù)登錄狀態(tài)，還要訪問(wèn)數(shù)據(jù)庫(kù)來(lái)保存和讀取用戶(hù)信息。下一節(jié)我們將學(xué)習(xí)如何使用數(shù)據(jù)庫(kù)。

使用數(shù)據(jù)庫(kù)

MongoDB簡(jiǎn)介

MongoDB 是一個(gè)基于分布式文件存儲(chǔ)的 NoSQL（非關(guān)系型數(shù)據(jù)庫(kù)）的一種，由 C++ 語(yǔ)言編寫(xiě)，旨在為 WEB 應(yīng)用提供可擴(kuò)展的高性能數(shù)據(jù)存儲(chǔ)解決方案。MongoDB 支持的數(shù)據(jù)結(jié)構(gòu)非常松散，是類(lèi)似 json 的 bjson 格式，因此可以存儲(chǔ)比較復(fù)雜的數(shù)據(jù)類(lèi)型。MongoDB 最大的特點(diǎn)是他支持的查詢(xún)語(yǔ)言非常強(qiáng)大，其語(yǔ)法有點(diǎn)類(lèi)似于面向?qū)ο蟮牟樵?xún)語(yǔ)言，幾乎可以實(shí)現(xiàn)類(lèi)似關(guān)系數(shù)據(jù)庫(kù)單表查詢(xún)的絕大部分功能，而且還支持對(duì)數(shù)據(jù)建立索引。

MongoDB 沒(méi)有關(guān)系型數(shù)據(jù)庫(kù)中行和表的概念，不過(guò)有類(lèi)似的文檔和集合的概念。文檔是 MongoDB 最基本的單位，每個(gè)文檔都會(huì)以唯一的 _id 標(biāo)識(shí)，文檔的屬性為 key/value 的鍵值對(duì)形式，文檔內(nèi)可以嵌套另一個(gè)文檔，因此可以存儲(chǔ)比較復(fù)雜的數(shù)據(jù)類(lèi)型。集合是許多文檔的總和，一個(gè)數(shù)據(jù)庫(kù)可以有多個(gè)集合，一個(gè)集合可以有多個(gè)文檔。

下面是一個(gè) MongoDB 文檔的示例：

{ "_id" : ObjectId( "4f7fe8432b4a1077a7c551e8" ),"name" : "nswbmw","age" : 22,"email" : [ "xxx@126.com", "xxx@gmail.com" ],"family" : {"mother" : { ... },"father" : { ... },"sister : {"name" : "miaomiao","age" : 27,"email" : "xxx@163.com","family" : {"mother" : { ... },"father" : { ... },"brother : { ... },"husband" : { ... },"son" : { ... }}}} }

更多有關(guān) MongoDB 的知識(shí)請(qǐng)參閱《mongodb權(quán)威指南》或查閱：http://www.mongodb.org/

安裝MongoDB

安裝 mongodb 很簡(jiǎn)單，去官網(wǎng)（http://www.mongodb.org/downloads）下載最新版的 mongodb，解壓到 D 盤(pán)并把文件夾重命名為 mongodb，并在 mongodb 文件夾里新建 blog 文件夾作為我們博客內(nèi)容的存儲(chǔ)目錄。打開(kāi)命令行，切換到 d:\mongodb\bin 目錄下，然后輸入：

mongod -dbpath d:\mongodb\blog

以上命令的意思是：設(shè)置 blog 文件夾作為我們工程的存儲(chǔ)目錄并啟動(dòng)數(shù)據(jù)庫(kù)。為了方便以后使用數(shù)據(jù)庫(kù)，我們?cè)谧烂嫔闲陆?啟動(dòng)mongodb.bat ，并寫(xiě)入：

d:\mongodb\bin\mongod.exe -dbpath d:\mongodb\blog

這樣我們以后只需運(yùn)行桌面上的 啟動(dòng)mongodb.bat 就可啟動(dòng)數(shù)據(jù)庫(kù)了。

連接MongoDB

數(shù)據(jù)庫(kù)雖然安裝并啟動(dòng)成功了，但我們需要連接數(shù)據(jù)庫(kù)后才能使用數(shù)據(jù)庫(kù)。怎么才能在 Node.js 中使用 MongoDB 呢？我們使用官方提供的 node-mongodb-native 驅(qū)動(dòng)模塊，打開(kāi) package.json，在 dependencies 中添加一行代碼：

{"name": "blog","version": "0.0.1","private": true,"scripts": {"start": "node app.js"},"dependencies": {"express": "*","ejs": "*","mongodb": "*"} }

然后運(yùn)行 npm install 更新依賴(lài)的模塊，稍等片刻后 mongodb 模塊就下載并安裝完成了。

接下來(lái)在工程的根目錄中創(chuàng)建 settings.js 文件，用于保存該博客工程的配置信息，比如數(shù)據(jù)庫(kù)的連接信息。我們將數(shù)據(jù)庫(kù)命名為 blog，因?yàn)閿?shù)據(jù)庫(kù)服務(wù)器在本地，所以 settings.js 文件的內(nèi)容如下：

module.exports = { cookieSecret: 'myblog', db: 'blog', host: 'localhost' };

其中 db 是數(shù)據(jù)庫(kù)的名稱(chēng)，host 是數(shù)據(jù)庫(kù)的地址。cookieSecret 用于 Cookie 加密與數(shù)據(jù)庫(kù)無(wú)關(guān)，我們留作后用。

接下來(lái)在根目錄下新建 models 文件夾，并在 models 文件夾下新建 db.js ，添加如下代碼：

var settings = require('../settings'),Db = require('mongodb').Db,Connection = require('mongodb').Connection,Server = require('mongodb').Server; module.exports = new Db(settings.db, new Server(settings.host, Connection.DEFAULT_PORT), {safe: true});

其中通過(guò) new Db(settings.db, new Server(settings.host, Connection.DEFAULT_PORT), {safe: true}); 設(shè)置數(shù)據(jù)庫(kù)名、數(shù)據(jù)庫(kù)地址和數(shù)據(jù)庫(kù)端口創(chuàng)建了一個(gè)數(shù)據(jù)庫(kù)連接實(shí)例，并通過(guò) module.exports 導(dǎo)出該實(shí)例。這樣，我們就可以通過(guò) require 這個(gè)文件來(lái)對(duì)數(shù)據(jù)庫(kù)進(jìn)行讀寫(xiě)了。

會(huì)話(huà)支持

會(huì)話(huà)是一種持久的網(wǎng)絡(luò)協(xié)議，用于完成服務(wù)器和客戶(hù)端之間的一些交互行為。會(huì)話(huà)是一個(gè)比連接粒度更大的概念，一次會(huì)話(huà)可能包含多次連接，每次連接都被認(rèn)為是會(huì)話(huà)的一次操作。在網(wǎng)絡(luò)應(yīng)用開(kāi)發(fā)中，有必要實(shí)現(xiàn)會(huì)話(huà)以幫助用戶(hù)交互。例如網(wǎng)上購(gòu)物的場(chǎng)景，用戶(hù)瀏覽了多個(gè)頁(yè) 面，購(gòu)買(mǎi)了一些物品，這些請(qǐng)求在多次連接中完成。許多應(yīng)用層網(wǎng)絡(luò)協(xié)議都是由會(huì)話(huà)支持的，如 FTP、Telnet 等，而 HTTP 協(xié)議是無(wú)狀態(tài)的，本身不支持會(huì)話(huà)，因此在沒(méi)有額外手段的幫助下，前面場(chǎng)景中服務(wù)器不知道用戶(hù)購(gòu)買(mǎi)了什么。

為了在無(wú)狀態(tài)的 HTTP 協(xié)議之上實(shí)現(xiàn)會(huì)話(huà)，Cookie 誕生了。Cookie 是一些存儲(chǔ)在客戶(hù)端的信息，每次連接的時(shí)候由瀏覽器向服務(wù)器遞交，服務(wù)器也向?yàn)g覽器發(fā)起存儲(chǔ) Cookie 的請(qǐng)求，依靠這樣的手段服務(wù)器可以識(shí)別客戶(hù)端。我們通常意義上的 HTTP 會(huì)話(huà)功能就是這樣實(shí)現(xiàn)的。具體來(lái)說(shuō)，瀏覽器首次向服務(wù)器發(fā)起請(qǐng)求時(shí)，服務(wù)器生成一個(gè)唯一標(biāo)識(shí)符并發(fā)送給客戶(hù)端瀏覽器，瀏覽器將這個(gè)唯一標(biāo)識(shí)符存儲(chǔ)在 Cookie 中，以后每次再發(fā)起請(qǐng)求，客戶(hù)端瀏覽器都會(huì)向服務(wù)器傳送這個(gè)唯一標(biāo)識(shí)符，服務(wù)器通過(guò)這個(gè)唯一標(biāo)識(shí)符來(lái)識(shí)別用戶(hù)。對(duì)于開(kāi)發(fā)者來(lái)說(shuō)，我們無(wú)須關(guān)心瀏覽器端的存儲(chǔ)，需要關(guān)注的僅僅是如何通過(guò)這個(gè)唯一標(biāo)識(shí)符來(lái)識(shí)別用戶(hù)。很多服務(wù)端腳本語(yǔ)言都有會(huì)話(huà)功能，如 PHP，把每個(gè)唯一標(biāo)識(shí)符存儲(chǔ)到文件中。

——《Node.js開(kāi)發(fā)指南》

express 也提供了會(huì)話(huà)中間件，默認(rèn)情況下是把用戶(hù)信息存儲(chǔ)在內(nèi)存中，但我們既然已經(jīng)有了 MongoDB，不妨把會(huì)話(huà)信息存儲(chǔ)在數(shù)據(jù)庫(kù)中，便于持久維護(hù)。為了使用這一功能，我們首先要獲取一個(gè)叫做 connect-mongo （https://github.com/kcbanner/connect-mongo）的模塊，在 package.json 中添加一行代碼：

{"name": "blog","version": "0.0.1","private": true,"scripts": {"start": "node app.js"},"dependencies": {"express": "*","ejs": "*","mongodb": "*","connect-mongo": "*"} }

運(yùn)行 npm install 安裝模塊。然后打開(kāi) app.js，在 var path = require('path'); 后添加以下代碼：

var MongoStore = require('connect-mongo')(express); var settings = require('./settings');

在 app.use(express.methodOverride()); 后添加：

app.use(express.cookieParser()); app.use(express.session({secret: settings.cookieSecret,key: settings.db,//cookie namecookie: {maxAge: 1000 * 60 * 60 * 24 * 30},//30 daysstore: new MongoStore({db: settings.db}) }));

其中 express.cookieParser() 是 Cookie 解析的中間件。express.session() 則提供會(huì)話(huà)支持，secret 用來(lái)防止篡改 cookie，key 的值為 cookie 的名字，通過(guò)設(shè)置 cookie 的 maxAge 值設(shè)定 cookie 的生存期，這里我們?cè)O(shè)置 cookie 的生存期為 30 天，設(shè)置它的 store 參數(shù)為 MongoStore 實(shí)例，把會(huì)話(huà)信息存儲(chǔ)到數(shù)據(jù)庫(kù)中，以避免丟失。在后面的小節(jié)中，我們可以通過(guò) req.session 獲取當(dāng)前用戶(hù)的會(huì)話(huà)對(duì)象，獲取用戶(hù)的相關(guān)信息。

注冊(cè)和登陸

我們已經(jīng)準(zhǔn)備好了數(shù)據(jù)庫(kù)訪問(wèn)和會(huì)話(huà)的相關(guān)信息，接下來(lái)我們完成用戶(hù)注冊(cè)和登錄功能。

頁(yè)面設(shè)計(jì)

首先我們來(lái)完成主頁(yè)、登錄頁(yè)和注冊(cè)頁(yè)的頁(yè)面設(shè)計(jì)。

修改 views/index.ejs 如下：

<%- include header %> 這是主頁(yè) <%- include footer %>

在 views 文件夾下新建 header.ejs，添加如下代碼：

<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Blog</title> <link rel="stylesheet" href="/stylesheets/style.css"> </head> <body><header> <h1><%= title %></h1> </header><nav> <span><a title="主頁(yè)" href="/">home</a></span> <span><a title="登錄" href="/login">login</a></span> <span><a title="注冊(cè)" href="/reg">register</a></span> </nav><article>

新建 footer.ejs，添加如下代碼：

</article> </body> </html>

修改 public/stylesheets/style.css 如下：

/* inspired by http://yihui.name/cn/ */ *{padding:0;margin:0;} body{width:600px;margin:2em auto;padding:0 2em;font-size:14px;font-family:"Microsoft YaHei";} p{line-height:24px;margin:1em 0;} header{padding:.5em 0;border-bottom:1px solid #cccccc;} nav{position:fixed;left:12em;font-family:"Microsoft YaHei";font-size:1.1em;text-transform:uppercase;width:9em;text-align:right;} nav a{display:block;text-decoration:none;padding:.7em 1em;color:#000000;} nav a:hover{background-color:#ff0000;color:#f9f9f9;-webkit-transition:color .2s linear;} article{font-size:16px;padding-top:.5em;} article a{color:#dd0000;text-decoration:none;} article a:hover{color:#333333;text-decoration:underline;} .info{font-size:14px;}

運(yùn)行 app ，主頁(yè)顯示如下：

接下來(lái)在 views 文件夾下新建 login.ejs，內(nèi)容如下：

<%- include header %> <form method="post">用戶(hù)名：<input type="text" name="name"/><br />密碼： <input type="password" name="password"/><br /><input type="submit" value="登錄"/> </form> <%- include footer %>

登錄頁(yè)面顯示如下：

在 views 文件夾下新建 reg.ejs，內(nèi)容如下：

<%- include header %> <form method="post">用戶(hù)名： <input type="text" name="name"/><br />密碼： <input type="password" name="password"/><br />確認(rèn)密碼：<input type="password" name="password-repeat"/><br />郵箱： <input type="email" name="email"/><br /><input type="submit" value="注冊(cè)"/> </form> <%- include footer %>

注冊(cè)頁(yè)面顯示如下：

至此，未登錄時(shí)的主頁(yè)、注冊(cè)頁(yè)、登錄頁(yè)都已經(jīng)完成。

在桌面新建 啟動(dòng)app.bat 并寫(xiě)入：

node d:\blog\app

以后我們就可以通過(guò)依次打開(kāi) 啟動(dòng)mongodb.bat 和 啟動(dòng)app.bat 來(lái)啟動(dòng)我們的博客了。

注意：每次我們更新代碼后，都需要手動(dòng)停止并重啟應(yīng)用，使用 supervisor 模塊可以解決這個(gè)問(wèn)題，每當(dāng)我們保存修改的文件時(shí)，supervisor 都會(huì)自動(dòng)幫我們重啟應(yīng)用。通過(guò)：

$ npm install -g supervisor

安裝 supervisor 。使用 supervisor 命令啟動(dòng) app.js：

$ supervisor app

我們可以將 啟動(dòng)app.bat 修改為 supervisor d:\blog\app。

此時(shí)依次運(yùn)行 啟動(dòng)mongodb.bat 和 啟動(dòng)app.bat ，去瀏覽器中查看一下效果吧。

頁(yè)面通知

接下來(lái)我們實(shí)現(xiàn)用戶(hù)的注冊(cè)和登陸，在這之前我們需要引入 flash 模塊來(lái)實(shí)現(xiàn)頁(yè)面通知（即成功與錯(cuò)誤信息的顯示）的功能。

什么是 flash?

我們所說(shuō)的 flash 即 connect-flash 模塊（https://github.com/jaredhanson/connect-flash），flash 是一個(gè)在 session 中用于存儲(chǔ)信息的特定區(qū)域。信息寫(xiě)入 flash ，下一次顯示完畢后即被清除。典型的應(yīng)用是結(jié)合重定向的功能，確保信息是提供給下一個(gè)被渲染的頁(yè)面。這個(gè)中間件是從 Express 2.x 提取出來(lái)的，Express 3.x 不再支持，但是通過(guò) connect-flash 模塊可以實(shí)現(xiàn)這個(gè)功能。

在 package.json 添加一行代碼：

{"name": "blog","version": "0.0.1","private": true,"scripts": {"start": "node app.js"},"dependencies": {"express": "*","ejs": "*","mongodb": "*","connect-mongo": "*","connect-flash": "*"} }

然后 npm install 安裝 connect-flash 模塊。修改 app.js ，在 var settings = require('./settings'); 后添加：

var flash = require('connect-flash');

在 app.set('view engine', 'ejs'); 后添加：

app.use(flash());

現(xiàn)在我們就可以使用 flash 功能了。

注冊(cè)響應(yīng)

前面我們已經(jīng)完成了注冊(cè)頁(yè)，當(dāng)然現(xiàn)在點(diǎn)擊注冊(cè)是沒(méi)有效果的，因?yàn)槲覀冞€沒(méi)有實(shí)現(xiàn)處理 POST 請(qǐng)求的功能，下面就來(lái)實(shí)現(xiàn)它。

在 models 文件夾下新建 user.js，添加如下代碼：

我們通過(guò) User.prototype.save 實(shí)現(xiàn)了用戶(hù)信息的存儲(chǔ)，通過(guò) User.get 實(shí)現(xiàn)了用戶(hù)信息的讀取。

打開(kāi) index.js ，在最前面添加如下代碼：

var crypto = require('crypto'),User = require('../models/user.js');

通過(guò) require() 引入 crypto 模塊和 user.js 用戶(hù)模型文件，crypto 是 Node.js 的一個(gè)核心模塊，我們用它生成散列值來(lái)加密密碼。

修改 index.js 中 app.post('/reg') 如下：

app.post('/reg', function (req, res) {var name = req.body.name,password = req.body.password,password_re = req.body['password-repeat'];//檢驗(yàn)用戶(hù)兩次輸入的密碼是否一致if (password_re != password) {req.flash('error', '兩次輸入的密碼不一致!'); return res.redirect('/reg');//返回注冊(cè)頁(yè)}//生成密碼的 md5 值var md5 = crypto.createHash('md5'),password = md5.update(req.body.password).digest('hex');var newUser = new User({name: req.body.name,password: password,email: req.body.email});//檢查用戶(hù)名是否已經(jīng)存在 User.get(newUser.name, function (err, user) {if (user) {req.flash('error', '用戶(hù)已存在!');return res.redirect('/reg');//返回注冊(cè)頁(yè)}//如果不存在則新增用戶(hù)newUser.save(function (err, user) {if (err) {req.flash('error', err);return res.redirect('/reg');//注冊(cè)失敗返回主冊(cè)頁(yè)}req.session.user = user;//用戶(hù)信息存入 sessionreq.flash('success', '注冊(cè)成功!');res.redirect('/');//注冊(cè)成功后返回主頁(yè)});}); });

注意：我們把用戶(hù)信息存儲(chǔ)在了 session 里，以后就可以通過(guò) req.session.user 讀取用戶(hù)信息。

req.body：就是 POST 請(qǐng)求信息解析過(guò)后的對(duì)象，例如我們要訪問(wèn) POST 來(lái)的表單內(nèi)的 name="password" 域的值，只需訪問(wèn) req.body['password'] 或 req.body.password 即可。
res.redirect：重定向功能，實(shí)現(xiàn)了頁(yè)面的跳轉(zhuǎn)，更多關(guān)于 res.redirect 的信息請(qǐng)查閱：http://expressjs.com/api.html#res.redirect 。
User：在前面的代碼中，我們直接使用了 User 對(duì)象。User 是一個(gè)描述數(shù)據(jù)的對(duì)象，即 MVC 架構(gòu)中的模型。前面我們使用了許多視圖和控制器，這是第一次接觸到模型。與視圖和控制器不同，模型是真正與數(shù)據(jù)打交道的工具，沒(méi)有模型，網(wǎng)站就只是一個(gè)外殼，不能發(fā)揮真實(shí)的作用，因此它是框架中最根本的部分。

現(xiàn)在，啟動(dòng)應(yīng)用，在瀏覽器輸入 localhost:3000 注冊(cè)試試吧！注冊(cè)成功后顯示如下：

這樣我們并不知道是否注冊(cè)成功，我們查看數(shù)據(jù)庫(kù)中是否存入了用戶(hù)的信息，打開(kāi)一個(gè)命令行切換到 d:\mongodb\bin\ （保證數(shù)據(jù)庫(kù)已打開(kāi)的前提下），輸入：

可以看到，用戶(hù)信息已經(jīng)成功存入數(shù)據(jù)庫(kù)。

接下來(lái)我們實(shí)現(xiàn)當(dāng)注冊(cè)成功返回主頁(yè)時(shí)，左側(cè)導(dǎo)航顯示 HOME 、POST 、LOGOUT ，右側(cè)顯示 注冊(cè)成功！ 字樣，即添加 flash 的頁(yè)面通知功能。

修改 header.ejs，將 <nav></nav> 修改如下：

<nav> <span><a title="主頁(yè)" href="/">home</a></span> <% if (user) { %><span><a title="發(fā)表" href="/post">post</a></span><span><a title="登出" href="/logout">logout</a></span> <% } else { %><span><a title="登錄" href="/login">login</a></span><span><a title="注冊(cè)" href="/reg">register</a></span> <% } %> </nav>

在 <article> 后添加如下代碼：

<% if (success) { %><div><%= success %></div> <% } %> <% if (error) { %><div><%= error %> </div> <% } %>

修改 index.js ，將 app.get('/') 修改如下：

app.get('/', function (req, res) {res.render('index', {title: '主頁(yè)',user: req.session.user,success: req.flash('success').toString(),error: req.flash('error').toString()}); });

將 app.get('reg') 修改如下：

app.get('/reg', function (req, res) {res.render('reg', {title: '注冊(cè)',user: req.session.user,success: req.flash('success').toString(),error: req.flash('error').toString()}); });

現(xiàn)在運(yùn)行我們的博客，注冊(cè)成功后顯示如下：

我們通過(guò)對(duì) session 的使用實(shí)現(xiàn)了對(duì)用戶(hù)狀態(tài)的檢測(cè)，再根據(jù)不同的用戶(hù)狀態(tài)顯示不同的導(dǎo)航信息。
簡(jiǎn)單解釋一下流程：用戶(hù)在注冊(cè)成功后，把用戶(hù)信息存入 session ，頁(yè)面跳轉(zhuǎn)到主頁(yè)顯示 注冊(cè)成功！ 的字樣。同時(shí)把 session 中的用戶(hù)信息賦給變量 user ，在渲染 index.ejs 文件時(shí)通過(guò)檢測(cè) user 判斷用戶(hù)是否在線，根據(jù)用戶(hù)狀態(tài)的不同顯示不同的導(dǎo)航信息。

success: req.flash('success').toString() 的意思是將成功的信息賦值給變量 success， error: req.flash('error').toString() 的意思是將錯(cuò)誤的信息賦值給變量 error ，然后我們?cè)阡秩?ejs 模版文件時(shí)傳遞這兩個(gè)變量來(lái)進(jìn)行檢測(cè)并顯示通知。

登錄與登出響應(yīng)

現(xiàn)在我們來(lái)實(shí)現(xiàn)用戶(hù)登錄的功能。

打開(kāi) index.js ，將 app.post('/login') 修改如下：

app.post('/login', function (req, res) {//生成密碼的 md5 值var md5 = crypto.createHash('md5'),password = md5.update(req.body.password).digest('hex');//檢查用戶(hù)是否存在User.get(req.body.name, function (err, user) {if (!user) {req.flash('error', '用戶(hù)不存在!'); return res.redirect('/login');//用戶(hù)不存在則跳轉(zhuǎn)到登錄頁(yè)}//檢查密碼是否一致if (user.password != password) {req.flash('error', '密碼錯(cuò)誤!'); return res.redirect('/login');//密碼錯(cuò)誤則跳轉(zhuǎn)到登錄頁(yè)}//用戶(hù)名密碼都匹配后，將用戶(hù)信息存入 sessionreq.session.user = user;req.flash('success', '登陸成功!');res.redirect('/');//登陸成功后跳轉(zhuǎn)到主頁(yè)}); });

接下來(lái)我們實(shí)現(xiàn)登出響應(yīng)。修改 app.get('/logout') 如下：

app.get('/logout', function (req, res) {req.session.user = null;req.flash('success', '登出成功!');res.redirect('/');//登出成功后跳轉(zhuǎn)到主頁(yè) });

注意：通過(guò)把 req.session.user 賦值 null 丟掉 session 中用戶(hù)的信息，實(shí)現(xiàn)用戶(hù)的退出。

登錄后頁(yè)面顯示如下：

登出后頁(yè)面顯示如下：

至此，我們實(shí)現(xiàn)了用戶(hù)注冊(cè)與登陸的功能，并且根據(jù)用戶(hù)登錄狀態(tài)顯示不同的導(dǎo)航。

頁(yè)面權(quán)限控制

我們雖然已經(jīng)完成了用戶(hù)注冊(cè)與登陸的功能，但并不能阻止比如已經(jīng)登陸的用戶(hù)訪問(wèn) localhost:3000/reg 頁(yè)面，讀者可親自嘗試下。為此，我們需要為頁(yè)面設(shè)置訪問(wèn)權(quán)限。即注冊(cè)和登陸頁(yè)面應(yīng)該阻止已登陸的用戶(hù)訪問(wèn)，登出及后面我們將要實(shí)現(xiàn)的發(fā)表頁(yè)只對(duì)已登錄的用戶(hù)開(kāi)放。如何實(shí)現(xiàn)頁(yè)面權(quán)限的控制呢？我們可以把用戶(hù)登錄狀態(tài)的檢查放到路由中間件中，在每個(gè)路徑前增加路由中間件，即可實(shí)現(xiàn)頁(yè)面權(quán)限控制。我們添加 checkNotLogin 和 checkLogin 函數(shù)來(lái)實(shí)現(xiàn)這個(gè)功能。

checkNotLogin 和 checkLogin 用來(lái)檢測(cè)是否登陸，并通過(guò) next() 轉(zhuǎn)移控制權(quán)，檢測(cè)到未登錄則跳轉(zhuǎn)到登錄頁(yè)，檢測(cè)到已登錄則跳轉(zhuǎn)到前一個(gè)頁(yè)面。

最終 index.js 代碼如下：

注意：為了維護(hù)用戶(hù)狀態(tài)和 flash 的通知功能，我們給每個(gè) ejs 模版文件傳入了以下三個(gè)值：

user: req.session.user, success: req.flash('success').toString(), error: req.flash('error').toString()

發(fā)表文章

現(xiàn)在我們的博客已經(jīng)具備了用戶(hù)注冊(cè)、登陸、頁(yè)面權(quán)限控制的功能，接下來(lái)我們完成博客最核心的部分——發(fā)表文章。在這一節(jié)，我們將會(huì)實(shí)現(xiàn)發(fā)表文章的功能，完成整個(gè)博客的設(shè)計(jì)。

頁(yè)面設(shè)計(jì)

我們先來(lái)完成發(fā)表頁(yè)的頁(yè)面設(shè)計(jì)。在 views 文件夾下新建 post.ejs ，添加如下代碼：

<%- include header %> <form method="post">標(biāo)題：<br /><input type="text" name="title" /><br />正文：<br /><textarea name="post" rows="20" cols="100"></textarea><br /><input type="submit" value="發(fā)表" /> </form> <%- include footer %>

文章模型

仿照用戶(hù)模型，我們將文章模型命名為 Post 對(duì)象，它擁有與 User 相似的接口，分別是 Post.get 和 Post.prototype.save 。Post.get 的功能是從數(shù)據(jù)庫(kù)中獲取文章，可以按指定用戶(hù)獲取，也可以獲取全部的內(nèi)容。Post.prototype.save 是 Post 對(duì)象原型的方法，用來(lái)將文章保存到數(shù)據(jù)庫(kù)。
在 models 文件夾下新建 post.js ，添加如下代碼：

發(fā)表響應(yīng)

接下來(lái)我們給發(fā)表文章注冊(cè)響應(yīng)，打開(kāi) index.js ，在 User = require('../models/user.js') 后添加一行代碼：

Post = require('../models/post.js');

修改 app.post('/post') 如下：

app.post('/post', checkLogin); app.post('/post', function (req, res) {var currentUser = req.session.user,post = new Post(currentUser.name, req.body.title, req.body.post);post.save(function (err) {if (err) {req.flash('error', err); return res.redirect('/');}req.flash('success', '發(fā)布成功!');res.redirect('/');//發(fā)表成功跳轉(zhuǎn)到主頁(yè)}); });

最后，我們修改 index.ejs ，讓主頁(yè)右側(cè)顯示發(fā)表過(guò)的文章及其相關(guān)信息。

打開(kāi) index.ejs ，修改如下：

<%- include header %> <% posts.forEach(function (post, index) { %><p><h2><a href="#"><%= post.title %></a></h2></p><p class="info">作者：<a href="#"><%= post.name %></a> | 日期：<%= post.time.minute %></p><p><%- post.post %></p> <% }) %> <%- include footer %>

打開(kāi) index.js ，修改 app.get('/') 如下：

app.get('/', function (req, res) {Post.get(null, function (err, posts) {if (err) {posts = [];} res.render('index', {title: '主頁(yè)',user: req.session.user,posts: posts,success: req.flash('success').toString(),error: req.flash('error').toString()});}); });

至此，我們的博客就建成了。

運(yùn)行 啟動(dòng)mongodb.bat 和 啟動(dòng)app.bat 啟動(dòng)我們的博客，發(fā)表一篇博文如下：

此時(shí)，查看一下數(shù)據(jù)庫(kù)，如圖所示：

Tips：Robomongo 是一個(gè)基于 Shell 的跨平臺(tái)開(kāi)源 MongoDB 管理工具。嵌入了 JavaScript 引擎和 MongoDB mongo 。只要你會(huì)使用 mongo shell ，你就會(huì)使用 Robomongo，它提供語(yǔ)法高亮、自動(dòng)完成、差別視圖等。

以 Windows 下為例，下載安裝 Robomongo 。運(yùn)行我們的博客，注冊(cè)一個(gè)用戶(hù)并發(fā)表幾篇文章，初次打開(kāi) Robomongo ，點(diǎn)擊 Create 創(chuàng)建一個(gè)名為 blog （名字自定）的數(shù)據(jù)庫(kù)鏈接（默認(rèn)監(jiān)聽(tīng) localhost:27017），點(diǎn)擊 Connect 就連接到數(shù)據(jù)庫(kù)了。如圖所示：

轉(zhuǎn)載于:https://www.cnblogs.com/phpliu/p/3443853.html

總結(jié)

以上是生活随笔為你收集整理的第1章 Express MongoDB 搭建多人博客的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇：博客园是个大金矿，管理员不挖掘有些可惜：
下一篇：苹果机型细节