【发布时间】：2025-12-07 20:10:02
【问题描述】：
我希望了解同时更新 UI 和数据库值时的最佳做法。
设置
我在前端有一个表格，它是带有列的项目列表：
- 身份证
- 姓名
- 创建日期
- 收藏按钮（星号）
这个列表是在页面加载时通过 axios（类似于 Ajax）从数据库中拉出来的。收藏按钮是用于更改类并更新数据库的用户的切换按钮。我正在尝试了解更新 UI 和数据库的最佳做法。
目前，逻辑是这样的：
- 页面上加载了初始列表
- 用户点击某一行上的收藏按钮
- UI javascript 将更新发送到数据库，以更改列表中单个项目的“收藏”值
- 成功更改后，后端会返回 200 成功代码
- 前端收到变更成功，然后使用axios查询全库列表，用更新后的数据刷新UI列表
这是刷新 UI 的正确方法吗？ 我看到的问题是，如果我在等待更新然后再次查询数据库时用户界面响应时间很差进行更改。
其他选项
我考虑过的另一个选项是更新 UI 列表，同时将更新请求发送到后端。唯一的区别是我不会“重新查询”数据库来更新数据，因为它应该匹配。
【问题讨论】：
-
有很多变量需要考虑。我所能推荐的就是避免在成功更改后更新整个列表（4）。而是使用 200 成功代码发送更新项目的 ID。然后在javascript中只更新那个元素
-
以 gmail 为例，您应该采用“其他选项”的想法。用户可以继续更新记录而无需等待页面刷新并且服务器不断更新。问题是如果有多个用户同时进行更改...那么您可能需要刷新整个页面。
标签： javascript ajax user-interface vue.js axios