【问题标题】:Handle multiple registers with Vue and API endpoint使用 Vue 和 API 端点处理多个寄存器
【发布时间】:2020-02-16 14:33:02
【问题描述】:

我有一个将客户端存储在数据库中的应用程序,客户端的数量是可变的,目前我有 200 个,但我可能有 200 万个。此外,我还有一个 Web 服务可以查询该数据库并公开一个端点。为了显示这些客户端,我有一个简单的 Vue 应用程序,该应用程序显示一个表单,其中一次填充一个客户端,并显示下一个和上一个按钮以获取更多客户端。

关键是,将客户端从我的数据库获取到 Vue 的最佳方法是什么:

  • 我应该从数据库中获取所有客户端并将它们存储在 vuex 中吗?使用此选项,next 和 prev 按钮只需从存储的数组中获取一个或其他索引。
  • 我应该只获取当前客户端我正在显示并将其存储在 vuex 中吗?使用此选项,next 和 prev 按钮调用端点请求下一个或 prev 客户端。
  • 也许应该进行块加载并将 n 个客户端存储在 vuex 中?使用此选项,next 和 prev 按钮在数组中搜索客户端,如果索引超出范围,则应调用端点请求 n 个下一个或上一个客户端并将它们存储在 vuex 数组中。

谢谢

【问题讨论】:

  • 这很简单;如果您的数据变得太大,只需想办法对其进行分块或分页,并在需要时加载新的块。
  • 如果您要这样浏览它们,一次不要一个。最好减少服务器调用量并使应用程序感觉更灵敏。如果分页,~25-100+ 应该是好的。

标签: database web-services vue.js vuex


【解决方案1】:

块加载将是一种理想的情况,用户无需等待客户端加载完成单击“下一步”即可查看下一个客户端,也不会因大量未使用的客户端详细信息而使浏览器存储膨胀。

稍微修改的块加载方法是在加载特定客户端详细信息时始终获取下一个和上一个客户端详细信息,以便用户在转到下一个客户端时无需等待网络调用完成。

例如,在获取客户端 2 时 - 获取 1,3。 当用户单击下一步时,直接从商店呈现第三个客户端详细信息,但在后台获取客户端 4,以便下一次和上一次单击顺利进行。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2014-02-08
    • 2018-09-12
    • 1970-01-01
    • 1970-01-01
    • 2016-08-26
    • 2017-05-07
    • 2021-03-03
    • 2020-10-06
    相关资源
    最近更新 更多