express ajax分页实例,element+express+mongoose实现分页查询
一個(gè)element配合express實(shí)現(xiàn)分頁查詢的思路與實(shí)現(xiàn)。
技術(shù)棧Element
Express
Mongoose
前端實(shí)現(xiàn)
前端的分頁使用了Element的分頁組件。
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-size="pageSize"
layout="total, prev, pager, next"
:total="count">
export default {
data () {
return {
count: 0,
currentPage: 1,
pageSize: 10
}
},
methods: {
// 獲取當(dāng)前頁碼并重新獲取數(shù)據(jù)
handleCurrentChange (val) {
this.currentPage = val
this._initData()
},
// 初始化數(shù)據(jù)，獲得數(shù)據(jù)數(shù)量以及每頁數(shù)據(jù)
_initData () {
let param = {
currentPage: this.currentPage,
pageSize: this.pageSize
}
axios.get('to/your/api').then((response) => {
let res = response.data
if (res.status === '0') {
this.count = res.result.count
}
})
axios.get('to/your/api', {
params: param
})
.then((response) => {
let res = response.data
if (res.status === '0') {
this.questionsList = res.result.list
} else {
this.questionsList = []
}
})
}
}
}
這里使用了兩個(gè)api，一個(gè)用來獲取數(shù)據(jù)總數(shù)，一個(gè)根據(jù)頁碼來獲取該頁數(shù)據(jù)。
后端實(shí)現(xiàn)
后端使用express+mongoose實(shí)現(xiàn)對數(shù)據(jù)的分頁查詢。
// 后端關(guān)鍵代碼
router.get("/show", (req, res, next) => {
let Questions = require('../models/questions') // 引入models
let currentPage = parseInt(req.param('currentPage')) // 轉(zhuǎn)換前端傳入當(dāng)前頁碼
let pageSize = parseInt(req.param('pageSize')) // 轉(zhuǎn)換前端傳入的每頁大小
let skip = (currentPage-1)*pageSize // 實(shí)現(xiàn)分割查詢的skip
let params = {}
// 使用mongoose的skip,limit兩個(gè)api對數(shù)據(jù)進(jìn)行跳躍查詢并返回查詢結(jié)果
let questionsModel = Questions.find(params).skip(skip).limit(pageSize)
questionsModel.exec((err, doc) => {
if (err) {
res.json({
status: '1',
msg: err.message
})
} else {
res.json({
status: '0',
msg: '',
result: {
list: doc
}
})
}
})
})
本文參考ELement文檔
mongoose中文文檔
總結(jié)
以上是生活随笔為你收集整理的express ajax分页实例,element+express+mongoose实现分页查询的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： ajax spring mvc 接收js
- 下一篇： pi节点虚拟服务器怎么弄,pi怎么用云服