[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;