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

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

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

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

紧接着，我们求建造了对应的数据库的表，然后又去后台新建了一个demo数据：

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

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

------------------正文开始------------------

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

打开我们的P_global_data.html：

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

那里面呢？我的设计是 循环的是变量套的名字，名字本身是一个按钮，点击可以进入编辑：

添加了这个按钮后，看看当前的样子：

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

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

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

可以看到 排列如此：

问题1:没有竖向排列

问题2:长短不一

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

效果如下：

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

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

效果如下：

效果如下：

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

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

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

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

效果如下：

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

本节内容到此结束：

复制版本代码：

<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>

下节课，我们开始实现真实的功能。