Javascript 类别产品的Firebase查询（数据库设置和最佳实践）

TL；DR 产品有多个类别。 视图应仅显示分配了类别的所有子类别和产品

如何设置数据库和查询

---

我现在正在学习Vue和Firebase，来自C#和SQL背景，我需要一些关于noSQL方面的帮助和建议

编辑：类别和产品是两个独立的集合（目前）

我有产品，可以有多个类别（见产品5）

这些类别是一棵树

categories: {
  cat1-id: {
    name: 'fruits',
    subCat1-id: {
      name: 'apple'
    }
    subCat2-id: {
      name: 'banana'
    }
  },
  cat2-id: {
    name: 'MySmooth'
  }
}

客户应该看到第一棵树

登录页应该只显示类别树的第一个深度以及没有类别的每个产品（可能添加一个名为“无类别”的类别）

当你点击一个类别时，它应该显示所有包含这个类别的子类别和产品

这一直持续到最深的树枝

我试图勾勒出我的想法：

---

查看

对于编程，我使用Vue、vuex和vuexfire以及Vuetify框架

我有完整的产品管理设置，但我不知道如何查询此视图

我的想法是重用一个我已经拥有并且工作正常的

但这只显示产品，不显示类别。我如何将这些类别纳入组合

查询

使用vuexfire非常简单

bindSoldProducts: firestoreAction(({ bindFirestoreRef }) => bindFirestoreRef('products', productsColl.where('isSold', '==', true))

但是我怎样才能让分类和产品同时展示呢

我已经开始通过查询将产品组合在一起，但不知道如何将类别放入组合中：

firebase.firestore.collection('products').orderBy('name', 'asc').onSnapshot(snap => {
  const productsArray: any = []

  snap.forEach(doc => {
    const product = doc.data()
    product.id = doc.id
    productsArray.push(product)
  })

  store.commit('setAllProducts', productsArray)
})

我是否需要以不同的方式构建数据库

我是否只是查询产品并使用“somejslogic/magic”来显示类别？但是我怎样才能得到这些观点呢

firebase的收集组查询是否正确？如果是，如何进行

---

请建议

在所有类别中尝试一个，并获得水果：

const categories = {
 "cat1-id": []
}

Object.keys(categories).forEach(cat => {
   const res = db.collection('products').where('cats', 'array-contains', cat).get()
   // Resolve and put (push) in categories[cat]
})

---

请参阅：

我正在写我的回复，因为太长了，无法发表评论

如果我正确理解了您的用例，那么您希望有一个DB结构，其中包含产品及其各自类别的列表，这两个列表将同时并排显示在Vue应用程序视图上

虽然我不是Vue专家，但我可以建议对您的云Firestore数据库使用以下结构：Products/{product}/categories/{categories}，它转换为collection/{document}/collection/{document}

在中，可以在另一个集合中包含一个集合，这称为子集合。例如，您可以有产品/水果/类别/香蕉，在香蕉文档中，您可以有类型、价格或id字段等

然后，可以使用从集合组而不是从单个集合检索文档。集合组由具有相同ID的所有集合组成。默认情况下，查询从数据库中的单个集合检索结果

例如，您可以通过向每个产品添加categories子集合来创建categories集合组，然后立即从每个产品的categories子集合中检索结果，例如：

---

在使用集合组查询之前，请不要忘记创建。您可以通过错误消息、控制台或Firebase CLI创建索引。

当库存发生变化时，这是否仍能保持实时更新？使用get方法，您将看不到变化，在顶部定义变量类别，并开始观察变化，并以相同的方式在变量中分配它们OK，这在获取产品时起作用，但如何获取产品和子类别？我是否必须同时运行查询并将所有内容合并到一个数组中，以便显示其内容？根据我对您的数据结构的理解，“产品”中的“猫”是一个包含类别和子类别的数组，因此查询适用于类别和子类别。由您为类别和子类别创建变量。如果你要观察所有内容，那么在你的应用程序中它可能会非常沉重，因此我建议使用良好的实践来只观察用户需要的内容。因为我们在这里有不同的理解：“类别”是一个集合，“产品”是一个单独的集合。我在我的产品中提到了这些类别。树结构仅在“类别集合”中。我会尝试一下，然后根据我发现的内容编辑我的帖子。不深入讨论，我会立即看到一个问题<代码>[cat2 id，subCat1 id，subCat2 id]您在一个数组中混合了两种不同的“东西”。你如何区分它们（一只猫对一只副猫）？@Jay nono，我应该把它们命名为“cat3”和“cat4”。我只是想解释一下，类别本身可以像产品一样包含在类别中。我建议重新思考这个问题是如何提出的。你得到的评论和一些答案似乎与问题不符。缩短并澄清它，然后我们再看一看。@Jay，我知道，但到目前为止，这里的一切都有所帮助。目前我有一个解决方案，当我准备好订阅后，我会把它贴在这里。不，对不起，错了。我将编辑我的问题并尝试更好地解释它：集合1：产品集合2：类别

const categories = {
 "cat1-id": []
}

Object.keys(categories).forEach(cat => {
   const res = db.collection('products').where('cats', 'array-contains', cat).get()
   // Resolve and put (push) in categories[cat]
})

const querySnapshot = await db.collectionGroup('categories').where('productName', '==', 'banana').get();
querySnapshot.forEach((doc) => {
  console.log(doc.id, ' => ', doc.data());
  // Banana from Mexico, Banana from Honduras, etc.
});