测试平台系列(53) 数据库表接口适配前端页面(上).md

2022/6/13 测试平台接口测试FastApiPythonReact

大家好,我是米洛,求三连!求关注米洛的测开日记!

# 回顾

上一篇我们费了点功夫,将异步代码改回了同步代码,但也不能说一无所获,我们编写好了在线运行sql语句的功能,并返回了想要的字段->字段值的列表数据。

今天我们就来完善一下页面部分。

本文因为比较复杂而分为2节,有一定的难度,博主我也会尽量讲清楚,大家还需要多理解。

# 怎么查询到数据表和具体字段呢

这个功能我认为是一个比较大的亮点,一般来说我们在线执行测试,就拿我以前做的平台举例,都只是为了能让用户在线执行下SQL,所以对于数据表,字段等的展示都是放弃的。

今天呢,我们就来整一整这块的功能。

# 通过Engine获取表数据

我们都知道,可以通过执行show tables来查看表信息,但是我们不但要信息,还要字段,那该怎么做呢?

而且我们还需要把所有数据库配置都拉出哦,没事,看我操作就行了!

在sqlalchemy里面,可以用engine.table_names()拿到具体的表信息,而且是带上字段的,再对比一下我们的参考项目,我们就能明确到自己的方向了。

这就是我们的方向,也是老师

# 后端需要做什么

我们既然已经看到了大概想要实现的UI,那么我们就去ant.design官网找对应的树组件

可以看到,这种组件基本符合我们的要求

那么我们的数据该怎么准备呢?在前端不方便处理的时候,我们后端可以尽量返回前端使用舒服的数据。先看看组件需要的数据:

const treeData = [
  {
    title: 'parent 0',
    key: '0-0',
    children: [
      { title: 'leaf 0-0', key: '0-0-0', isLeaf: true },
      { title: 'leaf 0-1', key: '0-0-1', isLeaf: true },
    ],
  },
  {
    title: 'parent 1',
    key: '0-1',
    children: [
      { title: 'leaf 1-0', key: '0-1-0', isLeaf: true },
      { title: 'leaf 1-1', key: '0-1-1', isLeaf: true },
    ],
  },
];
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

我们一步一步来分析:

  • 顶层

    顶层是一个列表,列表里面是一个dict(以Python数据结构为例)。

  • 列表元素

    列表元素又包括: title(展示名称), key(唯一标识,为了方便选中的时候知道选到了哪个元素,和css中的id接近的概念), children(是否有孩子,孩子也是一样的列表)。

    如果一个数据嵌套比较深,那么可能会在children里面有很多层children, 接下来我们就要处理这块。

# 构思出前端需要的数据

其实这个很像我们的文件夹的感觉,我这边列个目录给大家看看。

fat是环境,最大的分类,接着pity是数据库名,pity下面还有pity_testcase(数据表),数据表下面还有id,name等字段。

那么如果我们是这些数据,要给前端是怎么展示的呢?按照他们的规则:

const treeData = [
{
  title: "fat",
  key: "env_fat",
  children: [
      {
          "title": "pity",
          "key": "database_pity",
          "children": [
              {
                  "title": "pity_testcase",
                  key: "table_pity_testcase",
                  children: [
                      {
                          "title": "id",
                          "key": "column_id"
                          // 这里就没有children了,因为字段是最后一级了
                      },
                      {
                          "title": "name",
                          "key": "column_name"
                      },
                      {
                          "title": "create_time",
                          "key": "column_create_time"
                      }
                  ]
              }
          ]
      }
  
  ]
}

]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

可以看到,数据是这样一层一层的,可谓十分复杂!大家看到可能会觉得,要我手动写还行,要我根据数据库的数据生成,那我还是回去学习了树之后再来吧!

其实duck不必,我们只要理清楚思路就行。

# 确定唯一key

大家有没有发现,虽然fat这种env是有id的,但是它也可能和其他表的id串了,所以我们是不能以id为key的。但如果我们加上表名的前缀,比如env_1,这样是不是不会串了呢?

那如果有的数据没有id呢?比如数据表的字段数据,其实没事,我们只要带上它爸爸的id即可,比如数据表字段虽然没有id,但是数据表的爸爸有,即我们的pity_database_info表,它是有唯一id的,所以我们带上他父亲的父亲的id即可。

# 各个击破

  • 环境层(第一层)

    首先我们需要获取到当前有多少环境,并拿到环境的具体id->环境名称的对应关系,因为我们的pity_database_info存放的env 是主键,而不是对应的环境名。

    假设我们拿到了环境列表,那我们可以造出第一层数据, 这里用伪代码展示:

envList = [{"id": 1, "name": fat}, {"id": 2, "name": "uat"}]
result = []
for env in envList:
    result.append({
        title: env.get("name"),
        key: f"env_{env.get("id")}",
        children: []
    })
1
2
3
4
5
6
7
8

这样我们就完成了最外层数据的编写,result目前的结果:

[
    {
        "title": "fat",
        "key": "env_1",
        children: []
    },
    {
        "title": "uat",
        "key": "env_2",
        children: []
    }
]
1
2
3
4
5
6
7
8
9
10
11
12

可以看到,雏形已经出来了。

我们去放到树里面看看效果:

可以看到已经有2个目录了

图中显示了2个目录了,但是因为没有children的缘故,所以目录展开后是没有内容的~

剩下的就交给下一节来解决了!!!

项目文档地址: https://pity.readthedocs.org (opens new window)