主页 / 问题 / 1375759
Accepted
Alexandr_Yakovlev
Asked:2022-06-27 21:59:45 +0000 UTC2022-06-27 21:59:45 +0000 UTC

如何显示内容而不是传入的 JSON

  • 772

我有一个可以过滤的产品列表，但是当我使用query:执行此操作时?category=all，带有产品的 JSON 来自服务器直接到页面（我知道它来到页面，因为我返回它），而不是我的内容网站。

是否可以使用query过滤产品过滤产品并在页面上仅显示过滤产品？

也许有nuxt这样的文件名，例如user/_settings仅用于query？

服务器

const express = require('express');
const router = express.Router();
const Product = require("../models/Product");

router.get("/", async (req, res) => {
  try {
    const { query: { category } } = req;
    const products = await Product.find();
    const productsByCategory = category === "all" ? products : products.filter(prd => prd.category === category);

    return res.status(200).json({ ok: true, products: productsByCategory });
  } catch (err) {
    return res.status(500).json({ ok: false, message: "Произошла ошибка сервера", });
  }
});

module.exports = router;

客户

const serv = process.env.NODE_ENV === 'development' ? 'http://localhost:3000' : '';

    async fetchProducts() {
      try {
        const data = await fetch(`${serv}/`, {
          method: 'GET',
          headers: {
            "Content-Type": "application/json",
          }
        });

        return data.json();
      } catch (err) {
        throw err;
      }
    }
node.js

1 个回答

  1. Best Answer

    我通过以下方式解决了这个问题：

    添加asyncData和watch用于监视query

      watch: {
    async "$route.query.category"() {
      const { category } = this.$route.query;

      await this.$store.dispatch("catalog/getProductsByCategory", category);
    },
  },
  async asyncData({ query: { category }, store }) {
    await store.dispatch("catalog/getProductsByCategory", category);
  },

    UPD：您可以用以下代码替换这块：（在帮助下，watchQuery更改时将覆盖整个页面?category。更多详细信息）

      watchQuery: ["category"],
  async asyncData({ query: { category }, store }) {
    await store.dispatch("catalog/getProductsByCategory", category);
  },

    然后我将类别发送到服务器

        async getProductsByCategory({ commit }, category) {
      try {
        const res = await fetch(`${serv}/products/categories`, {
          method: "POST",
          headers: {
            "Accept-Type": "application/json",
            "Content-Type": "application/json"
          },
          body: JSON.stringify({ category })
        });

        const data = await res.json();

        commit("setProducts", data.products);

        return data;
      } catch (err) {
        throw err;
      }
    }

    我展示了这个类别的产品

    router.post("/categories", async (req, res) => {
  try {
    const { category } = req.body;
    const products = await Product.find();
    const productsByCategory = category === "all" ? products : products.filter(prd => prd.category === category);

    return res.status(200).json({ ok: true, products: productsByCategory });
  } catch (err) {
    return res.status(500).json({ ok: false, message: "Произошла ошибка сервера", });
  }
});
    • 1

相关问题