我希望了解同时更新 UI 和数据库值时的最佳实践。
设置
我在前端有一个表格，它是带有列的项目列表:
- 身份证
- 姓名
- 创建日期
- 最喜欢的按钮(星号)
该列表是在页面加载时通过 axios(类似于 Ajax)从数据库中提取的。最喜欢的按钮是用户的一个切换按钮，可以更改类(class)并更新数据库。我正在尝试了解更新 UI 和数据库的最佳实践。
目前的逻辑是这样的:
- 初始列表已加载到页面上
- 用户点击其中一行上的收藏夹按钮
- UI javascript 将更新发送到数据库，以更改列表中该单个项目的“收藏夹”值
- 一旦更改成功，后端就会响应 200 成功代码
- 前端接收到更改成功，然后使用axios查询完整数据库列表以使用更新后的数据刷新UI列表
这是刷新 UI 的正确方法吗？ 我发现此方法的问题是，如果我在用户等待更新和再次查询数据库时，UI 响应时间很差。进行更改。
其他选项
我考虑过的另一个选择是更新 UI 列表，同时向后端发送更新请求。唯一的区别是我不会“重新查询”数据库来更新数据，因为它应该匹配。
最佳答案
我认为，这取决于更个人的方法。我个人认为，如果我们确实知道进行了什么样的更改，则根本没有必要进行任何查询。或者我们可以只查询该特定对象，而不是整个列表。或者我们的 API 可以配置为如果编辑成功则从数据库返回新的、更新的对象(这是我最喜欢的)。
但有人可能会认为刷新整个列表是一个坏主意。这是
- 对数据库进行更繁重的查询
- 更多项目可在后端转换为 JSON
- 通过网络发送更多数据
- 在前端解析更多 JSON
如您所见，这很麻烦，如果您有很多用户，他们可能会开始用查询轰炸数据库，尽管每个用户都知道(有些推测，但大部分是正确的)当前数据的样子。因此，如果 API 无法配置为返回更新后的对象，我建议要么只查询更新后的对象，要么根本不查询——如果我们知道我们请求后端在数据库中进行哪些更改，并且我们知道后端成功做到了这一点，然后我们只需在前端应用更改即可，无需进一步考虑
关于javascript - 通过 UI 更改数据库时刷新前端 UI 的最佳实践是什么？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48235102/