express ajax分页实例,element+express+mongoose实现分页查询
一個element配合express實現分頁查詢的思路與實現。
技術棧Element
Express
Mongoose
前端實現
前端的分頁使用了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: {
// 獲取當前頁碼并重新獲取數據
handleCurrentChange (val) {
this.currentPage = val
this._initData()
},
// 初始化數據，獲得數據數量以及每頁數據
_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 = []
}
})
}
}
}
這里使用了兩個api，一個用來獲取數據總數，一個根據頁碼來獲取該頁數據。
后端實現
后端使用express+mongoose實現對數據的分頁查詢。
// 后端關鍵代碼
router.get("/show", (req, res, next) => {
let Questions = require('../models/questions') // 引入models
let currentPage = parseInt(req.param('currentPage')) // 轉換前端傳入當前頁碼
let pageSize = parseInt(req.param('pageSize')) // 轉換前端傳入的每頁大小
let skip = (currentPage-1)*pageSize // 實現分割查詢的skip
let params = {}
// 使用mongoose的skip,limit兩個api對數據進行跳躍查詢并返回查詢結果
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中文文檔
總結
以上是生活随笔為你收集整理的express ajax分页实例,element+express+mongoose实现分页查询的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： ajax spring mvc 接收js
- 下一篇： pi节点虚拟服务器怎么弄,pi怎么用云服