Question

我正在使用repo https://github.com/mschwarzmueller/laravel-ng2-vue/tree/03-vue-frontend，所以我对代码的可靠性有100％的信心。我可以通过非常简单的Vue客户端通过laravel api端点发布，也可以通过Postman发布。通过Postman我可以检索表数据数组，但在客户端应用程序中却不是这样。在POSTMAN：

localhost:8000/api/quotes

工作正常。

在vue 2 js CLIENT APP：

methods: {
        onGetQuotes() {
            axios.get('http://localhost:8000/api/quotes')
                .then(
                    response => {
                        this.quotes =  (response.data.quotes);
                    }     
                )
                .catch(
                    error => console.log(error)
                );
        }

什么都不返回。将响应返回到Console.log不会返回任何内容。 Network / XHR选项卡显示表数据行，但我不确定这意味着什么。

我确信此代码适用于其他具有唯一api端点的代码，我认为这些端点可能不使用localhost或'127：0.0.1：1080。

编辑：响应更多信息的请求

public function getQuotes()
{
    $quotes = Quote::all();
    $response = [$quotes];
    return response()->json($response, 200);
}

以及相关路线：

Route::get('/quotes', [
    'uses' => 'QuoteController@getQuotes'
]);

只是为了确认：我正在使用经过验证的github repo代码，其中唯一的更改是我的api端点地址，在本问题正文的第一行中提到。。请注意，Laravel后端也来自Max的精细教程中的相关repo。正在运行的代码可以在

看到

所以我真的不认为这是编码错误 - 但是由于我使用本地主机而导致配置错误？

编辑：在laravel控制器中出现编码错误，如下所示

Answer 1

您的代码无法正常工作的原因，因为您尚未在控制器中为$quotes提供密钥，但您正在vue文件中查找它（{{ 1}}）。

response.data.quotes基本上是[$quotes]所以当json响应通过时，[0 => $quotes]不是0: [...]。

要实现这一点，您只需要更改：

quotes: [...]

为：

$response = [$quotes];

此外，仅仅是一个FYI，您不需要在$response = ['quotes' => $quotes];中提供200，因为它是默认值，您只需返回一个数组{{1} }自动返回正确的json响应，例如：

response->json()

显然，如果你不想，你就不必这样做。

希望这有帮助！

laravel api与vue 2 js没有返回数据 - 可能是'localhost：8000'（或'127.0.0.1:8000'）的问题？

1 个答案: