BBS - 设计系统首页(文章列表渲染)

最新推荐文章于 2024-09-01 15:40:16 发布

weixin_30632899

最新推荐文章于 2024-09-01 15:40:16 发布

阅读量140

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/mumupa0824/p/10469362.html

本文详细介绍使用Django框架构建个人博客的过程，包括系统首页设计、导航组件应用、主题布局实现、admin组件使用及文章数据渲染。从首页导航栏设置到主体布局规划，再到admin数据录入，直至首页文章列表展示，全面解析Django开发流程。

一.系统首页的导航区域

re_path('^$',views.index),  #在首页不用index也可以显示出。在url里边设置了这个，可以直接访问127.0.0.1:8000,可不加index

index.html

bootstrap里边的导航组件：https://v3.bootcss.com/components/

　　index.html

<!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.py

def logout(request):  #注销函数
    auth.logout(request) #request.session.flush() 把对应提交的名字给删掉了
    return redirect("/login/")

二.系统首页的主题布局

　　主体其他部分，加栅格栏

　　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直接插入，

方式三利用django的admin组件通过web的方式。

admin：（不是必须的）

　　Django内部的一个组件：后台数据管理组件（web页面）

　　python manage.py createsuperuser 针对用户认证组件对应的用户表userinfo ；is_superuser--> 1来确认你是否是超级用户

必须用超级用户才能登录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>