《nodejs開發指南》微博實例express4.x版

  以前一直執着於前端開發,最近幾天,開始學起了nodejs。做爲一名前端開發者,見到這樣一門用javascript寫的後臺天然是很激動的。可是,後臺畢竟不一樣於前端,在學習的過程當中,仍是會遇到很多問題。javascript

  爲了開始學習nodejs,一開始選擇了《深刻淺出nodejs》這本書,看了幾章以後,得出一個結論是:真是一本好書,可是仍是不會寫nodejs!而後選擇了另一本教材《nodejs開發指南》,因爲看過了《深刻淺出nodejs》,直接跳過了這本書的前幾章,寫起了該書第五章的微博實例。做爲一個新手,在寫的過程當中,才逐漸發現由於express版本升級的緣由,書中的代碼不少已經不能用了,這對於新手來說,真是痛苦的經歷!!本着分享和學習的精神,特此奉上《nodejs開發指南》微博實例express4.x版本源碼和編寫過程當中須要注意的問題。css

  首先咱們看看當前express的版本:html

 

  這和書本所用的express2.x版本已經有了很大的變化。對於express4版本的新特性,能夠看看這個:http://scotch.io/bar-talk/expressjs-4-0-new-features-and-upgrading-from-3-0前端

  話很少說,咱們開始咱們建立項目之旅。java

  首先咱們新建一個文件夾,用cmd進入文件夾,準備建立項目。按照書中提到的,建立項目的命令應該是:node

 

1 express -t ejs microblog

 

  問題是express -t參數已經失效,最新的express版本的默認模板引擎是jade,因此爲了使用ejs,咱們須要像下面這樣建立項目:git

1 express -e ejs microblog

  按照書中所說的,咱們直接運行代碼:github

1 supervisor app.js

而且在瀏覽器中輸入http://localhost:3000/,並不能看到書中須要的效果,而是須要在app.js中app.use('/', routes);後面添加:mongodb

1 app.listen(3000);
2 Console.log(something happening);

按照書中的步驟往下走,咱們會發現一個問題,由於在views文件夾裏面不是layout.ejs和index.ejs,這是由於,最新版本的express不支持ejs模塊的partials方法,因此須要本身額外安裝模塊:數據庫

1 npm install express-partials

而後在app.js中添加:

var partials = require('express-partials');
app.use(partials());

 

須要注意的是,這一行要添加到app.set('view engine', 'ejs');後面,若是添加到app.use('/', routes);後面,會出現css引用失敗的現象,博主還不明白緣由。

這時候就能夠在views中新建文件layout.ejs,而後複製書中112頁的layout.ejs代碼到咱們新建的文件上面。而後運行代碼,就能看到下面的效果了:

  以上的步驟都不算什麼問題,問題就出在鏈接數據庫的一系列問題!以下所述:

爲了執行下面的操做,咱們首先須要安裝MongoDB數據庫,博主推薦這篇博客:http://be-evil.org/install-mongodb-on-windows7.html

看了很多安裝MongoDB的博客,這個是博主見過最有效的。

  對於新版本的express,按照書本上那樣鏈接數據庫會報錯,鏈接數據庫須要的文件時settings.js,這個按照書上的來沒有問題,可是models中的db.js須要作一些改動。若是按照書中的代碼:

 

1 var settings = require('../settings');
2 var Db = require('mongodb').Db;
3 var Connection = require('mongodb').Connection;
4 var Server = require('mongodb').Server;
5 module.exports = new Db(settings.db, new Server(settings.host, Connection.DEFAULT_
6 PORT, {}));

 

可能會出現下面的問題:

博主google以後,才發現須要按照下面的格式書寫:

 

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

 

在引用settings模塊的時候,若是按照書中的:

 

1 var settings = require('../settings');

 

會出現:

 

這是由於最新的express版本中須要這樣引用這個模塊:

 

1 var settings = require('./settings');

 

可是解決了這個問題以後,相繼出現了下面這個使人蛋疼的狀況:

一開始我也是琢磨不透,可是google的時候,有一個哥們作了很好的解答:http://www.cnblogs.com/yumianhu/p/3709558.html

也就是說,express4中咱們須要本身安裝express-session包,而後添加引用:

 

1 var session    = require('express-session');

 

原來的數據庫引用也須要改爲:

1 var MongoStore = require('connect-mongo')(session);

而這些代碼:

1 app.use(express.session({
2     secret: settings.cookie_secret,
3     store:new MongoStore({
4       db: settings.db
5     })
6 }));

就須要改寫成:

1  app.use(session({
2         secret: settings.cookie_secret,
3         store: newMongoStore({
4           db : settings.db,
5         })
6       }));

對於書中提到的視圖交互,本來的代碼是:

 1 app.dynamicHelpers({
 2     user: function(req, res) {
 3         return req.session.user;
 4     },
 5     error: function(req, res) {
 6         var err = req.flash('error');
 7         if (err.length)
 8             return err;
 9         else
10             return null;
11     },
12     success: function(req, res) {
13         var succ = req.flash('success');
14         if (succ.length)
15             return succ;
16         else
17             return null;
18     },
19 });

在最新版本的express中須要改爲:

 

 1 app.use(function(req, res, next){
 2   console.log("app.usr local");
 3   res.locals.user = req.session.user;
 4   res.locals.post = req.session.post;
 5   var error = req.flash('error');
 6   res.locals.error = error.length ? error : null;
 7  
 8   var success = req.flash('success');
 9   res.locals.success = success.length ? success : null;
10   next();
11 });

 

註冊頁面中用到了flash,可是最新版本的express已經不支持flash了,你須要先使用npm install connect-flash。而後在app.js中添加以下代碼:

 

1 app.use(flash());

 

接下來按照書上的步驟走,基本不會出問題了,最後咱們就能獲得咱們想要的效果啦~:

 

 

 

  須要說明一下的是,跟着書本寫這個小應用的時候,出現了不少問題,也就是上面遇到的不少問題,可是博主都是本着自主研究的精神不斷google,終於跳出神坑,獲得了最後的效果,但願看到這篇博客的朋友好好研讀,也好好看看下面的連接,裏面極可能也是你遇到的問題,若是你在跟着書本編寫代碼的過程當中遇到了問題,歡迎一塊兒交流~

最後,附上最終版本的源碼:https://github.com/yuanzm/microblog,歡迎Fork~

本文主要用到的資料以下:

http://scotch.io/bar-talk/expressjs-4-0-new-features-and-upgrading-from-3-0

http://be-evil.org/install-mongodb-on-windows7.html

http://www.cnblogs.com/yumianhu/p/3709558.html

http://cnodejs.org/topic/516f6d326d382773069ea7a5

http://blog.sina.com.cn/s/blog_6591eb240101cmwm.html

http://www.cnblogs.com/meteoric_cry/archive/2012/07/23/2604890.html

相關文章
相關標籤/搜索