Index of this series:

Create a simple Web server and read and write files

Express + Supervisor + EJS

Node.js to achieve a simple crawler – crawl all the blog article list information

Jade is a template engine for node.js

Node.js template engine tutorial – Jade speed and Combat 2- Flow control, escape and non-escape

[js master road]Node.js template engine tutorial – Jade speed learning and practice 3- Mixin

[js master road]Node.js template engine tutorial – Jade speed learning and practice 4- template reference, inheritance, plug-in use

Node.js+ Jade crawls all blog posts to generate static HTML files

[jS master road]Node.js+ Jade +mongodb+ Mongoose to achieve crawler separation into the library and generate static files

Node.js+ Jade + Express +mongodb+ Mongoose + Promise todolist

Js + Jade + Express +mongodb+ Mongoose + Promise to achieve Todolist continue, in this article to achieve the release of information, out of the information list function, this article, continue to achieve the above reserved three functions:

1, delete

2. Editing (Ajax interaction)

3. Paging and status status is selected

Effect after realization:

 

 

CURD operation is relatively simple, a little bit of effort is paging and status selection, as well as pop-ups + Ajax information update.

Index. Jade (template) :

1 doctype html 2 html 3 head 4 meta(charset='utf-8') 5 title todolist-by ghostwu 6 link(rel="stylesheet", href='./css/bower_components/bootstrap/dist/css/bootstrap.min.css') 7 script(src="./css/bower_components/jquery/dist/jquery.min.js") 8 script(src="./css/bower_components/bootstrap/dist/js/bootstrap.min.js") 9 script(src="./js/index.js") 10 body 11 Container 12 div.row 13 div.col-md-offset-2.col-md-8 14 H3 Message board (Node.js +mongodb+ Mongoose + Jade) -by ghostwu 15 form.form-horizontal(action='/add') 16 div.form-group 17 div.col-md-offset-2.col-md-8 18 Textarea.form-control (name=' MSG ',cols=60,rows=5) 19 div. Col-md-offset-2. Col-md-8 20 button.btn.btn-primary div.col-md-offset-2.col-md-8 22 ul.list-group 23 - for ( var key in msgList ){ 24 li.list-group-item 25 span #{msgList[key]['title']} 26 a(href='/del/id/#{msgList[key]["_id"]}') &nbsp; &nbsp; Delete & have spent |&nbsp; 27 input(type='hidden' value='#{msgList[key]["_id"]}') 28 a(data-toggle='modal',data-target='#editMsg',href='javascript:; ') edit 29 -} 30 div.col-md-offset 2.col-md-8 31 ul. Pagination 32 - for (var I = 0; i < page; i++ ) 33 li 34 a(href='/? p=#{i+1}') #{i+1} 35 input(id='curP',type='hidden',value='#{curPage}') 36 div.modal.fade#editMsg 37 div.modal-dialog 38 div.modal-content 39 div.modal-header 40 button(type='button',class='close',data-dismiss='modal') &times; 41 h4.modal-title Edit information 42 div.modal-body 43 textarea.form-control(name='msg-box', COLs =60,rows=5) 44 div.modal-footer 45 Button (type='button',class=' BTN bTN-default ',data-dismiss='modal') close 46 Button (type='button',class=' BTN ' BTN - primary ', data - dismiss = 'modal' update)Copy the code

Index.js (Ajax interaction and paging status check feature):

1 $(function () {2 / * -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- page selected to determine start -- -- -- -- -- -- -- -- -- -- -- - * / var curPage 3 = $(" # curP "). Val (); 4 $( ".pagination a" ).each( function(){ 5 if ( $( this ).text() == curPage ) { 6 $( this ).parent().addClass( 'active' ) 7 .siblings( "li" ).removeClass( "active" ); 8} 9}); 10 / * -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- page selected to determine end -- -- -- -- -- -- -- -- -- -- -- -- 12 / * * / 11 -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- for editing information start -- -- -- -- -- -- -- -- -- -- -- - * / 13 $(" li. The list - group - the item a:last-child" ).on( 'click', function(){ 14 // console.log( $( this ).parent().find( "span" ).text() ); 15 var curId = $( this ).parent().find( "input" ).val(); 16 $( "#editMsg .modal-body textarea" ).val ( $( this ).parent().find( "span" ).text() ); 17 $( "#editMsg" ).find("input").remove(); 18 $( "#editMsg" ).append( "<input type='hidden' value='" + curId + "' />" ); 19}); 20 / * -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- end edit information -- -- -- -- -- -- -- -- -- -- -- - * / 21 and 22 / * -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- update information start -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- * / 23 $(". Modal - footer .btn-primary" ).on( "click", function(){ 24 var curId = $( this ).parents( ".modal" ).find( ":hidden" ).val(); 25 var curMsg = $( this ).parents( ".modal" ).find( "textarea" ).val(); 26 $.ajax( { 27 type : 'GET', 28 url : '/update', 29 data : { 'id' : curId, 'content' : curMsg }, 30 success : function( res ){ 31 location.href = 'http://localhost:3000'; 32 }, 33 error : function( res ){ 34 console.log( res ); 35} 36}); 37}) 38 / * -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- end of update information -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- * / 39});Copy the code

Server.js (add delete and update 2 routing functions on the basis of the above)

 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 var delRouter = require( './routers/del.js' );
 7 var updateRouter = require( './routers/update.js' );
 8 
 9 app.use( '/', indexRouter );
10 app.use( '/add', addRouter );
11 app.use( '/del', delRouter );
12 app.use( '/update', updateRouter );
13 app.use( express.static( path.join( __dirname, 'public' ) ) );
14 
15 app.set('views', path.join(__dirname, 'views'));
16 app.set('view engine', 'jade');
17 
18 app.listen( 3000 );
19 console.log( 'server listening on:' + 3000 );Copy the code

Index.js (add paging and sorting queries to the list above)

1 var express = require('express'); 2 var router = express.Router(); 3 var Message = require('.. /db'); 4 5 function getAllMsg(curPage, pageSize) { 6 return new Promise(function (resolve, reject) { 7 Message.find({}, function (err, msgList) { 8 resolve(msgList); 9 }).skip( (curPage - 1) * pageSize ).limit( pageSize ).sort({ 'listTime': -1 }); 10}); 11 } 12 13 function Page( pageSize ) { 14 return new Promise((resolve, reject) => { 15 Message.count({}, (err, nums) => { 16 resolve( Math.ceil( nums / pageSize ) ); 17}); 18}); 19 } 20 21 router.get('/', function (req, res) { 22 var p = req.query.p || 1; Var pageSize = 5; GetAllMsg (p, pageSize). Then (function (data) {25 Page(pageSize). Then ((nums) => {26 res.render('index', { 27 msgList: data, 28 page : nums, 29 curPage : p 30 }); 31}); 32}); 33}); 34 35 module.exports = router;Copy the code

Update.js (Information update routing and data update operations)

1 var express = require('express'); 2 var router = express.Router(); 3 var Message = require('.. /db'); 4 5 function updateMsg(msgInfo) { 6 return new Promise(function (resolve, reject) { 7 var condition = { '_id': msgInfo['_id'] }; 8 var data = { 'title': msgInfo['title'], 'listTime': msgInfo['listTime'] }; 9 Message.update(condition, data, function (err, result) { 10 if (err) { 11 reject( 'error' ); 12 } else { 13 resolve( 'ok' ); 14}}); 16}); 17 } 18 19 router.get('/', function (req, res) { 20 updateMsg({ 21 title: req.query.content, 22 listTime: new Date(), 23 '_id': req.query.id 24 }).then( function( status ){ 25 res.send( status ); 26 }, function( status ){ 27 res.send( status ); 28}); 29}); 30 31 module.exports = router;Copy the code

Del.js file (routing and database operations to delete information)

1 var express = require( 'express' ); 2 var router = express.Router(); 3 var Message = require( '.. /db' ); 4 5 function delMsg( id ){ 6 Message.remove( { '_id' : id }, function( err ){ 7 if( err ){ 8 console.log( err ); 9 }else{ 10 console.log( 'success' ); 11}}); 13 } 14 router.get('/id/:id', function( req, res ) { 15 delMsg( req.params.id ); 16 res.redirect( '/' ); 17}); 18 19 module.exports = router;Copy the code

www.cnblogs.com/ghostwu