springboot vue测试列表递归查询子节点下的接口功能实现

让我详细讲解一下“springboot vue测试列表递归查询子节点下的接口功能实现”的完整攻略。

简介

这里的需求是实现一个树形结构的列表，需要递归查询子节点及子节点的子节点，同时进行测试和使用Vue作为前端开发框架，Spring Boot作为后端开发框架。

实现步骤

1. 数据库设计

首先，需要设计数据库。我们可以创建一个树形结构的表，用来保存节点之间的关系。表结构如下：

CREATE TABLE tree (
  id INT PRIMARY KEY AUTO_INCREMENT,
  name VARCHAR(20),
  parent_id INT
);

其中，id为主键，name为节点的名称，parent_id为父节点的id，如果是根节点则parent_id应该为0。

2. 后端实现

接下来是后端的实现。我们需要创建一个Tree实体类，用来映射数据库中的tree表。同时创建一个TreeController，并实现查询子节点的方法，如下所示：

@RestController
@RequestMapping("/api/tree")
public class TreeController {
    @Autowired
    private TreeService treeService;

    @GetMapping("/getChildNodes")
    public List<Tree> getChildNodes(@RequestParam(value = "nodeId") Integer nodeId){
        return treeService.getChildNodes(nodeId);
    }
}

其中，TreeService是一个用来操作Tree实体类的服务类，getChildNodes方法用来查询指定节点的子节点。具体的实现如下：

@Service
public class TreeService {
    @Autowired
    private JdbcTemplate jdbcTemplate;

    public List<Tree> getChildNodes(Integer nodeId) {
        List<Tree> nodes = jdbcTemplate.query(
                "SELECT id, name, parent_id FROM tree WHERE parent_id = ?",
                new Object[]{nodeId},
                new BeanPropertyRowMapper<>(Tree.class));
        for(Tree node : nodes){
            List<Tree> childNodes = getChildNodes(node.getId());
            node.setChildren(childNodes);
        }
        return nodes;
    }
}

其中，jdbcTemplate.query方法用来执行查询，BeanPropertyRowMapper用来将查询结果映射成Tree实体类。查询出指定节点的所有子节点之后，我们需要递归查询每个子节点的子节点，即调用getChildNodes方法，实现递归查询。

3. 前端实现

有了后端实现之后，我们就可以开始进行前端实现了。在前端这里，界面可以使用ElementUI提供的Element-Tree组件来实现。

<template>
  <el-tree :data="treeData" :props="{label:'name', children:'children'}"></el-tree>
</template>
<script>
import axios from 'axios';
export default {
  data(){
    return {
      treeData: []
    }
  },
  created(){
    axios.get('http://localhost:8080/api/tree/getChildNodes?nodeId=0').then(resp=>{
      this.treeData = resp.data;
    })
  }
}
</script>

上面的代码中，我们首先import了axios组件，用来发起HTTP请求。创建了一个treeData变量，用来保存从后端获取到的树形数据。

同时，我们在created生命周期钩子函数中调用后端的getChildNodes接口，并将获取到的数据保存到treeData中，这样，我们就成功渲染了一颗树形结构！

示例说明

以上是整个项目的实现流程，下面我将通过两个示例来说明：

示例一：测试数据库查询功能

首先，我们需要编写一个测试类，用来测试后端的数据库查询功能。测试代码如下：

@RunWith(SpringRunner.class)
@SpringBootTest
public class TreeServiceTest {

    @Autowired
    private TreeService treeService;

    @Test
    public void testGetChildNodes() {
        Integer nodeId = 1;
        List<Tree> nodes = treeService.getChildNodes(nodeId);
        Assert.assertNotNull(nodes);
    }
}

我们在这里使用JUnit框架编写了一个测试类，其中使用了@Test注解，这个注解告诉了JUnit框架这个方法是一个测试方法。

在测试方法中，我们首先定义了要查询的节点的id，然后调用treeService.getChildNodes方法查询所有子节点，并断言查询结果是否为空。

示例二：前端界面展示

实现前端界面的代码已经在上面的步骤中展示过了，这里再来写一下调用这个界面的代码：

<template>
  <div>
    <tree></tree>
  </div>
</template>
<script>
import Tree from './Tree.vue';
export default {
  components:{
    Tree
  }
}
</script>

在这里，我们通过import语句引入了前面编写的Tree组件，并注册了这个组件，然后在界面中引用了这个组件即可。

总结

在这个攻略中，我们介绍了如何实现使用Vue和Spring Boot创建一个树形结构的列表，并递归查询子节点下属的接口功能。同时，我们也介绍了两个小的示例，用来验证我们的代码是否正确。