Firebase 查询类别中的产品(数据库设置和最佳实践)

问题描述

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

TL;DRproducts have multiple categories.View should show only all subcategories and products that have the category assigned.

如何设置数据库和查询?

How to setup the DB and queries?

我目前正在学习 Vue 和 Firebase，具有 C# 和 SQL 背景，我需要一些关于 noSQL 方面的帮助和建议.

I'm learning Vue and Firebase at the moment coming from a C# and SQL background, I need some help and advice on the noSQL side of things.

编辑:类别和产品是两个独立的集合(目前).

EDIT: categories and products are two separate collections (at the moment).

我有产品，可以有多个类别(见产品 5)

I have products, which can have multiple categories (see product 5)

products: {
  prod1-id: {
    name:'apple-type-A',
    price: 2
    cats: cat1-id
  }
  prod2-id: {
    name:'apple-type-B',
    price: 2.5
    cats: cat1-id
  }
  prod3-id: {
    name:'banana-type-A',
    price: 1.6
    cats: cat2-id
  }
  prod4-id: {
    name:'banana-type-B',
    price: 1.9
    cats: cat2-id
  }
  prod5-id: {
    name:'smoothie',
    price: 5,
    cats: [cat2-id, subCat1-id, subCat2-id]
  }
}

那些类别是一棵树.

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

客户应该看到第一棵树.

The customer should see the first tree.

着陆页应该只显示类别树的第一个深度和每个没有类别的产品(可能添加一个名为无类别"的类别).

The landing page should only show the first depth of the category tree and every product without a category (maybe add a category called 'no category').

当您点击一个类别时，应显示所有具有此类别的子类别和产品.

When you click on a category is should show all the subcategories and products, that have this category.

一直持续到最深的分支.

This goes on until the deepest branch.

我试图勾勒出我的想法:

I tried to sketch my idea:

查看

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

For programming I use Vue, with vuex and vuexfire and as framework Vuetify.

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

I have the complete product management setup but I don't know how to query for this view.

我的想法是重用一个 <v-card v-for="p of products"> 我已经拥有并且工作正常.

My idea was to reuse a <v-card v-for="p of products"> I already have and is working fine.

但这仅显示产品，而不显示类别.如何将类别混合在一起?

But this shows only products, not categories. How do I get the categories into the mix?

查询

使用 vuexfire 非常简单.

Working with vuexfire this is quite simple.

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

但是我现在如何让类别和产品并排显示?

but how can I get the categories and products now show side by side?

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

I've started to get the products together by querying, but have no idea how to put the categories into the mix:

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)
})

我需要以不同的方式构建我的数据库吗?

Do I need to structure my database differently?

我只是查询产品并使用一些js逻辑/魔术"吗?显示类别?但是我将如何获得这些意见.

Do I just query the products and use "some js logic/magic" to show the categories? But how would I then get the views.

firebase 的集合组查询是否正确?如果是，如何?

Are the collection group queries of firebase the right way to go? If yes, how?

请指教

推荐答案

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

I'm writing my response an answer as it was too long for a comment.

如果我正确理解了您的用例，您希望拥有一个数据库结构，其中有一个产品列表及其各自的类别，它们将同时并排显示在您的 Vue 应用程序视图中.

If I understood your use case correctly, you want to have a DB structure where you have a list of products and their respective categories which both will be displayed simultaneously side by side on your Vue application view.

虽然我不是 Vue 专家，但我建议您为您的 Cloud Firestore 数据库使用以下结构:Products/{product}/categories/{category}，转换为 collection/{document}/collection/{document}.

While I'm not a Vue expert, I can suggest using the following structure for your Cloud Firestore database: Products/{product}/categories/{category}, which translates to collection/{document}/collection/{document}.

在 Cloud Firestore 数据模型中，您可以在另一个中拥有一个集合集合，这称为子集合.例如，您可以拥有 Products/fruits/Categories/banana，而在 banana 文档中，您可以拥有 type、price 或 id 字段等.

In the Cloud Firestore data model you can have a collection within another collection, and this is called a subcollection. For example, you could have Products/fruits/Categories/banana and inside the banana document you could have type, price, or id fields among many others.

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

Then, you could use Collection group queries to retrieve documents from a collection group instead of from a single collection. A collection group consists of all collections with the same ID. By default, queries retrieve results from a single collection in your database.

例如，您可以通过向每个产品添加一个Categories子集合来创建一个categories集合组，然后从每个产品的类别中检索结果立即子集合，比方说香蕉:

For example, you could create a categories collection group by adding a Categories subcollection to each product and then retrieve results from every product's categories subcollection at once, let's say bananas:

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.
});

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

Before using a collection group query, do not forget to create an index that supports your collection group query. You can create an index through an error message, the console, or the Firebase CLI.

这篇关于Firebase 查询类别中的产品(数据库设置和最佳实践)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！