BBS - 設計系統首頁(文章列表渲染)

時間 2019-12-07

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

原文原文鏈接

一.系統首頁的導航區域

re_path('^$',views.index),  #在首頁不用index也能夠顯示出。在url裏邊設置了這個，能夠直接訪問127.0.0.1:8000,可不加index

index.htmlcss

bootstrap裏邊的導航組件：https://v3.bootcss.com/components/html

　　index.htmlpython

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/blog/bs/css/bootstrap.css">
    <script src="/static/js/jquery-3.3.1.js"></script>
    <script src="/static/blog/bs/js/bootstrap.js"></script>
    <style>
        #user_icon{  // 修飾圖標
            margin-right: 5px;
            vertical-align: -2px;  
        }
    </style>

</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="#">博客園</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>
        <li><a href="#">博文</a></li>

      </ul>

      <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>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

</body>
</html>

　　view.pyjquery

def logout(request):  #註銷函數
    auth.logout(request) #request.session.flush() 把對應提交的名字給刪掉了
    return redirect("/login/")

二.系統首頁的主題佈局

　　主體其餘部分，加柵格欄web

　　index.html

<div class="container-fluid">
    <div class="row">
        <div class="col-md-3">  // 分塊的，這一部分給它加個bootstrap的面板
            <div class="panel panel-warning">
                <div class="panel-heading">Panel heading without title</div>
                <div class="panel-body">Panel content</div>
            </div>

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

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

        <div class="col-md-6">
　　　　　　222
        </div>


        <div class="col-md-3">
            <div class="panel panel-primary">
                <div class="panel-heading">Panel heading without title</div>
                <div class="panel-body">Panel content</div>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading">Panel heading without title</div>
                <div class="panel-body">Panel content</div>
            </div>
        </div>
    </div>
</div>

三.admin的使用

在數據庫article裏邊要有文章，拿到全部的文章列表渲染到index頁面。從數據庫插入數據：方式一navicat，方式二sql直接插入，sql

方式三利用django的admin組件經過web的方式。數據庫

admin：（不是必須的）django

　　Django內部的一個組件：後臺數據管理組件（web頁面）bootstrap

　　python manage.py createsuperuser 針對用戶認證組件對應的用戶表userinfo ；is_superuser--> 1來確認你是不是超級用戶session

必須用超級用戶才能登陸admin（django自動建立的）

　　admin.py

from django.contrib import admin

# Register your models here.

# 登陸以後寫註冊信息；8張表
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錄入文章數據

直接在admin裏邊操做，在Articles裏邊添加三篇文章

Blogs綁定兩個對象

在user表裏綁定一對一的關係。mm,kb，他們所對應的Blog（mm的我的博客、KB的運動博客）。

在article表裏添加文章信息，給它添加文章分類Category。

五.首頁的文章列表的渲染

訪問index時候在它所對應的視圖中拿到全部的article列表，交給所對應的模板去渲染。

　　views.py

def index(request):
    article_list = models.Article.objects.all()   # 那到數據

    return render(request, "index.html", {"article_list": article_list})

　　index.html

　　頭像是在admin/blog/userinfo設置.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/blog/bs/css/bootstrap.css">
    <script src="/static/js/jquery-3.3.1.js"></script>
    <script src="/static/blog/bs/js/bootstrap.js"></script>
    <style>
        #user_icon{
            margin-right: 5px;
            vertical-align: -2px;
        } .pub_info{ margin-top: 10px; } .pub_info .glyphicon-comment{ vertical-align: -1px; } .pub_info .glyphicon-thumbs-up{ vertical-align: -1px; }
    </style>

</head>
<body>

......

<div class="container-fluid">
    <div class="row">
        <div class="col-md-3">
       　　...
        </div>

        <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="50" height="50" src="media/{{ article.user.avatar }}" alt=""></a>
　　　　　　　　　　　　　　　　　　　// 拿到avatar的相對路徑的頭像(userinfo表裏面)
　　　　　　　　　　　　　　　　　　　// 上邊那個相對路徑是在media文件夾裏面，必須配上這個media才能訪問到
                            </span>
                            <span class="media-right">
                                {{ article.desc }}  // 文章內容摘要 </span>
                        </div>
                        <div class="small pub_info">
                            <span><a href="">{{ article.user.username }}</a></span> &nbsp&nbsp
                            <span>發佈於&nbsp&nbsp{{ article.create_time|date:"Y-m-d H:i" }}</span>&nbsp&nbsp  
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　// 要設置下時區settings-->> TIME_ZONE="Asia/shanghai"

                            <span class="glyphicon glyphicon-comment"></span><a href="">評論({{ article.comment_count }})</a>&nbsp&nbsp   // 加個圖標，評論數
                            <span class="glyphicon glyphicon-thumbs-up"></span><a href="">點贊({{ article.up_count }})</a>  // 點贊圖標，點贊數
                        </div>

                    </div>

                    <hr>
                {% endfor %}

            </div>



        </div>
        <div class="col-md-3">
           ...
        </div>
    </div>
</div>

</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。