How to implement the editing function in springboot vue project management front-end and back-end

Test platform development based on springboot vue

1. Open the edit page to display data

1. Edit button

The table component copied before has 2 button, change one of them to the [Edit] button.

Bind a click eventhandleUpdate(scope.row), this row is the object of the current record, you can Add a console to print it.

2. Write the handleUpdate method to process data display

You need to query the project name and description of the current record and assign it to the form to display the data . Here you need to query based on the project id (uniqueness).

Modify the interface of the backend project list to support querying data based on the project ID:

Call the interface in handleUpdate:

this.dialogFormVisible = true, first open the dialog box and add an id in the projectQuery object of data for passing parameters to the interface. Then assign row.id to the id in each row to this.projectQuery.idFinally request the interface, there is only one element in the returned list, put the projectName of this result and description can be assigned to the form.

Test it:

2. Save the content of the edit page

1. Add an update interface to the backend

The edit page form is the same as the new page, so there is no need to write another one. Therefore, some modifications need to be made to the form to call the corresponding API when creating and editing respectively.

The new interface already exists. Now add an updated interface and continue writing in ProjectService.

There is also a corresponding external controller processor:

Self-test the update interface and it works normally.

2. Front-end page modification

In order to distinguish whether this is a new form or an edit form, you need to add a field to the data to identify it: dialogStatus.

Modify the [Save Button] in the form. When clicked, the value of dialogStatus is used to decide whether to call the new or updated method:

When dialogStatus is equal to "create", it is added, otherwise it is modified.

Then the method of processing the data display on the edit page handleUpdate is also modified, and the value assigned to dialogStatus is update:

New updateData method is added to call the backend update interface. But don’t forget to add the interface request in the js file, and then import it into the vue page file.

Then continue to complete the code of the updateData method:

Here we also design [ Changes to the [Add Item] button. Because the [Edit] button is clicked, dialogStatus is equal to update. Naturally, when clicking Add, the value must be assigned to create. The add() method can be called.

But since the previous [Add Item] button has been bound to a this.dialogFormVisible = true, so extract these two and write them into a method handleAddmiddle:

Then add a new button to bind this new method.

Finally, test the functionality.

The above is the detailed content of How to implement the editing function in springboot vue project management front-end and back-end. For more information, please follow other related articles on the PHP Chinese website!