分页效果前端与后端

　　前端页面显示时有如下三步“”

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");

})