一個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实现分页查询的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。