该系列文章索引:
[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') ×
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;