當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

第1章 Express MongoDB 搭建多人博客

發布時間：2023/12/18 编程问答 21 豆豆

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

學習環境

Node.js ： 0.10.22 +

Express ： 3.4.4 +

MongoDB ： 2.4.8 +

快速開始

安裝 Express

express 是 Node.js 上最流行的 Web 開發框架，正如他的名字一樣，使用它我們可以快速的開發一個 Web 應用。我們用 express 來搭建我們的博客，打開命令行，輸入：

$ npm install -g express

我們需要用全局模式安裝 express，因為只有這樣我們才能在命令行中使用它。

新建一個工程

筆者是在 Windows 下開發和撰寫的教程，假如你在 Linux 或 Mac 操作系統下開發應用，本教程也幾乎同樣適用。

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

windows 下打開 cmd 切換到 D 盤，輸入：

$ express -e blog

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

然后輸入：

$ cd blog & npm install

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

安裝完成后輸入：

$ node app

此時命令行中會顯示 Express server listening on port 3000，在瀏覽器里訪問 localhost:3000，如下所示：

至此，我們用 express 初始化了一個工程項目，并指定使用 ejs 模板引擎，下一節我們講解工程的內部結構。

工程結構

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

app.js：啟動文件，或者說入口文件
package.json：存儲著工程的信息及模塊依賴，當在 dependencies 中添加依賴的模塊時，運行 npm install，npm 會檢查當前目錄下的 package.json，并自動安裝所有指定的模塊
node_modules：存放 package.json 中安裝的模塊，當你在 package.json 添加依賴的模塊并安裝后，存放在這個文件夾下
public：存放 image、css、js 等文件
routes：存放路由文件
views：存放視圖文件或者說模版文件

打開 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')); });

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

因為 express 框架是嚴重依賴 connect 框架（一個 Node.js 的中間件框架）創建而成的，所以我們可查閱：

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

了解更多內容。

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

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

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

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

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

其實，app.use(express.bodyParser()) 相當于：

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

這里我們仍然使用 bodyParser ，刪除 app.use(express.json()); 和 app.use(express.urlencoded());，添加 app.use(express.bodyParser())。

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

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

開發環境下的錯誤處理，輸出錯誤信息。
app.get('/', routes.index)：路由控制器，如果用戶訪問 / （主頁），則由 routes.index 來處理，routes/index.js 內容如下：

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

通過 exports.index 導出 index 函數接口，app.get('/', routes.index) 相當于：

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

res.render('index', { title: 'Express' })：使用 ejs 模板引擎解析 views/index.ejs（因為我們之前通過 app.set('views', __dirname + '/views') 設置了模版文件默認存儲在 views 文件夾下），并傳入一個對象，這個對象只有一個 title 屬性，它的值為字符串 Express ，即用字符串 Express 替換 views/index.ejs 中所有 title 變量，這就是我們所說的渲染視圖，或者說渲染模版。后面我們將會了解更多關于模板引擎的內容。

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

這段代碼的意思是創建 http 服務器并監聽 3000 端口，成功后在命令行中顯示 Express server listening on port 3000，然后我們就可以在瀏覽器訪問 localhost:3000 了。

這一小節我們學習了如何創建一個工程并啟動它，了解了工程的大體結構，下一節我們將學習 express 的基本使用及路由控制。

路由控制

工作原理

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

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

這段代碼的意思是當訪問主頁時，調用 ejs 模板引擎，來渲染 index.ejs 模版文件（即將 title 變量全部替換為字符串 Express），生成靜態頁面并顯示在瀏覽器中。

我們來作一些修改，以上代碼實現了路由的功能，我們當然可以不要 routes/index.js 文件，把實現路由功能的代碼都放在 app.js 里，但隨著時間的推移 app.js 會變得臃腫難以維護，這也違背了代碼模塊化的思想，所以我們把實現路由功能的代碼都放在 routes/index.js 里。官方給出的寫法是在 app.js 中實現了簡單的路由分配，然后再去 index.js 中找到對應的路由函數，最終實現路由功能。我們不妨把路由控制器和實現路由功能的函數都放到 index.js 里，app.js 中只有一個總的路由接口。

打開 app.js，刪除：

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

注意：目前我們用不到 routes/user.js，也可以刪除這個文件，同時刪除 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' });}); };

現在，再運行你的 app，你會發現主頁毫無二致。這里我們在 routes/index.js 中通過 module.exports 導出了一個函數接口，在 app.js 中通過 require 加載了 index.js 然后通過 routes(app) 調用了 index.js 導出的函數。

路由規則

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

app.get() 和 app.post() 的第一個參數都為請求的路徑，第二個參數為處理請求的回調函數，回調函數有兩個參數分別是 req 和 res，代表請求信息和響應信息。路徑請求及對應的獲取路徑有以下幾種形式：

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 請求，獲取 get 請求參數
req.params：處理 /:xxx 形式的 get 或 post 請求，獲取請求參數
req.body：處理 post 請求，獲取 post 請求體
req.param()：處理 get 和 post 請求，但查找優先級由高到低為 req.params→req.body→req.query

路徑規則還支持正則表達式，更多請查閱 Express 官方文檔。

添加路由規則

當我們訪問 localhost:3000 時，會顯示：

當我們訪問 localhost:3000/nswbmw 這種不存在的頁面時就會顯示：

這是因為不存在 /nswbmw 的路由規則，而且它也不是一個 public 目錄下的文件，所以 express 返回了 404 Not Found 的錯誤。下面我們來添加這條路由規則，使得當訪問 localhost:3000/nswbmw 時，頁面顯示 hello,world!

注意：以下修改僅用于測試，看到效果后再把代碼還原回來。

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

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

此時，訪問 localhost:3000/nswbmw 頁面顯示如下：

很簡單吧？這一節我們學習了基本的路由規則及如何添加一條路由規則，下一節我們將學習模板引擎的知識。

模版引擎

什么是模板引擎

模板引擎（Template Engine）是一個將頁面模板和要顯示的數據結合起來生成 HTML 頁面的工具。
如果說上面講到的 express 中的路由控制方法相當于 MVC 中的控制器的話，那模板引擎就相當于 MVC 中的視圖。

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

在 MVC 架構中，模板引擎包含在服務器端。控制器得到用戶請求后，從模型獲取數據，調用模板引擎。模板引擎以數據和頁面模板為輸入，生成 HTML 頁面，然后返回給控制器，由控制器交回客戶端。

——《Node.js開發指南》

什么是 ejs ?

ejs 是模板引擎的一種，也是我們這個教程中使用的模板引擎，因為它使用起來十分簡單，而且與 express 集成良好。

使用模板引擎

前面我們通過以下兩行代碼設置了模板文件的存儲位置和使用的模板引擎：

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

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

在 routes/index.js 中通過調用 res.render() 渲染模版，并將其產生的頁面直接返回給客戶端。它接受兩個參數，第一個是模板的名稱，即 views 目錄下的模板文件名，擴展名 .ejs 可選。第二個參數是傳遞給模板的數據對象，用于模板翻譯。

打開 views/index.ejs ，內容如下：

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>

當我們 res.render('index', { title: 'Express' }); 時，模板引擎會把 <%= title %> 替換成 Express，然后把替換后的頁面顯示給用戶。

渲染后生成的頁面代碼為：

<!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>

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

ejs 的標簽系統非常簡單，它只有以下三種標簽：

<% code %>：JavaScript 代碼。
<%= code %>：顯示替換過 HTML 特殊字符的內容。
<%- code %>：顯示原始 HTML 內容。

注意： <%= code %> 和 <%- code %> 的區別，當變量 code 為普通字符串時，兩者沒有區別。當 code 比如為 <h1>hello</h1> 這種字符串時，<%= code %> 會原樣輸出 <h1>hello</h1>，而 <%- code %> 則會顯示 H1 大的 hello 字符串。

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

The Data

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

The Template

The Result

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

我們可以用上述三種標簽實現頁面模板系統能實現的任何內容。

頁面布局

Express 3.x 中我們不再使用 layout.ejs 進行頁面布局，轉而使用 include 來替代。include 的簡單使用如下：

index.ejs

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

a.ejs

this is a.ejs

b.ejs

this is b.ejs

最終 index.ejs 會顯示：

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

這一節我們學習了模版引擎的相關知識，下一節我們正式開始學習如何從頭開始搭建一個多人博客。

搭建多人博客

功能分析

搭建一個簡單的具有多人注冊、登錄、發表文章、登出功能的博客。

設計目標

未登錄：主頁左側導航顯示 home、login、register，右側顯示已發表的文章、發表日期及作者。
登陸后：主頁左側導航顯示 home、post、logout，右側顯示已發表的文章、發表日期及作者。
用戶登錄、注冊、發表成功以及登出后都返回到主頁。

未登錄：

主頁：

登錄頁：

注冊頁：

登錄后：

主頁:

發表頁：

注意：沒有登出頁，當點擊 LOGOUT 后，退出登陸并返回到主頁。

路由規劃

我們已經把設計的構想圖貼出來了，接下來的任務就是完成路由規劃了。路由規劃，或者說控制器規劃是整個網站的骨架部分，因為它處于整個架構的樞紐位置，相當于各個接口之間的粘合劑，所以應該優先考慮。

根據構思的設計圖，我們作以下路由規劃：

/ ：首頁 /login ：用戶登錄 /reg ：用戶注冊 /post ：發表文章 /logout ：登出

我們要求 /login 和 /reg 只能是未登錄的用戶訪問，而 /post 和 /logout 只能是已登錄的用戶訪問。左側導航列表則針對已登錄和未登錄的用戶顯示不同的內容。

修改 index.js 如下：

module.exports = function(app) {app.get('/', function (req, res) {res.render('index', { title: '主頁' });});app.get('/reg', function (req, res) {res.render('reg', { title: '注冊' });});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: '發表' });});app.post('/post', function (req, res) {});app.get('/logout', function (req, res) {}); };

如何針對已登錄和未登錄的用戶顯示不同的內容呢？或者說如何判斷用戶是否已經登陸了呢？進一步說如何記住用戶的登錄狀態呢？我們通過引入會話（session）機制記錄用戶登錄狀態，還要訪問數據庫來保存和讀取用戶信息。下一節我們將學習如何使用數據庫。

使用數據庫

MongoDB簡介

MongoDB 是一個基于分布式文件存儲的 NoSQL（非關系型數據庫）的一種，由 C++ 語言編寫，旨在為 WEB 應用提供可擴展的高性能數據存儲解決方案。MongoDB 支持的數據結構非常松散，是類似 json 的 bjson 格式，因此可以存儲比較復雜的數據類型。MongoDB 最大的特點是他支持的查詢語言非常強大，其語法有點類似于面向對象的查詢語言，幾乎可以實現類似關系數據庫單表查詢的絕大部分功能，而且還支持對數據建立索引。

MongoDB 沒有關系型數據庫中行和表的概念，不過有類似的文檔和集合的概念。文檔是 MongoDB 最基本的單位，每個文檔都會以唯一的 _id 標識，文檔的屬性為 key/value 的鍵值對形式，文檔內可以嵌套另一個文檔，因此可以存儲比較復雜的數據類型。集合是許多文檔的總和，一個數據庫可以有多個集合，一個集合可以有多個文檔。

下面是一個 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" : { ... }}}} }

更多有關 MongoDB 的知識請參閱《mongodb權威指南》或查閱：http://www.mongodb.org/

安裝MongoDB

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

mongod -dbpath d:\mongodb\blog

以上命令的意思是：設置 blog 文件夾作為我們工程的存儲目錄并啟動數據庫。為了方便以后使用數據庫，我們在桌面上新建 啟動mongodb.bat ，并寫入：

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

這樣我們以后只需運行桌面上的 啟動mongodb.bat 就可啟動數據庫了。

連接MongoDB

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

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

然后運行 npm install 更新依賴的模塊，稍等片刻后 mongodb 模塊就下載并安裝完成了。

接下來在工程的根目錄中創建 settings.js 文件，用于保存該博客工程的配置信息，比如數據庫的連接信息。我們將數據庫命名為 blog，因為數據庫服務器在本地，所以 settings.js 文件的內容如下：

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

其中 db 是數據庫的名稱，host 是數據庫的地址。cookieSecret 用于 Cookie 加密與數據庫無關，我們留作后用。

接下來在根目錄下新建 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});

其中通過 new Db(settings.db, new Server(settings.host, Connection.DEFAULT_PORT), {safe: true}); 設置數據庫名、數據庫地址和數據庫端口創建了一個數據庫連接實例，并通過 module.exports 導出該實例。這樣，我們就可以通過 require 這個文件來對數據庫進行讀寫了。

會話支持

會話是一種持久的網絡協議，用于完成服務器和客戶端之間的一些交互行為。會話是一個比連接粒度更大的概念，一次會話可能包含多次連接，每次連接都被認為是會話的一次操作。在網絡應用開發中，有必要實現會話以幫助用戶交互。例如網上購物的場景，用戶瀏覽了多個頁面，購買了一些物品，這些請求在多次連接中完成。許多應用層網絡協議都是由會話支持的，如 FTP、Telnet 等，而 HTTP 協議是無狀態的，本身不支持會話，因此在沒有額外手段的幫助下，前面場景中服務器不知道用戶購買了什么。

為了在無狀態的 HTTP 協議之上實現會話，Cookie 誕生了。Cookie 是一些存儲在客戶端的信息，每次連接的時候由瀏覽器向服務器遞交，服務器也向瀏覽器發起存儲 Cookie 的請求，依靠這樣的手段服務器可以識別客戶端。我們通常意義上的 HTTP 會話功能就是這樣實現的。具體來說，瀏覽器首次向服務器發起請求時，服務器生成一個唯一標識符并發送給客戶端瀏覽器，瀏覽器將這個唯一標識符存儲在 Cookie 中，以后每次再發起請求，客戶端瀏覽器都會向服務器傳送這個唯一標識符，服務器通過這個唯一標識符來識別用戶。對于開發者來說，我們無須關心瀏覽器端的存儲，需要關注的僅僅是如何通過這個唯一標識符來識別用戶。很多服務端腳本語言都有會話功能，如 PHP，把每個唯一標識符存儲到文件中。

——《Node.js開發指南》

express 也提供了會話中間件，默認情況下是把用戶信息存儲在內存中，但我們既然已經有了 MongoDB，不妨把會話信息存儲在數據庫中，便于持久維護。為了使用這一功能，我們首先要獲取一個叫做 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": "*"} }

運行 npm install 安裝模塊。然后打開 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() 則提供會話支持，secret 用來防止篡改 cookie，key 的值為 cookie 的名字，通過設置 cookie 的 maxAge 值設定 cookie 的生存期，這里我們設置 cookie 的生存期為 30 天，設置它的 store 參數為 MongoStore 實例，把會話信息存儲到數據庫中，以避免丟失。在后面的小節中，我們可以通過 req.session 獲取當前用戶的會話對象，獲取用戶的相關信息。

注冊和登陸

我們已經準備好了數據庫訪問和會話的相關信息，接下來我們完成用戶注冊和登錄功能。

頁面設計

首先我們來完成主頁、登錄頁和注冊頁的頁面設計。

修改 views/index.ejs 如下：

<%- include header %> 這是主頁 <%- 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="主頁" href="/">home</a></span> <span><a title="登錄" href="/login">login</a></span> <span><a title="注冊" 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;}

運行 app ，主頁顯示如下：

接下來在 views 文件夾下新建 login.ejs，內容如下：

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

登錄頁面顯示如下：

在 views 文件夾下新建 reg.ejs，內容如下：

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

注冊頁面顯示如下：

至此，未登錄時的主頁、注冊頁、登錄頁都已經完成。

在桌面新建 啟動app.bat 并寫入：

node d:\blog\app

以后我們就可以通過依次打開 啟動mongodb.bat 和 啟動app.bat 來啟動我們的博客了。

注意：每次我們更新代碼后，都需要手動停止并重啟應用，使用 supervisor 模塊可以解決這個問題，每當我們保存修改的文件時，supervisor 都會自動幫我們重啟應用。通過：

$ npm install -g supervisor

安裝 supervisor 。使用 supervisor 命令啟動 app.js：

$ supervisor app

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

此時依次運行 啟動mongodb.bat 和 啟動app.bat ，去瀏覽器中查看一下效果吧。

頁面通知

接下來我們實現用戶的注冊和登陸，在這之前我們需要引入 flash 模塊來實現頁面通知（即成功與錯誤信息的顯示）的功能。

什么是 flash?

我們所說的 flash 即 connect-flash 模塊（https://github.com/jaredhanson/connect-flash），flash 是一個在 session 中用于存儲信息的特定區域。信息寫入 flash ，下一次顯示完畢后即被清除。典型的應用是結合重定向的功能，確保信息是提供給下一個被渲染的頁面。這個中間件是從 Express 2.x 提取出來的，Express 3.x 不再支持，但是通過 connect-flash 模塊可以實現這個功能。

在 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());

現在我們就可以使用 flash 功能了。

注冊響應

前面我們已經完成了注冊頁，當然現在點擊注冊是沒有效果的，因為我們還沒有實現處理 POST 請求的功能，下面就來實現它。

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

我們通過 User.prototype.save 實現了用戶信息的存儲，通過 User.get 實現了用戶信息的讀取。

打開 index.js ，在最前面添加如下代碼：

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

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

修改 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'];//檢驗用戶兩次輸入的密碼是否一致if (password_re != password) {req.flash('error', '兩次輸入的密碼不一致!'); return res.redirect('/reg');//返回注冊頁}//生成密碼的 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});//檢查用戶名是否已經存在 User.get(newUser.name, function (err, user) {if (user) {req.flash('error', '用戶已存在!');return res.redirect('/reg');//返回注冊頁}//如果不存在則新增用戶newUser.save(function (err, user) {if (err) {req.flash('error', err);return res.redirect('/reg');//注冊失敗返回主冊頁}req.session.user = user;//用戶信息存入 sessionreq.flash('success', '注冊成功!');res.redirect('/');//注冊成功后返回主頁});}); });

注意：我們把用戶信息存儲在了 session 里，以后就可以通過 req.session.user 讀取用戶信息。

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

現在，啟動應用，在瀏覽器輸入 localhost:3000 注冊試試吧！注冊成功后顯示如下：

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

可以看到，用戶信息已經成功存入數據庫。

接下來我們實現當注冊成功返回主頁時，左側導航顯示 HOME 、POST 、LOGOUT ，右側顯示 注冊成功！ 字樣，即添加 flash 的頁面通知功能。

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

<nav> <span><a title="主頁" href="/">home</a></span> <% if (user) { %><span><a title="發表" 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="注冊" 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: '主頁',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: '注冊',user: req.session.user,success: req.flash('success').toString(),error: req.flash('error').toString()}); });

現在運行我們的博客，注冊成功后顯示如下：

我們通過對 session 的使用實現了對用戶狀態的檢測，再根據不同的用戶狀態顯示不同的導航信息。
簡單解釋一下流程：用戶在注冊成功后，把用戶信息存入 session ，頁面跳轉到主頁顯示 注冊成功！ 的字樣。同時把 session 中的用戶信息賦給變量 user ，在渲染 index.ejs 文件時通過檢測 user 判斷用戶是否在線，根據用戶狀態的不同顯示不同的導航信息。

success: req.flash('success').toString() 的意思是將成功的信息賦值給變量 success， error: req.flash('error').toString() 的意思是將錯誤的信息賦值給變量 error ，然后我們在渲染 ejs 模版文件時傳遞這兩個變量來進行檢測并顯示通知。

登錄與登出響應

現在我們來實現用戶登錄的功能。

打開 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');//檢查用戶是否存在User.get(req.body.name, function (err, user) {if (!user) {req.flash('error', '用戶不存在!'); return res.redirect('/login');//用戶不存在則跳轉到登錄頁}//檢查密碼是否一致if (user.password != password) {req.flash('error', '密碼錯誤!'); return res.redirect('/login');//密碼錯誤則跳轉到登錄頁}//用戶名密碼都匹配后，將用戶信息存入 sessionreq.session.user = user;req.flash('success', '登陸成功!');res.redirect('/');//登陸成功后跳轉到主頁}); });

接下來我們實現登出響應。修改 app.get('/logout') 如下：

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

注意：通過把 req.session.user 賦值 null 丟掉 session 中用戶的信息，實現用戶的退出。

登錄后頁面顯示如下：

登出后頁面顯示如下：

至此，我們實現了用戶注冊與登陸的功能，并且根據用戶登錄狀態顯示不同的導航。

頁面權限控制

我們雖然已經完成了用戶注冊與登陸的功能，但并不能阻止比如已經登陸的用戶訪問 localhost:3000/reg 頁面，讀者可親自嘗試下。為此，我們需要為頁面設置訪問權限。即注冊和登陸頁面應該阻止已登陸的用戶訪問，登出及后面我們將要實現的發表頁只對已登錄的用戶開放。如何實現頁面權限的控制呢？我們可以把用戶登錄狀態的檢查放到路由中間件中，在每個路徑前增加路由中間件，即可實現頁面權限控制。我們添加 checkNotLogin 和 checkLogin 函數來實現這個功能。

checkNotLogin 和 checkLogin 用來檢測是否登陸，并通過 next() 轉移控制權，檢測到未登錄則跳轉到登錄頁，檢測到已登錄則跳轉到前一個頁面。

最終 index.js 代碼如下：

注意：為了維護用戶狀態和 flash 的通知功能，我們給每個 ejs 模版文件傳入了以下三個值：

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

發表文章

現在我們的博客已經具備了用戶注冊、登陸、頁面權限控制的功能，接下來我們完成博客最核心的部分——發表文章。在這一節，我們將會實現發表文章的功能，完成整個博客的設計。

頁面設計

我們先來完成發表頁的頁面設計。在 views 文件夾下新建 post.ejs ，添加如下代碼：

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

文章模型

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

發表響應

接下來我們給發表文章注冊響應，打開 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', '發布成功!');res.redirect('/');//發表成功跳轉到主頁}); });

最后，我們修改 index.ejs ，讓主頁右側顯示發表過的文章及其相關信息。

打開 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 %>

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

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

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

運行 啟動mongodb.bat 和 啟動app.bat 啟動我們的博客，發表一篇博文如下：

此時，查看一下數據庫，如圖所示：

Tips：Robomongo 是一個基于 Shell 的跨平臺開源 MongoDB 管理工具。嵌入了 JavaScript 引擎和 MongoDB mongo 。只要你會使用 mongo shell ，你就會使用 Robomongo，它提供語法高亮、自動完成、差別視圖等。

以 Windows 下為例，下載安裝 Robomongo 。運行我們的博客，注冊一個用戶并發表幾篇文章，初次打開 Robomongo ，點擊 Create 創建一個名為 blog （名字自定）的數據庫鏈接（默認監聽 localhost:27017），點擊 Connect 就連接到數據庫了。如圖所示：

轉載于:https://www.cnblogs.com/phpliu/p/3443853.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

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