?
Node.js分页接口与前端表格组件对接指南
1. 后端分页接口设计（Node.js/Express）
核心参数：
page：当前页码（从1开始）
pageSize：每页数据量
返回结构：
{
"code": 200,
"data": {
"list": [], // 当前页数据
"total": 100, // 总数据量
"page": 1, // 当前页码
"pageSize": 10 // 每页条数
}
}
接口实现示例：
// Express路由
app.get('/api/data', async (req, res) => {
const page = parseInt(req.query.page) || 1;
const pageSize = parseInt(req.query.pageSize) || 10;
try {
// 1. 获取总数据量
const total = await Model.countDocuments();
// 2. 计算分页参数
const skip = (page - 1) * pageSize;
// 3. 查询当前页数据
const list = await Model.find()
.skip(skip)
.limit(pageSize);
// 4. 返回分页结构
res.json({
code: 200,
data: { list, total, page, pageSize }
});
} catch (err) {
res.status(500).json({ code: 500, message: err.message });
}
});
2. 前端表格对接（Vue + Element UI）
组件结构：
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[10, 20, 50]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next"
:total="total"
/>
核心逻辑：
export default {
data() {
return {
tableData: [], // 表格数据
currentPage: 1, // 当前页码
pageSize: 10, // 每页条数
total: 0 // 总数据量
};
},
mounted() {
this.fetchData();
},
methods: {
// 获取分页数据
async fetchData() {
const params = {
page: this.currentPage,
pageSize: this.pageSize
};
const res = await axios.get('/api/data', { params });
this.tableData = res.data.data.list;
this.total = res.data.data.total;
},
// 每页条数变化
handleSizeChange(size) {
this.pageSize = size;
this.fetchData();
},
// 页码变化
handleCurrentChange(page) {
this.currentPage = page;
this.fetchData();
}
}
};
3. 关键对接点
前端通过page和pageSize参数请求
后端通过skip和limit实现分页查询
返回字段需包含list(当前页数据)和total(总数据量)
前端根据total计算总页数：$$ \text{总页数} = \lceil \frac{\text{total}}{\text{pageSize}} \rceil $$
后端：数据库查询使用索引优化skip/limit
前端：添加防抖处理频繁分页请求
4. 常见问题处理
// 后端校验
if (page < 1 || pageSize <= 0) {
return res.status(400).json({ error: "Invalid pagination params" });
}
暂无数据
let fetchId = 0;
async function fetchData() {
const currentId = ++fetchId;
const res = await axios.get(...);
if (currentId === fetchId) {
// 处理最新请求结果
}
}
?
