vue3+nestjs+mongoose分页的实现

第一次用node写后台，写的有些不尽人意，记录一下

分页首先我想的就是用element-ui的paginate来写，它需要总的条目数total，当前页currentpage，一页的条目数pageSize以及一个获取分页表格的方法getList，解决这四个东西就可以在前端实现分页。

<el-pagination background layout="prev, pager, next"
class="pagination"
v-model:total="total"
:page-size="paramForm.pager.pageSize"
v-model:current-page="paramForm.pager.currentPage"
@current-change="getList"
>
</el-pagination>

这个当前页currentPage是用v-model和setup里ref代理的数据相绑定的，因为如果在用户操作分页组件的时候，只有currentPage是由用户操作变化的。

和分页相关的ref数据结构是这样的

let paramForm = reactive({
    map: {
        state: '未领养',
        type:"",
        sex:"",
        name:""
    },
    pager: {
        currentPage: 1,
        pageSize: 3
    }
})
let total=ref<number>(1)

然后接下来就是和向后端索要数据的方法

function getList() {
    _getAnimalsList(paramForm)
    .then(res => {
        total.value=res.data.msg.total
        animalForm.value=res.data.msg.form
    })
}

   把paramForm传给后端，这里需要注意的是_getAnimalsList是用axios实现的后端接口，如果没有对axios进行封装设置拦截之类的话，通过get方法，和params传参传过去的虽然还是一个对象，但是只有第一层，例如paramForm中map和pager两个属性还在，但是map里面的数据就会是相应的字符串，这边我在后台会讲如何解决。

   首先后台的control层相应的方法代码是这样的

public async getAnimalList(@Query() query){
        let map:queryForm=JSON.parse(query.map)
        let pager:Pager=JSON.parse(query.pager)
        return await this.animalService.getAnimalsList(map,pager)
    }

这边用JSON.parse就是为了解决穿过来的对象就只有一层的问题。虽然我感觉这样解决怪怪的，如果有大佬看见帮忙指点一下谢谢T.T。

这边@Query装饰器，获取的是request.query，虽然axios用的是params，但是数据在后端确实是在request.query里面，nest相应control层的装饰器对应表（当然这个表我是在搜的时候嫖的，博主好像是叫墨水白云0.0感谢大佬）

 接下来是service层

public async getAnimalsList(query:queryForm,pager:Pager){
        const map:queryForm={}
        if(query.name&&query.name!==''){
            map.name=query.name
        }
        if(query.sex&&query.sex!==''){
            map.sex=query.sex
        }
        if(query.type&&query.type!==''){
            map.type=query.type
        }
        if(query.state&&query.state!==''){
            map.state=query.state
        }
        let total:number=await this.animalModel.countDocuments(map)
        return await this.animalModel.find(map)
        .skip(pager.currentPage? (pager.currentPage-1)*pager.pageSize:0)
        .limit(pager.pageSize)
        .then(res=>{
            this.response={
                code:0,
                msg:{
                    form:res,
                    total:total
                }
            }
            return this.response
        })
        .catch(err=>{
            this.response={
                code:4,
                msg:'查询错误，错误详情：'+err
            }
            throw this.response
        })
    }

因为前端传过来的map是为了用户搜索的时候用的，有的时候里面有些数据是空的，所以要对里面的数据进行非空判断，接下来就是先按符合map搜索要求的总条数用countDocuments进行获取，

然后就是通过find(获得所有符合map条件的条目)，然后skip(跳过当前页之前的条目数)，limit(将pageSize大小的条目进行获取，比如pageSize是三，就获得前面条件筛选下来的条目的前三条)

最后再把获取的数据和条目总数total返回给前端就行了

最后的效果应该是这样的