BBS（仿博客園系統）項目03（主頁搭建、個人站點搭建（側邊欄分類展示、標簽展示、日期歸檔）、文章詳情頁相關功能實現）

来源:https://www.cnblogs.com/suguangti/archive/2019/06/23/11069779.html
-Advertisement-
Play Games

摘要： 主頁面的搭建（導航條下麵的區域） 個人站點 側邊欄分類展示 側邊欄標簽展示 側邊欄日期歸檔 文章詳情頁 文章內容 文章點贊點踩 文章評論 側邊欄分類展示 側邊欄標簽展示 側邊欄日期歸檔 文章內容 文章點贊點踩 文章評論 一、主頁面home.html的搭建（進一步完善） home.html頁面 ...


摘要：

  • 主頁面的搭建（導航條下麵的區域）
  • 個人站點
    • 側邊欄分類展示
    • 側邊欄標簽展示
    • 側邊欄日期歸檔
  • 文章詳情頁
    • 文章內容
    • 文章點贊點踩
    • 文章評論

一、主頁面home.html的搭建（進一步完善）

home.html頁面主要框架描述：

①導航條（已經完成）

②主頁左側邊欄信息展示：分類、標簽、日期歸檔，右側邊欄信息展示：廣告...

③中間文章列表展示：文章標題、摘要、作者頭像顯示、創建日期，點贊數

第一步：先將主頁面的大致框架佈局搭出來：

(先佈局282，然後兩邊用bootstrap的面板來顯示兩邊信息佈局)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主頁</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <link rel="stylesheet" href="/static/bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <script src="/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">BBS</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <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>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                {% if request.user.is_authenticated %}
                    <li><a href="">歡迎您</a></li>
                    <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">更多操作 <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="/set_password/">密碼修改</a></li>
                            <li><a href="#">修改頭像</a></li>

                            <li role="separator" class="divider"></li>
                            <li><a href="/logout/">註銷</a></li>
                        </ul>
                    </li>
                {% else %}
                    <li><a href="/login/">登錄</a></li>
                    <li><a href="/register/">註冊</a></li>
                {% endif %}
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>
<div class="container-fluid">
    <div class="row">
        # 左側信息欄占用2個柵格
        <div class="col-md-2 col-sm-2 col-xs-3">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">堅持就是勝利</h3>
                </div>
                <div class="panel-body">
                    一起加油！
                </div>
            </div>
            <div class="panel panel-info">
                <div class="panel-heading">
                    <h3 class="panel-title">一點一滴</h3>
                </div>
                <div class="panel-body">
                    一分一秒！
                </div>
            </div>
            <div class="panel panel-danger">
                <div class="panel-heading">
                    <h3 class="panel-title">尋尋覓覓，冷冷清清，凄凄慘慘戚戚</h3>
                </div>
                <div class="panel-body">
                    乍暖還寒時候，最難將息。三杯兩盞淡酒，怎敵他、晚來風急！
                </div>
            </div>
        </div>
        # 中間顯示文章相關信息占用10個柵格
        <div class="col-md-8 col-sm-8 col-xs-6">

        </div>
        # 右側信息欄占用2個柵格
        <div class="col-md-2 col-sm-2 col-xs-3">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">堅持就是勝利</h3>
                </div>
                <div class="panel-body">
                    一起加油！
                </div>
            </div>
            <div class="panel panel-info">
                <div class="panel-heading">
                    <h3 class="panel-title">一點一滴</h3>
                </div>
                <div class="panel-body">
                    一分一秒！
                </div>
            </div>
            <div class="panel panel-danger">
                <div class="panel-heading">
                    <h3 class="panel-title">尋尋覓覓，冷冷清清，凄凄慘慘戚戚</h3>
                </div>
                <div class="panel-body">
                    乍暖還寒時候，最難將息。三杯兩盞淡酒，怎敵他、晚來風急！
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

 第二步：使用Django admin後臺管理，快速導入相關文章信息

Django admin後臺管理相關設置：

① 必須是超級用戶才可以登錄後臺管理：在pycharm菜單欄Tools下，使用Run manage.py Task..，以命令行形式：createsuperuser來創建超級管理員用戶

② 需要將需要操作的模型表（models.py）全部都註冊到對應的應用名(app01)下的admin.py文件中

app01下admin.py文件中：

from django.contrib import admin
from app01 import models
# Register your models here.

# 註冊順序沒有關係，主要註冊即可
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.Article2Tag)
admin.site.register(models.UpAndDown)
admin.site.register(models.Comment)

 這裡說個小知識點：上圖黑框部分表明都是英文，不方便查看，可以設置成中文：

 在models.py文件中：UserInfo類下麵添加代碼：（其它表同理改之）

    class Meta:
        verbose_name_plural = '用戶表'
        # verbose_name = '用戶表'  # 用這個預設會在用戶名後面加個s尾碼，不建議使用

註意別忘了資料庫遷移命令，讓其生效

 ③ 通過Django administration為文章表添加文章信息：

文章添加完成會發現一個問題：


解決方法：models.py文件：UserInfo表的類下麵添加：其它表的顯示同設置即可

    def __str__(self):
        return self.title

強調一下：設置用戶表進行博客站點的關聯：（點擊進入用戶表>>>點擊需要關聯博客站點的用戶名>>>最下麵設置：）

 

第三步：將文章信息渲染到主頁面，同時添加文章下方相關信息的展示（作者、發佈時間、評論數、點贊數）

信息錄入完成，後開始渲染頁面：（使用bootstrap組件中的媒體對象列表模板，實現博客園類似文章顯示效果）

先查看頁面渲染效果：

接下來詳細說說，用戶頭像如何顯示的操作：

我們知道：用戶在註冊時候頭像文件是單獨放在一個叫avatar的文件夾下麵：

我們知道：在Django中

網站的靜態文件都放在static文件夾下，並且需要在settings配置文件中進行添加代碼進行設置，所以：

用戶上傳的靜態文件也需要單獨放在另外一個文件夾(media文件夾)下

在media文件夾下再存放對應文件夾：
　　　　　　　　avatar文件夾(用戶上傳的頭像)

　　　　　　　　files文件夾(用戶上傳的文件)

　　　　　　　　biography文件夾(用戶上傳的簡歷文件)

　　　　　　　　......等等

所以在Django Web框架下的項目，如果想獲取到用戶上傳的頭像圖片文件，就需要進行相關設置：
我們需要做 件事：

第一件事：規定用戶上傳的文件都統一放在media文件夾下，settings文件中配置用戶上傳的文件存放位置

# 在settings.py文件添加代碼：

MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
# 用戶上傳的文件會自動存放到該文件夾並且該文件夾不要你手動創建 

只做第一件事用戶圖像亦然不會顯示：

第二件事：將media文件夾暴露給外界可以直接訪問

需要urls.py文件中開一個路由：

# 需要導入一個serve模塊：
from django.views.static import serve
from BBS01 import settings

# 手動配置media文件路徑(暴露media文件夾內容)
url(r'^media/(?P<path>.*)', serve, {'document_root': settings.MEDIA_ROOT})

 此時media文件夾就暴露給外界，我們再在home頁面重新修改一下img頭像src路徑

home.html頁面文件內容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主頁</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <link rel="stylesheet" href="/static/bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <script src="/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">BBS</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <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>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                {% if request.user.is_authenticated %}
                    <li><a href="">歡迎您</a></li>
                    <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">更多操作 <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="/set_password/">密碼修改</a></li>
                            <li><a href="#">修改頭像</a></li>

                            <li role="separator" class="divider"></li>
                            <li><a href="/logout/">註銷</a></li>
                        </ul>
                    </li>
                {% else %}
                    <li><a href="/login/">登錄</a></li>
                    <li><a href="/register/">註冊</a></li>
                {% endif %}
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>
<div class="container-fluid">
    <div class="row">
        {#        左側信息欄占用2個柵格#}
        <div class="col-md-2 col-sm-2 col-xs-3">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">堅持就是勝利</h3>
                </div>
                <div class="panel-body">
                    一起加油！
                </div>
            </div>
            <div class="panel panel-info">
                <div class="panel-heading">
                    <h3 class="panel-title">一點一滴</h3>
                </div>
                <div class="panel-body">
                    一分一秒！
                </div>
            </div>
            <div class="panel panel-danger">
                <div class="panel-heading">
                    <h3 class="panel-title">尋尋覓覓，冷冷清清，凄凄慘慘戚戚</h3>
                </div>
                <div class="panel-body">
                    乍暖還寒時候，最難將息。三杯兩盞淡酒，怎敵他、晚來風急！雁過也，正傷心，卻是舊時相識。
                    滿地黃花堆積，憔悴損，如今有誰堪摘！守著窗兒，獨自怎生得黑！梧桐更兼細雨，到黃昏、點點滴滴。這次第，怎一個愁字了得！
                </div>
            </div>
        </div>
        {#        中間顯示文章相關信息占用10個柵格#}
        <div class="col-md-8 col-sm-8 col-xs-6">
            {% for article in article_list %}
            <ul class="media-list">
                <li class="media">
                    <h4 class="media-heading"><a href="">{{ article.title }}</a></h4>
                    <div class="media-left">
                        <a href="#">
                            <img class="media-object img-thumbnail" src="/media/{{ article.blog.userinfo.avatar }}" width="80">
                        </a>
                    </div>
                    <div class="media-body">
                        {{ article.desc }}
                    </div>
                </li>
            </ul>
{#              Pykk2019 發佈於 2019-06-21 評論(0)點贊(71)#}
                <span><a href="">{{ article.blog.userinfo.username }}</a></span>
                <span>&nbsp;發佈於&nbsp;</span>
                <span>{{ article.create_time|date:"Y-m-d" }}&nbsp;</span>
                <span class="glyphicon glyphicon-comment">評論({{ article.comment_num }})</span>
                <span class="glyphicon glyphicon-thumbs-up">點贊({{ article.up_num }})</span>
            <hr>
            {% endfor %}

        </div>
        {#        右側信息欄占用2個柵格#}
        <div class
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 數組任意取三個數中乘積最大值
    一、給定一個整型數組，包括正負值，找出取任意三個值的乘積最大 1、對整型排序（這裡使用堆排序） 2、最大值只能是最小兩個和最大一個或者最大三個值的乘積 3、測試 ...
  • 資料庫 -- 單表的數據查詢
    單表查詢的語法及關鍵字執行的優先順序 單表查詢語法 關鍵字執行的優先順序 1. 找到表: from 2. 拿著where指定的約束條件,去文件 / 表中取出一條條記錄 3. 將取出的一條條記錄進行分組group by , 如果沒有group by ,則整體作為一組 4. 執行select (distin ...
  • F#周報2019年第25期
    新聞 "Azure Notebook概覽" "SpecFlow 3就在這裡了！" "使用新的Try .NET模版創建互動式文檔" "逐漸演化的.NET Core框架" "Dylan與Linebreakers Oslo 2019" 視頻及幻燈片 "F MonoGame平臺游戲系列：平鋪背景" "我愛F ...
  • Python進階:metaclass談
    metaclass 的超越變形特性有什麼用？ 來看yaml的實例: import yaml class Monster(yaml.YAMLObject): yaml_tag = u'!Monster' def __init__(self, name, hp, ac, attacks): self.n ...
  • django 路由系統
    django 路由系統 [TOC] 路由是什麼? Django 1.11版本 URLConf官方文檔 基本格式: 示例： 參考官方文檔 2.0版本中re_path和1.11版本的url是一樣的用法。 正則表達式 詳解 補充說明 分組 命名分組 (建議使用命名分組) 小結 指定預設值 include其 ...
  • 描述符\get/set/delete,init/new/call,元類
    6.23 自我總結 1.描述符\_\_get\_\_,\_\_set\_\_,\_\_delete\_\_ 描述符是什麼：描述符本質就是一個新式類，在這個新式類中，至少實現了___\_get\_\_(),\_\_set\_\_(),\_\_delete\_\_()中的一個，這也被稱為描述符協議 __ ...
  • Java開發桌面程式學習（八）——開源庫 JFXUtils 讓你更簡單地進行JavaFX開發
    JFxUtils "項目地址" 介紹 這是一個JFX的工具庫，Intent可以簡單地實現打開一個新視窗並傳遞數據，DialogBuilder可以簡單地生成對話框,MyUtils有些常用的功能 使用 與`JavaFxTemplate JavaFxTemplate`模板 JavaFxTemplate模版 ...
  • isinstance/type/issubclass的用法,反射(hasattr,getattr,setattr,delattr)
    6.23 自我總結 面向對象的高階 1.isinstance/type/issubclass 1.type 顯示對象的類,但是不會顯示他的父類 2.isinstance 會顯示的對象的類,也會去找對象的父類,填寫參數是對象,類isinstance(對象,類)如果對象屬於後面的類會報Ture,反之Fa ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類