Bearbeiten Sie MongoDB-Produktfelder in VueJS über den PATCH-Anfragelink

Question

Das ist vielleicht eine einfache Frage, aber aus irgendeinem Grund komme ich nicht dahinter :(. Ich erstelle eine Full-Stack-Anwendung mit MongoDB, NestJS und VueJS, die ein Formular zum Hinzufügen verschiedener Produkte in einer MongoDB-Datenbank enthält.

Das Problem, vor dem ich jetzt stehe, ist, dass ich jedes Produkt, das in der Datenbank vorhanden ist, mithilfe der folgenden Logik bearbeiten können möchte: Klicken Sie auf die Schaltfläche „Bearbeiten“ –> Geben Sie die Aktualisierungsinformationen im Popup-Fenster ein –> Klicken Sie auf die Schaltfläche „Aktualisieren“.

Beispiel:

Das Problem, mit dem ich jetzt konfrontiert bin, besteht darin, dass ich nicht nur das spezifische Produkt auswählen kann, das ich in meiner VueJS-Anwendung bearbeiten möchte.

Um genauer zu sein, ich glaube, ich brauche eine Möglichkeit, an die ID zu kommen, wie zum Beispiel:

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

Bearbeitungsfunktion funktioniert. Wenn stattdessen ${this.produsModificat.id}

Ich habe http://localhost:3000/produse/61a51cecdfb9ea1bd939587b verwendet und es hat funktioniert.

Ich möchte also automatisch die ID erhalten, wenn auf die Schaltfläche „Bearbeiten“ geklickt wird.

Ich versuche, jedes Produkt anhand seiner generierten eindeutigen ID in MongoDB auszuwählen (siehe Bild unten zum Beispiel), aber ich finde keine Möglichkeit, das zu tun, und es macht mich verrückt :(.

Kann mir jemand den richtigen Weg weisen, wie ich das erreichen kann?

Unten finden Sie die Logik, die ich für die PATCH-Anfrage in der Frontend-Datei implementiert habe

Dateiname: 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 方法记录。许多知名的开发人员实际上会将模态逻辑放在编辑按钮本身内部，例如编辑按钮“拥有”编辑模式。或者，使用编辑按钮触发模式打开并简单地传递它需要的所有内容。