The test platform development based on Springboot + Vue continues to be updated.

Today implement project list edit function:

  • Click the “Edit” button to open the dialog box and display the information of this record
  • To modify the content of the dialog box form, click the “Save” button in the dialog box to update this record

1. Open the edit page to display data

1. Edit button

Copy the table component before, there are 2 buttons, change one of them to [edit] button.

Bind a click event handleUpdate(scope.row), which is the object of the current record and can be printed with a console.

2. Write the handleUpdate method to handle data visualization

Data externals actually query the item name and description of the current record and assign values to the form form. Here you need to query by item ID (unique).

Modify the back-end item list interface to support querying data by item ID:

Calling the interface in handleUpdate:

  • this.dialogFormVisible = trueFirst open the dialog box
  • In the projectQuery object for data, add an ID to pass to the interface.
  • Then put therow.idAssign the id in each row tothis.projectQuery.id
  • Finally request interface, return only one element in the list, put this resultprojectNameanddescription, and assign to the form form.

Test it out:

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; there is no need to write another one. So make a few changes so that the form can call the corresponding interface when it is added and edited, respectively.

The new interface already exists, now add a newer interface and continue writing in ProjectService.

And the corresponding controller processor outside:

Self-test update interface, function is normal.

2. Modify the front-end page

To distinguish between a new form and an edited form, add a field in data: dialogStatus.

Modify the “Save” button in the form. When clicked, the dialogStatus value is used to decide whether to call the new or updated method:

If dialogStatus equals “create”, it is new, otherwise it is modified and updated.

The handleUpdate method, which handles explicit edit page data, should also be modified by assigning dialogStatus to update:

Added the updateData method to call the update interface on the back end. But don’t forget to add the request for a good interface to the JS file and import it into the VUE page file.

Then proceed with the code for the updateData method:

Click the “Edit” button, dialogStatus equals update, so naturally click the “add” button and assign the value to “create” to call the add() method.

But since the [New Item] button already has a this.dialogFormVisible = true binding, pull them out and write them to a method called handleAdd:

Then add the button binding to the new method.

Finally, test the functionality.

Function complete.