测试平台系列(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月前
|
关系型数据库 MySQL 测试技术
【分享】AgileTC测试用例管理平台使用分享
AgileTC 是一个脑图样式测试用例管理平台,支持用例设计、执行与团队协作,帮助测试人员高效管理测试流程。
250 116
【分享】AgileTC测试用例管理平台使用分享
|
2月前
|
人工智能 数据可视化 测试技术
AI测试平台自动遍历:低代码也能玩转全链路测试
AI测试平台的自动遍历功能,通过低代码配置实现Web和App的自动化测试。用户只需提供入口链接或安装包及简单配置,即可自动完成页面结构识别、操作验证,并生成可视化报告,大幅提升测试效率,特别适用于高频迭代项目。
|
2月前
|
人工智能 测试技术 调度
写用例写到怀疑人生?AI 智能测试平台帮你一键生成!
霍格沃兹测试开发学社推出AI智能测试用例生成功能,结合需求文档一键生成高质量测试用例,大幅提升效率,减少重复劳动。支持自定义提示词、多文档分析与批量管理,助力测试人员高效完成测试设计,释放更多时间投入核心分析工作。平台已开放内测,欢迎体验!
|
2月前
|
人工智能 测试技术 项目管理
测试不再碎片化:AI智能体平台「项目资料套件」功能上线!
在实际项目中,需求文档分散、整理费时、测试遗漏等问题常困扰测试工作。霍格沃兹推出AI智能体测试平台全新功能——项目资料套件,可将多个关联文档打包管理,并一键生成测试用例,提升测试完整性与效率。支持套件创建、文档关联、编辑删除及用例生成,适用于复杂项目、版本迭代等场景,助力实现智能化测试协作,让测试更高效、更专业。
|
2月前
|
人工智能 自然语言处理 测试技术
AI测试平台的用例管理实践:写得清晰,管得高效,执行更智能
在测试过程中,用例分散、步骤模糊、回归测试效率低等问题常困扰团队。霍格沃兹测试开发学社推出的AI测试平台,打通“用例编写—集中管理—智能执行”全流程,提升测试效率与覆盖率。平台支持标准化用例编写、统一管理操作及智能执行,助力测试团队高效协作,释放更多精力优化测试策略。目前平台已开放内测,欢迎试用体验!
|
10月前
|
数据可视化 前端开发 测试技术
接口测试新选择:Postman替代方案全解析
在软件开发中,接口测试工具至关重要。Postman长期占据主导地位,但随着国产工具的崛起,越来越多开发者转向更适合中国市场的替代方案——Apifox。它不仅支持中英文切换、完全免费不限人数,还具备强大的可视化操作、自动生成文档和API调试功能,极大简化了开发流程。
|
5月前
|
Java 测试技术 容器
Jmeter工具使用:HTTP接口性能测试实战
希望这篇文章能够帮助你初步理解如何使用JMeter进行HTTP接口性能测试,有兴趣的话,你可以研究更多关于JMeter的内容。记住,只有理解并掌握了这些工具,你才能充分利用它们发挥其应有的价值。+
971 23
|
7月前
|
SQL 安全 测试技术
2025接口测试全攻略:高并发、安全防护与六大工具实战指南
本文探讨高并发稳定性验证、安全防护实战及六大工具(Postman、RunnerGo、Apipost、JMeter、SoapUI、Fiddler)选型指南,助力构建未来接口测试体系。接口测试旨在验证数据传输、参数合法性、错误处理能力及性能安全性,其重要性体现在早期发现问题、保障系统稳定和支撑持续集成。常用方法包括功能、性能、安全性及兼容性测试,典型场景涵盖前后端分离开发、第三方服务集成与数据一致性检查。选择合适的工具需综合考虑需求与团队协作等因素。
1041 24
|
7月前
|
SQL 测试技术
除了postman还有什么接口测试工具
最好还是使用国内的接口测试软件,其实国内替换postman的软件有很多,这里我推荐使用yunedit-post这款接口测试工具来代替postman,因为它除了接口测试功能外,在动态参数的支持、后置处理执行sql语句等支持方面做得比较好。而且还有接口分享功能,可以生成接口文档给团队在线浏览。
325 2
|
9月前
|
JSON 前端开发 测试技术
大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
664 10
大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡

热门文章

最新文章