So implementieren Sie die Bearbeitungsfunktion im Front-End und Back-End des Springboot Vue-Projektmanagements

Testplattformentwicklung basierend auf Springboot+vue

1. Öffnen Sie die Bearbeitungsseite, um die Schaltfläche „Bearbeiten“ anzuzeigen. Die zuvor kopierte Tabellenkomponente enthält zwei Schaltflächen.

Binden Sie ein Klickereignis handleUpdate(scope.row). Diese zeile ist das Objekt des aktuellen Datensatzes.

2. 编写 handleUpdate 方法处理数据外显

需要查询当前记录的项目名称和描述并将其赋值给表单才能将数据外显。这里需要根据项目id(唯一性)来查询。

修改一下后端项目列表的接口，使其支持根据项目id查询数据：

在 handleUpdate 中调用接口：

this.dialogFormVisible = true，首先打开对话框在 data 的 projectQuery 对象中，新增一个 id，用于传参给接口。再把row.id把每行里的 id 赋值给this.projectQuery.id最后请求接口，返回的list中只有一个元素，把这个结果的projectName和description，再赋值给 form 表单即可。

测试一下：

二、保存编辑页面的内容

1. 后端增加 update 接口

编辑页表单与新增页面一致，没必要再写一个。因此，需要对表单进行一些修改，以便在创建和编辑时分别调用相应的API。

新增接口已有，现在增加一个更新的接口，继续在 ProjectService 里编写。

还有对应外面的 controller 处理器：

自测一下更新接口，功能正常。

2. 前端页面修改

为了可以区分这是新增表单还是编辑表单，需要在 data 里增加一个字段来标识：dialogStatus。

修改表单里的【保存按钮】，点击的时候通过dialogStatus的值，来决定调用新增还是更新的方法：

当dialogStatus等于"create"，就是新增，否则就是修改更。

那么处理编辑页数据外显的方法handleUpdate也修改修改，给dialogStatus赋值为update:

新增updateData方法，来调用后端的 update 接口。但是别忘记在 js 文件里添加好接口的请求，然后导入到 vue 页面文件中去。

然后继续完成的updateData方法的代码：

这里还设计到【新增项目】按钮的改动，因为点击了【编辑】按钮，dialogStatus等于update，那自然点击新增的时候要赋值为create才可以调用到add()方法。

但由于之前的【新增项目】按钮已经绑定了一个this.dialogFormVisible = true，所以把这2个抽出来，写到一个方法handleAdd

Sie müssen den Projektnamen und die Beschreibung des aktuellen Datensatzes abfragen und ihn dem Formular zuweisen, um die Daten anzuzeigen. Hier müssen Sie eine Abfrage basierend auf der Projekt-ID (Einzigartigkeit) durchführen. 🎜🎜Ändern Sie die Schnittstelle der Backend-Projektliste, um die Abfrage von Daten basierend auf der Projekt-ID zu unterstützen: 🎜🎜🎜🎜Rufen Sie die Schnittstelle in handleUpdate auf: 🎜🎜🎜🎜this.dialogFormVisible = true, öffnen Sie zunächst das Dialogfeld im projectQuery-Datenobjekt und fügen Sie eine ID hinzu, die zum Übergeben von Parametern an die Schnittstelle verwendet wird. Weisen Sie dann <code>row.id der ID in jeder Zeile zu und fordern Sie schließlich die Schnittstelle an. Geben Sie das Ergebnis ein aus projectName und description und weisen Sie sie dann dem Formular zu. 🎜🎜Testen Sie es: 🎜🎜🎜🎜2. Speichern Sie den Inhalt der Bearbeitungsseite🎜🎜1. Fügen Sie dem Backend eine Update-Schnittstelle hinzu🎜🎜Das Bearbeitungsseitenformular ist das gleiche wie auf der neuen Seite, es ist nicht erforderlich, zu schreiben noch einer. Daher müssen einige Änderungen am Formular vorgenommen werden, um beim Erstellen bzw. Bearbeiten die entsprechende API aufzurufen. 🎜🎜Die neue Schnittstelle ist bereits vorhanden. Fügen Sie nun eine aktualisierte Schnittstelle hinzu und schreiben Sie weiter in ProjectService. 🎜🎜🎜🎜Außerdem gibt es einen entsprechenden externen Controller-Prozessor: 🎜🎜🎜🎜Testen Sie die Update-Schnittstelle selbst und sie funktioniert normal. 🎜🎜🎜🎜2 . Front-End-Seitenänderung🎜🎜Um zu unterscheiden, ob es sich um ein neues Formular oder ein Bearbeitungsformular handelt, müssen Sie den Daten ein Feld hinzufügen, um es zu identifizieren: dialogStatus Code>. 🎜🎜<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/164/168437962981182.png" class="lazy" alt="So implementieren Sie die Bearbeitungsfunktion im Front-End und Backend von springboot vue project management“ />🎜🎜Änderung Wenn Sie im Formular auf die Schaltfläche [Speichern] klicken, wird der Wert von <code>dialogStatus verwendet, um zu entscheiden, ob die neue oder die aktualisierte Methode aufgerufen werden soll: 🎜🎜🎜🎜Neu hinzugefügte updateData code>-Methode zum Aufrufen der Update-Schnittstelle des Backends. Vergessen Sie jedoch nicht, die Schnittstellenanforderung in die js-Datei einzufügen und sie dann in die Vue-Seitendatei zu importieren. 🎜🎜<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/164/168437962991065.png" class="lazy" alt="So implementieren Sie die Bearbeitungsfunktion im Springboot Vue-Projektmanagement-Frontend und -Back -end">🎜🎜Dann fahren Sie mit der Vervollständigung des Codes der <code>updateData-Methode fort: 🎜🎜🎜🎜Hier haben wir auch eine Änderung an der Schaltfläche [Element hinzufügen] entworfen, denn wann Wenn Sie auf die Schaltfläche [Bearbeiten] klicken, ist dialogStatus gleich update code>. Wenn Sie dann auf Hinzufügen klicken, müssen Sie den Wert natürlich <code>create zuweisen um die Methode add() aufzurufen. 🎜🎜Aber da die vorherige Schaltfläche [Element hinzufügen] an einen this.dialogFormVisible = true gebunden war, haben wir diese beiden extrahiert und in eine Methode geschrieben handleAdd Medium: 🎜

Dann fügen Sie diese neue Schaltflächenbindungsmethode hinzu.

Testen Sie abschließend die Funktionalität.

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Bearbeitungsfunktion im Front-End und Back-End des Springboot Vue-Projektmanagements. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!