node+mongoose分页效果

---

提示：以下是本篇文章正文内容啦~

一、mongoose基础分页公式

page：当前页 PageSize：当前页限制的数量
下面公式的意思是：从数据库中提取出所有的数据，首先跳过(page -1)*PageSize个数据，然后限制数量，只取出PageSize个数据。

Model.find({}).skip((page -1)*PageSize).limit(PageSize)

在这个公式的基础上，可以根据自己的实际需求进行修改。

二、前台传递page值

后台只有获取到当前页面的page，才能够正确的返回对应的数据。
点击获取更多数据按钮时，将当前的页面page值通过axios发送给后台，等待后台返回数据状态；如果status的值是entend，说明获取数据超过了数据库的库存，则提示（没有更多内容了哦）；否则将拿到的后台数据添加进原数据中，重新进行页面渲染。

// 具体实现通过redux dispatch一个axios到后台，通过query携带上page参数。
export const getMoreList = (page) => {
    return (
        (dispatch) => {
            console.log(`当前的页码${page}`);
            axios.get(`/api/homeList?page=${page}`)
            .then((req) => {
                if(req.data.status === 'extend') {
                    message.success('没有更多内容了哦~');                        
                }else {
                    const datas = req.data;
                    const action = {
                    type: 'loadMoreList',
                    value: fromJS(datas.data),
                    nextPage: page+1,
                }
                dispatch(action);
                }
            })
        }
    )
}

期间还要解决首页直接获取数据（放到componentDidMount中），但新的问题又出现了，页面跳转到首页后，会重新渲染，重新执行componentDidMount。导致显示的列表数据会不断的获取。我的解决方案是在获取数据之前，先进行数据清空，这样操作之后，就不会因为渲染而产生初试数据的叠加。

    componentDidMount() {
        // window.location.reload();
        if(this.props.acticlePage === 1) {
            this.props.handleClearContent();        
            this.props.handleListContent(this.props.acticlePage);
        }
    }
    //派发一个clearList的action给reducer，进行清空List数据
    handleClearContent() {
		const action = {
			type: 'clearList'
			}
			dispatch(action)
	}

三、后台分页路由

通过Model.count({ })可以获取该模型的数据库中，总共有多少数据，用于判断，在回调中进行数据库查找返回数据等相应的处理。如果超出则返回status: “extend”,。反之继续执行，返回相应的数据。

router.get('/', (req, res, next) => {
    const {page} = req.query;
    const PageSize = 2;
    let countNum = 0;
    // let countNum = HomeList.estimatedDocumentCount({});
    HomeList.count({}, (err, count) => {
        // console.log('总共有多少', count);
        if(((page -1)*PageSize+1)>=count) {
        res.send({
            status: "extend",
        })
    }else {
        HomeList.find({}).skip((page -1)*PageSize+1).limit(PageSize)
        .then((dosc) => {
            res.send({
                status: "success",
                data: dosc,
                count: countNum
            })
            return res;
        })
        .catch((error) => {
            console.log(`分页失败${error}`);
            return false;
            })
        }
    });
})

四、实际效果

最后一次点击显示如下：

---

总结

分页获取数据