• 技术文章 >web前端 >js教程

    node实现分页查询的方法

    一个新手一个新手2017-10-14 09:57:06原创2103


    在本例中,用到的相关框架和模板包含:jade、mongoose、express、layui。

    前台用的jade模板,这里用了bootstrap布局和layui的分页控件。
    index.jade main code:

    //文章列表显示
         p.container      
         if(articals.length > 0)
           p.container.clear
            - for(var i=0;i<articals.length;i++)
             .col-lg-6.col-md-6.col-sm-12
              p.panel.panel-default
               .panel-heading
                 a.block.bold(href = '/details?id=#{articals[i]._id}')= articals[i].title
               p.panel-body.height50!= articals[i].detail
               p.panel-footer
                span.glyphicon.glyphicon-user(aria-hidden = "true")
                span(style = "margin-right:20px;margin-left:5px;")= articals[i].author
                span= articals[i].createDate       //添加分页
           p#pager.text-center.col-lg-12 col-md-12 col-sm-12
           .empty
           .empty
           script(type="text/javascript").
             layui.use(['laypage', 'layer'], function(){
              var laypage = layui.laypage;
              laypage.render({
                elem: 'pager'
                ,count: #{total}
                ,curr:('#{page}'||1)
                ,jump: function(obj, first){
                  if(!first){
                    window.location.href = '/index/'+obj.curr;
                  }
                }
              });
             });      else
           h2 快去发表一篇文章吧~  #footer
           .container.text-center
                p 版权所有 &copy; 2017 LorettaXiongField

    index.js main code:

    var express = require('express');  
    var mongoose = require('mongoose');require('../models/schema');var article = mongoose.model('Article');var user = mongoose.model('User');var url = require('url');var router = express.Router();  
    //处理get请求router.get('/', function(req, res, next) {  
      var con = [];
      article.find({}).exec(function(err, doc){
        var total = doc.length;    //按时间顺序查找前10条文章的数据
        article.find({}).sort({createDate: -1}).populate('creator', 'name').limit(10).exec(function(err, character){
        //添加容错措施
            if(err){
              console.log(err);
            }else if(character.length == 0){        //没有任何文章,就直接返回
              console.log('no articles!');
              res.render('index', { 
                title: '首页', 
                articals : con
              });  
            }else{          for(var i = 0; i < character.length; i++){
                con[i] = {
                  _id: character[i]._id,
                  title: character[i].title,
                  detail: character[i].text.replace(/<[\/]{0,1}[a-zA-Z\s"'=;]{1,}>/g, ''),
                  author: character[i].creator.name,
                  createDate: character[i].createDate
                };
              }          //返回文章总数以及前10条数据
              res.render('index', { 
                title: '首页', 
                total: total,
                articals : con
              });  
            }
          });
      })
    });   
    
    //处理带有页码参数的get请求router.get('/index/:page', function(req, res, next) {  
      var con = [];  var pageNum = parseInt(req.params.page);  var Creator;  if(pageNum){
      article.find({}).exec(function(err, doc){
        var total = doc.length;    //按时间顺序查找从第[(页码-1)*10]条数据开始的10条文章的数据
        article.find({}).sort({createDate: -1}).populate('creator', 'name').skip((pageNum-1)*10).limit(10).exec(function(err, character){
        //添加容错措施
            if(err){
              console.log(err);
            }else if(character.length == 0){
              console.log('no articles!');
              res.render('index', { 
                title: '首页', 
                articals : con
              });  
            }else{          for(var i = 0; i < character.length; i++){
                con[i] = {
                  _id: character[i]._id,
                  title: character[i].title,
                  detail: character[i].text.replace(/<[\/]{0,1}[a-zA-Z\s"'=;]{1,}>/g, ''),
                  author: character[i].creator.name,
                  createDate: character[i].createDate
                };
              }          //返回新的页码以及相应的10条数据
              res.render('index', { 
                title: '首页', 
                total: total,
                page: pageNum,
                articals : con
              });  
            }
          });
       });
      }
    });   
    
    module.exports = router;

    下面附加app.js的主要代码:// 模块依赖var express = require('express');

    var path = require('path');
        var logger = require('morgan');
        var http = require('http');
        var favicon = require('serve-favicon');
        var mongoose = require('mongoose');
        var bodyParser = require('body-parser');
        require('./models/schema');
        var user = mongoose.model('User');
        var cookieParser = require('cookie-parser');
        var session = require('express-session');
        var app = express();
        //日志设置app.use(logger('dev'));
        //图标设置app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
        //视图设置app.set('view engine', 'jade');
        app.set('views', path.join(__dirname, 'views'));
        //静态文件设置app.use(express.static(path.join(__dirname, 'public')));
        //表单数据解析app.use(bodyParser.json());
        app.use(bodyParser.urlencoded( {
        extended: true }
    ));
        //路由设置var routes = require('./routes/index');
        app.use('/', routes);
        //服务器设置var server = app.listen(8081, function () {
        var host = server.address().address var port = server.address().port console.log('server start on 127.0.0.1:8081');
    }
    )

    下面是本人实现的效果:

    首次进入首页:

    首次进入首页

    点击相应页面的效果:

    点击页码的效果


    以上就是node实现分页查询的方法的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:node 方法 查询
    上一篇:VSCode中预览markdown和修改预览样式 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • Node学习之如何最小化堆分配和防止内存泄漏• 深入解析JWT(JSON Web Token)的原理及用法• 聊聊Node项目中怎么操作MySQL• 聊聊Node.js中怎么用async函数• react native路由跳转怎么实现
    1/1

    PHP中文网