后端

const Koa = require('koa2');
const Router = require('koa-router');
const Monk = require('monk');//链接mongodb数据库中间件
const app = new Koa();
const router=new Router();
const db=new Monk('localhost/school');
const students = db.get('article');
const bodyParser = require('koa-bodyparser')//解析请求参数中间件
app.use(bodyParser())
app.use(async (ctx, next) => {
console.log(`请求信息:\n 方式: ${ctx.request.method} \n 地址:${ctx.request.url}...`);
ctx.set("Access-Control-Allow-Origin", "*");
await next();//相当于java的filter放行
});
router
.get('/', async ( ctx ) => {
ctx.response.type = 'text/html';
ctx.body = 'hi'
})
.post('/vueDemo/getStudents', async ( ctx ) => {
let totle = await students.count();//表总记录数
//koa-bodyparser解析前端参数
let reqParam= ctx.request.body;//
let page = Number(reqParam.page);//当前第几页
let size = Number(reqParam.size);//每页显示的记录条数
//显示符合前端分页请求的列表查询
let options = { "limit": size,"skip": (page-1)*size};
let st = await students.find({},options,function(err,docs){
if (err) {console.log(err);return;}
else{console.log(docs);return;}
});
//是否还有更多
let hasMore=totle-(page-1)*size>size?true:false;
ctx.response.type = 'application/json';
//返回给前端
ctx.body = {hasMore:hasMore,students:st,totle:totle};
})
app.use(router.routes());
app.listen(3000, () => {
console.log('[myapp]已经运行,端口为300')
})

数据库

{"name" : "小明","age" : 10.0}
{"name" : "丁少华", "age" : 20}
{"name" : "小张","age" : 18.0}
{"name" : "王新","age" : 30.0}
{"name" : "小红","age" : 16.0}

前端

<template>
<div class="artList" >
<!--列表-->
<ul class="content">
<li v-for="st in students">
<div>{{st.name}}</div>
<div>{{st.age}}</div>
</li>
</ul>
<!--分页-->
<div class="pageinfo">
共{{totle}}条记录
<button v-on:click="fy('s')">上一页</button>
<button v-on:click="fy('x')" >下一页</button>
当前第{{page}}页
</div>
</div>
</template>
<script>
export default {
name:'artlistCmp',
data() {return { page:1,totle:0,students:[],hasMore:false,title:''}},
methods:{
getStudent(){
var vm=this;
this.service.getStudent({page:vm.page,size:3}).then(function(rep) {
vm.totle=rep.data.totle;
vm.students=rep.data.students;
vm.hasMore=rep.data.hasMore;
})
},
fy(param){
if(param=='x'){
if(!this.hasMore){alert('已经是最后一页了'); return false;}
this.page++
}else{
if(this.page==1){ alert('已经是首页了');return false; }
this.page--
}
this.getStudent()
}
},
created(){this.getStudent();}
}
</script>
<style>
.artList{width: 100%}
.list{width: 100%}
li{
display: block;
height: 140px;
background-color: aliceblue;
margin-bottom: 20px;
}
</style>

效果

vue2+koa2+mongodb分页的更多相关文章

  1. MongoDB 分页查询的方法及性能

    最近有点忙,本来有好多东西可以总结,Redis系列其实还应该有四.五.六...不过<Redis in Action>还没读完,等读完再来总结,不然太水,对不起读者. 自从上次Redis之后 ...

  2. 基于vue2.0的分页组件开发

    今天安排的任务是写基于vue2.0的分页组件,好吧,我一开始是觉得超级简单的,但是越写越写不出来,写的最后乱七八糟的都不知道下句该写什么了,所以重新捋了思路,小结一下- 首先写组件需要考虑: 要从父组 ...

  3. C#MongoDB 分页查询的方法及性能

    传统的SQL分页 传统的sql分页,所有的方案几乎是绕不开row_number的,对于需要各种排序,复杂查询的场景,row_number就是杀手锏.另外,针对现在的web很流行的poll/push加载 ...

  4. vue2.0实现分页组件

    最近使用vue2.0重构项目, 需要实现一个分页的表格, 没有找到合适的组件, 就自己写了一个, 效果如下: 该项目是使用 vue-cli搭建的, 如果你的项目中没有使用webpack,请根据代码自己 ...

  5. 基于 Vue + Koa2 + MongoDB + Redis 实现一个完整的登录注册

    项目地址:https://github.com/caochangkui/vue-element-responsive-demo/tree/login-register 通过 vue-cli3.0 + ...

  6. MongoDB分页的Java实现和分页需求的思考

    前言 传统关系数据库中都提供了基于row number的分页功能,切换MongoDB后,想要实现分页,则需要修改一下思路. 传统分页思路 假设一页大小为10条.则 //page 1 1-10 //pa ...

  7. mongodb分页

    1 什么是mongodb的分页 就是一次返回表中的连续若干行. 2 什么是sql分页 同样是返回表中的连续若干行. 3 如何实现sql分页 利用order by xxx limit xxx 4 如何实 ...

  8. 基于node+koa2+mongodb实现简单的导航管理系统

    基于node+koa2+mongodb实现简单的导航管理系统 项目说明 本项目gitbub地址 https://github.com/xuess/nav-admin,喜欢请star 基于node 实现 ...

  9. MongoDB分页查询优化方法

    在网上看到很多关于MongoDB分页查询优化的文章,如出一辙.笔者自己实际生产中也遇到此问题,所以看了很多篇文章,这里分享一篇简明扼要的文章分享给大家,希望对大家在使用MongoDB时有所帮助. 凡事 ...

随机推荐

  1. typecho篇

    百度百科的介绍: Typecho是由type和echo两个词合成的,来自于开发团队的头脑风暴. Typecho基于PHP5开发,支持多种数据库,是一款内核强健﹑扩展 方便﹑体验友好﹑运行流畅的轻量级开 ...

  2. android从放弃到坚持放弃第二课(下)

    续第二课( 下) 续第二课 下 活动的生命周期 返回栈 活动状态 活动的生存期 体验活动的生命周期 活动被回收怎么办 活动的启动模式 standard singleTop singleTask sin ...

  3. 深入理解JS之Scope链

    JS被很多人认为是『拙劣的语言』,被这门语言里的各种离奇的事情整的团团转,这篇文章主要来讲讲JS中的Scope链,其主要是影响JS中的变量作用域. 注:本文适合稍有一定JS基础的同学 目录: 初步认识 ...

  4. css+jq写的小小的移动端按钮的动画改变(三个很闲变成一个叉号)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. handlebars Helper用法

    handlebars  Helper用法:  http://www.cnblogs.com/iyangyuan/archive/2013/12/12/3471357.html 逻辑运算符在handle ...

  6. .net winform 调用类中的webbrowser 报错:当前线程不在单线程单元中,因此无法实例化 ActiveX

    遇到这个恶心的问题纠缠得不要不要的,大家遇到了的话希望不要走弯路,经过这个折腾让我有点怀疑人生了.哈哈哈 解决代码如下: //插入一个新线程用于处理验证码 Thread thd = new Threa ...

  7. Spoken English Practice(And I can't walk. Should i just stay home and pout about it?)

    绿色:连读:                  红色:略读:               蓝色:浊化:               橙色:弱读     下划线_为浊化 口语蜕变(2017/7/12) ...

  8. HDU3535——AreYouBusy

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3535 题目意思:给出两个数n,T,分别表示有n个任务集合,T的总时间,对于每个任务集合有两个属性m和t ...

  9. 自己开发Thinkpad电源管理程序

    自己开发Thinkpad电源管理程序 - 知乎 https://zhuanlan.zhihu.com/p/20706403

  10. Spring Data 分页和排序 PagingAndSortingRepository的使用(九)

    继承PagingAndSortingRepository 我们可以看到,BlogRepository定义了这样一个方法:Page<Blog> findByDeletedFalse(Page ...