接口测试平台代码实现62: 多接口用例-2

2022-05-19 09:12:29 浏览数 (1)

好了,最近水了好多期,终于要写点代码了。 本节内容,我们搞定这个多接口的大用例 列表相关吧,难度基本为0,都是我们之前用到过的。

出现bug或者建议的 小伙伴可以直接留言或进微信群,但是可惜的是微信群创建不到一小时就满200了,然后就需要通过邀请进群了,小伙伴可以加我vx: qingwanjianhua 然后我邀请你进群,群里聊天异常火爆~

首先打开P_cases.html:

我们去复制之前的接口库的列表html然后改改就好:

大家不要着急,本文结尾会放上最新的源码压缩包,群内也会每天分享最新的源码压缩包。

暂时先设计成这样,这是一个大table表格,表头就一行没啥特殊的,表体一行一行的 都是靠这个for循环 展示出来的。

看看效果:

好的,我们去后台找到 进入这个用例库 的函数:

这就是我们之前设计的 函数。我们现在去找到控制各个页面进入时候带的数据的函数:

代码语言:javascript复制
child_json

给它加上 用例库需要带的数据:

我们现在 需要去数据库去构造这个大用例的表了:

打开models.py:

然后运行我们常用的两句命令 来生效:

运行时注意 要在项目的根目录,也就是能看到manage.py这个层:

然后别忘了 注册到admin.py中,这样我们后台也可以直接操作了:

然后我们重启服务 进入后台,找到这个用例表,去添加俩条数据:

注意这个project_id, 一定要是自己已有的项目哦,我的是1 你看看自己的;

添加好了:

现在让我们返回到

代码语言:javascript复制
child_json

来补全代码:

然后我们重启服务,刷新页面,进入用例库看看效果:

已经成功显示出来了.但是大家发现 这个id 占的宽度太大了。所以我们要在id的表头th里加上宽度:

然后又变成了这个鬼样子:

原来是因为 所有的th一旦都设置了宽度后,那么你最好让它们加起来=100%或接近,不然就会出现右边空白一大块的窘境:

所以我们考虑再三,给名称的宽度加长:

动态的宽度设置:-webkit-calc(100% - 410px)

大家自行调整哈~

然后我们这里有个遗漏的bug:

就是我们发现 这个页面的顶部菜单上是这样写的:

你会发现,这里需要项目名称 和项目id,但是我们刚刚并没有传进来,所以此时点击顶部菜单 会发生错误进入到空白页面。

所以我们还是要回去views.py中在child_json里 给传过来项目name和id:

可能大家觉得有点麻烦了,后期我们会用更高端的手法重写这个顶部菜单,不过目前我们还是简单点,把精力放在核心功能上。

然后我们重启服务 刷新页面 ,来回切换下接口库 /用例库 ,发现没问题来,项目名称也显示了。

然后我们本节最后,添加一个新增用例的按钮:

放在了这个列表的最下方。

效果如下:

好了,今天的内容就这么多了。下一节我们 要实现 新增/复制/删除 这三个按钮的功能~

目前进度代码压缩包:

链接: https://pan.baidu.com/s/1rW3wu20-XBp1SEBU4B2ogQ 密码: u5qh

0 人点赞