首页 \ 问答 \ 在通过UI更改数据库时刷新前端UI的最佳做法是什么?(What is the best practice for refreshing front-end UI when making changes the the database through the UI? [closed])

在通过UI更改数据库时刷新前端UI的最佳做法是什么?(What is the best practice for refreshing front-end UI when making changes the the database through the UI? [closed])

我期望了解在同时更新UI和数据库值时的最佳实践。

设置

我在前端有一个表,它是列表中的项目列表:

  • ID
  • 名称
  • 创建日期
  • 收藏夹按钮(星号)

加载页面时,此列表通过axios从数据库中提取(类似于Ajax)。 收藏夹按钮是更改类的用户的切换,并且还更新数据库。 我试图了解更新UI和数据库的最佳实践。

目前,逻辑是这样的:

  1. 初始列表已加载到页面上
  2. 用户单击其中一行上的收藏夹按钮
  3. UI javascript将更新发送到数据库以更改列表中单个项目的“最喜欢”值
  4. 一旦成功完成更改,后端会以200个成功代码进行响应
  5. 前端接收成功的更改,然后使用axios查询完整数据库列表以使用更新的数据刷新UI列表

这是刷新UI的正确方法吗? 我用这种方法看到的问题是很差的UI响应时间,如果我等待更新,然后在用户进行更改时再次查询数据库。

其他选项

我想过的另一个选择是更新UI列表,同时将更新请求发送到后端。 唯一的区别是我不会“重新查询”数据库以更新数据,因为它应该匹配。


I'm looking to understand the best practices when updating UI and Database values simultaneously.

The Set-up

I have a table on the front end which is a list of items with the columns:

  • ID
  • Name
  • Create Date
  • Favorite button (star)

This list is pulled from the database via axios (similar to Ajax) when the page is loaded. The favorite button is a toggle for the user that changes the class and also updates the database. I'm trying to understand the best practices for updating the UI and the database.

Currently, the logic goes like this:

  1. Initial list is loaded on the page
  2. The user clicks the favorite button on one of the rows
  3. The UI javascript sends the update to the database to change the "favorite" value for that single item in the list
  4. Once a successful change is made the back-end responds with 200 success code
  5. The front end receives the successful change and then uses axios to query the full database list to refresh the UI list with the updated data

Is this the correct method to refresh the UI? The problem I see with this method is poor UI response time if I'm waiting to both update and then again query the database while the user is making changes.

Other options

Another option I've thought about is to update the UI list while simultaneously sending the update request to the back-end. The only difference is I would not "re-query" the database to update the data since it should match.


原文:https://stackoverflow.com/questions/48235102
更新时间:2022-02-22 12:02

最满意答案

只需使用display:table-celldisplay:table for parent。
在这里小提琴: http//jsfiddle.net/6jnte8da/2/


Just use display:table-cell in conjunction with display:table for parent.
Fiddle here: http://jsfiddle.net/6jnte8da/2/

相关问答

更多

相关文章

更多

最新问答

更多
  • 您如何使用git diff文件,并将其应用于同一存储库的副本的本地分支?(How do you take a git diff file, and apply it to a local branch that is a copy of the same repository?)
  • 将长浮点值剪切为2个小数点并复制到字符数组(Cut Long Float Value to 2 decimal points and copy to Character Array)
  • OctoberCMS侧边栏不呈现(OctoberCMS Sidebar not rendering)
  • 页面加载后对象是否有资格进行垃圾回收?(Are objects eligible for garbage collection after the page loads?)
  • codeigniter中的语言不能按预期工作(language in codeigniter doesn' t work as expected)
  • 在计算机拍照在哪里进入
  • 使用cin.get()从c ++中的输入流中丢弃不需要的字符(Using cin.get() to discard unwanted characters from the input stream in c++)
  • No for循环将在for循环中运行。(No for loop will run inside for loop. Testing for primes)
  • 单页应用程序:页面重新加载(Single Page Application: page reload)
  • 在循环中选择具有相似模式的列名称(Selecting Column Name With Similar Pattern in a Loop)
  • System.StackOverflow错误(System.StackOverflow error)
  • KnockoutJS未在嵌套模板上应用beforeRemove和afterAdd(KnockoutJS not applying beforeRemove and afterAdd on nested templates)
  • 散列包括方法和/或嵌套属性(Hash include methods and/or nested attributes)
  • android - 如何避免使用Samsung RFS文件系统延迟/冻结?(android - how to avoid lag/freezes with Samsung RFS filesystem?)
  • TensorFlow:基于索引列表创建新张量(TensorFlow: Create a new tensor based on list of indices)
  • 企业安全培训的各项内容
  • 错误:RPC失败;(error: RPC failed; curl transfer closed with outstanding read data remaining)
  • C#类名中允许哪些字符?(What characters are allowed in C# class name?)
  • NumPy:将int64值存储在np.array中并使用dtype float64并将其转换回整数是否安全?(NumPy: Is it safe to store an int64 value in an np.array with dtype float64 and later convert it back to integer?)
  • 注销后如何隐藏导航portlet?(How to hide navigation portlet after logout?)
  • 将多个行和可变行移动到列(moving multiple and variable rows to columns)
  • 提交表单时忽略基础href,而不使用Javascript(ignore base href when submitting form, without using Javascript)
  • 对setOnInfoWindowClickListener的意图(Intent on setOnInfoWindowClickListener)
  • Angular $资源不会改变方法(Angular $resource doesn't change method)
  • 在Angular 5中不是一个函数(is not a function in Angular 5)
  • 如何配置Composite C1以将.m和桌面作为同一站点提供服务(How to configure Composite C1 to serve .m and desktop as the same site)
  • 不适用:悬停在悬停时:在元素之前[复制](Don't apply :hover when hovering on :before element [duplicate])
  • 常见的python rpc和cli接口(Common python rpc and cli interface)
  • Mysql DB单个字段匹配多个其他字段(Mysql DB single field matching to multiple other fields)
  • 产品页面上的Magento Up出售对齐问题(Magento Up sell alignment issue on the products page)