接口测试平台代码实现番外：主页终焉-1
好了，不知不觉，该平台已经跨过了130章的教程，主要功能已经实现过半，一些同学也开始实际项目中使用起来，各种提出的改进建议 优化也都接踵而至，其中最多的就是主页，请求改版。
作为一个项目的门面，主页的排版设计 和 功能一样重要。但是我们教程中的主页一直以来都作为我们学习的草稿，承担了太多不属于它的责任。不过本次将正式进行首页的 一次改版。
来看下我们现在的首页：
接下来我们进行修改：
- 进入时默认隐藏左侧菜单：加入进入页面时默认自动点击隐藏菜单按钮。
2. 左侧记录高度缩短，留下空白以他用
3. 左侧记录放到左下角：
4. 中间竖线颜色由黑变淡灰：
5. 添加横线，放在请求记录上方：
<div id="heng" style="width: 310px;height: 1px;background-color: #e0ddde;position: absolute;left:15px ;bottom: 310px">
</div>6. 记录的请求类型和url 组合显示：
<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. 增加个人项目列表功能
首先我们要去后台控制数据里，添加个人的项目数据：
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}然后我们去前端增加这个循环展示，具体代码如下，很长，大家不必纠结前端样式，复制即可：
<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"> 立即进入 </a>
<a href="#" onclick="" style="background-color: #e92f6c;color: white;font-size: large;border-radius: 5px"> 保存请求 </a> <br>
<br>
</div>
</div>
</div>
{% endfor %}
</div>
其中我对每个项目都设置了俩个按钮，点击可以进入或保存右侧请求直接进入该项目的接口库，功能下一节再完善吧。
效果如下：项目可以点击展开收缩 有动画效果。
平台主打淡蓝色调调哦～
下一节我们继续进行优化。
本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。
原始发表：2021-02-01，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
