用Django全栈开发——21. 大规模优化整理

皮爷撸码
246 阅读7分钟

大家好，这是皮爷给大家带来的最新的学习Python能干啥？之Django教程，从零开始，到最后成功部署上线的项目。这一节，我们将对之前写的程序进行一下优化整理。

Peekpa.com的官方地址：peekpa.com

皮爷的每一篇文章，都配置相对应的代码。这篇文章的代码Tag是Post_021

在上几节，我们基本把网站的功能都开发了，这一节，我们需要

  • 针对Dashboard的页面优化；
  • 开发文章列页；
  • 顶部导航栏的功能还有。

Dashboard优化

目前，我们的Dashboard长这个样子：

就会发现左边的列表太长了，我们需要把它折叠起来，而且，我们点击每一个页面，左侧的标签也不会变成蓝色。我们就针对这两个功能研发。

功能位折叠

我们所谓的折叠，是目前我们总共有:Category, Tag, Post还有ExchangeLink这四项内容。我们可以折叠成四个项，然后每一项底下又有子菜单。这个功能其实在AdminLTE的例子里面就有实现：

我们这边也来实现以下。其实很简单，只要将cms/base/sidebar.html下的代码重新编辑一下就好，我们以为Post例：

<li class="nav-item has-treeview">
    <a href="{% url 'cms:post_manage_view' %}" class="nav-link">
      <i class="nav-icon far fa-copy"></i>
      <p>
        Post
        <i class="right fas fa-angle-left"></i>
      </p>
    </a>
    <ul class="nav nav-treeview">
      <li class="nav-item">
        <a href="{% url 'cms:post_manage_view' %}" class="nav-link">
          <i class="nav-icon fas fa-list"></i>
          <p>Post Management</p>
        </a>
      </li>
      <li class="nav-item">
        <a href="{% url 'cms:post_publish_view' %}" class="nav-link">
          <i class="nav-icon far fa-plus-square"></i>
          <p>Post Publish</p>
        </a>
      </li>
    </ul>
</li>

此刻，我们的页面就变成了这样：

接下来，我们就来在每一个item里面添加active，即点击这个页面，它对应的tab就高亮显示，还是以Post为例：

{% url 'cms:post_manage_view' as post_manage_view %}
{% url 'cms:post_publish_view' as post_publish_view %}
<li class="nav-item has-treeview {% if request.path == post_manage_view or request.path == post_publish_view %}menu-open{% endif %}">
    <a href="{{ post_manage_view }}" class="nav-link {% if request.path == post_manage_view or request.path == post_publish_view %}active{% endif %}">
      <i class="nav-icon far fa-copy"></i>
      <p>
        Post
        <i class="right fas fa-angle-left"></i>
      </p>
    </a>
    <ul class="nav nav-treeview">
      <li class="nav-item">
        <a href="{{ post_manage_view }}" class="nav-link {% if request.path == post_manage_view %}active{% endif %}">
          <i class="nav-icon fas fa-list"></i>
          <p>Post Management</p>
        </a>
      </li>
      <li class="nav-item">
        <a href="{{ post_publish_view }}" class="nav-link {% if request.path == post_publish_view %}active{% endif %}">
          <i class="nav-icon far fa-plus-square"></i>
          <p>Post Publish</p>
        </a>
      </li>
    </ul>
</li>

为什么要这样做？是因为在Django1.3之后，我们的URL可以动态的绑定了。即我们绑定post_manage_view变量为cms:post_manage_view，然后，在需要添加active的class里面，通过if标签做判断就可以了。

完全实现了动态绑定。

这样就实现了完美的显示蓝色标签。

文章列表页

接着，我们在前端，有首页，还有文章详情页，但是我们缺少一个文章列表页。所以我们就利用之前做好的东西，来迅速的开发一个文章详情页。

利用之前重构首页的开发逻辑，我们的文章列表页，有点像首页左侧下面的那个文章列表。所以，我们就在template/post/目录下，创建一个list.html文件，用来写我们的列表页。

这个页面也和其他页面一样，需要继承base/index_base.html页面，然后我们就直接搬运首页的布局来这里就可以：

{% extends 'base/index_base.html' %}
{% load post_filters %}

{% block title %}
Peekpa Post List
{% endblock %}

{% block head %}

{% endblock %}

{% block main %}
<div class="container mt-4 mb-4">
    <div class="row">
        <div class="col-md-8">
            
            <!-- 文章列表 -->
            <div class="row mt-3">
                <ul class="col-sm-12 d-block">
                    {% for post in list_post %}
                        <!-- 文章 -->
                        <li class="row mb-3" style="height: 180px;background-color: white">
                            <div class="col-sm-4 p-3 h-100">
                                <a href="{% url 'post:detail' time_id=post.time_id %}" class="w-100 h-100">
                                    <img src="{{ post.thumbnail }}" class="w-100 h-100">
                                    <div class="position-absolute mt-3"
                                         style="top:0;background-color: rgba(32,120,255,0.5)">
                                        <p class="small m-1 text-light">{{ post.category.name }}</p>
                                    </div>
                                </a>
                            </div>
                            <div class="col-sm-8 d-flex flex-column">
                                <p class="h5 mt-3 border-bottom mb-0 pb-2">
                                    <a href="{% url 'post:detail' time_id=post.time_id %}" class="text-decoration-none text-dark">{{ post.title }}
                                    </a>
                                </p>
                                <p class="small mt-2" style="font-size: 95%;">{{ post.description }}</p>
                                <div class="d-flex flex-row justify-content-between mt-auto">
                                    <p class="font-weight-light small pl-1 mb-3">{{ post.author.username }}</p>
                                    <p class="font-weight-light small pr-1 mb-3">阅读({{ post.read_num }})</p>
                                    <p class="font-weight-light small pr-1 mb-3">{{ post.publish_time_show | time_since }}</p>
                                </div>
                            </div>
                        </li>
                    {% endfor %}

                </ul>
            </div>

        </div>

        {% include 'base/right_section.html' %}

    </div>
</div>
{% endblock %}

复制index.html，然后删除代码，整个页面创建过程不到30秒，超级迅速。

既然页面已经创建好，我们接下来就要写视图函数了。这个视图函数也非常简单，就是读取所有数据，然后传递到这个页面就可以了。

def post_list_view(request):
    list_post = Post.objects.all()
    context = {
        'list_post': list_post
    }
    context.update(get_read_most_post())
    context.update(get_exchange_link())
    return render(request, 'post/list.html', context=context)

然后在urls.py文件里面配置一下：

urlpatterns = [
    path("list/", views.post_list_view, name="post_list"),
]

完事儿，我们直接在浏览器里面输入http://localhost:8000/list/然后看文章列表：

非常的完美，并且每篇文章都支持跳转。

这个页面的开发，整个过程不超过2分钟。这个就是程序员的思维，只要结构好，日后扩展都非常的轻松。

顶部导航栏优化

最后就是顶部导航栏的优化了。我们看到顶部的导航栏所在的文件是templates/base/navbar.html，这里有两种思路来优化：

  1. 直接在navebar.html文件里面的a标签写死。就像: <li class="nav-item mr-4"><a class="nav-link" href="#">首页</a></li> 一样；
  2. 后台创建一个标签模型，后端管理工具，然后前端的请求和之前的友链是一模一样的。只需要将数据塞给一个变量，然后把变量传送到前端就可以。

这两种开发，各有各的好处：

  1. 第一种开发好处是：非常迅速，写死即可，只需要修改html文件；坏处：不灵活，死板，不方便动态维护；
  2. 第二种开发的好处，自然就是方便灵活；坏处则是，需要开发很多代码。

这里，具体怎么实现，我就不做过多解释了，大家可以参考我的源码，因为这一块的东西，不管是写死还是写活，前面的章节都有很详细的说明（写活的方法直接参考友链开发章节）。

所以，最后我们的页面就变成了这样（注意顶部的active高亮显示），首页：

文章列表：

技术总结

最后总结一下，

Dashboard页面优化：

  1. Dashboard页面的优化，主要参考的就是AdminLTE官方的例子；
  2. 难点就在于点击tab item之后，item高亮显示的问题；
  3. 高亮显示的问题，需要使用到Django的DLT模板中的url标签还有if标签，将url先维护到一个变量中，然后判断条件则是路径是否和url一致，如果一致，则在class里面添加active；
  4. 完毕。

文章列表页面：

  1. 观察，和首页结构一样；
  2. 所以就复制一份index.html，然后将左侧顶部的文章去掉即可；
  3. 既然逻辑和首页一样，我们就只需要复制一份首页的视图函数，同样把顶部的文章去掉；
  4. 完毕。

NavBar的实现：

  1. 方法一，写死；
  2. 方法二，写后台管理程序，前端请求接口，相当于写活了；
  3. 当然还有更好的方法， 前端部分写死，后端写活，这样是最灵活的，我们下节课说；
  4. 完毕。

获取代码的唯一途径：关注『皮爷撸码』，回复『代码』即可获得。

长按下图二维码关注，如文章对你有启发，欢迎在看与转发。

avatar
文章
阅读
粉丝