[js高手之路]Node.js+jade+mongoose实战todolist(分页,ajax编辑,删除)

该系列文章索引：

[js高手之路]node js系列课程-创建简易web服务器与文件读写

[js高手之路]node js系列课程-图解express+supervisor+ejs用法

[js高手之路]Node.js实现简易的爬虫-抓取博客所有文章列表信息

[js高手之路]Node.js模板引擎教程-jade速学与实战1-基本用法

[js高手之路]Node.js模板引擎教程-jade速学与实战2-流程控制,转义与非转义

[js高手之路]Node.js模板引擎教程-jade速学与实战3-mixin

[js高手之路]Node.js模板引擎教程-jade速学与实战4-模板引用,继承,插件使用

[js高手之路]Node.js+jade抓取博客所有文章生成静态html文件

[js高手之路]Node.js+jade+mongodb+mongoose实现爬虫分离入库与生成静态文件

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

本文，接着这篇文章[js高手之路]Node.js+jade+express+mongodb+mongoose+promise实现todolist继续，在这篇文章中实现的发布信息，取出信息列表的功能，本文，继续实现上文预留下的3个功能:

1，删除

2，编辑( ajax交互 )

3，分页与状态状态选中

实现后的效果：

CURD操作是比较简单的，稍微要费点精力的是分页和状态选中，以及弹窗+ajax实现信息更新.

index.jade( 模板 ):

 doctype html
 html
     head
         meta(charset='utf-8')
         title todolist-by ghostwu
         link(rel="stylesheet", href='./css/bower_components/bootstrap/dist/css/bootstrap.min.css')
         script(src="./css/bower_components/jquery/dist/jquery.min.js")
         script(src="./css/bower_components/bootstrap/dist/js/bootstrap.min.js")
         script(src="./js/index.js")
     body
         div.container
             div.row
                 div.col-md-offset-2.col-md-8
                     h3 留言板(node.js+mongodb+mongoose+jade) -by ghostwu
                 form.form-horizontal(action='/add')
                     div.form-group
                         div.col-md-offset-2.col-md-8
                             textarea.form-control(name='msg',cols=60,rows=5)
                         div.col-md-offset-2.col-md-8
                             button.btn.btn-primary 发布留言
                 div.col-md-offset-2.col-md-8
                     ul.list-group
                         - for ( var key in msgList ){
                             li.list-group-item
                                 span #{msgList[key]['title']}
                                 a(href='/del/id/#{msgList[key]["_id"]}')   删除  | 
                                 input(type='hidden' value='#{msgList[key]["_id"]}')
                                 a(data-toggle='modal',data-target='#editMsg',href='javascript:;') 编辑
                         - }
                 div.col-md-offset-2.col-md-8
                     ul.pagination
                         - for ( var i = 0; i < page; i++ )
                             li
                                 a(href='/?p=#{i+1}') #{i+1}
                 input(id='curP',type='hidden',value='#{curPage}')
                 div.modal.fade#editMsg
                     div.modal-dialog
                         div.modal-content
                             div.modal-header
                                 button(type='button',class='close',data-dismiss='modal') &times;
                                 h4.modal-title 编辑信息
                             div.modal-body
                                 textarea.form-control(name='msg-box',cols=60,rows=5)
                             div.modal-footer
                                 button(type='button',class='btn btn-default',data-dismiss='modal') 关闭
                                 button(type='button',class='btn btn-primary',data-dismiss='modal') 更新

index.js( ajax交互与分页状态选中功能 ):

 $(function(){
     /*---------------分页选中判断开始------------*/
     var curPage = $( "#curP" ).val();
     $( ".pagination a" ).each( function(){
         if ( $( this ).text() == curPage ) {
             $( this ).parent().addClass( 'active' )
                 .siblings( "li" ).removeClass( "active" );
         }
     } );
     /*---------------分页选中判断结束------------*/

     /*---------------获取编辑信息开始------------*/
     $( "li.list-group-item a:last-child" ).on( 'click', function(){
         // console.log( $( this ).parent().find( "span" ).text() );
         var curId = $( this ).parent().find( "input" ).val();
         $( "#editMsg .modal-body textarea" ).val ( $( this ).parent().find( "span" ).text() );
         $( "#editMsg" ).find("input").remove();
         $( "#editMsg" ).append( "<input type='hidden' value='" + curId + "' />" );
     } );
     /*---------------获取编辑信息结束------------*/

     /*---------------更新信息开始---------------*/
     $( ".modal-footer .btn-primary" ).on( "click", function(){
         var curId = $( this ).parents( ".modal" ).find( ":hidden" ).val();
         var curMsg = $( this ).parents( ".modal" ).find( "textarea" ).val();
         $.ajax( {
             type : 'GET',
             url : '/update',
             data : { 'id' : curId, 'content' : curMsg },
             success : function( res ){
                 location.href = 'http://localhost:3000';
             },
             error : function( res ){
                 console.log( res );
             }
         } );
     } )
     /*---------------更新信息结束---------------*/
 });

server.js( 在上文的基础上，增加删除和更新2个路由功能 )

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

 app.use( '/', indexRouter );
 app.use( '/add', addRouter );
 app.use( '/del', delRouter );
 app.use( '/update', updateRouter );
 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(curPage, pageSize) {
     return new Promise(function (resolve, reject) {
         Message.find({}, function (err, msgList) {
             resolve(msgList);
         }).skip( (curPage - 1) * pageSize ).limit( pageSize ).sort({ 'listTime': -1 });
     });
 }

 function Page( pageSize ) {
     return new Promise((resolve, reject) => {
         Message.count({}, (err, nums) => {
             resolve( Math.ceil( nums / pageSize ) );
         });
     });
 }

 router.get('/', function (req, res) {
     var p = req.query.p || 1; //当前页
     var pageSize = 5; //每页显示5条数据
     getAllMsg(p, pageSize).then(function (data) {
         Page(pageSize).then((nums) => {
             res.render('index', {
                 msgList: data,
                 page : nums,
                 curPage : p
             });
         });
     });
 });

 module.exports = router;

update.js( 信息更新路由与数据更新操作 ）

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

 function updateMsg(msgInfo) {
     return new Promise(function (resolve, reject) {
         var condition = { '_id': msgInfo['_id'] };
         var data = { 'title': msgInfo['title'], 'listTime': msgInfo['listTime'] };
         Message.update(condition, data, function (err, result) {
             if (err) {
                 reject( 'error' );
             } else {
                 resolve( 'ok' );
             }
         });
     });
 }

 router.get('/', function (req, res) {
     updateMsg({
         title: req.query.content,
         listTime: new Date(),
         '_id': req.query.id
     }).then( function( status ){
         res.send( status );
     }, function( status ){
         res.send( status );
     });
 });

 module.exports = router;

del.js文件（删除信息的路由和数据库操作）

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

 function delMsg( id ){
     Message.remove( { '_id' : id }, function( err ){
         if( err ){
             console.log( err );
         }else{
             console.log( 'success' );
         }
     });
 }
 router.get('/id/:id', function( req, res ) {
     delMsg( req.params.id );
     res.redirect( '/' );
 });

 module.exports = router;