从 Express 获取 Emberjs 数据 Api

Question

我在 this guide 之后构建了一个连接到 ember 应用程序的 express api。我验证了我的 api 路由与 postman 一起正常工作。当我尝试从 ember 调用 GET 时出现问题。

MEENApp/app/routes/routes.js

    router.get('/blogposts',(req, res) => {
console.log("API GET REQUEST");
BlogPostSchema.find({}, (err,blogpost) => {
    if(err) {
        res.send(err);
    }
    console.log(blogpost);
    res.json(blogpost);
})});

当从 ember 应用调用时，console.log(blogposts) 向控制台输出正确的信息

    [ { _id: 5c588e1bc23c5e5620c59b4e,
    title: 'Helloooo',
    body: 'teeest',
    datePosted: 2019-02-04T19:10:19.422Z,
    __v: 0 },
  { _id: 5c589c1f773a76461cf1e4be,
    title: 'titletest',
    body: 'bodytest',
    datePosted: 2019-02-04T20:10:07.790Z,
    __v: 0 },
  { _id: 5c58becee53d4925a88c20fb,
    title: 'titletest2',
    body: 'titletest2',
    datePosted: 2019-02-04T22:38:06.660Z,
    __v: 0 },
  { _id: 5c58cf647d0a52086c5aac5d,
    body: 'rere',
    title: 'rerere',
    datePosted: 2019-02-04T23:48:52.477Z,
    __v: 0 } ]

Ember 但是调用后不会显示此数据。

MEENAPP/EmberApp/App/routes/Index.js

import Route from '@ember/routing/route';

export default Route.extend({
  model() {

    var code = this.store.findAll('blogpost');
    console.log(code);
    return this.store.findAll('blogpost');
  }
});

chrome 中的控制台显示

{isFulfilled: false, isRejected: false, _objectsDirtyIndex: 0, _objects: null, _lengthDirty: true, …}

但是如果我手动将 api 给我的数据输入 ember 就可以了

MEENAPP/EmberApp/App/routes/Index.js

import Route from '@ember/routing/route';

    let blogposts = [
      {
        "_id": "5c588e1bc23c5e5620c59b4e",
        "title": "Helloooo",
        "body": "teeest",
        "datePosted": "2019-02-04T19:10:19.422Z",
        "__v": 0
      },
      {
        "_id": "5c589c1f773a76461cf1e4be",
        "title": "titletest",
        "body": "bodytest",
        "datePosted": "2019-02-04T20:10:07.790Z",
        "__v": 0
      },
      {
        "_id": "5c58becee53d4925a88c20fb",
        "title": "titletest2",
        "body": "titletest2",
        "datePosted": "2019-02-04T22:38:06.660Z",
        "__v": 0
      },
      {
        "_id": "5c58cf647d0a52086c5aac5d",
        "body": "rere",
        "title": "rerere",
        "datePosted": "2019-02-04T23:48:52.477Z",
        "__v": 0
      }
    ];


    export default Route.extend({
      model() {
        return blogposts;
      }
    });

我显示它的方式是通过显示 post 的视图-post 组件，我循环遍历索引页面中的模型以显示 posts .

MEENAPP/EmberApp/App/models/blogpost.js

import DS from 'ember-data';

export default DS.Model.extend({
  title: DS.attr('string'),
  body: DS.attr('string')
});

MEENAPP/EmberApp/App/Components/view-post/template.hbs

  <p>{{blogpost.title}} - {{blogpost.body}}</p>

MEENAPP/EmberApp/App/templates/index.hbs

{{#each model as |blogpost|}}
  {{view-post blogpost=blogpost}}
{{/each}}

我不知道哪部分不正确。据我所知，API 有效并且 ember 正确地调用了它。

Answer 1

默认情况下，ember-data expects data payloads from the backend to be in JSON:API 格式。正如@Lux 提到的，您的有效负载不符合 JSON:API 标准，因此 findAll returns 是一个空数组。

您可以通过 customizing Serializers 告诉 ember-data 关于您的自定义数据格式，或者您更改后端以发送 JSON:API 兼容数据。

有很多libraries supporting JSON:API。例如，您可以使用 jsonapi-serializer in your current express server, to serialize your payloads for ember-data (There even is an express server example).

从 Express 获取 Emberjs 数据 Api

Getting Emberjs data from an Express Api

javascript

node.js

express

ember.js