[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的小实例:
　　

1 function next1(){　　

2     return new Promise( function( resolve, reject ){　　

3         console.log( 'next1' );　　

4         resolve( 'jump to next2' );　　

5     } );　　

6 }　　

7　　
8 function next2(){
　　
9     return new Promise( function( resolve, reject ){
　　
10         console.log( 'next2' );
　　
11         resolve( 'jump to next3' );
　　
12     } );
　　
13 }
　　
14
　　
15 next1().then( function( res ){
　　
16     console.log( res );
　　
17     return next2();
　　
18 } ).then( function( res ){
　　
19     console.log( res );
　　
20 } );
　　

　　使用promise的改造方案：
　　

1 <input type="button" value="添加">　　
2 <ul></ul>
　　
3 <script>
　　
4     var oUl = document.querySelector("ul");
　　
5     var oBtn = document.querySelector("input");
　　
6     var count = 0;
　　
7     var timer = null;
　　
8     function createDom() {
　　
9         var oLi = document.createElement("li");
　　
10         oLi.innerHTML = count++;
　　
11         oUl.appendChild(oLi);
　　
12     }
　　
13     var addDom = (function () {
　　
14         return new Promise(function (resolve, reject) {
　　
15             resolve(createDom);
　　
16         });
　　
17     })();
　　
18     oBtn.onclick = function () {
　　
19         timer = setInterval(function () {
　　
20             if (count == 10) {
　　
21                 clearInterval(timer);
　　
22             } else {
　　
23                 addDom.then(function (fn) {
　　
24                     fn();
　　
25                 });
　　
26             }
　　
27         }, 1000);
　　
28     }
　　
29 </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:
　　

1 var express = require('express');　　

2 var app = express();　　

3 var path = require( 'path' );　　

4 var indexRouter = require( './routers/index.js' );　　

5 var addRouter = require( './routers/add.js' );　　

6　　
7 app.use( '/', indexRouter );
　　
8 app.use( '/add', addRouter );
　　
9 app.use( express.static( path.join( __dirname, 'public' ) ) );
　　
10
　　
11 app.set('views', path.join(__dirname, 'views'));
　　
12 app.set('view engine', 'jade');
　　
13
　　
14 app.listen( 3000 );
　　
15 console.log( 'server listening on:' + 3000 );
　　

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

1 var express = require('express');　　

2 var router = express.Router();　　

3 var Message = require('../db');　　

4　　
5 function getAllMsg(){
　　
6     return new Promise( function( resolve, reject ){
　　
7         Message.find( {}, function( err, msgList ){
　　
8             resolve( msgList );
　　
9         } );
　　
10     } );
　　
11 }
　　
12 router.get('/', function (req, res) {
　　
13     getAllMsg().then( function( data ){
　　
14         res.render( 'index', {
　　
15             msgList : data
　　
16         } );
　　
17     } );
　　
18 });
　　
19 module.exports = router;
　　

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

1 var express = require( 'express' );　　

2 var router = express.Router();　　

3 var Message = require( '../db' );　　

4　　
5 function addMsg( msgInfo ){
　　
6     var msgModel = new Message( msgInfo );
　　
7     msgModel.save(function(err,result){
　　
8         if( err ){
　　
9             console.log( err );
　　
10         }else{
　　
11             console.log( 'success' );
　　
12         }
　　
13     });
　　
14 }
　　
15 router.get('/', function( req, res ) {
　　
16     addMsg( {

　　
17        >　　
18         listTime : new Date()
　　
19     } );
　　
20     res.redirect( '/' );
　　
21 });
　　
22
　　
23 module.exports = router;
　　

　　db.js: 数据库连接模块
　　

1 var mongoose = require('mongoose');　　

2 mongoose.Promise = global.Promise;　　

3 var DB_URL = 'mongodb://localhost:27017/cms';　　

4　　
5 var db = mongoose.createConnection(DB_URL);
　　
6 db.on('connected', function (err) {
　　
7     if (err) {
　　
8         console.log(err);
　　
9     } else {
　　
10         console.log('db connected success');
　　
11     }
　　
12 });
　　
13 var Schema = mongoose.Schema;
　　
14 var msgSchema = new Schema({

　　
15    >　　
16     listTime: Date //发布时间
　　
17 });
　　
18 var Message = db.model( 'Message', msgSchema );
　　
19
　　
20 module.exports = Message;
　　

　　后续的功能：
　　1，删除
　　2，编辑
　　3，分页
　　...等等