使用PATCH请求链接将VueJS中的MongoDB产品字段进行编辑

Question

这可能是一个简单的问题，但由于某种原因，我无法弄清楚:(。 我正在使用 MongoDB、NestJS 和 VueJS 制作一个全栈应用程序，该应用程序包含在 MongoDB 数据库中添加不同产品的表单。

我现在面临的问题是我希望能够使用以下逻辑编辑数据库中存在的每个产品： 单击编辑按钮 -> 在弹出窗口中填写更新信息 -> 单击更新按钮

示例：

我现在面临的问题是无法仅选择我尝试编辑到 VueJS 应用程序中的特定产品。

更准确地说，我想我需要一种方法来获取 ID，例如：

axios.patch(`http://localhost:3000/produse/${this.produsModificat.id}`)

编辑功能有效。如果代替 ${this.produsModificat.id}

我使用 http://localhost:3000/produse/61a51cecdfb9ea1bd939587b 它有效。

所以我想做的是在单击“编辑”按钮时自动获取 ID。

我试图通过 MongoDB 中生成的唯一 ID 来选择每个产品（例如，参见下图），但我找不到方法来做到这一点，这让我抓狂:(。

有人可以指出我如何实现这一目标的正确方向吗？

下面您可以找到我在前端文件中为 PATCH 请求实现的逻辑

文件名：Table.vue

updateProduct() {
        let produsModificat = {
            Name: this.Produs.Name,
            Code: this.Produs.Code,
            Weight: this.Produs.Weight,
            Price: this.Produs.Price,
            Color: this.Produs.Color,
            isDeleted: this.Produs.isDeleted
        }
        console.log(this)
    axios.patch(`http://localhost:3000/produse/${this.produsModificat.id}`)
    .then((response) => {
        console.log(response);
        })
        .catch((error) => {
        console.log(error);
        })
        console.log();
        return produsModificat
    },

Answer 1

你的问题似乎有两个方面。第一个是如何从 MongoDB 获取唯一 ID，然后如何在前端跟踪补丁请求的唯一 ID。

在第一部分中，请查看您正在使用的任何产品的文档中的 getter 和 setter（或修改器和访问器）。寻找一种方法来修改响应对象（表记录的主获取请求中的数据集合）上的 ID 属性，或者定义您自己的属性并获取所需 ID 的字符串属性。当您定义要使用您控制的产品时，您还可以在每个产品模式上定义自己的product_id。然后，返回该自定义唯一属性并使用它来跟踪和查找用户想要编辑的项目。

如果您已经涵盖了所有内容，并且需要在前端提供一些建议，并且您有一个独特的 ID 来跟踪每个项目，请为模式创建一个子组件，该模式将通过单击操作打开编辑按钮。该组件将通过过滤产品数组来接收相关的产品对象。

在模态组件中，您拥有编辑相关产品的所有逻辑。如果您的后端允许路由模型绑定，如果不使用后端框架设置的默认 ID，请将绑定密钥更新为您的唯一 ID。

您可以通过多种方式存储“active_record”或用户当前正在查看或使用的项目。您可以通过 prop 将该 ID 传递给模态组件，或者将所有业务逻辑保留在 Table.vue 中，并通过模态中的发出事件传递更改，然后让 Table.vue 处理与后端的通信。您可以在 Table.vue 和 ProductEditModal.vue 中的一个或两个中跟踪活动项目的状态。

对于您关于编辑按钮需要唯一产品 ID 的观点，只需将产品 ID 作为属性提供给编辑按钮即可。

使用 v-for 以您选择的任何方式渲染表行，您都可以定义编辑按钮。其中，item.id 可以是您想要的任何内容，也可以是跟踪活动项目的其他方式。

然后，让你的模态 a) 在 EditButton 组件内部，其中该模态接收有问题的项目并保存 axios 逻辑，或者 b) 使用 Table.vue 中的方法打开你的模态并为其提供活动的通过 openModal 方法记录。许多知名的开发人员实际上会将模态逻辑放在编辑按钮本身内部，例如编辑按钮“拥有”编辑模式。或者，使用编辑按钮触发模式打开并简单地传递它需要的所有内容。