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

The last one completed the module tree list interface, and the next can be linked to the front page.

1. Store the JS file of the interface

SRC/API /apiModule.js: SRC/API/apimodule.js: SRC/API/apimodule.js

import request from '@/utils/request'

export function getModuleList(projectId) {
  return request({
    url: `/bloomtest/module/list/${projectId}`,
    method: 'get'
  })
}
Copy the code

Call the interface in the VUE file

Before I changed the vue file name, called index. The vue, now replaced by the SRC/views/apiManagement/moduleTreeTable vue.

Change SRC /router/index.js to the vue file name after the rename.

In return, the tree component is bound to data. The data that was written to death before is now deleted as an empty array [].

Because the data array needs the data, my implementation of the back-end interface return is fully satisfied, so just write the method call.

1. Trigger the interface

Normally, I get to the interface definition list page, need to select an item, and then list the module tree and interface list under that item.

But we need to write a corresponding function here to select the specific project, not to do it for the time being.

So I put the event that triggers the module tree interface on the “Create interface” button, click the button will request the interface.

Bind a method queryModuleList.

2. Invoke the interface

Implement the queryModuleList method in method and call the interface in it.

At present, the project ID is directly written with a 3, which is convenient for debugging. There’s also a line that prints console.log(this.data), and you can also see the return of the interface on the console.

Open F12 and click “Create Interface” button to view the call result.

The page display is normal.

3. Realize the function of selecting items

In order to quickly debug the module tree function, I have shown that the create button triggers the request and now implements the select item function.

The function is very simple, is to open the interface definition page when the request interface to obtain all items, and then the drop-down list can be searched and selected among the items.

1. Add back-end interfaces to obtain all items

For the time being, there are no user permissions, so I just take all the items first.

Implement a corresponding interface in the back-end/bloomtest/project/list/all.

    @GetMapping("/list/all")
    public Result getProjectAll() {
        return Result.success(projectService.getProjectAll());
    }
Copy the code
    public List<Project> getProjectAll() {
        QueryWrapper<Project> queryWrapper = new QueryWrapper<>();
        return projectDAO.selectList(queryWrapper);
    }
Copy the code

The test returned to normal.

2. Front-end call interface

In the SRC/API/projectManagement. Js in the new interface:

export function getProjectAll() {
  return request({
    url: '/bloomtest/project/list/all',
    method: 'get'
  })
}
Copy the code

Import to VUE.

Add method getAllProject to methods in vue file:

The list returned by the request is assigned to this.options, which used to be dead data, now has an empty array.

Fields in the corresponding component should also be replaced by fields returned by the interface.

Finally, the method is called in Created.

Now click the drop-down to see the project.

3. Select the project trigger module tree interface

The selector component has an event change that is triggered when the selected value changes, so use the method called by the previous create button binding click event.

4. Test it out

Select project 2 first, there will be only one default project.

Select project 3, the project ID used for debugging before, which contains the hierarchical data.

Function is normal.

Next, we will develop the addition, deletion and modification of tree nodes.