接口测试平台代码实现番外:主页终焉-1

2022-05-19 09:47:56 浏览数 (1)

好了,不知不觉,该平台已经跨过了130章的教程,主要功能已经实现过半,一些同学也开始实际项目中使用起来,各种提出的改进建议 优化也都接踵而至,其中最多的就是主页,请求改版。

作为一个项目的门面,主页的排版设计 和 功能一样重要。但是我们教程中的主页一直以来都作为我们学习的草稿,承担了太多不属于它的责任。不过本次将正式进行首页的 一次改版。

来看下我们现在的首页:

接下来我们进行修改:

  1. 进入时默认隐藏左侧菜单:加入进入页面时默认自动点击隐藏菜单按钮。

2. 左侧记录高度缩短,留下空白以他用

3. 左侧记录放到左下角:

4. 中间竖线颜色由黑变淡灰:

5. 添加横线,放在请求记录上方:

代码语言:javascript复制
<div id="heng" style="width: 310px;height: 1px;background-color: #e0ddde;position: absolute;left:15px ;bottom: 310px">&nbsp;
</div>

6. 记录的请求类型和url 组合显示:

代码语言:javascript复制
<div id="home_log_plan" style="padding-left: 20px;overflow-y: scroll;width: 320px;position: absolute;bottom: 10px">
    <br>
    {% for i in home_log %}
        <div style="background-color: #eefaff;margin-bottom: 3px;border-radius: 5px;padding: 1px">
        <a href="/home_log/{{ i.id }}/" style=";text-decoration: none"  class="log" >
            <span style="font-size: large;;color: black">{{ i.api_method }}</span>
            {{ i.api_host }}{{ i.api_url }}
        </a>
        </div>
    {% endfor %}
</div>

左上角的留白,我们给放入 登陆用户当前的拥有项目列表。这样可以快速进入自己的项目,免去了先进入公共的项目列表这个步骤。

7. 增加个人项目列表功能

首先我们要去后台控制数据里,添加个人的项目数据:

代码语言:javascript复制
if eid == 'Home.html':
    date = DB_home_href.objects.all()
    home_log = DB_apis_log.objects.filter(user_id=oid)[::-1]
    hosts = DB_host.objects.all()
    from django.contrib.auth.models import User
    user_projects = DB_project.objects.filter(user=User.objects.filter(id=oid)[0].username)
    if ooid == '':
        res = {"hrefs":date,"home_log":home_log,"hosts":hosts,"user_projects":user_projects}
    else:
        log = DB_apis_log.objects.filter(id=ooid)[0]
        res = {"hrefs":date,"home_log":home_log,"log":log,"hosts":hosts,"user_projects":user_projects}

然后我们去前端增加这个循环展示,具体代码如下,很长,大家不必纠结前端样式,复制即可:

代码语言:javascript复制
<div  style="height: 400px;overflow-y: scroll;margin-left: 15px;width: 300px;" class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
    您的项目如下:
    {% for i in user_projects %}
         <div class="panel panel-default" >
            <div class="panel-heading" role="tab" id="heading{{ i.id }}">
                <h4 class="panel-title">
                    <a class="collapsed" style="text-decoration: none" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse{{ i.id }}" aria-expanded="false" aria-controls="collapse{{ i.id }}">
                        <span style="color: #01a2cb"> {{ i.name }} </span>
                    </a>
                </h4>
            </div>
            <div id="collapse{{ i.id }}" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading{{ i.id }}">
                <div style="padding-left: 10px;font-size: xx-small">
                   备注:{{ i.remark }} <br>
                   其他管理员:{{ i.other_user }} <br>
                    <a href="/apis/{{ i.id }}/" style="background-color: #47ba04;color: white;font-size: large;border-radius: 5px">&nbsp;立即进入&nbsp;</a> &nbsp;
                    <a href="#" onclick="" style="background-color: #e92f6c;color: white;font-size: large;border-radius: 5px">&nbsp;保存请求&nbsp;</a> <br>
                    <br>
                </div>
            </div>
        </div>
    {% endfor %}
</div>

其中我对每个项目都设置了俩个按钮,点击可以进入或保存右侧请求直接进入该项目的接口库,功能下一节再完善吧。

效果如下:项目可以点击展开收缩 有动画效果。

平台主打淡蓝色调调哦~

下一节我们继续进行优化。

url

0 人点赞