How to implement springboot vue interface test definition editing function

1. Backend

The backend needs to add 2 interfaces: query and update the interface according to the interface ID.

1. Query interface

@GetMapping("/getApi")
  public Result getApiById(Long id) {
      return Result.success(apiDefinitionService.getApi(id));
  }

mybatis-plus has a direct query method using idselectById:

public ApiDefinition getApi(Long id) {
      return apiDefinitionDAO.selectById(id);
  }

This query interface is not behind the path The splicing parameters are just used for debugging of my later functions.

2. Update the interface

ApiDefinitionController Continue to add the editing request processing method:

@PostMapping("/update")
  public Result update(@RequestBody ApiDefinition request) {
      try {
          apiDefinitionService.update(request);
          return Result.success();
      } catch (Exception e) {
          return Result.fail(e.toString());
      }
  }

Then implement it in the ApiDefinitionService:

public void update(ApiDefinition request) {
      QueryWrapper<ApiDefinition> wrapper = new QueryWrapper<>();
      wrapper.eq("id", request.getId());
      request.setUpdateTime(new Date());
      apiDefinitionDAO.update(request, wrapper);
  }

First use the passed in id to query the data, and then update apiDefinitionDAO.update(request, wrapper).

2. Front-end

1. Implement editing display

Click the [Edit] button in the interface list to open the dialog box and display the data of the interface.

Add a binding event method handleApiUpdate on the [Edit] button of the interface list.

# Also don’t forget to add the query interface you want to request. I won’t go into details about this subsequent step.

In the handleApiUpdate method, explicit display is implemented.

#But a problem was discovered when assigning the request returned by the interface to the page. Because there are 3 tabs, I need to know which tab is returned by the backend.

Decided to add a fieldrequestType:Parameter type (0:query, 1:rest,2:body).

The corresponding request parameters of the new interface must also be added:

So where does the value of this field come from? Coming?

##Discovered

There is an event in the component, which will be triggered when the tab is clicked, then assign the value in this method That’s it.

Then, I thought of another problem: For example, if I put the parameters in the request body tab, but clicked other tabs, and finally clicked save, then this The type of dropped library is wrong.

In order to solve this problem, I decided to add a judgment: when saving, it will judge whether the value in the current tab is not empty. Only if it has a value, it can be saved. If not, it will prompt.

Add a new method

checkRequestNull Used to check whether the value in the current tab is empty:

Why use

here domains[0].keyJudge? Because there is an empty node by default, and the length of the data is also 1 when not filled in, so I changed it to judge the respective keys.

Last modification

saveApiSave the request method of the interface, add the above request parameter judgment, pay attention to the position:

Test it :

Continue to develop explicit functions.

There is one more thing to do next: after opening the edit page, automatically display the tabs page with data. For example, if I am the parameter of the request body, the request body tab page will be automatically displayed.

There are 2 changes here:

First look at the following, which is the added judgment, based on the request parameter type returned by the interface, and then assign the value to

this.activeName, you can display the corresponding tab. Look at the above, there is a new field id, which is used to save the interface id returned by the interface. It needs to be passed to the backend when editing. interface.

Test the explicit function:

#2. Implement interface update

The first thing to modify is the dialog box save button, I need By adding a field

apiDefinitionDialogStatus, when clicked, it is judged whether to call a new interface or an edit interface. The default is create.

This field has been used in the handleApiUpdate method of clicking [Edit], open the dialog box, and then assign the value to update:

Then modify the click event of the save button of the dialog box. When the value is equal to create, call saveApi(), otherwise call updateApi() .

Implement the updateApi method to perform update operations.

Before this, I need to add a field to the request object, which is the interface id, because the backend needs to use the id to query this data in the library.

Correspondingly, in the request parameter processing method, the assignment of id also needs to be added.

is to assign the id obtained during display to the request parameter body.

Finally, before requesting the interface, you also need to check whether there are parameters under the current tab. If it passes, then request the backend to update the interface:

Test it Function:

The function is completed, but one thing is missing, a reset is missing. Otherwise, if you click the [Create Interface] button, you will always see the last opened interface. content.

Add a new methodresetApiForm to reset the fields in the form:

Used when clicking the [Create Interface] button , let’s modify it here. Previously, we changed the status of a dialog box, but now we put it into a method:

Call in the method:

The above is the detailed content of How to implement springboot vue interface test definition editing function. For more information, please follow other related articles on the PHP Chinese website!