分頁效果前端與後端

　　前端頁面顯示時有如下三步「」

1. 加載數據 => options;

2. 渲染頁面;

3. 事件綁定;

 　　前端分頁代碼：

function Pagination(url,event_dom){

if(!url) throw new Error().message = "請傳入url參數";

this.options = {

url:url,

data:null,

dataType:"json"

}

this.init();

if(event_dom){

this.add_event(event_dom);

}

}

Pagination.prototype = {

constructor: Pagination,

init:function(){

this.load_json();

},

add_event:function(dom){

var _this = this;

dom.click(function(){

_this.options = $.extend(_this.options,{data:{page:$(this).index()}})

_this.load_json.call(_this);

})

},

load_json:function(){

$.ajax(this.options)

.done($.proxy(this.render_page,this))

.fail(this.error)

},

render_page:function(res){

if (res.length == 0) return 0;

let html = "";

res.data.forEach(function(item,index){

let temp = `<li>

<img src="${item.images.small}">

<h3>${item.title}</h3>

</li>`

html += temp;

})

$('.container ul').html(html);

},

error:function(err){

console.log(err.state);

}

}

new Pagination("http://localhost:3000/pagination",$(".btn span"));

})

 

後臺的基於mongodb數據庫鏈接：

 

import express from "express";

import mongodb from "mongodb";

const mongo = mongodb.MongoClient;

const app = express();

//主頁路由設置;

//前端路由;

app.get("/",(req,res)=>{

res.sendFile(__dirname+"/views/index.html");

})

//接口路由;

app.get("/pagination",(req,res)=>{

// 查看前端發送的 page 字段的數據;

// console.log(req.query.page);

// 連接數據庫;獲取數據；返回數據;

// res.send("[1,2,3,4,5]");

// console.log(mongo);

//斷定前端是否傳入數據; 若是值爲空那麼賦值爲0;

let page = req.query.page;

page = page ? parseInt(page) : 0 ;

//連接數據庫並返回數據;

mongo.connect("mongodb://localhost:27017",(err,client)=>{

let odb = client.db("hello");

//設計分頁邏輯 => skip | limit 來執行; skip 上的page值 => 前端發送的內容;

odb.collection("movie")

.find({})

.skip(page * 5)

.limit(5)

.toArray((err,result)=>{

let oResult = Object.assign({},{

data:result

});

res.send(oResult);

})

});

})

//端口監聽;

app.listen("3000","localhost",()=>{

console.log("服務開啓成功,請訪問 http://localhost:3000");

})