設計系統首頁（文章列表渲染）

時間 2019-11-16

標籤設計系統首頁文章列表渲染简体版

原文原文鏈接

1、系統首頁導航區域

一、讓http://127.0.0.1:8000能夠直接訪問首頁

　　添加一條urls.py配置：css

urlpatterns = [
    .....
    re_path('^$', views.index),   # 訪問http://127.0.0.1:8000  能夠直接訪問首頁
]

二、應用bootstrap快速編寫index首頁導航條

（1）引入bootstrap核心文件和jquery

<head>
    <!-- 引入 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="/static/blog/bootstrap-3.3.7/css/bootstrap.css">
    <!-- jQuery (Bootstrap 的全部 JavaScript 插件都依賴 jQuery，因此必須放在前邊) -->
    <script src="/static/js/jquery-3.3.1.js"></script>
    <!-- 引入 Bootstrap 核心 JavaScript 文件 -->
    <script src="/static/blog/bootstrap-3.3.7/js/bootstrap.js"></script> <!--依賴jquery-->
</head>

（2）拷入bootstrap導航條模板代碼

　　拷貝這些代碼到index頁面的body標籤內。html

（3）對導航條代碼作適當調整

　　因爲咱們的頁面導航欄用不上，刪除模板中的form標籤和<li class="dropdown">標籤的內容。python

　　添加導航欄欄目，編寫模板語句，斷定登陸和未登陸兩種狀態下導航欄右側顯示：jquery

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">園子 <span class="sr-only">(current)</span></a></li>
                <li><a href="#">新聞</a></li>
                <li><a href="#">博問</a></li>
                <li><a href="#">閃存</a></li>
                <li><a href="#">小組</a></li>
                <li><a href="#">收藏</a></li>
                <li><a href="#">招聘</a></li>
                <li><a href="#">班級</a></li>
                <li><a href="#">找找看</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                {% if request.user.is_authenticated %}
                    {# 已經登陸 #}
                    <li><a href="#">{{ request.user.username }}</a></li>
                    <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false">Dropdown <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">修改密碼</a></li>
                        <li><a href="#">修改頭像</a></li>
                        <li><a href="/logout/">註銷</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                    </ul>
                </li>
                {% else %}
                    {# 還未登陸 #}
                    <li><a href="/login/">登陸</a></li>
                    <li><a href="/register/">註冊</a></li>
                {% endif %}
            </ul>
        </div><!-- /.navbar-collapse -->
    </div>

　　未登陸狀況下顯示以下：數據庫

　　點擊登陸跳轉到登陸頁面登陸，輸入yuan/yuan1234和驗證碼後，登陸成功，跳轉回index首頁：django

（4）運用用戶認證組件添加logout註銷功能

　　首先在路由中添加logout路徑：bootstrap

path('logout/', views.logout),

　　其次在視圖中編寫logout視圖函數：瀏覽器

from django.contrib import auth   # 引入用戶認證組件auth模塊

def logout(request):
    auth.logout(request)   # 等同於執行request.session.flush()
    return redirect("/login/")

　　在首頁點擊註銷操做，頁面返回到登陸頁面，手動訪問博客首頁，導航欄右側顯示登陸/註冊按鈕。bash

（5）在導航欄添加小人圖標

　　首先在用戶名前添加span標籤，並添加bootstrap樣式session

<ul class="nav navbar-nav navbar-right">
    {% if request.user.is_authenticated %}
        {# 已經登陸 #}
        <li><a href="#"><span id="user_icon" class="glyphicon glyphicon-user"></span>{{ request.user.username }}</a></li>
        <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
           aria-expanded="false">Dropdown <span class="caret"></span></a>
        <ul class="dropdown-menu">
            <li><a href="#">修改密碼</a></li>
            <li><a href="#">修改頭像</a></li>
            <li><a href="/logout/">註銷</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
        </ul>
    </li>
    {% else %}
        {# 還未登陸 #}
        <li><a href="/login/">登陸</a></li>
        <li><a href="/register/">註冊</a></li>
    {% endif %}
</ul>

　　注意bootstrap的Glyphicons 字體圖標使用：

　　調整小人圖標樣式：

<style>
    #user_icon {
        font-size: 18px;  /*調整大小*/
        margin-right: 10px;   /*調整距離*/
        vertical-align: -3px;  /*調整高度*/
    }
</style>

　　顯示效果如圖所示：

2、系統首頁主體佈局

　　利用bootstrap提供的柵格系統，將頁面按3-6-3的比例劃分：

<div class="container-fluid">
    <div class="row">
        <div class="col-md-3">111</div>
        <div class="col-md-6">222</div>
        <div class="col-md-3">333</div>
    </div>
</div>

　　左右兩個部分先不作，暫時使用bootstap的面板進行填充：

<div class="panel panel-warning">
    <div class="panel-heading">Panel heading without title</div>
    <div class="panel-body">
        Panel content
    </div>
</div>

　　顯示效果以下所示：

3、Django的admin組件介紹及使用

　　admin是Django內部的一個組件：後臺數據管理組件（WEB頁面）。admin並非項目必需的。

一、建立用戶認證組件超級用戶來登陸和使用admin組件頁面

(venv) MacBook-Pro:cnblog hqs$ python3 manage.py createsuperuser
Username: alex
Email address:  
Password: 
Password (again): 
Superuser created successfully.

　　建立好新的超級用戶的帳號密碼：alex/alex1234，訪問admin頁面：

　　登陸成功後顯示以下：

二、admin註冊

　　在cnblog/blog/admin.py裏引入models，並以以下方式註冊表：

from django.contrib import admin

# Register your models here.
from blog import models

admin.site.register(models.UserInfo)   # 用戶信息表
admin.site.register(models.Blog)
admin.site.register(models.Category)
admin.site.register(models.Tag)
admin.site.register(models.Article)    # 文章表
admin.site.register(models.ArticleUpDown)   # 文章點贊表
admin.site.register(models.Article2Tag)
admin.site.register(models.Comment)   # 評論表

　　註冊完成後，頁面以下所示：

三、如何利用admin錄入文章數據

（1）建立博客對象

　　建立好的博客對象以下所示：

（2）博客對象和用戶綁定一對一關係

　　以下所示將alex綁定曹劉社區,yuan綁定yuan我的博客。

（3）在Articles表裏錄入文章數據

　　填寫並保存文章，發現admin強行限制Category(分類)必須得加。

　　添加category對象：

　　文章添加成功：

4、系統首頁的文章列表渲染

一、拿到當前全部文章對象傳遞到index首頁

views.py:

from blog import models

def index(request):
    # 拿到當前全部的文章
    article_list = models.Article.objects.all()
    return render(request, "index.html", {"article_list": article_list})

二、首頁文章列表初步渲染

index.html:

<!--文章列表部分-->
<div class="col-md-6">
    <div class="article_list">
        {% for article in article_list %}
            <div class="article-item">
                <h5><a href="">{{ article.title }}</a></h5>
                <div class="article-desc">
                    <span class="media-left">
                        {# 用戶頭像 #}
                        <a href=""><img width="56" height="56" src="media/{{ article.user.avatar }}" alt=""></a>
                    </span>
                    <span class="media-right">
                        {# 文章摘要 #}
                        {{ article.desc }}
                    </span>
                </div>
            </div>
            <hr>
        {% endfor %}
    </div>
</div>

注意：

　　（1）瀏覽器訪問頭像路徑必定要在前面拼接media別名

<div class="article-desc">
    <span>
        <a href=""><img width="56" height="56" src="media/{{ article.user.avatar }}" alt=""></a>
    </span>
</div>

　　（2）獲取文章摘要信息

<span class="media-right">
    {# 文章摘要 #}
    {{ article.desc }}
</span>

　　（3）利用bootstrap提供的media-left和media-right調整文章樣式，添加<hr>標籤分隔文章塊。

顯示效果以下：

三、進一步渲染文章列表詳細信息

index.html:

<!--文章下方詳細信息-->
<div class="small pub_info">
    {# 做者 #}
    <span><a href="">{{ article.user.username }}</a></span>    
    {# 文章發佈時間 #}
    <span>發佈於  {{ article.create_time|date:"Y-m-d H:i" }}</span>   
    {# 評論數 #}
    <span class="glyphicon glyphicon-comment"></span> 評論({{ article.comment_count }})  
    {# 點贊數 #}
    <span class="glyphicon glyphicon-thumbs-up"></span> 點贊({{ article.up_count }})
</div>

注意：

（1）日期顯示須要修改時區，修改settings.py中的TIME_ZONE字段

# TIME_ZONE = 'UTC'
TIME_ZONE = "Asia/Shanghai"

（2）引入bootstrap的Glyphicons字體圖標顯示評論圖標和點贊圖片

{# 評論數 #}
<span class="glyphicon glyphicon-comment">評論({{ article.comment_count }})</span>   
{# 點贊數 #}
<span class="glyphicon glyphicon-thumbs-up">點贊({{ article.up_count }})</span>

（3）在這裏發現模型中Article類的評論、點贊計數字典沒有添加，系統報錯

comment_count = models.IntegerField(default=0)
up_count = models.IntegerField(default=0)
down_count = models.IntegerField(default=0)

　　添加上述代碼後，再次執行數據庫遷移命令：

$ python3 manage.py makemigrations

$ python3 manage.py migrate

（4）樣式調整，給這個詳情信息區域添加class="small"，讓字體變小外，經過CSS調整圖標樣式

<style>
    #user_icon {
        font-size: 18px; /*調整大小*/
        margin-right: 10px; /*調整距離*/
        vertical-align: -3px; /*調整高度*/
    }
    .pub_info {
        margin-top: 10px;

    }
    .pub_info .glyphicon-comment {
        vertical-align: -1px;
    }
</style>