根据插入 PATCH 请求链接的 ObjectID 在 VueJS 中编辑 MongoDB 的产品字段

Posted 2023-02-22

【中文标题】根据插入 PATCH 请求链接的 ObjectID 在 VueJS 中编辑 MongoDB 的产品字段

【英文标题】：Edit product fields from MongoDB in VueJS based on ObjectID inserted into PATCH request link

【发布时间】：2022-01-07 14:03:06

【问题描述】：

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

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

示例：

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

更准确地说，我认为我需要一种方法来获取 ID，如下所示：

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

编辑作品的功能。如果不是 $this.produsModificat.id

我使用 http://localhost:3000/produse/61a51cecdfb9ea1bd939587b 它可以工作。

所以我要做的是在单击 EDIT 按钮时自动获取 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
    ,

【参考方案1】：

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

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

如果您已经涵盖了所有这些并需要前端的一些建议，并且您有一个唯一的 ID 来跟踪每个项目，请为将通过单击操作打开的模态创建一个子组件编辑按钮。该组件将通过过滤 Products 数组来接收有问题的 Product 对象。

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

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

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

使用您的 v-for 以您选择的任何方式呈现表格行，您将定义您的编辑按钮。其中，item.id 可以是您想要的任何内容，也可以是跟踪活动商品的其他方式。

<EditButton 
 :record="item"
 :product-id="item.id" 
 @click="openModal(item)"
/>

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