第3章 使用mongodb實現首頁的動態顯示

請關注我的小站：http://oideas.herokuapp.com/

1.mongodb的配置

首先在你覺得合適的地方建立一個bat，內容如下：

@echo off
d:
cd D:\other\mongodb-win32-i386-2.4.9\bin
mongod -dbpath D:\other\mongodb-win32-i386-2.4.9\ominds

由於我是在e盤建的，所以要切換到d盤，D:\other\mongodb-win32-i386-2.4.9\bin是你的mongodb安裝位置，在mongodb目錄下新建文件夾ominds作爲我們的項目db，mongod -dbpath D:\other\mongodb-win32-i386-2.4.9\ominds表示我們使用這個目錄作爲db。好，db的server啓動配置好了，下面 讓我們在項目中使用它。

打開項目下的package.json文件，修改後的最終代碼如下：

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

在項目的根目錄下（本章最後有一張項目的結構圖，你可以對比一下），新建db-set.js文件：

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

在項目的根目錄下，新建目錄models，新建db.js文件：

var settings = require('../db-set'),
    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});

打開app.js：文件，最終修改結果：

/**
 * Module dependencies.
 */


var express = require('express')
  , routes = require('./routes')
  , http = require('http')
  , path = require('path');
var MongoStore = require('connect-mongo')(express);
var settings = require('./db-set');
var flash = require('connect-flash');
var app = express();
// all environments
app.set('port', process.env.PORT || 3000);
app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');
app.use(flash());
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(express.cookieParser());
app.use(express.session({
  secret: settings.cookieSecret,
  key: settings.db,//cookie name
  cookie: {maxAge: 1000 * 60 * 60 * 24 * 30},//30 days
  store: new MongoStore({
    db: settings.db
  })
}));
app.use(app.router);
app.use(express.static(path.join(__dirname, 'public')));
if ('development' == app.get('env')) {
  app.use(express.errorHandler());
}
routes(app);


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

打開cmd，切換到項目目錄下，輸入npm install 等待安裝，效果如下圖：

在目錄models下新建mind.js文件：

var mongodb = require('./db');
var ObjectID = require('mongodb').ObjectID;


function Mind(mind) {
	this.content = mind.content;
	this.ups = mind.ups;
	this.downs = mind.downs;
	this.cdate = mind.cdate;
	this.user =mind.user;
	this.comments = mind.comments;
	this.flag = mind.flag;
	this._id =mind._id;
}; 
module.exports = Mind;
//save 方法（增）
Mind.prototype.save = function(callback) {
	var date = new Date();
	var time = date.getFullYear()+ "-"+ (date.getMonth() + 1)+ "-"+ date.getDate()+ " "+ date.getHours()+ ":"+ (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes())+ ":"+ (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
	var mind = {
		content : this.content,
		ups : 0,
		downs : 0,
		cdate : time,
		user :this.user,
		comments : 0,
		flag : this.flag
	};
	// 打開數據庫
	mongodb.open(function(err, db) {
		if (err) {
			return callback(err);// 錯誤，返回 err 信息
		}
		// 讀取 minds 集合
		db.collection('minds', function(err, collection) {
			if (err) {
				db.close();
				return callback(err);
			}
			// insert
			collection.insert(mind, {
				safe : true
			}, function(err, mind) {
				db.close();
				if (err) {
					return callback(err);
				}
				callback(null, mind[0]);// 成功！err 爲 null，並返回存儲後的用戶文檔
			});
		});
	});
};
// 查詢 （查）
Mind.getAll = function(callback) {
	mongodb.open(function(err, db) {
		if (err) {
			return callback(err);
		}
		db.collection('minds', function(err, collection) {
			if (err) {
				db.close();
				return callback(err);
			}
			// 查詢 所有的minds，以cdate降序排序，最後轉換爲數組。
			collection.find().sort({cdate: -1}).toArray(function(err, minds) {
				db.close();
				if (err) {
					return callback(err);
				}
				callback(null, minds);
			});
		});
	});
};


//update 更改（改）
Mind.update = function(id,ups,downs,comments,callback) {
	mongodb.open(function(err, db) {
		if (err) {
			return callback(err);//錯誤，返回 err 信息
		}
		db.collection('minds', function(err, collection) {
			if (err) {
				db.close();
				return callback(err);
			}
			collection.update({
				_id :new  ObjectID(id)
			}, {
				$set: {ups: ups,downs:downs,comments:comments}
			},function(err, mind) {
				db.close();
				if (err) {
					return callback(err);
				}
				callback(null, mind);
			});
		});
	});
};
//delete 刪除（刪）
Mind.removeById = function(id,callback) {
	mongodb.open(function(err, db) {
		if (err) {
			return callback(err);
		}
		db.collection('minds', function(err, collection) {
			if (err) {
				db.close();
				return callback(err);
			}
			collection.remove({
				_id :new  ObjectID(id)
			},function(err) {
				db.close();
				if (err) {
					return callback(err);// 失敗！返回 err 信息
				}
				callback(null);
			});
		});
	});
};

以上是對錶minds的增、刪、改、查方法，還沒有驗證是否正確，minds的幾個屬性也無需詳細說明，其中flag是作爲之後投稿審覈功能的一個字段，暫時先放着，接下來繼續。

2.首頁數據的讀取於插入

那麼，打開routes/index.js文件，最終修改爲：

var crypto = require('crypto');
var Mind = require('../models/mind.js');

//trim方法
function trimStr(str){
	if(str){
		return str.replace(/(^\s*)|(\s*$)/g,"");
	}
}

module.exports = function(app) {
  app.get('/', function (req, res) {
	  Mind.getAll(function(err, minds) {
		  if(err){
			  minds = [];
		  }
		  res.render('index', {
				title : 'OMinds - 最新',
				minds : minds });
	  });
  });
  app.get('/upminds', function (req, res) {
	    res.render('upminds', { title: 'OMinds - 投稿' ,
	    	error : req.flash('error').toString(),
	    	ocontent:req.flash('ocontent').toString()
	    });
  });
  app.post('/putup',function (req, res) {
	  	var user = req.session.user;
	  	var cont = trimStr(req.body.mind_text);
		if(cont==null||cont.length<40||cont.length>700){
			req.flash('error', "您的投稿不符合條件，請修改後提交。");
			req.flash('ocontent', cont);
			return res.redirect('/upminds');
		}
		var mind;
		var flag = true;
		//no login
		if (!user) {
			mind = new Mind({
				content : cont,
				user : null,
				flag : flag
			});
			mind.save(function(err, mind) {
				if (err) {
					req.flash('error', err);
					return res.redirect('/upminds');
				}
				res.redirect('/');
			});
		} 
		// login
		else {
			//暫時不做處理
		}
  	});
};

其中app.get('/')裏面讀取了所有的minds，傳到前端顯示，app.get('/upminds')中加了兩個參數，是用於錯誤跳轉的。app.post('/putup')是投稿頁面，表單提交後的處理。

打開views/index.ejs，將cell的div複製一份（作爲參考用的，沒什麼別的意思），最終代碼如下：

<%- include header%>
	<div class="content">
  		<div class="cell">
  			<div class="cell_author" >
  				<img src="/images/tem.jpg" title="OMinds">
  				<a href="/">OMinds</a>
  				<span class="cell_loc" title="1樓">1#</span>
  			</div>
  			<div class="cell_text" title='' >
				OMinds，發表你的心事，你可以不用登錄，不用在乎是否會被別人嘲笑，因爲在這裏大家都是一樣的沒有誰會嘲笑你。 				
  			</div>
  			<div class="cell_bar">
  				<ul style="padding:0">
  					<li><a id="putgoods" name="putgoods" href="#" title="10個贊" >贊[10]</a></li>
  					<li><a id="putbads" name="putbads" href="j#" title="10個踩">踩[10]</a></li>
  				</ul>
  				<ul class="cell_bar_comm">
  					<li><a href="#" title="10條評論" >評[10]</a></li>
  					<div class="bshare-custom" style="float:right;height:28px;margin-top: 4px;"><a title="分享到QQ空間" class="bshare-qzone"></a>
  					<a title="分享到新浪微博" class="bshare-sinaminiblog"></a>
  					<a title="分享到人人網" class="bshare-renren"></a>
  					<a title="分享到騰訊微博" class="bshare-qqmb"></a>
  					<a title="分享到網易微博" class="bshare-neteasemb"></a>
  					<script type="text/javascript" charset="utf-8" src="http://static.bshare.cn/b/buttonLite.js#style=-1&uuid=;pophcol=2&lang=zh"></script>
  					<script type="text/javascript" charset="utf-8" src="http://static.bshare.cn/b/bshareC0.js"></script>
  					<script type="text/javascript" charset="utf-8">
						bShare.addEntry({
					        title:"OMinds分享",
					        summary:'分享你的心事。' ,
							vTag:'OMinds'});
					</script>
  				</ul>
  			</div>
  		</div>
		<% minds.forEach(function (mind, index) { %>
		<div class="cell">
  			<div class="cell_author" >
  				<img src="/images/tem.jpg" title="OMinds">
  				<a href="/">OMinds</a>
  				<span class="cell_loc" title="<%=(index+1)%>樓"><%=(index+1)%>#</span>
  			</div>
  			<div class="cell_text" title='<%=mind.cdate%>' >
				<%=mind.content%> 				
  			</div>
  			<div class="cell_bar">
  				<ul style="padding:0">
  					<li><a id="putgoods" name="putgoods" href="#" title="<%=mind.ups%>個贊" >贊[<%=mind.ups%>]</a></li>
  					<li><a id="putbads" name="putbads" href="j#" title="<%=mind.downs%>個踩">踩[<%=mind.downs%>]</a></li>
  				</ul>
  				<ul class="cell_bar_comm">
  					<li><a href="#" title="<%=mind.comments%>條評論" >評[<%=mind.comments%>]</a></li>
  					<div class="bshare-custom" style="float:right;height:28px;margin-top: 4px;"><a title="分享到QQ空間" class="bshare-qzone"></a>
  					<a title="分享到新浪微博" class="bshare-sinaminiblog"></a>
  					<a title="分享到人人網" class="bshare-renren"></a>
  					<a title="分享到騰訊微博" class="bshare-qqmb"></a>
  					<a title="分享到網易微博" class="bshare-neteasemb"></a>
  					<script type="text/javascript" charset="utf-8" src="http://static.bshare.cn/b/buttonLite.js#style=-1&uuid=;pophcol=2&lang=zh"></script>
  					<script type="text/javascript" charset="utf-8" src="http://static.bshare.cn/b/bshareC0.js"></script>
  					<script type="text/javascript" charset="utf-8">
						bShare.addEntry({
					        title:"OMinds分享",
					        summary:'分享你的心事。' ,
							vTag:'OMinds'});
					</script>
  				</ul>
  			</div>
  		</div>
		<%})%>
  	</div>
<%- include footer%>

打開upminds.ejs，修改後：

<%- include header%>
	<div class="main">
  		<div class="upideas_content clear_fix">
  			<div class="up_content clear_fix">
  				<div class="up_bar">
  				<h3>投稿須知</h3>
  				<ol style="padding:0;">
  					<li>分享自己或朋友的Minds（心事），不浮誇、有意義，不含政治、色情、廣告、誹謗、歧視等內容。</li>
  					<li>分享的Minds（心事），將在審覈之後發佈。</li>
  					<li>轉載請註明出處，任何由Minds引發的法律等糾紛，本站概不負責。</li>
  					<li>不得盜用站內其他會員的Minds。</li>
  				</ol>
  				</div>
  				<div class="up_content_text">
  					<form method="post" action="putup" >
  						<textarea id="mind_text" name="mind_text" class="up_idea_text" rows="23" required placeholder="分享你的Minds（心事）..." ><%if(ocontent!=null&&ocontent!=''){%><%=ocontent%><%}%></textarea>
  						<span class="up_idea_err"><%= error %></span><button type="submit" class="up_idea_btn" id="idea_btn" >投遞</button>
  					</form>
  				</div>
  			</div>
  		</div>
  	</div>
<%- include footer%>

ok，將mongdb的bat跑起來，再啓動項目的server的bat，用瀏覽器看一下效果吧，可以使用投稿功能，投稿後在首頁顯示了。

OK，動態顯示已經做出來了，下一章~~~~doing。

工程結構圖：

ideas-ominds交流羣：158325682，有想要一起做的，或者有什麼不懂的都可以找我哦。