nodejs+express+jade+mongodb給我baby做個小相冊（2）-留言板

上一篇簡單的實現了下照片的展現跟瀏覽功能，這一篇我將給這個程序添加一個留言的功能。那么留言的話肯定要涉及到數據持久了，其實對於這個小功能的話，用個xml就可以，不過為了看起來更加高大上，我決定使用mongodb來試一試。

1.安裝mongoose

npm install mongoose

沒什么好說的，直接用npm安裝。

mongoose是類似ORM的一個框架，它提供一個Schema類來給用戶自己定義數據模型，封裝了CRUD操作，還可以幫你管理mongodb的連接，你自己不用去open，close連接。

2.封裝mongodb操作類

在根目錄新建一個models目錄

在models下面添加mongodb.js

var mongoose = require('mongoose');
mongoose.connect('mongodb://localhost/mongodb1');
exports.mongoose = mongoose;

在models下面添加Message.js模型

var mongodb = require('./mongodb');
var Schema=mongodb.mongoose.Schema;
//定義message模型
var messageSchema=new Schema(
{
    userName:String,
    content:String,
    createTime:{type:Date,default:Date.now}
}
);

mongodb.mongoose.model('message',messageSchema);
var message=mongodb.mongoose.model('message');

exports.add=function(userName,content,callback){
    var msg = new message();
    msg.userName=userName;
    msg.content=content;
    //save to db
    msg.save(function(err){
        if(err){
            console.log(err);
            callback(err);
        }else{
            callback(null);
        }
        
    });
};

exports.getAll=function(callback){
    message.find(
            {},null,{ sort: { 'createTime':-1  } },
           callback
    );
}

這樣message的添加跟獲取所有的操作就封裝好了。

3.添加message.jade視圖

extends layout

block content
    div(class='container')
        form(class="form-horizontal" method='post')
            fieldset
                div(class="form-group")
                    label(for='userName' class='col-sm-4 control-label text-info')='名稱'
                    div(class='col-sm-2')
                        input(type="text" id='userName' name='userName' class='form-control input-sm' value=name required)
                div(class="form-group")
                    label(for='msg' class='col-sm-4 control-label text-info')='內容'
                    div(class='col-sm-6')
                        textarea(id='content' name='content' class='form-control' required)
                div(class="form-group")
                    div(class='col-sm-offset-4  col-sm-6')
                        input(type="submit" class='btn btn-primary' value='提交')
        for msg in msgs
            div(class='row')
                div(class='col-sm-4 text-right')
                div(class='col-sm-8  text-info')=msg.userName+' 說：'+msg.content
    script(src="/jqBootstrapValidation.js")
    script
        $(function () { $("input,select,textarea").not("[type=submit]").jqBootstrapValidation(); } );

這里還是使用bootstrap來做前端，使用jqBootstrapValidation來做數據驗證。

4.添加message.js路由

var msgDb = require('../models/Message');
var url = require("url");
var querystring = require("querystring");

exports.msgList = function(req, res){
    var objectUrl = url.parse(req.url);
    var objectQuery = querystring.parse(objectUrl.query);
    var userName = objectQuery['userName'];
    //如果有用戶名，說明前面已經提交過了，傳遞到視圖上去，這樣也沒刷新后不用重新填寫用戶名
    msgDb.getAll(function(err,messages){
            if(err){
                console.log(err);
                //異常跳轉到error界面
                res.redirect('/error');
            }
            else{
                res.render('message', { title: 'My Little Star',msgs:messages,name:userName });
            }
        });


};
exports.saveMsg=function(req, res){
    var userName= req.body.userName;
    var content= req.body.content;
    console.log('userId='+userName+' content='+content);
    msgDb.add(userName,content,function(err){
            if(err){
                    console.log(err);
                    res.redirect('/error');
                }
            else{
                //保存成功，刷新message界面，順便把用戶名通過url傳過去
                res.redirect('/message?userName='+userName);
            }
                
        });

    };

這里有2個方法，一個是post留言數據做保存，一個是展現所有數據。

4.在app.js注冊message的路由

var message = require('./routes/message');

app.get('/message', message.msgList);
app.post('/message',message.saveMsg);

5.運行效果

演示網址：http://kklldog.chinacloudapp.cn:8888/message

 

最后為了我的小星星，求一個蘇州地區的好坑，求各位大神推薦。