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 条评论
登录 后参与评论

相关文章

来自专栏技术博文

认识http协议

http:Hyper Text Transfer Protocol,超文本传输协议。是互联网上应用最为广泛的一种网络协议。所有的WWW文件都必须遵守这个标准。...

3047
来自专栏云加新鲜事儿

CDB 的控制台的超时雪崩问题

近日,测试同学 R 反馈整个测试环境,CDB 的相关页面都不能访问了,到底是什么原因导致呢 ? 本文记录了本次问题的查找过程、问题结论以及解决方案。

1420
来自专栏安富莱嵌入式技术分享

【RL-TCPnet网络教程】第41章 HTTP超文本传输协议基础知识

本章节为大家讲解HTTP(HyperText Transfer Protocol,超文本传输协议),从本章节开始,正式进入嵌入式Web的设计和学习。

662
来自专栏Java技术栈

什么是Spring Boot?

什么是Spring BootSpring Boot是Spring开源组织下的子项目,是Spring组件一站式解决方案,主要是简化了使用Spring的难度,简省了...

3437
来自专栏KaliArch

HTTP 协议Note

名称含义:HTTP协议是Hyper Text Transfer Protocol(超文本传输协议)的缩写。

1154
来自专栏Ryan Miao

Spring-Boot - 初步搭建

official document:http://projects.spring.io/spring-boot/ 项目代码: https://github.co...

2464
来自专栏互扯程序

HTTP状态码大全

写在前面 我们在开发Web服务的时候,经常会遇到404,500等错误。对于初学者来说遇到错误,不知如何下手,今天我们来看看每个状态都表示什么意思? HTTP状...

3504
来自专栏安富莱嵌入式技术分享

【安富莱TCPnet网络教程】HTTP通信实例

本章节为大家讲解HTTP(HyperText Transfer Protocol,超文本传输协议),从本章节开始,正式进入嵌入式Web的设计和学习。

542
来自专栏Java成神之路

Mybatis异常_02_Result Maps collection already contains value for

   XXXMapper.xml文件中存在重名对象,保持名称不要一样即可正常启动。

903
来自专栏java工会

常见HTTP请求错误码大全

853

扫码关注云+社区