前端联调时用JS Mock实现分页数据模拟，核心是拦截请求并根据page、pageSize、keyword等参数动态生成含list、total、page、pageSize的响应结构，支持Mock.js或原生fetch拦截，需确保参数名与后端一致且total为过滤后总数。
前端联调时用 JS Mock 分页数据，核心是让接口返回符合分页结构的假数据（比如 { list: [...], total: 100, page: 1, pageSize: 10 }），同时能根据请求参数（如 page、pageSize、keyword）动态生成对应页的数据。不需要后端，本地就能模拟真实分页行为。
用 Mock.js 拦截请求并动态生成分页响应
Mock.js 是最常用方案，支持正则匹配 URL 和函数式响应。先安装：
然后在入口文件（如 main.js 或单独的 mock/index.js）中写：
Wjs Uploading Video
下载
将一个或多个视频上传至YouTube。当用户想“上传到YouTube”“发YouTube”“批量上传”“upload to YouTube”“post videos to YouTube”或发布到YouTube时使用此技能。
立即学习“前端免费学习笔记（深入）”；
import Mock from 'mockjs';
<p>// 模拟一个用户列表（100 条基础数据）
const userList = Mock.mock({
'list|100': [{
'id|+1': 1,
'name': '@cname',
'email': '@email',
'age|18-65': 1,
'status|1': ['active', 'inactive', 'pending']
}]
}).list;</p><p>// 拦截 GET /api/users?page=2&pageSize=10
Mock.mock(/\/api\/users/, 'get', (options) => {
const url = new URL('<a href="https://www.php.cn/link/13aa1df0f906a7db328f56a81aed2417">https://www.php.cn/link/13aa1df0f906a7db328f56a81aed2417</a>' + options.url);
const page = parseInt(url.searchParams.get('page')) || 1;
const pageSize = parseInt(url.searchParams.get('pageSize')) || 10;
const keyword = url.searchParams.get('keyword') || '';</p><p>// 过滤（简单字符串包含匹配）
let filtered = userList;
if (keyword) {
filtered = userList.filter(u =>
u.name.includes(keyword) || u.email.includes(keyword)
);
}</p><p>const total = filtered.length;
const start = (page - 1) * pageSize;
const end = start + pageSize;
const list = filtered.slice(start, end);</p><p>return {
code: 200,
message: 'success',
data: {
list,
total,
page,
pageSize
}
};
});
用原生 fetch 拦截（现代替代 Mock.js）
如果项目不用 Mock.js，或想更轻量，可用 window.fetch 重写拦截（仅开发环境）：
if (process.env.NODE_ENV === 'development') {
const originalFetch = window.fetch;
window.fetch = async (url, config) => {
if (url.includes('/api/users') && config?.method === 'GET') {
const urlObj = new URL(url);
const page = Number(urlObj.searchParams.get('page')) || 1;
const pageSize = Number(urlObj.searchParams.get('pageSize')) || 10;
const keyword = urlObj.searchParams.get('keyword') || '';
<pre class="brush:php;toolbar:false;"> // 复用上面生成的 userList 数据
let filtered = userList;
if (keyword) {
filtered = userList.filter(u =>
u.name.toLowerCase().includes(keyword.toLowerCase())
);
}
const total = filtered.length;
const list = filtered.slice((page - 1) * pageSize, page * pageSize);
return Promise.resolve({
json: () => Promise.resolve({
code: 200,
data: { list, total, page, pageSize }
})
});
}
return originalFetch(url, config);
}; }
配合 axios 封装分页请求（确保前端逻辑一致）
Mock 只是造数据，前端调用方式要和真实接口对齐。例如封装一个标准分页请求函数：
// api/user.js
export function fetchUserList(params) {
return axios.get('/api/users', { params });
}
<p>// 组件中使用（Vue/React 都适用）
const [list, setList] = useState([]);
const [pagination, setPagination] = useState({ page: 1, pageSize: 10, total: 0 });</p><p>useEffect(() => {
fetchUserList({ page: pagination.page, pageSize: pagination.pageSize, keyword })
.then(res => {
if (res.data.code === 200) {
setList(res.data.data.list);
setPagination(prev => ({
...prev,
total: res.data.data.total
}));
}
});
}, [pagination.page, pagination.pageSize, keyword]);
注意事项和调试技巧
Mock 分页容易出错的地方：
-
参数名必须和后端约定一致：比如后端用
current和size，你就不能写成page和pageSize，否则过滤失效 -
total 要基于过滤后总数：搜索时
total是匹配项总数，不是原始 100；否则分页器会显示错误页数 -
边界情况要覆盖：比如
page=999时返回空list，但total正确，前端分页器才不会崩溃 -
开发环境开关：用
process.env.NODE_ENV === 'development'包裹 Mock 逻辑，上线自动失效
