目錄
在本例中,用到的相關框架和範本包含:jade、mongoose、express、layui。
第一次進入首頁:
點選對應頁面的效果:
首頁 web前端 js教程 node實作分頁查詢的方法

node實作分頁查詢的方法

Oct 14, 2017 am 09:57 AM
node 方法 查詢


在本例中,用到的相關框架和範本包含: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 = &#39;/details?id=#{articals[i]._id}&#39;)= 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([&#39;laypage&#39;, &#39;layer&#39;], function(){
          var laypage = layui.laypage;
          laypage.render({
            elem: &#39;pager&#39;
            ,count: #{total}
            ,curr:(&#39;#{page}&#39;||1)
            ,jump: function(obj, first){
              if(!first){
                window.location.href = &#39;/index/&#39;+obj.curr;
              }
            }
          });
         });      else
       h2 快去发表一篇文章吧~  #footer
       .container.text-center
            p 版权所有 &copy; 2017 LorettaXiongField
登入後複製

index.js main code:

var express = require(&#39;express&#39;);  
var mongoose = require(&#39;mongoose&#39;);require(&#39;../models/schema&#39;);var article = mongoose.model(&#39;Article&#39;);var user = mongoose.model(&#39;User&#39;);var url = require(&#39;url&#39;);var router = express.Router();  
//处理get请求router.get(&#39;/&#39;, function(req, res, next) {  
  var con = [];
  article.find({}).exec(function(err, doc){
    var total = doc.length;    //按时间顺序查找前10条文章的数据
    article.find({}).sort({createDate: -1}).populate(&#39;creator&#39;, &#39;name&#39;).limit(10).exec(function(err, character){
    //添加容错措施
        if(err){
          console.log(err);
        }else if(character.length == 0){        //没有任何文章,就直接返回
          console.log(&#39;no articles!&#39;);
          res.render(&#39;index&#39;, { 
            title: &#39;首页&#39;, 
            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"&#39;=;]{1,}>/g, &#39;&#39;),
              author: character[i].creator.name,
              createDate: character[i].createDate
            };
          }          //返回文章总数以及前10条数据
          res.render(&#39;index&#39;, { 
            title: &#39;首页&#39;, 
            total: total,
            articals : con
          });  
        }
      });
  })
});   

//处理带有页码参数的get请求router.get(&#39;/index/:page&#39;, 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(&#39;creator&#39;, &#39;name&#39;).skip((pageNum-1)*10).limit(10).exec(function(err, character){
    //添加容错措施
        if(err){
          console.log(err);
        }else if(character.length == 0){
          console.log(&#39;no articles!&#39;);
          res.render(&#39;index&#39;, { 
            title: &#39;首页&#39;, 
            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"&#39;=;]{1,}>/g, &#39;&#39;),
              author: character[i].creator.name,
              createDate: character[i].createDate
            };
          }          //返回新的页码以及相应的10条数据
          res.render(&#39;index&#39;, { 
            title: &#39;首页&#39;, 
            total: total,
            page: pageNum,
            articals : con
          });  
        }
      });
   });
  }
});   

module.exports = router;
登入後複製

下面附加app.js的主要程式碼:// 模組依賴var express = require('express' );
    

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

以下是本人實現的效果:

第一次進入首頁:

node實作分頁查詢的方法

點選對應頁面的效果:

node實作分頁查詢的方法


#

以上是node實作分頁查詢的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱門文章

兩個點博物館:邦格荒地地點指南
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章

兩個點博物館:邦格荒地地點指南
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章標籤

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

怎麼在番茄免費小說app中寫小說 分享番茄小說寫小說方法教程 怎麼在番茄免費小說app中寫小說 分享番茄小說寫小說方法教程 Mar 28, 2024 pm 12:50 PM

怎麼在番茄免費小說app中寫小說 分享番茄小說寫小說方法教程

七彩虹主機板怎麼進入bios?教你兩種方法 七彩虹主機板怎麼進入bios?教你兩種方法 Mar 13, 2024 pm 06:01 PM

七彩虹主機板怎麼進入bios?教你兩種方法

微信刪除的人如何找回(簡單教學告訴你如何恢復被刪除的聯絡人) 微信刪除的人如何找回(簡單教學告訴你如何恢復被刪除的聯絡人) May 01, 2024 pm 12:01 PM

微信刪除的人如何找回(簡單教學告訴你如何恢復被刪除的聯絡人)

學信網如何查詢自己的學歷 學信網如何查詢自己的學歷 Mar 28, 2024 pm 04:31 PM

學信網如何查詢自己的學歷

快速掌握:華為手機開啟兩個微信帳號方法大揭密! 快速掌握:華為手機開啟兩個微信帳號方法大揭密! Mar 23, 2024 am 10:42 AM

快速掌握:華為手機開啟兩個微信帳號方法大揭密!

手機版龍蛋孵化方法大揭密(一步一步教你如何成功孵化手機版龍蛋) 手機版龍蛋孵化方法大揭密(一步一步教你如何成功孵化手機版龍蛋) May 04, 2024 pm 06:01 PM

手機版龍蛋孵化方法大揭密(一步一步教你如何成功孵化手機版龍蛋)

12306怎麼查詢歷史購票紀錄 查看歷史購票紀錄的方法 12306怎麼查詢歷史購票紀錄 查看歷史購票紀錄的方法 Mar 28, 2024 pm 03:11 PM

12306怎麼查詢歷史購票紀錄 查看歷史購票紀錄的方法

手機字體大小設定方法(輕鬆調整手機字體大小) 手機字體大小設定方法(輕鬆調整手機字體大小) May 07, 2024 pm 03:34 PM

手機字體大小設定方法(輕鬆調整手機字體大小)

See all articles