handleUpdate(scope.row)
. Diese zeile
ist das Objekt des aktuellen Datensatzes.
需要查询当前记录的项目名称和描述并将其赋值给表单才能将数据外显。这里需要根据项目id(唯一性)来查询。
修改一下后端项目列表的接口,使其支持根据项目id查询数据:
在 handleUpdate 中调用接口:
this.dialogFormVisible = true
,首先打开对话框在 data 的 projectQuery 对象中,新增一个 id,用于传参给接口。再把row.id
把每行里的 id 赋值给this.projectQuery.id
最后请求接口,返回的list中只有一个元素,把这个结果的projectName
和description
,再赋值给 form 表单即可。
测试一下:
编辑页表单与新增页面一致,没必要再写一个。因此,需要对表单进行一些修改,以便在创建和编辑时分别调用相应的API。
新增接口已有,现在增加一个更新的接口,继续在 ProjectService 里编写。
还有对应外面的 controller 处理器:
自测一下更新接口,功能正常。
为了可以区分这是新增表单还是编辑表单,需要在 data 里增加一个字段来标识:dialogStatus
。
修改表单里的【保存按钮】,点击的时候通过dialogStatus
的值,来决定调用新增还是更新的方法:
当dialogStatus
等于"create"
,就是新增,否则就是修改更。
那么处理编辑页数据外显的方法handleUpdate
也修改修改,给dialogStatus
赋值为update
:
新增updateData
方法,来调用后端的 update 接口。但是别忘记在 js 文件里添加好接口的请求,然后导入到 vue 页面文件中去。
然后继续完成的updateData
方法的代码:
这里还设计到【新增项目】按钮的改动,因为点击了【编辑】按钮,dialogStatus
等于update
,那自然点击新增的时候要赋值为create
才可以调用到add()
方法。
但由于之前的【新增项目】按钮已经绑定了一个this.dialogFormVisible = true
,所以把这2个抽出来,写到一个方法handleAdd
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="https://img.php.cn/upload/article/000/000/164/168437962981182.png" 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="https://img.php.cn/upload/article/000/000/164/168437962991065.png" 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!