大家好，我是米洛，求三连！
回顾
上一篇我们费了点功夫，将异步代码改回了同步代码，但也不能说一无所获，我们编写好了在线运行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 }, ], }, ];
我们一步一步来分析:
- 顶层
顶层是一个列表，列表里面是一个dict（以Python数据结构为例）。 - 列表元素
列表元素又包括:title（展示名称）,key(唯一标识，为了方便选中的时候知道选到了哪个元素，和css中的id接近的概念),children(是否有孩子，孩子也是一样的列表)。
如果一个数据嵌套比较深，那么可能会在children里面有很多层children, 接下来我们就要处理这块。
构思出前端需要的数据
其实这个很像我们的文件夹的感觉，我这边列个目录给大家看看。
image
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" } ] } ] } ] } ]
可以看到，数据是这样一层一层的，可谓十分复杂!大家看到可能会觉得，要我手动写还行，要我根据数据库的数据生成，那我还是回去学习了树之后再来吧！
其实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: [] })
这样我们就完成了最外层数据的编写，result目前的结果:
[ { "title": "fat", "key": "env_1", children: [] }, { "title": "uat", "key": "env_2", children: [] } ]
可以看到，雏形已经出来了。
我们去放到树里面看看效果:
可以看到已经有2个目录了
图中显示了2个目录了，但是因为没有children的缘故，所以目录展开后是没有内容的~
剩下的就交给下一节来解决了！！！
