如何处理 mongodb/express 中的拖放列表？ [关闭]答案

【问题标题】：How to handle drag and drop lists in mongodb/express? [closed]如何处理 mongodb/express 中的拖放列表？ [关闭]
【发布时间】：2019-06-25 09:03:21
【问题描述】：

我正在构建一个类似于 spa 的看板，其中包含包含列表的用户板，以及包含所有卡片的列表，这些卡片都具有拖放功能，在前端使用 vue.js，在后端使用带有猫鼬的 express.js。

我目前对如何设置模型和正确排序感到困惑。

谁能给我一个 3 种简单猫鼬模型的示例，用于板、列表和卡片，可用于列表和卡片的拖放功能，以及排序，路线也很棒？

如果我应该使用嵌入或引用，我完全迷失了，我已经尝试了两种方法，但似乎都不对。

编辑：

我知道 trello/wakan/kanbanflow 是如何做到的，我知道 websockets 方式，但现在我只需要一个非常简单的基本设置，无需实时更新。

从我收集到的 -

Board 模型 - 包含带有用户 ID 的成员数组列表模型 - 包含板 id 和卡列表（参考或嵌入？），或者只是板 id？卡片模型 - 包含板 id 和列表 id？

我如何查询卡片以获取棋盘视图，因为它们必须在自己的受尊重列表中？

我通过 id 获得一个板，然后使用聚合和查找/填充板列表，然后对于每个列表我应该查找/填充卡？听起来好像有很多查询正在进行，效率不高？

对于董事会我只需要添加成员，更改标题。

对于列表 - 我需要能够重新排序并更改标题。

对于卡片 - 这里有很多东西：标题、描述、卡片成员、活动、cmets 等。我想我会使用引用的活动、cmets、卡片成员等，但我主要关心的是如何处理通过拖放重新排序和创建/删除卡片/列表？

https://codesandbox.io/s/jv4mj9vl33

这是一个示例应用沙箱，可以更好地了解我想要实现的功能。这是我到目前为止的地方。使用这个逻辑，我有 3 个集合 - 板列表和卡片，并且通过 id 将其引用到其父级。

【问题讨论】：

尝试更好地定义您的问题。展示您尝试过的方法以及为什么它不适合您的情况。事实上，你所做的似乎没有任何问题。
听起来您希望我们为您完成工作。这并不是 Stack Overflow 的真正目的。我建议阅读help center 以了解有关该网站指南的更多信息。它也有很多关于如何写好问题的技巧。 @Paul 说要更好地定义问题是正确的。你都尝试了些什么？具体是什么不起作用？很难轻松指出您的确切问题是什么。 Give me an example 并不是一个真正的问题。
另外，这与vue.js有何关系？
我已经说过我已经尝试了很多嵌入和引用的东西，给出了一个具有所需规格的 vue 应用程序的 codepen 示例，你们还需要什么？我的问题是如何设计这样的功能，我不是要求做我的工作。
@KarolisStakėnas 编程设计问题在本网站上被视为离题。正如我所说，我强烈建议您阅读help center。它提供了很多关于网站指南的重要信息。它甚至在上面的关闭通知中都有链接。

标签： node.js mongodb express vue.js mongoose

【解决方案1】：

嵌入还是引用的决定通常会受到您想要查询数据的方式的影响。如果卡片也包含讨论，这也是一个有趣的问题。（

怎么样

var schema = new mongoose.Schema({bucket:'string', position:'number', title: 'string', body: 'string',isDone:'boolean'});
var card = mongoose.model('Card', schema);

棋盘将是按桶分组并按桶内位置排序的所有卡片。（对于分组建议使用聚合函数）。

在桶内拖动（更改）位置将更新卡片的位置。在桶之间移动卡片将更新桶字段。

当您查看 trello 时，我认为他们使用 websockets 将更改推送到客户端并且客户端对更新做出反应。

这意味着完全不同的模型。因此，服务器包含板的所有更改。因此，您需要将所有更改建模为命令/事件。 “CARD_CREATED”、CARD_MOVED_TO_BUCKET 及其相应的有效负载。有了这个，您将能够将更改推送到服务器并返回到客户端。您想查看事件源、cqrs、redux，以获取有关将状态存储为一系列更改的更多信息。想想你的银行账户。总额是所有借方和贷方的汇总结果。

因此，虽然第一种方法对您有用，但第二种方法可能会很有趣。

【讨论】：