[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，分页

...等等