专栏首页.NET开发那点事nodejs+express+jade+mongodb给我baby做个小相册(2)-留言板

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

最后为了我的小星星,求一个苏州地区的好坑,求各位大神推荐。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Azure内容审查器之羞羞图审查

    上一篇 Azure 内容审查器之文本审查我们已经介绍了如果使用Azure进行文字内容的审核。对于社区内容,上传的图片是否含有羞羞内容也是需要过虑的。但是最为一般...

    kklldog
  • ASP.NET Core Blazor Webassembly 之 渐进式应用(PWA)

    Blazor支持渐进式应用开发也就是PWA。使用PWA模式可以使得web应用有原生应用般的体验。

    kklldog
  • angularJS配合bootstrap动态加载弹出提示内容

    1.bootstrp的弹出提示   bootstrap已经帮我们封装了非常好用的弹出提示Popover。   http://v3.bootcss.com/jav...

    kklldog
  • Spring事务监听机制---使用@TransactionalEventListener处理数据库事务提交成功后再执行操作(附:Spring4.2新特性讲解)【享学Spring】

    从标题就可以看出,本篇文章内容既和Spring的事件/监听机制有关,同时还和Spring事务以及Spring事务同步机制有关。

    YourBatman
  • 瀑布模型,冯.诺依曼结构——摘自百科

    瀑布模型是一个软件开发架构,于1970年被温斯顿·罗伊斯(Winston Royce)提出。其核心思想是按工序将问题化简,将功能的实现与设计分开,便于分工协作,...

    二十三年蝉
  • 本田与商汤牵手共谋自动驾驶,为何相中这家中国AI独角兽?

    日前,中国最大的AI独角兽商汤科技与本田达成长期战略合作,双方将共同深耕自动驾驶技术、加速智能汽车的研发进程,共同发力L4级自动驾驶方案。所谓L4自动驾驶技术,...

    罗超频道
  • 医疗保健中物联网的现实审视

    本文综述了物联网在医疗保健领域的应用潜力和风险。机会包括老年病人监测,增加农村病人的准入,提高医疗专业人员的时间效率和数据收集。风险包括网络安全威胁、能源短缺和...

    用户4122690
  • 谷歌AI中心成立!警惕中国成为全世界的AI猎场

    这几天,谷歌高调重返中国引发业界关注。谷歌在中国成立AI中心,这是近十年来继宣布退出中国后,谷歌在中国最大的动作,宣布这一计划的谷歌云首席科学家、著名的华人AI...

    罗超频道
  • 【智驾深谈】Tesla致命车祸的必然性:谈自动驾驶的三个命门

    【新智元导读】昨天早晨刚起床就被刷屏了,Tesla自动驾驶状态下出了致命车祸,平时热衷于展示自动驾驶功能的铁杆粉丝(向老兄致敬)当场死亡,Tesla股价大幅下降...

    新智元
  • 用好这个数据分析工具,你也可以成为APP运营的王者!(结尾有彩蛋)

    日常运营APP的同学都知道 ,要想成为APP消息推送的王者级玩家,不仅要做好推送前的SDK和API的接入,在创建推送中熟练使用各个推送能力,更要不断提高推送效果...

    Grace

扫码关注云+社区

领取腾讯云代金券