[js高手之路]Node.js+jade+express+mongodb+mongoose+promise实现todolist

promise主要是用来解决异步回调问题，其实还有好几种比promise更好的方案，后面再说，这节,我们先用promise来改造下，我以前写的一篇文章[js高手之路]javascript腾讯面试题学习封装一个简易的异步队列

中的一道面试题( 页面上有一个按钮，一个ul，点击按钮的时候，每隔1秒钟向ul的后面追加一个li, 一共追加10个，li的内容从0开始计数( 0, 1, 2, ....9 ) ).

promise的小实例:

function next1(){
    return new Promise( function( resolve, reject ){
        console.log( 'next1' );
        resolve( 'jump to next2' );
    } );
}

function next2(){
    return new Promise( function( resolve, reject ){
        console.log( 'next2' );
        resolve( 'jump to next3' );
    } );
}

next1().then( function( res ){
    console.log( res );
    return next2();
} ).then( function( res ){
    console.log( res );
} );

使用promise的改造方案：

<input type="button" value="添加">
<ul></ul>
<script>
    var oUl = document.querySelector("ul");
    var oBtn = document.querySelector("input");
    var count = 0;
    var timer = null;
    function createDom() {
        var oLi = document.createElement("li");
        oLi.innerHTML = count++;
        oUl.appendChild(oLi);
    }
    var addDom = (function () {
        return new Promise(function (resolve, reject) {
            resolve(createDom);
        });
    })();
    oBtn.onclick = function () {
        timer = setInterval(function () {
            if (count == 10) {
                clearInterval(timer);
            } else {
                addDom.then(function (fn) {
                    fn();
                });
            }
        }, 1000);
    }
</script>

接下来，我们就用promise结合Node.js+jade+mongodb+mongoose+express来实现一个简单的todolist( 留言板 )

项目结构：

实现的效果:

public: 存放的项目的静态资源，如图片,css,js等

routers: 把不同功能模块分离出不同的路由，如index.js( 首页路由 ), add.js( 发布留言时候的路由 )

views: jade模板目录

db.js: 数据库连接模块

server.js: 启动服务器以及项目入口

 

server.js:

var express = require('express');
var app = express();
var path = require( 'path' );
var indexRouter = require( './routers/index.js' );
var addRouter = require( './routers/add.js' );

app.use( '/', indexRouter );
app.use( '/add', addRouter );
app.use( express.static( path.join( __dirname, 'public' ) ) );

app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

app.listen( 3000 );
console.log( 'server listening on:' + 3000 );

index.js，渲染首页，取出数据库中的所有留言数据

var express = require('express');
var router = express.Router();
var Message = require('../db');

function getAllMsg(){
    return new Promise( function( resolve, reject ){
        Message.find( {}, function( err, msgList ){
            resolve( msgList );
        } );
    } );
}
router.get('/', function (req, res) {
    getAllMsg().then( function( data ){
        res.render( 'index', {
            msgList : data
        } );
    } );
});
module.exports = router;

add.js，处理发布留言的提交流程

var express = require( 'express' );
var router = express.Router();
var Message = require( '../db' );

function addMsg( msgInfo ){
    var msgModel = new Message( msgInfo );
    msgModel.save(function(err,result){
        if( err ){
            console.log( err );
        }else{
            console.log( 'success' );
        }
    });
}
router.get('/', function( req, res ) {
    addMsg( {
        title : req.query.msg,
        listTime : new Date()
    } );
    res.redirect( '/' );
});

module.exports = router;

db.js: 数据库连接模块

var mongoose = require('mongoose');
mongoose.Promise = global.Promise;
var DB_URL = 'mongodb://localhost:27017/cms';

var db = mongoose.createConnection(DB_URL);
db.on('connected', function (err) {
    if (err) {
        console.log(err);
    } else {
        console.log('db connected success');
    }
});
var Schema = mongoose.Schema;
var msgSchema = new Schema({
    title: String, //留言信息
    listTime: Date //发布时间
});
var Message = db.model( 'Message', msgSchema );

module.exports = Message;

后续的功能：

1，删除

2，编辑

3，分页

...等等