Ember cli-mirage不使用get显示任何数据

Question

我正在学习Ember，并且我被困在用ember-cli-mirage制作模拟api上。我按照ember教程中的说明修改了配置文件，也在ember-cli- site站点上修改了配置文件，但每次我到达端点时都什么也得不到。这是我当前的配置文件

export default function() {
this.get('/api/users', function() {
return {
  users: [
    {id: 1, name: 'Zelda'},
    {id: 2, name: 'Link'},
    {id: 3, name: 'Epona'},
  ]
}
});
}

正如我所说的，当我转到/api/users时，它只是一个空白页面。我是不是漏掉了什么？

谢谢!

Answer 1

首先，安装Ember检查器扩展(适用于Chrome或Firefox)，并查看浏览器控制台，看看Mirage是否会给你一些错误。如果没有写入任何内容，那么您的ember应用程序就不会到达端点。基本上，Mirage代理来自你的ember应用程序的所有请求。

因此您需要生成一个用户模型

    ember g model user

并将name属性放入其中。

创建一条路由并在模型钩子中写入

    return this.get('store').findAll('user');

(如果有不清楚的地方，请查看quick start tutorial )

所以现在，利用Ember数据，你的应用程序将请求所有点击/users的用户。

现在让我们从mirage开始，生成一个mirage模型

    ember g mirage-model user

并遵循mirage quickstart，只需根据您的需要进行调整:)

使用ember s启动您的应用程序，您应该会看到对/users的请求。如果你想把你的应用编程接口放在同一个域中，但是带有/api前缀，那么我建议你阅读关于endpoint path customization的文章

Answer 2

在app/mirage/config.js中，您可以为users设置模拟端点

export default function() {
  this.get('/users');
  this.post('/users');
  this.put('/users/:id');
  this.del('/users/:id');
}

您可以通过在app/mirage/fixtures/users.js中配置fixtures来设置模拟数据

export default [
    {id: 1, name: 'Zelda'},
    {id: 2, name: 'Link'},
    {id: 3, name: 'Epona'},
  ];

Answer 3

幻影不是一个真正的服务器，所以你不能直接从你的浏览器访问API。它是一个驻留在JavaScript内存中的模拟服务器，并在Ember应用程序启动时实例化。

要测试您的mock，让您的Ember应用程序发出API请求，例如

// routes/application.js
export default Ember.Route.extend({
  model() {
    return Ember.$.getJSON('/api/users');
  }
});

如果一切都已正确连接，您现在应该看到幻影正在处理此请求并将响应数据记录在控制台中。