接口测试平台-95: 项目公共域名 库表设计+添加映射+增删改查

本节要开始弄公共项目域名了。

大家会不会有一种，不知道要怎么下手的感觉，其实很简单。可以看下目前的结构，在下面写一个全局域名。其实整体设计和全局请求头基本一致，只是当中的标签id 数据字段 函数名需要更改。前端如此，urls.py，和views.py还有models.py基本都是复制粘贴全局请求头的，这样不就简单了么？

不要怀疑这种借鉴抄袭copy的方法，这其实是最正常和常见的方法，谁还能天天写什么都需要去创新，去创造，去设计？那不累死了。毕竟最高级的程序员 往往会使用最简单的code方式：ctrl+c / v

 

1. 库表设计

先去models.py中搞定这个全局域名的数据层设计：

# 项目全局域名
class DB_project_host(models.Model):
    project_id = models.CharField(max_length=10, null=True)  # 项目id
    name = models.CharField(max_length=20, null=True)
    host = models.TextField(null=True)

    def __str__(self):
        return str(self.id) + " " + self.name

同步并生效：

去admin.py注册：

admin.site.register(DB_project_host)

后台 手动创建俩条数据：

到此。数据层设计完成，demo也弄了两条。怎么样，这个路线记住了么？

 

2. 添加映射

后台views.py中设置：

如上图，不管三七二十一，反正看到全局请求头加上了，给全局host也加上，准没错。

 

然后是发现全局请求头有个自己的保存函数，直接无脑复制并对应修改。

# 保存项目公共域名
def save_project_host(request):
    project_id = request.GET['project_id']
    req_names = request.GET['req_names']
    req_hosts = request.GET['req_hosts']
    req_ids = request.GET['req_ids']

    names = req_names.split(',')
    hosts = req_hosts.split(',')
    ids = req_ids.split(',')

    for i in range(len(ids)):
        if names[i] != '':
            if ids[i] == 'new':
                DB_project_host.objects.create(project_id=project_id,name=names[i],host=hosts[i])
            else:
                DB_project_host.objects.filter(id=ids[i]).update(name=names[i],host=hosts[i])
        else:
            try:
                DB_project_host.objects.filter(id=ids[i]).delete()
            except:
                pass
    return HttpResponse('')

 

其实只是把其中的key和value俩个字段 换成了 host字段而已。

 

然后去改urls.py，怎么样是不是感觉，整个开发过程和之前逆转过来了？其实根本没有必须的顺序，自己怎么舒服怎么来。

url(r'^save_project_host/$', views.save_project_host),  # 保存项目公共域名

 

3. 前端展示，增删改查

开辟一块空间用来存放全局域名，整体内容，基本和全局请求头类似，所以依然是复制粘贴，然后改各个标签的id和内部其他字段数据。

当然不要忘了 给这个按钮onclick属性连接上打开host设置框的函数:

（经常有同学反馈找不到图里的行数，其实可以通过ctrl+f 来搜索其中关键字。）

需要注意的是，请求头是 name = key : value ，每行三个框。而域名是  name  = host ，每行俩个框。

复制完后，改动时注意要一行一行的改，style内的样式属性基本不用改。注意：有些是host，有些是hosts。而且要保持好心态，因为一次性改动这么大一堆代码，很难做到一遍成，一次通。

 

改完后代码如下：（注意host输入框的宽度调整为了70%）

<!--  全局项目域名  -->
<div id="project_host_div" style="display: none; border-radius:5px; width: 70%; height: 70%;
    position: absolute; left: 15%; top: 15%; box-shadow: 4px 4px 8px grey; padding-left: 10px; background-color: white">

    <div class="btn-group" style="float: right">
        <button onclick="project_host_save()" type="button" class="btn btn-success">保存</button>
        <button onclick="project_host_close()" type="button" class="btn btn-default">取消</button>
    </div>

    <h4>请设置本项目的全局公共域名：</h4>
    <div id="host_plan">
        {% for i in project_host %}
            <input type="text" name="host_id" value="{{ i.id }}" style="display: none">
            <input type="text" name="host_name" value="{{ i.name }}" style="width: 20%; margin-top: 3px" placeholder="name"> = "
            <input type="text" name="host_host" value="{{ i.host }}" style="width: 70%" placeholder="host"> "
            <br>
        {% endfor %}
    </div>
    <br>
    <button onclick="add_project_host()">新增</button>
</div>
<script>
    {#    展示    #}
    function project_host_div_show() {
        document.getElementById('project_host_div').style.display = 'block';
    }

    {#    关闭    #}
    function project_host_close() {
        document.location.reload()
    }

    {#    保存    #}
    function project_host_save() {
        var names = document.getElementsByName('host_name');
        var hosts = document.getElementsByName('host_host');
        var ids = document.getElementsByName('host_id');
        var req_names= [];
        var req_hosts=[];
        var req_ids=[];

        for(var i=0;i<names.length;i++){
            req_names.push(names[i].value);
            req_hosts.push(hosts[i].value);
            req_ids.push(ids[i].value)
        }

        $.get('/save_project_host/',{
            "project_id":"{{ project.id }}",
            "req_names":req_names.toString(),
            "req_hosts":req_hosts.toString(),
            "req_ids":req_ids.toString(),
        },function (ret) {
            document.location.reload();
        })
    }

    {#    新增    #}
    function add_project_host() {
        var host_plan = document.getElementById('host_plan');
        var i0 = document.createElement('input');
        i0.name = 'host_id';
        i0.value = 'new';
        i0.style.display ='none';
        var i1 = document.createElement('input');
        i1.style='width: 20%;margin-top: 3px';
        i1.placeholder='name';
        i1.name='host_name';
        var i2 = document.createElement('input');
        i2.style='width: 70%';
        i2.placeholder='host';
        i2.name='host_host';
        host_plan.appendChild(i0);
        host_plan.appendChild(i1);
        host_plan.appendChild(document.createTextNode(' = " '));
        host_plan.appendChild(i2);
        host_plan.appendChild(document.createTextNode(' "'));
        host_plan.appendChild(document.createElement("br"));
    }
</script>

 

刷新页面，进行各种测试。我这边发现测试全部正常：