vue2+koa2+mongodb分页
后端
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分页的更多相关文章
- MongoDB 分页查询的方法及性能
最近有点忙,本来有好多东西可以总结,Redis系列其实还应该有四.五.六...不过<Redis in Action>还没读完,等读完再来总结,不然太水,对不起读者. 自从上次Redis之后 ...
- 基于vue2.0的分页组件开发
今天安排的任务是写基于vue2.0的分页组件,好吧,我一开始是觉得超级简单的,但是越写越写不出来,写的最后乱七八糟的都不知道下句该写什么了,所以重新捋了思路,小结一下- 首先写组件需要考虑: 要从父组 ...
- C#MongoDB 分页查询的方法及性能
传统的SQL分页 传统的sql分页,所有的方案几乎是绕不开row_number的,对于需要各种排序,复杂查询的场景,row_number就是杀手锏.另外,针对现在的web很流行的poll/push加载 ...
- vue2.0实现分页组件
最近使用vue2.0重构项目, 需要实现一个分页的表格, 没有找到合适的组件, 就自己写了一个, 效果如下: 该项目是使用 vue-cli搭建的, 如果你的项目中没有使用webpack,请根据代码自己 ...
- 基于 Vue + Koa2 + MongoDB + Redis 实现一个完整的登录注册
项目地址:https://github.com/caochangkui/vue-element-responsive-demo/tree/login-register 通过 vue-cli3.0 + ...
- MongoDB分页的Java实现和分页需求的思考
前言 传统关系数据库中都提供了基于row number的分页功能,切换MongoDB后,想要实现分页,则需要修改一下思路. 传统分页思路 假设一页大小为10条.则 //page 1 1-10 //pa ...
- mongodb分页
1 什么是mongodb的分页 就是一次返回表中的连续若干行. 2 什么是sql分页 同样是返回表中的连续若干行. 3 如何实现sql分页 利用order by xxx limit xxx 4 如何实 ...
- 基于node+koa2+mongodb实现简单的导航管理系统
基于node+koa2+mongodb实现简单的导航管理系统 项目说明 本项目gitbub地址 https://github.com/xuess/nav-admin,喜欢请star 基于node 实现 ...
- MongoDB分页查询优化方法
在网上看到很多关于MongoDB分页查询优化的文章,如出一辙.笔者自己实际生产中也遇到此问题,所以看了很多篇文章,这里分享一篇简明扼要的文章分享给大家,希望对大家在使用MongoDB时有所帮助. 凡事 ...
随机推荐
- typecho篇
百度百科的介绍: Typecho是由type和echo两个词合成的,来自于开发团队的头脑风暴. Typecho基于PHP5开发,支持多种数据库,是一款内核强健﹑扩展 方便﹑体验友好﹑运行流畅的轻量级开 ...
- android从放弃到坚持放弃第二课(下)
续第二课( 下) 续第二课 下 活动的生命周期 返回栈 活动状态 活动的生存期 体验活动的生命周期 活动被回收怎么办 活动的启动模式 standard singleTop singleTask sin ...
- 深入理解JS之Scope链
JS被很多人认为是『拙劣的语言』,被这门语言里的各种离奇的事情整的团团转,这篇文章主要来讲讲JS中的Scope链,其主要是影响JS中的变量作用域. 注:本文适合稍有一定JS基础的同学 目录: 初步认识 ...
- css+jq写的小小的移动端按钮的动画改变(三个很闲变成一个叉号)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- handlebars Helper用法
handlebars Helper用法: http://www.cnblogs.com/iyangyuan/archive/2013/12/12/3471357.html 逻辑运算符在handle ...
- .net winform 调用类中的webbrowser 报错:当前线程不在单线程单元中,因此无法实例化 ActiveX
遇到这个恶心的问题纠缠得不要不要的,大家遇到了的话希望不要走弯路,经过这个折腾让我有点怀疑人生了.哈哈哈 解决代码如下: //插入一个新线程用于处理验证码 Thread thd = new Threa ...
- Spoken English Practice(And I can't walk. Should i just stay home and pout about it?)
绿色:连读: 红色:略读: 蓝色:浊化: 橙色:弱读 下划线_为浊化 口语蜕变(2017/7/12) ...
- HDU3535——AreYouBusy
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3535 题目意思:给出两个数n,T,分别表示有n个任务集合,T的总时间,对于每个任务集合有两个属性m和t ...
- 自己开发Thinkpad电源管理程序
自己开发Thinkpad电源管理程序 - 知乎 https://zhuanlan.zhihu.com/p/20706403
- Spring Data 分页和排序 PagingAndSortingRepository的使用(九)
继承PagingAndSortingRepository 我们可以看到,BlogRepository定义了这样一个方法:Page<Blog> findByDeletedFalse(Page ...