Laravel 后端、Vue 前端、api 最佳实践？答案

【问题标题】：Laravel backend, Vue frontend, api best practises?Laravel 后端、Vue 前端、api 最佳实践？
【发布时间】：2021-06-19 09:28:31
【问题描述】：

我构建了简单的 SPA。我在后端使用 laravel，在前端使用带有 vuex 的 Vuex 和路由器。假设我有端点：

/users/1/conversations/1

我已经定义了用户和对话之间的关系。控制器方法是这样的：

User::findOrFail(id)->conversations()->with('user')->get();

它给出了示例输出：

[{
id: 1,
title: 'lorem ipsum'
users: [{id: 1, name:'John'}, {id: 2, name: 'Bob'}]
},
id: 2,
title: 'lorem ipsum'
users: [{id: 1, name:'John'}, {id: 2, name: 'Bob'}, {id: 3, name: 'Ann'}]
}]

并且重复参与许多对话的用户的数据。在上面的例子中是： {id: 1, name:'John'} 我认为数据重复不是一个好主意。也许我应该这样做：

修改控制器方法以产生此输出：

{ 
conversations: [{
id: 1,
title: 'lorem ipsum'
users: [1,2]
},
id: 2,
title: 'lorem ipsum'
users: [1,2,3]
}],
unique_user_ids: [1,2,3]
}

然后在我的前端调用两个不同的 axios.get：一次用于对话 (/users/{id}/sessions)，n 次用于每个用户 (/user/{id})。

有什么意义吗？

【问题讨论】：

那么，您想将 users 数据缩短为仅 id 吗？
是的。我知道如何缩短它。问题是：我应该这样做吗？我不知道在我只发送 id 以获取它们而没有重复或只是获取重复数据并且不要 axios /user/{id} n 次之后调用 axios n 次更好
或者我应该编辑我的后端代码以通过一次执行它并产生此响应：{对话：[{ id：1，标题：'lorem ipsum'用户：[1,2]}，id : 2, title: 'lorem ipsum' users: [1,2,3] }], unique_users:[ { id: 1, name: ..., }, { id: 2, name: ... }, { id：3，名称：... }] }
我现在明白了……答案是：视情况而定。做 40 个 axios 调用没什么大不了的（你不应该一次做 40 个，但如果你必须这样做也没问题），你应该避免做的是在你可以做 2 次并且可能处理的时候打 DB 40 次你想要的数据......所以你必须牢记这一点，如果你正在使用with进行查询，那应该是2个查询，所以这是最好的事情（正如你所分享的那样）。

标签： javascript php laravel vue.js vuex

【解决方案1】：

数据重复通常不是问题，除非您拥有大量重复的大数据。如果您关心的是性能，问题将是查询的数量和内存的总使用量。要检查它们，您可以使用Laravel Debugbar。

实际上，如果单独获取用户，会执行过多的额外查询，从而降低性能。

如果您计划在显示会话时获取用户数据，由于数据量较小，会提高页面加载性能，但在这种情况下，您的服务器将不得不响应过多的额外请求，这可能会创建其他性能问题。

所以，一如既往，这取决于...

就我个人而言，我总是从绝对必要的数据开始。所有其他的东西都可以按要求或时间交付。所以，第二个选项看起来更好。

【讨论】：

感谢您的回复。我将过滤此路由以输出如下内容： { conversations: [{ id: 1, title: 'lorem ipsum' users: [1,2] }, id: 2, title: 'lorem ipsum' users: [1 ,2,3] }], unique_users:[ { id: 1, name: ..., }, { id: 2, name: ... }, { id: 3, name: ... }] }