开发者社区> 游客pxprrm2iipsfu> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

接口测试平台代码实现124: 全局变量-3

简介: 接口测试平台代码实现124: 全局变量-3
+关注继续查看

  好的,久违的代码干货荣耀回归。

本节内容继续开发我们的项目内全局变量,在此之前,先让我们一起回顾下,之前我们的进度:

我们的设计是,在项目内,新增了一个全局变量的页面:

微信图片_20220704225032.png紧接着,我们求建造了对应的数据库的表,然后又去后台新建了一个demo数据:

微信图片_20220704225039.png

然后在views.py中,成功通过child_json() 绑定了页面和这套数据:

微信图片_20220704225044.png

接下来我们就要来搞前端交互,创造一套可以增删改查的 全局变量的 前端页面。


既然我们已经成功搞定了后端进入的函数,所以我们专心搞前端:

打开我们的P_global_data.html:

跟随我的思路开始想,要展示表中所有符合的变量套,那么前端最外层应该是个for循环才对:

微信图片_20220704225051.png

那里面呢?我的设计是 循环的是变量套的名字,名字本身是一个按钮,点击可以进入编辑:微信图片_20220704225057.png

添加了这个按钮后,看看当前的样子:

微信图片_20220704225103.png

可以发现位置 肯定不好。所以我们 给它换个好的位置:

微信图片_20220704225109.png

现在距离左边界有了100px的距离了:

微信图片_20220704225115.png

现在我们去后台,多造一条数据,这样就可以看出 多个变量套的排列问题了:

微信图片_20220704225122.png

微信图片_20220704225143.png

可以看到 排列如此:

问题1:没有竖向排列

问题2:长短不一


所以我们修改前端样式代码如下:

微信图片_20220704225149.png

效果如下:

微信图片_20220704225143.png

现在我们要设计一个 显示内部数据的多行输入框。计划是给摆在右侧,所以可以通过脱离文档流 让其漂浮的办法,来快速完成效果:


因为这个显示编辑框是公共的,所以也就只存在一组,那么也就不能放在for循环内了。

效果如下:

微信图片_20220704225202.png

效果如下:

微信图片_20220704225208.png

现在还差删除和 增加按钮了。

删除按钮 是可以删除任意的,所以它要在循环内。

增加按钮 是公共的,只有一个,所以它在循环外:

按照箭头指向的 地方 进行改动成下图:

微信图片_20220704225215.png

效果如下:

微信图片_20220704225220.png

暂时我们 的外观设计就像个毛坯房,不过等我们把这个功能实现了,再单独拿出一节进行页面优化即可:

本节内容到此结束:

复制版本代码:

<div style="padding-left: 100px">
{% for i in global_data %}
    <button class="btn-danger">删除</button>
    <button class="btn-default" style="margin-top: 5px;width:150px ">{{ i.name }}</button>
    <br>
{% endfor %}
    <br>
<button class="btn-primary">新增</button>
</div>

<div style="position: absolute;left: 310px;top: 65px">
    <input id="name" type="text" style="width: 500px" placeholder="输入变量套的名字"> <br>
    <textarea id="data" style="width: 500px;height: 500px;" placeholder="输入json格式的变量套内容"></textarea>
</div>

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
接口测试平台代码实现125: 全局变量-4
接口测试平台代码实现125: 全局变量-4
18 0
接口测试平台代码实现132: 全局变量-11
我们今天要继续处理这个漫长的全局变量功能。 打开我的接口测试平台,然后开始回忆已经开发到哪了....
13 0
接口测试平台代码实现122: 项目内全局变量-1
项目内的全局变量,我们要怎么理解呢? 就是自行设计的众多变量,在接口库,用例库中都可以 通过特殊 占位符 来占位。 这在我们日常使用中是很常用的。 并且在自己的多套项目内共用。
15 0
接口测试平台代码实现88: 全局请求头-3
上节,成功搞定了请求头的增删改查。 本节我们就一起来研究,在接口库调试页面,用例库步骤详情页 这俩个地方如何加入这些项目公共请求头吧。
13 0
接口测试平台代码实现95:全局域名-2
接口测试平台代码实现95:全局域名-2
15 0
接口测试平台代码实现94:全局域名-1
接口测试平台代码实现94:全局域名-1
10 0
接口测试平台代码实现71: 多接口用例-11
好的因为群内大佬打赏的钱太多,所以履行承诺,加更一节: 本节主要处理掉,这个步骤保存的功能,其实对于跟到现在的同学来说,业务上的curd早就已经轻车熟路了。本节节奏稍快:
23 0
接口测试平台代码实现80: 多接口用例-20
接口测试平台代码实现80: 多接口用例-20
14 0
接口测试平台代码实现84: 多接口用例-24
接口测试平台代码实现84: 多接口用例-24
15 0
接口测试平台代码实现3:从0开始打造吧
鉴于上次很多小伙伴的反馈,所以本次代码教程打算从0开始讲,每节内容不会多到让我们赶紧到累或无法消化。 在开始之前,请确保你的电脑本地环境已经成功下载了python3和django。
34 0
+关注
游客pxprrm2iipsfu
我去热饭
435
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载