接口自动化接口管理模块开发（三）

后端接口定义

首先先来看左侧的树形结构，最外层可以新增分类和接口，然后分类下还可以创建子分类，分类和子分类下可以创建接口，然后接口下可以创建用例。因此需要三张表，分别是「分类表」、「接口表」、「用例表」。

分类和接口是1:n的关系，因此只需要在「接口表」中维护一个分类字段；接口和用例也是1:n的关系，因此也需要在「用例表」中维护一个接口字段。

按照上诉分析，在后端项目中mian/models.py中编写Model类。（篇幅有限，仅提供分类和接口Model定义，用例与接口基本一致）

class Category(models.Model):
    name = models.CharField(max_length=50, verbose_name="分类名称")
    parent_category = models.ForeignKey("self", null=True, blank=True, verbose_name="父分类", on_delete=models.CASCADE)
    created_by = models.ForeignKey(User, null=True, verbose_name="创建人", on_delete=models.DO_NOTHING)
    created_at = models.DateTimeField(default=datetime.now, verbose_name="创建时间")
    updated_at = models.DateTimeField(default=datetime.now, verbose_name="更新时间")

    class Meta:
        verbose_name = "分类"
        verbose_name_plural = verbose_name


class Api(models.Model):
    METHOD_TYPE = (
        ('GET', 'GET'),
        ('POST', 'POST'),
        ('PUT', 'PUT'),
        ('PATCH', 'PATCH'),
        ('DELETE', 'DELETE')
    )
    name = models.CharField(max_length=50, verbose_name="接口名称")
    desc = models.CharField(max_length=500, blank=True, null=True, verbose_name="接口描述")
    method = models.CharField(max_length=10, choices=METHOD_TYPE, verbose_name="请求方式")
    path = models.CharField(max_length=500, blank=True, null=True, verbose_name="接口路径")
    params = models.CharField(max_length=500, blank=True, null=True, verbose_name="请求参数，以json串进行保存")
    headers = models.CharField(max_length=500, blank=True, null=True, verbose_name="请求头，以json串进行保存")
    body = models.TextField(blank=True, null=True, verbose_name="请求头，以json串进行保存")
    category = models.ForeignKey(Category, null=True, blank=True, verbose_name="分类", on_delete=models.CASCADE)
    created_by = models.ForeignKey(User, null=True, verbose_name="创建人", on_delete=models.DO_NOTHING)
    created_at = models.DateTimeField(default=datetime.now, verbose_name="创建时间")
    updated_at = models.DateTimeField(default=datetime.now, verbose_name="更新时间")

    class Meta:
        verbose_name = "接口"
        verbose_name_plural = verbose_name

然后使用命令python manage.py makemigrations和python manage.py migrate将表同步到数据库。

然后在后端项目中mian/views.py中使用ModelViewSet快速定义「分类」、「接口」、「用例」用的简单增删改查接口。

class CategoryViewSet(ModelViewSet):
    queryset = Category.objects.filter()
    serializer_class = CategorySerializer


class ApiViewSet(ModelViewSet):
    queryset = Api.objects.filter()
    serializer_class = ApiSerializer


class CaseViewSet(ModelViewSet):
    queryset = Case.objects.filter()
    serializer_class = CaseSerializer

将路由配置之后，重启后端项目，进行swagger页面，就可以看到创建了18个相关接口，在交互的过程中，部分接口可能需要进行调整，将在后面一一进行完善。

前端接口对接

后端接口完成后，在前端项目的src/apis目录下定义接口方法，供页面进行引用，具体方案参照前端的项目管理接口，不再赘述。

新增分类

首先完成新增分类的功能。首先给右上角（如图所示）「新增分类」按钮添加onClick事件，点击按钮后打开Modal弹窗，支持输入分类名称，点击Modal的【确定】按钮后，调用接口保存分类。

新增分类成功后，还需要刷新树形结构，为避免接口过多导致加载变慢，这里使用Atree组件提供的懒加载功能，即点击展示按钮时请求子节点。首先查询父分类为空的分类列表和分类为空的接口列表。

后端目前提供的接口支持查询父分类为null的分类，因此后端接口需要进行改造，通过重写self.get_queryset方法。

然后在前端项目中调用查询接口获取到父分类为空的分类列表。

const queryCategories = (parent_category) => {
  listCategoryApi(parent_category).then((res) => {
    treeData.value = res;
  });
};

onMounted(() => {
  queryCategories(-1);
});

重启项目，刷新页面就可以看到新增的分类了，如下：

接着为了实现懒加载效果，需要先新增分类下的节点，篇幅有限，本章先用新增子分类来演示。

跟上面一样，给【新增分类】按钮添加事件，拉起Modal框，调用接口新增分类，不一样的是本次需要将父分类的ID作为参数传递。

子分类新增成功后，就可以使用懒加载的效果了，在atree组件中新增load-data属性，在loadData方法中调用接口查询该分类下的接口或者分类。

const loadData = (treeNode) => {
  return new Promise((resolve) => {
    if (treeNode.dataRef.children) {
      resolve();
      return;
    }

    listCategoryApi(treeNode.dataRef.id).then((res) => {
      treeNode.dataRef.children = res;
      treeData.value = [...treeData.value];
      resolve();
    });
  });
};

重启项目，刷新页面，点击「分类一」的展开按钮就可以看到效果了。

本章到这里就结束啦，下章将完成新增接口的交互。

接口自动化 接口管理模块开发（三）

后端接口定义

前端接口对接

新增分类

接口自动化接口管理模块开发（三）