作为一个项目的门面，主页的排版设计 和 功能一样重要。但是我们教程中的主页一直以来都作为我们学习的草稿，承担了太多不属于它的责任。不过本次将正式进行首页的 一次改版。
来看下我们现在的首页：
接下来我们进行修改：
- 进入时默认隐藏左侧菜单：加入进入页面时默认自动点击隐藏菜单按钮。
- 左侧记录高度缩短，留下空白以他用
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>
其中我对每个项目都设置了俩个按钮，点击可以进入或保存右侧请求直接进入该项目的接口库，功能下一节再完善吧。
效果如下：项目可以点击展开收缩 有动画效果。
