好了,不知不觉,该平台已经跨过了130章的教程,主要功能已经实现过半,一些同学也开始实际项目中使用起来,各种提出的改进建议 优化也都接踵而至,其中最多的就是主页,请求改版。
作为一个项目的门面,主页的排版设计 和 功能一样重要。但是我们教程中的主页一直以来都作为我们学习的草稿,承担了太多不属于它的责任。不过本次将正式进行首页的 一次改版。
来看下我们现在的首页:
接下来我们进行修改:
- 进入时默认隐藏左侧菜单:加入进入页面时默认自动点击隐藏菜单按钮。
2. 左侧记录高度缩短,留下空白以他用
3. 左侧记录放到左下角:
4. 中间竖线颜色由黑变淡灰:
5. 添加横线,放在请求记录上方:
代码语言:javascript复制<div id="heng" style="width: 310px;height: 1px;background-color: #e0ddde;position: absolute;left:15px ;bottom: 310px">
</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"> 立即进入 </a>
<a href="#" onclick="" style="background-color: #e92f6c;color: white;font-size: large;border-radius: 5px"> 保存请求 </a> <br>
<br>
</div>
</div>
</div>
{% endfor %}
</div>
其中我对每个项目都设置了俩个按钮,点击可以进入或保存右侧请求直接进入该项目的接口库,功能下一节再完善吧。
效果如下:项目可以点击展开收缩 有动画效果。
平台主打淡蓝色调调哦~
下一节我们继续进行优化。