Question

我正在学习余烬，并且在使用REST API时遇到了麻烦。我读过文档，但我不明白它是如何工作的。这确实是一个问题，我想问一下经验丰富的人。我只需要了解其工作原理。

因此，我们在Laravel后端有两条路由，它们返回JSON。这是索引（/）路由的响应：

<code>
{
    "responce":[
        {
            "id":0,
            "title":"main",
            "content": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae, aliquam."
        },
        {
            "id":1,
            "name":"about",
            "content": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, obcaecati? Accusantium ex dolorum voluptate deleniti?"
        },
        {
            "id":2,
            "name":"contacts",
            "content": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates voluptatibus exercitationem molestias rem."
        }
    ]
}
</code>

这是帖子（/ posts）路线的回复：

<code>
{
    "posts":[
        {
            "id":0,
            "name":"First",
            "content": "Lorem ipsum dolor sit amet consectetur adipisicing."
        },
        {
            "id":1,
            "name":"Second",
            "content": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quas quia distinctio ex consequuntur."
        },
        {
            "id":2,
            "name":"Third",
            "content": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam, similique. Voluptatum, libero sequi."
        }
    ]
}    
</code>

在Ember中，我们有路线index和posts。我想必须有某种循环来处理接收到的数据并将其输出。

索引页上的结果应如下所示：

<pre>
<!--Index page in Ember-->
<h3>main</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae, aliquam.</p>
<h3>about</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, obcaecati? Accusantium ex dolorum voluptate deleniti?</p>
<h3>contacts</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates voluptatibus exercitationem molestias rem.</p>     
</pre>

在帖子客户端页面上：

<pre>
<!--Posts page in Ember-->
<h3>First</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing.</p>
<h3>Second</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quas quia distinctio ex consequuntur.</p>
<h3>Third</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam, similique. Voluptatum, libero sequi.</p>     
</pre>

此过程应涉及哪些Ember元素，它们如何进行通讯和工作？我确实没有在互联网上找到任何显示整个链条的说明性示例。如果我看到了所有这些，我会立即理解。预先非常感谢！（对不起，我的法语）

Answer 1

这里有很多内容，但让我尝试设计总体路径。您的Laravel API提供的结构化数据需要由余烬应用程序读取。首先，设置您的余烬路由模型挂钩以读取该数据。您需要检查the guide以获得更多信息，但是第一步，我将从const parentStyle = { display: "flex", // need to use flex flexDirection: "column", // need to use column dir };路线中的this开始：

index

这应该使数据在import Route from '@ember/routing/route'; import fetch from 'fetch'; export default Route.extend({ model() { //this is where your ember app gets data from your API return fetch('YOUR-LARAVAL-API.com/index').then(response => { console.log(data); const data = response.json(); return data.responce; }); } });模板中可用，以便您可以像index.hbh那样访问它：

model

如何在Ember JS中获得REST Api？

1 个答案: