Mirage JS后端模拟问题：如何在createList生成响应后添加分页数据

我来帮你搞定这个问题！想要在Mirage JS返回的响应里加上分页信息（比如page和total），你只需要自定义路由的处理函数，手动构造返回的响应对象就行，不用直接返回createList的结果。

方法一：固定分页信息（适合简单场景） #

如果只是需要固定返回page:1和total:10，直接在路由里把createList生成的列表和分页字段一起返回就好：

import { createServer, Model, createList } from "miragejs";

createServer({
  models: {
    user: Model,
  },

  routes() {
    this.namespace = 'api';

    this.get('/users', () => {
      // 生成3个用户数据
      const users = createList('user', 3);
      // 构造包含分页信息的响应
      return {
        users: users,
        page: 1,
        total: 10
      };
    });
  },
});

方法二：支持动态分页（更实用的场景） #

如果需要根据前端传入的page参数返回对应页的数据，同时返回真实的总数据量，可以这样写：

import { createServer, Model, createList } from "miragejs";

createServer({
  models: {
    user: Model,
  },

  // 先预生成10个用户数据，对应total:10
  seeds(server) {
    server.createList('user', 10);
  },

  routes() {
    this.namespace = 'api';

    this.get('/users', (schema, request) => {
      // 获取前端传入的page参数，默认显示第1页
      const currentPage = parseInt(request.queryParams.page) || 1;
      // 定义每页显示的条数
      const perPage = 3;
      // 获取所有用户的总数量
      const totalUsers = schema.users.all().length;
      // 计算当前页数据的起始和结束索引
      const startIdx = (currentPage - 1) * perPage;
      const endIdx = startIdx + perPage;
      // 截取当前页的用户数据
      const paginatedUsers = schema.users.all().models.slice(startIdx, endIdx);

      // 返回最终的响应格式
      return {
        users: paginatedUsers,
        page: currentPage,
        total: totalUsers
      };
    });
  },
});

这样一来，当你请求/api/users时会返回第1页的3条数据，同时带上page:1和total:10；如果请求/api/users?page=2，就会返回第4-6条数据，page字段也会变成2，完全符合你的需求。

内容的提问来源于stack exchange，提问作者Petro