如何在emberjs中使用海市蜃楼假数据进行分页？

Posted 2023-02-23

【中文标题】如何在emberjs中使用海市蜃楼假数据进行分页？

【英文标题】：how to do pagination using mirage fake data in emberjs?

【发布时间】：2016-05-10 06:19:28

【问题描述】：

我正在使用 mirage 来创建虚假数据。

场景/default.js

export default function(server) 
  server.createList('product', 48);
  server.loadFixtures();

上面我正在创建 48 个产品，我正在从控制器调用

this.store.query('product', 
                filter: 
                    limit: 10,
                    offset: 0
                
            ).then((result) => 
                console.log(result);
            );

在 mirage/config.js

中

this.get('/products', function(db) 
    let products = db.products;
    return 
      data: products.map(attrs => (
        type: 'product',
        id: attrs.id,
        attributes: attrs
      ))
    ;
  );

现在我的问题是，如何每页加载 10 个产品？我将过滤器 10 作为页面大小发送，偏移量表示页码。

应该对 config.js 进行哪些更改以仅加载有限的产品？

【参考方案1】：

在 mirage/config.js 中的处理程序中：

this.get('/products', function(db) 
    let images = db.images;
    return 
      data: images.map(attrs => (
        type: 'product',
        id: attrs.id,
        attributes: attrs
      ))
    ;
  );

您可以像这样访问请求对象：

this.get('/products', function(db, request) 
    let images = db.images;
    //use request to limit images here
    return 
      data: images.map(attrs => (
        type: 'product',
        id: attrs.id,
        attributes: attrs
      ))
    ;
  );

查看this twiddle 以获得完整示例。 这个旋转的地方有以下几点：

  this.get('tasks',function(schema, request)
    let qp = request.queryParams
    let page = parseInt(qp.page)
    let limit = parseInt(qp.limit)
    let start = page * limit
    let end = start + limit
    let filtered = tasks.slice(start,end)
    return 
      data: filtered
    
  )

您只需像这样调整它以供您使用：

  this.get('products',function(db, request)
    let qp = request.queryParams
    let offset = parseInt(qp.offset)
    let limit = parseInt(qp.limit)
    let start = offset * limit
    let end = start + limit
    let images = db.images.slice(start,end)
    return 
      data: images.map(attrs => (
        type: 'product',
        id: attrs.id,
        attributes: attrs
      ))
    
  )

【讨论】：

它运行良好。谢谢。我将 db.images 更改为 db.products，您也可以更改它。

【参考方案2】：

todos 的示例，您可以根据自己的用例进行调整。

    // Fetch all todos
    this.get("/todos", (schema, request) => 
        const queryParams:  pageOffset, pageSize  = request
        
        const todos = schema.db.todos;
    
        if (Number(pageSize)) 
            const start = Number(pageSize) * Number(pageOffset)
            const end = start + Number(pageSize)
            const page = todos.slice(start, end)
        
            return 
                items: page,
                nextPage: todos.length > end ? Number(pageOffset) + 1 : undefined,
            
        
        return todos
    );