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

First, editing function

1. Edit the page display

Click the edit button of the tree node to open the dialog box and display the original node name.

There was no built-in edit operation in the tree control, so I just added a button on it that calls edit(data) with the click event.

To confirm that data is available, I printed the contents of data in the Edit method. It has the fields I need:

Id can be passed to the back-end interface to query the data in the table, and name can be directly used to display.

Next, when you click “Save button” to edit the page, the handleNodeUpdate method is called, which usually needs to pass the ID of the current node for back-end query data; The name of the input is passed in for updating the node name.

2. Implement back-end interfaces

Request Entity Class

package com.pingguo.bloomtest.controller.request;

import lombok.Getter;
import lombok.Setter;

@Getter
@Setter
public class EditNodeRequest {
    private Long id;
    private String name;
}
Copy the code

controller

@PostMapping("/rename") public Result rename(@RequestBody EditNodeRequest request) { try { apiModuleService.renameNode(request); return Result.success(); } catch (Exception e) { return Result.fail(e.toString()); }}Copy the code

service

Public void renameNode(EditNodeRequest Request) {// Query data based on the passed ID. ApiModule ApiModule = apiModuleDAO.selectById(request.getId()); // Update the object property value, save apiModule.setid (request.getid ()); apiModule.setName(request.getName()); apiModule.setUpdateTime(new Date()); apiModuleDAO.updateById(apiModule); }Copy the code

3. Before and after joint research

Complete the handleNodeUpdate method:

Mainly for interface calls and other related processing.

4. Test

Test modify this node:

Click the Edit button to display successfully.

Rename it to the new name and click save.

Function is normal.

Two, delete function

The deletion function is relatively simple. The front-end sends the ID of the node to be deleted to the back-end, and the back-end deletes the ID and all the data of the child nodes.

1. Back-end interfaces

controller

@GetMapping("/delete/{id}") public Result deleteNode(@PathVariable Long id) { try { int result = apiModuleService.deleteNode(id); return Result.success(result); } catch (Exception e) { return Result.fail(e.toString()); }}Copy the code

service

  public int deleteNode(Long id) {
      QueryWrapper<ApiModule> wrapper = new QueryWrapper<>();
      wrapper.eq("id", id)
             .or()
             .eq("parentId", id);
      return apiModuleDAO.delete(wrapper);
  }
Copy the code

Note that the multicondition defaults to and(), where or() is required.

2. Front-end implementation

Add an interface:

The delete button in the page is bound to a method called remove(data), in which the node ID can be obtained. This has been verified in the edit function above.

Call the delete interface and refresh the tree once you’re done.

3. The test

Delete this node.

The deletion succeeded. Procedure

However, there will be further details to be optimized, such as confirming that the popbox, the top node cannot be deleted, all resources under the node (API and Case) logical deletion, etc.

Next, the core functions of interface definition are developed: interface list, adding, debugging and so on.