第1 章《使用express + mongodb 搭建多人部落格》
TRANSCRIPT
001｜
第 1 章
使用 Express + MongoDB搭建多人部落格
本章將會講解如何使用 Express和 MongoDB一步一步地搭建一個完整的
部落格，透過本章的學習，讀者應該對 Express和 MongoDB有了比較清
楚的認知。
1.1 一個簡單的部落格
1.1.1 學習環境Node.js：0.10.32Express：4.10.2MongoDB：2.6.1
1.1.2 快速開始
1. 安裝 Express
Express是 Node.js上最流行的 Web開發框架，正如它的名字一樣，透過使用它，我們可以快速地開發一個 Web應用。我們用 Express來搭建我們的部落格，打開命令列，輸入：
$ npm install -g express-generator
安裝 Express命令列工具，我們透過使用它可以初始化一個 Express項目。
2. 新增一個專案
不管你使用的是 Windows、Linux還是 Mac的作業系統，本教程幾乎同樣適用。我們將在後續的學習中把 blog資料夾作為我們的專案資料夾。打開命令列，輸入：
1.1 一個簡單的部落格
003｜
至此，我們用 Express初始化了一個專案項目，並指定使用 ejs範本引擎，接下來我們講解專案的內部結構。
3. 專案結構
我們回頭看看建立的專案資料夾裡面都有什麼，打開我們的 blog資料夾，資料夾裡如圖 1-3所示。
圖 1-3 blog資料夾
• app.js：開機檔案，或者說入口檔案。
• package.json：儲存著專案的資訊及模組相依，當在 dependencies 中新增相依的模組時，執行 npm install，npm會檢查目前的資料夾下的 package.json，並自動安裝所有指定的模組。
• node_modules：存放 package.json中安裝的模組，當你在 package.json中新增相依的模組並安裝後，該模組會存放在這個資料夾下。
• public：存放 image、css、js等文件。
• routes：存放路由文件。
• views：存放視圖檔，或者說範本檔案。
• bin：存放執行檔。
打開 app.js，讓我們看看裡面究竟有什麼：var express = require('express'); var path = require('path');var favicon = require('serve-favicon'); var logger = require('morgan');varcookieParser = require('cookie-parser'); varbodyParser = require('body-parser');
var routes = require('./routes/index'); var users = require('./routes/users');
var app = express();
// view engine setupapp.set('views', path.join( dirname, 'views')); app.set('view engine', 'ejs');
1.4 實作用戶頁面和文章頁面
045｜
1.4 實作用戶頁面和文章頁面現在，我們來給部落格新增用戶頁面和文章頁面。所謂用戶頁面就是當按一下某
個用戶名稱連結時，跳至：功能變數名稱 /u/用戶名，並列出該用戶的所有文章。同理，文章頁面就是當按一下某篇文章標題時，跳轉到：功能變數名稱 /u/用戶名稱 /時間 /文章名稱，進入到該文章的頁面（也許還有該文章的評論等）。在開始之前我們需要做一項工作，打開 post.js，將 Post.get修改為 Post.getAll，同時將index.js中的 Post.get修改為 Post.getAll。在 post.js最後新增程式碼如下：
//取得一篇文章Post.getOne = function(name, day, title, callback) { //打開資料庫 mongodb.open(function (err, db) { if (err) { return callback(err); } //讀取 posts 集合 db.collection('posts', function (err, collection) { if (err) { mongodb.close(); return callback(err); } //根據用戶名稱、發表日期及文章名稱進行查詢 collection.findOne({ "name": name, "time.day": day, "title": title }, function (err, doc) { mongodb.close(); if (err) { return callback(err); } //解析 markdown 為 html doc.post = markdown.toHTML(doc.post); callback(null, doc);//傳回查詢的一篇文章 }); }); });};
簡單解釋如下。
• Post.getAll：取得一個人的所有文章（傳入參數 name）或取得所有人的文章（不傳入參數）。
• Post.getOne：根據用戶名稱、發表日期及文章名稱精確取得一篇文章。
1.4 實作用戶頁面和文章頁面
047｜
瀏覽文章頁面之際，將從路徑中存取用戶名稱、時間和標題查詢資料庫並傳回查
詢的文章資訊，然後套用於文章頁範本（article.ejs）建立頁面顯示給使用者。
最後，我們開發用戶頁面和文章頁面的範本檔。在 views資料夾下新增 user.ejs，新增如下程式碼，同時將 index.ejs也修改成如下程式碼：
<%- include header %><% posts.forEach(function (post, index) { %><p><h2><a href="/u/<%= post.name %>/<%= post.time.day %>/<%= post.title %>"><%= post.title %></a></h2></p><p class="info"> 作者：<a href="/u/<%= post.name %>"><%= post.name %></a> | 日期：<%= post.time.minute %></p><p><%- post.post %></p><% }) %><%- include footer %>在 views 資料夾下新增 article.ejs，新增如下程式碼：<%- include header %><p class="info"> 作者：<a href="/u/<%= post.name %>"><%= post.name %></a> | 日期：<%= post.time.minute %></p><p><%- post.post %></p><%- include footer %>
現在，我們給部落格新增了用戶頁面和文章頁面。範例的用戶頁面，如圖 1-27 所示。
圖 1-27 給部落格新增用戶頁面的範例
085｜
本章是第 1章《使用 Express + MongoDB搭建多人部落格》的番外篇。本
章透過 7個方面來擴展和修改部落格。每個番外篇都是獨立的，記得做好
備份哦！
2.1 番外篇之一：使用 Passport前面我們自己寫了一個簡單的登錄認證系統，即使用者在登錄時，透過輸入事先
註冊的使用者名稱和密碼，伺服器確認使用者的身份後，從而獲得操作許可權。
這也是最傳統的登錄認證方式。
隨著網路的不斷擴充與發展，又出現了一種新的登錄認證方式——協力廠商登錄
認證，即我們常說的 oAuth/oAuth2.0。
什麼是 oAuth？
oAuth協議為使用者資源的授權提供了一個安全、開放而又簡易的標準。與以往的授權方式不同之處是 oAuth的授權不會使協力廠商觸及使用者的帳號資訊（如用戶名與密碼），即協力廠商無須使用使用者的用戶名與密碼就可以申請獲得該用戶
資源的授權，因此 oAuth是安全的。
什麼是 Passport？
Passport是一個基於 Node.js的認證中介軟體。極其靈活並且模組化，Passport可以很容易地跟任意基於 Express的Web應用結合使用。
第 2 章
使用 Express + MongoDB搭建多人部落格番外篇
第 2章｜使用 Express + MongoDB搭建多人部落格番外篇
｜ 086
現在我們來修改程式碼，使得我們的部落格既支援本地登錄又支援使用 GitHub帳戶登錄。首先，登錄 GitHub，按一下右上角的 Account settings，然後按一下左側的 Applications，然後按一下右上角的 Register new application建立一個 GitHub應用。建立成功後如圖 2-1所示。
圖 2-1 建立一個 GitHub應用
稍後我們將會用到 Client ID 、Client Secret和 Authorization callback URL。打開package.json，新增 passport和 passport-github模組：
"passport": “*", “passport-github": “*"
並執行 npm install，安裝這兩個模組。至此，準備工作都已完成，接下來我們修改程式碼支援使用 GitHub帳戶登錄。首先，新增使用 GitHub登錄的連結。打開login.ejs，在：
<%- include footer %>
上一行新增如下程式碼：
<a href="/login/github">使用 GitHub 登錄 </a>
然後打開 app.js，在 var app = express();下方新增如下程式碼：
var passport = require('passport') , GithubStrategy = require('passport-github').Strategy;
2.2 番外篇之二：發佈至 Heroku
089｜
圖 2-2 建立資料庫的介面
如圖 2-2 所示，我們可以在命令列中連接遠端資料庫，也可以透過 Mongo URL使用資料庫。接下來，我們修改部落格的程式碼，使用 MongoHQ提供的雲端資料庫取代使用本地資料庫。首先，我們需要給資料庫新增一個使用者。
按一下左側的 Admin按鈕，然後按一下 Users按鈕進入使用者管理頁面。在username和 password處分別填寫用戶名和密碼：
db.addUser('username','password')
按一下 Add user按鈕新增使用者。
修改 settings.js為：
module.exports = { cookieSecret: 'myblog', url: 'your_Mongo_URI'};
將 your_Mongo_URI 替換為你自己建立的資料庫的 URL，將 <user> 和<password>分別替換為剛才新增的使用者的名字和密碼。
打開 app.js，將 app.use(express.session(...));修改為：
app.use(express.session({ secret: settings.cookieSecret, cookie: {maxAge: 1000 * 60 * 60 * 24 * 30},//30 days url: settings.url}));
刪除 db.js，打開 post.js、user.js和 comment.js，均作以下修改：
• 將 mongodb = require('./db')修改為 mongodb=require('mongodb').Db。
• 新增 varsettings=require('../settings');。
• 將所有 mongodb.open(function(err, db){ 修改為 mongodb.connect(settings. url, function (err, db) {。
第 2章｜使用 Express + MongoDB搭建多人部落格番外篇
｜ 090
• 將所有 mongodb.close();修改為 db.close();。現在，無須啟動你的本地資料庫，執行你的部落格試試吧∼。
Heroku也提供了 MongoHQ的 Add-ons，但需要填寫信用卡資訊，所以我們這裡直接
使用外鏈的 MongoHQ。
注 意
2. 發佈到 Heroku
Heroku是一個主流的 PaaS提供商，在開發人員中廣受歡迎。這個服務圍繞著基於 Git的工作流程設計，假如你熟悉 Git，那發佈就十分簡單。這個服務原本是為託管 Ruby應用程式而設計的，但 Heroku 之後加入了對 Node.js、Clojure、Scala、Python和 Java等語言的支援。Heroku的基本服務是免費的。
下面我們使用 Heroku發佈我們的部落格。
(1) 註冊
在註冊頁面，填寫相關資訊，送出後註冊即可。具體操作請參考 https://www.heroku.com/。
(2) 建立一個應用程式
註冊成功後，就進入了控制台頁面，如圖 2-3所示。
圖 2-3 控制台頁面
按一下 Create a new app按鈕，填寫獨一無二的應用名稱後，按一下 Creat app按鈕即建立成功，然後按一下 Finish up按鈕。
139｜
本章我們將會學習一個有關 Node.js的熱門開發框架——Meteor，透過一
個微博實例學習 Meteor的基本使用方法，以及如何使用它快速開發網站。
4.1 Meteor簡介1. 什麼是 Meteor？
Meteor是一個基於 Node.js+Websocket+MongoDB的新的Web應用程式開發平臺，已在國際上得到廣泛採用。Meteor不僅僅是一個 JavaScript編碼框架，它還提供了一種創新方式來建立具彈性的、即時的、互動式的 Rich Web應用程式。透過簡化編碼模型和減少開發人員必須編寫的程式碼量，基於 Meteor可以快速開發一個網站。官網上說，以前使用最好的工具都要花幾周時間來打造
的網站，而使用 Meteor則只需要幾小時。
2. Meteor的七項特性
(1) 只有資料：不在網路上傳輸 HTML，只傳輸資料並讓用戶端決定如何套用。
(2) 一種語言：前後端介面統一使用 JavaScript編寫。
(3) 無處不在的資料庫：從客戶電腦或伺服器上使用相同、透明的 API存取資料庫。
(4) 遞延補償：在客戶電腦上，使用預讀和模式類比技術，使它看起來與資料庫的連接是零延遲的。
(5) 完整的回應方式：即時模式是預設的，從資料庫到範本的所有層面上，都要使事件驅動的介面有效。
第 4 章
使用 Meteor 搭建微博網站
第 4章｜使用 Meteor搭建微博網站
｜ 140
(6) 套件相容性極高：Meteor是開源的，且能與現有的工具和框架整合，而非取代它們。
(7) 簡單等於生產力：讓一件事看起來簡單的最佳方式就是讓它真正變得簡單， Meteor透過乾淨且具有古典美的 API來實踐這點。
4.2 Meteor的安裝與使用目前最新的 Meteor版本為 0.6.6.3，官方支持 Mac和 Linux平臺，要求如下：
• Mac：OS X 10.6 and above
• Linux：x86 and x86_64 systems
目前官方並不支援 Windows平臺（將來會支援），但 Meteor愛好者提供了一個非官方的 Windows下的 Meteor安裝套件可供下載使用。下載地址為：http://win.meteor.com。
1. 安裝 Meteor
在 Windows下我們下載安裝套件安裝即可，在 Mac或 Linux下我們需要使用以下命令安裝 Meteor：
$ curl https://install.meteor.com | /bin/sh
2. 建立一個專案
$ meteor create myapp
這裡我們建立了一個 Meteor 專案，一個命名為 myapp 的資料夾，裡面有myapp.js、myapp.html、myapp.css三個檔和一個 .meteor資料夾。注意：假如在 Windows下出現不識別 Meteor命令的情況，只須將 Meteor安裝目錄下的meteor.bat加入環境變數即可。
3. 執行 Meteor
我們先不去管這幾個檔有什麼內容或有什麼作用，執行以下命令啟動我們的
Meteor應用。
$ cd myapp$ meteor
此時電腦會顯示：
=> Meteor server running on: http://localhost:3000/
打開瀏覽器存取 localhost:3000，顯示的介面如圖 4-1所示。
第 4章｜使用 Meteor搭建微博網站
｜ 142
deploy Deploy this project to Meteor logs Show logs for specified site reset Reset the project state. Erases the local database. test-packages Test one or more packagesSee 'meteor help <command>' for details on a command.
4. Meteor套件
Meteor也有套件的概念，雖然 Meteor是基於 Node.js的，但 Node.js的套件並不能直接在 Meteor應用中使用。Meteor自建了一套套件的系統，考慮到在 1.0版本之前 Meteor的 API有可能有較大變化，官方並沒有制定套件的具體製作方法，只提供了一些常用的套件。在一個 Meteor應用目錄下執行 meteor list，查詢有哪些當前可用的套件。
常用的套件有：
accounts-base A user account systemaccounts-password Password support for accounts.autopublish Automatically publish the entire database to all backbone A minimalist client-side MVC frameworkbootstrap Front-end framework from Twittercoffeescript Javascript dialect with fewer braces and semicolons d3 Library for manipulating documents based on data.email Send email messageshandlebars Simple semantic templating languagehttp Make HTTP calls to remote serversinsecure Allow all database writes by defaultjquery Manipulate the DOM using CSS selectorsless The dynamic stylesheet language.preserve-inputs Automatically preserve all form fields with a unique id showdown Markdown-to-HTML processorspiderable Makes the application crawlable to web spiders. stylus Expressive, dynamic, robust CSS.underscore Collection of small helper functions: _.map, _.each, ...
4.3 快速入門現在，我們以官方提供的一個 leaderboard範例來講解 Meteor的相關知識。你可以在 Meteor安裝目錄下的 examples資料夾中找到它，也可以從 https://github.com/meteor/meteor/tree/devel/examples/leaderboard中複製一份。總之，把 leaderboard這個資料夾複製一份放到你想要放置它的地方。打開電腦，切換到該 leaderboard資料夾內，執行 $ meteor啟動應用程式，瀏覽器中顯示的介面如圖 4-2所示。
4.3 快速入門
143｜
圖 4-2 執行＄meteor啟動應用程式
上面列出了一些人名，我們姑且稱之為玩家（player）。這裡我們為 6個玩家隨機分配了一些分數，並按降冪排列展示。按一下選擇某個玩家後，虛線下面就會顯
示該玩家的名稱和一個 Give 5 points的按鈕，按一下該按鈕，對應玩家的分數就會增加 5，當該玩家的分數超過了上一個玩家時，玩家排名列表會自動重新排序。是不是感覺有點意思了？我們打開 leaderboard資料夾，研究一下裡面都有些什麼。leaderboard 資料夾內只有 1 個 .meteor 資料夾和 leaderboard.js、leaderboard.css、leaderboard. html三個文件。每個 Meteor應用目錄下都有 1個 .meteor資料夾，該資料夾內儲存著 Meteor的一些預設設置和應用的相關資訊（比如依賴的套件）和 1個 MongoDB資料庫。
因為 Meteor還處於迅速發展和變化之中，API或範例程式碼可能以後會發生改變，所以這裡列出當前以上三個檔的全部程式碼：
leaderboard.css
body { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 200; margin: 50px 0; padding: 0; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none;}
#outer {