前端页面显示时有以下三步“”
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");
})