测试平台系列(54) 数据库表接口适配前端页面(下)

简介: 数据库表接口适配前端页面(下)

大家好,我是米洛,求三连!

回顾


上一篇我们编写了树的最外层,但是因为我们还有很深的层级要嵌套,所以我们现在开始。

准备好了吗?

本文依旧有一定的难度,需要大家理解值传递和引用传递

先看看最终效果图,来点信心。

27.jpg

image

实现伪代码


上一节我们写的都是伪代码,这次直接来实现它。

28.jpg

编写方法,查询数据库和数据表

result是我们最终返回结果。

最外层我们先查询所有的环境,并生成一个映射关系:

环境id => 环境名称

为什么需要env_index


那么env_index又是干什么的呢?

因为环境是最外层,我们需要通过环境id找到我们要往哪个环境的children里面加第二层的数据,而我们生成的是一个列表,这就导致如果我们需要插入环境id=2的children的时候,不得不去搜索一次result,从result里面找到id="env_2"的那条数据,接着去append到他的children。

这样时间复杂度会非常高,但是如果我们提前记录了,我环境id=2的时候插入到result的第几个children,那么就省略了从数组中查询的那步,等于用空间(env_idx)换了查询的时间

完成第一层数据录入


29.jpg

接着获取session,并查出所有没被删除的database数据

30.jpg

image

可以看到,我们遍历拿到的PityDatabase数据,接着从env_map里把环境id转为环境名

再开始判断env_index里面环境名的索引,在result的第几个,如果没有的话,说明result里面还没有这个环境的任何数据。

那我们就插入一条环境数据


result.append(dict(title=name, key=f"env_{name}", children=list()))

那此时result就变成了:


[
    {title: "fat", key: "env_3". children: []}
]

这是环境3在result的索引肯定是数组的最后一个元素,因为我们刚刚才append进去的,所以idx = len(result)-1

接着我们把idx存起来,这个可以理解的吧~

MetaData是我们获取数据表的关键,为了避免重复生成,我这边只在最外层生成了,传递给get_tables方法。

实现内层数据


注意这里我用get_tables方法的时候,将result[idx]['children']参数传了进去,意味着后续所有的数据都会append到这个children里面去,十分方便

而children是个list,list是引用传递的。所以我在get_tables里面对list的改动,其实也是生效的,可以看到get_tables没有任何返回,那是因为我的result里头的children被改掉了,导致了我的result间接被改掉了,就这个道理

看看get_tables怎么写


31.jpg

image

  1. 我们先通过db_helper获取到当时的连接conn,里面包含了session和engine,还记得不?
  2. 我们再次新建一个list,叫database_child,看名字就知道,他是database再下面一层的数据。
  3. 我们编写当前database层的节点数据,其实就是个dict,title因为我们需要展示对应的数据库ip+port,所以是这样:

f"{data.database}({data.host}:{data.port})"

因为database有唯一id,所以key可以叫『database_{data.id}』

children即是上一步创建的list().

  1. 获取engine
  2. meta获取表信息
  3. 遍历表

这边再次说明一下,get_tables参数中的children,是环境的下一层,database_child是数据库的下一层,而dbs则是当前层次。

遍历表了以后,我们临时创建temp数组(temp是数据表的下一层,实际上存的是字段信息。)

32.jpg

这段代码是把table这一层加到database_child数组里面去

大家如果实在看不明白,以key为标准:

  • key以env开头说明是环境层
  • 以database开头说明是数据库层
  • 以table开头说明是数据表层
  • 以column开头说明是字段层
  1. 遍历字段数据,并把对应的字段加到temp数组,因为改了temp数组,所以实际上database_child(表那一层)也得到了改动。

33.jpg

primary_key字段代表是否是主键

  1. 最终把咱们这一层的dbs->带有表数据->带有字段数据,给加入到刚才传递给咱们的children数组中。

34.jpg

image

查看完成数据


35.jpg

image

0.jpg

可以看到数据正常展示了,和前端需要的一样

这样前端仔就不会再纠结数据怎么转换了,非常好用

看看实战效果


由于原生组件提供的图标啥的都比较粗糙,我们需要进行一下调整。

再来一发效果图,由于右侧的SQL编辑器还在路上,我们就不废话了。

36.jpg

image



相关文章
|
2月前
|
开发框架 前端开发 JavaScript
循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查询,列表展示和字段转义处理
循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查询,列表展示和字段转义处理
|
8天前
|
移动开发 JSON Java
Jmeter实现WebSocket协议的接口测试方法
WebSocket协议是HTML5的一种新协议,实现了浏览器与服务器之间的全双工通信。通过简单的握手动作,双方可直接传输数据。其优势包括极小的头部开销和服务器推送功能。使用JMeter进行WebSocket接口和性能测试时,需安装特定插件并配置相关参数,如服务器地址、端口号等,还可通过CSV文件实现参数化,以满足不同测试需求。
53 7
Jmeter实现WebSocket协议的接口测试方法
|
8天前
|
JSON 移动开发 监控
快速上手|HTTP 接口功能自动化测试
HTTP接口功能测试对于确保Web应用和H5应用的数据正确性至关重要。这类测试主要针对后台HTTP接口,通过构造不同参数输入值并获取JSON格式的输出结果来进行验证。HTTP协议基于TCP连接,包括请求与响应模式。请求由请求行、消息报头和请求正文组成,响应则包含状态行、消息报头及响应正文。常用的请求方法有GET、POST等,而响应状态码如2xx代表成功。测试过程使用Python语言和pycurl模块调用接口,并通过断言机制比对实际与预期结果,确保功能正确性。
35 3
快速上手|HTTP 接口功能自动化测试
|
8天前
|
JavaScript 前端开发 测试技术
ChatGPT与接口测试
ChatGPT与接口测试,测试通过
21 5
|
1月前
|
开发框架 前端开发 Java
【前端学java】SpringBootWeb极速入门-实现一个简单的web页面01
【8月更文挑战第12天】SpringBootWeb极速入门-实现一个简单的web页面01
50 3
【前端学java】SpringBootWeb极速入门-实现一个简单的web页面01
|
24天前
|
网络协议 测试技术 网络安全
Python进行Socket接口测试的实现
在现代软件开发中,网络通信是不可或缺的一部分。无论是传输数据、获取信息还是实现实时通讯,都离不开可靠的网络连接和有效的数据交换机制。而在网络编程的基础中,Socket(套接字)技术扮演了重要角色。 Socket 允许计算机上的程序通过网络进行通信,它是网络通信的基础。Python 提供了强大且易于使用的 socket 模块,使开发者能够轻松地创建客户端和服务器应用,实现数据传输和交互。 本文将深入探讨如何利用 Python 编程语言来进行 Socket 接口测试。我们将从基础概念开始介绍,逐步引导大家掌握创建、测试和优化 socket 接口的关键技能。希望本文可以给大家的工作带来一些帮助~
|
27天前
|
网络协议 测试技术 网络安全
Python进行Socket接口测试的实现
在现代软件开发中,网络通信是不可或缺的一部分。无论是传输数据、获取信息还是实现实时通讯,都离不开可靠的网络连接和有效的数据交换机制。而在网络编程的基础中,Socket(套接字)技术扮演了重要角色。 Socket 允许计算机上的程序通过网络进行通信,它是网络通信的基础。Python 提供了强大且易于使用的 socket 模块,使开发者能够轻松地创建客户端和服务器应用,实现数据传输和交互。 本文将深入探讨如何利用 Python 编程语言来进行 Socket 接口测试。我们将从基础概念开始介绍,逐步引导大家掌握创建、测试和优化 socket 接口的关键技能。希望本文可以给大家的工作带来一些帮助~
|
27天前
|
SQL Java 测试技术
SpringBoot单元测试快速写法问题之PorkService 接口中的 getPork 方法的作用如何解决
SpringBoot单元测试快速写法问题之PorkService 接口中的 getPork 方法的作用如何解决
|
2月前
|
存储
Postman 接口测试配置 Pre-request Script
Postman 接口测试配置 Pre-request Script
111 5
Postman 接口测试配置 Pre-request Script
|
29天前
|
XML Web App开发 数据挖掘
Postman接口测试工具全解析:功能、脚本编写及优缺点探讨
文章详细分析了Postman接口测试工具的功能、脚本编写、使用场景以及优缺点,强调了其在接口自动化测试中的强大能力,同时指出了其在性能分析方面的不足,并建议根据项目需求和个人偏好选择合适的接口测试工具。
38 1