html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>分页器</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul {
display: flex;
list-style: none;
display: flex;
justify-content: center;
}
li {
text-align: center;
border: 1px solid #000;
padding: 10px;
width: 150px;
list-style: none;
display: inline-block;
}
button{
background-color: #00BFFF;
padding: 3px 10px;
border: none;
color: white;
border-radius: 5px;
}
</style>
</head>
<body>
<div id="content">
<ul>
<li>日期</li>
<li>ID</li>
<li>名称</li>
<li>价格</li>
<li>数量</li>
</ul>
<div id="tab"></div>
</div>
<div id="pageEl"></div>
</body>
<script src="pagination.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
let tab = document.getElementById("tab")
let page = new Pagination("pageEl",4,"/goods");
page.bindData(getData)
function getData(data){
tab.innerHTML = ""
data.forEach(i => {
//创建一个ul
let oul = document.createElement("ul")
for(j in i){
if(j == "dateTime"){
i[j] = getDates(i[j])
}
//追加字符串并截取
oul.innerHTML += `
<li>${i[j].toString().slice(-11)}</li>
`
}
//渲染到页面
tab.appendChild(oul)
})
}
//声明一个转换为时间字符串的方法
function getDates(s){
let time = new Date(s);
return `${time.getFullYear()}-${time.getMonth()+1}-${time.getDate()}`
}
</script>
</html>
pagination.js:
(function(){
function pagination(el,onePageNum,url){
this.url = url;
this.el = document.getElementById(el);
this.prev = document.createElement("button");
this.next = document.createElement("button");
this.pageNumber = document.createElement("div");
this.go = document.createElement("input");
this.onePageNum = onePageNum;
this.totalNum = 0;
this.pageNum = 0;
this.current = 1;
//开局执行
this.__init();
}
pagination.prototype = {
__init(){
this.getTotal();
this.Html();
this.Css();
this.Click();
this.publish();
},
getTotal(){
let xhr =new XMLHttpRequest;
xhr.open("GET","/goodsTotal",false)
xhr.onload = () =>{
if(xhr.status == 200){
this.totalNum = xhr.responseText
}
}
xhr.send()
this.pageNum = Math.ceil(this.totalNum/this.onePageNum)
},
Html(){
this.prev.innerHTML = "<";
this.next.innerHTML = ">";
for(let i=1;i<=this.pageNum;i++){
let btn = document.createElement("button");
btn.innerHTML = i;
this.pageNumber.appendChild(btn);
}
//往元素中追加
this.el.appendChild(this.prev);
this.el.appendChild(this.pageNumber);
this.el.appendChild(this.next);
this.el.appendChild(this.go);
},
Css(){
this.el.style.display = "flex";
this.el.style.justifyContent = "center";
let btn = this.el.getElementsByTagName("button");
[...btn].forEach(i => {
i.style.margin = "30px 4px"
i.style.padding = "3px 10px"
})
this.go.style.width = "50px";
this.go.style.height = "20px";
this.go.style.margin = "30px 4px"
},
//默认第一个的背景颜色
publish(){
[...this.pageNumber.children].forEach(i => {
i.style.backgroundColor = "#00BFFF"
})
this.pageNumber.children[this.current-1].style.backgroundColor = "aquamarine";
if(this.current == 1){
this.prev.disabled = "disabled";
this.prev.style.background = "#ccc";
}else{
this.prev.disabled = "";
this.prev.style.background = "#00BFFF";
}
if(this.current == this.pageNum){
this.next.disabled = "disabled";
this.next.style.background = "#ccc";
}else{
this.next.disabled = "";
this.next.style.background = "#00BFFF";
}
},
//封装一个方法用来判断每次输出的数据条数
getData(current){
let xhr =new XMLHttpRequest;
xhr.open("GET",this.url + "?cur=" + current + "&onepage=" + this.onePageNum,false)
xhr.onload = () =>{
if(xhr.status == 200){
let data = JSON.parse(xhr.responseText);
this.fn(data)
}
}
xhr.send()
},
bindData(fn){
this.fn = fn;
this.getData()
},
Click(){
[...this.pageNumber.children].forEach((i,index,def) => {
i.onclick = () => {
this.current = i.innerHTML;
this.publish();
this.getData(this.current)
}
})
this.prev.onclick = () => {
this.current --
this.publish();
this.getData(this.current)
};
this.next.onclick = () => {
this.current ++;
this.publish();
this.getData(this.current)
};
let that = this;
this.go.onkeydown = function(e){
if(e.keyCode == 13){
that.current = this.value
if(isNaN(this.value)){
this.value = "";
return;
}
if(this.value < 1){
that.current = 1;
}
if(this.value > that.pageNum){
that.current = +that.pageNum;
}
that.publish();
that.getData(+that.current);
this.value = "";
}
}
}
}
window.Pagination = pagination;
}())
server.js:
//连接第三方库
let Koa = require("koa");
let Static = require("koa-static");
let body = require("koa-body");
let Router = require("koa-router")
let {goods} = require("./mongo.js")
//实例化
let server = new Koa()//服务器对象
//监听
server.listen(8030,err => {
console.log("8030")
})
//先处理静态资源
server.use(Static("./src"))
//处理post请求中发来的数据
server.use(body())//可以任意使用ctx.request.body
//前端发送请求
//对应一个借口接收前端的请求
//创建路由器
//实例化一个具体的路由对象
let router = new Router()
//写接口
router.get("/goodsTotal",async (ctx,next) => {
ctx.body = await goods.countDocuments();
})
router.get("/goods",async (ctx,next) => {
let onePage = ctx.query.onepage;
let cur = ctx.query.cur;
ctx.body = await goods.find({},{id:0,brand:0,info:0,__v:0}).skip(onePage*(cur-1)).limit(+onePage);
})
//把路由挂载到server上
server.use(router.routes())```