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

相关文章

来自专栏IT笔记

SpringBoot开发案例之微信小程序文件上传

前言 最近在做一个口语测评的小程序服务端,小程序涉及到了音频文件的上传,按理说应该统一封装一个第三方上传接口服务提供给前段调用,但是开发没有那么多道理,暂且为了...

3966
来自专栏Netkiller

MySQL Router 安装与配置

1.9. MySQL Router 1.9.1. 安装 MySQL Router # yum install mysql-router -y MySQL Rou...

3614
来自专栏Java成神之路

分布式_事务_02_2PC框架raincat源码解析

上一节已经将raincat demo工程运行起来了,这一节来分析下raincat的源码

1041
来自专栏NetCore

近期开发中遇到的问题总结

最近准备把后台管理系统重新设计开发下,使用了bootstrap,在网上找了个漂亮的后台模板:sb2-admin,在使用中遇到了不少问题,总结下,以免以后忘记。 ...

18510
来自专栏ASP.NETCore

【干货】”首个“ .NET Core 验证码组件

众所周知,Dotnet Core目前没有图形API,以前的System.Drawing程序集并没有包含在Dotnet Core 1.0环境中。不过在dotne...

894
来自专栏Kubernetes

Kubelet Deivce Manager源码分析

2705
来自专栏Danny的专栏

【EJB学习笔记】——实体Bean

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/huyuyang6688/article/...

683
来自专栏吕亚辉的专栏

【腾讯云的1001种玩法】CRUD生成器DBuilder介绍与腾讯云部署

Dbuilder是基于laravel4开发的一套快速实现数据库表CRUD(增删改查)操作的工具,核心思想是做到针对数据库表的每个字段做到精确配置,通过生成字段配...

2740
来自专栏美码师

补习系列- springboot 整合 shiro一指禅

Apache Shiro 是一个强大且易用的Java安全框架,用于实现身份认证、鉴权、会话管理及加密功能。 框架提供了非常简单且易于上手的API,可以支持快速为...

1112
来自专栏葡萄城控件技术团队

ActiveReports 报表应用教程 (11)---交互式报表之文档目录

通过文档目录,用户可以非常清晰的查看报表数据结构,并能方便地跳转到指定的章节,最终还可以将报表导出为PDF等格式的文件。本文以2012年各月产品销售分类汇总报表...

1849

扫码关注云+社区