设计系统首页（文章列表渲染）

一、系统首页导航区域

1、让http://127.0.0.1:8000可以直接访问首页

　　添加一条urls.py配置：

urlpatterns = [
    .....
    re_path('^$', views.index),   # 访问http://127.0.0.1:8000  可以直接访问首页
]

2、应用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标签内。

（3）对导航条代码做适当调整

　　由于我们的页面导航栏用不上，删除模板中的form标签和<li class="dropdown">标签的内容。

　　

　　添加导航栏栏目，编写模板语句，判定登录和未登录两种状态下导航栏右侧显示：

<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首页：

　　

（4）运用用户认证组件添加logout注销功能

　　首先在路由中添加logout路径：

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

　　其次在视图中编写logout视图函数：

from django.contrib import auth   # 引入用户认证组件auth模块

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

　　在首页点击注销操作，页面返回到登录页面，手动访问博客首页，导航栏右侧显示登录/注册按钮。

（5）在导航栏添加小人图标

　　首先在用户名前添加span标签，并添加bootstrap样式

<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>

 　　显示效果如图所示：

　　

二、系统首页主体布局

　　利用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>

　　显示效果如下所示：

　　

三、Django的admin组件介绍及使用

　　admin是Django内部的一个组件：后台数据管理组件（WEB页面）。admin并不是项目必需的。

1、创建用户认证组件超级用户来登录和使用admin组件页面

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

　　创建好新的超级用户的账号密码：alex/alex1234，访问admin页面：

　　

　　登录成功后显示如下：

　　

2、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)   # 评论表

　　注册完成后，页面如下所示：

　　

3、如何利用admin录入文章数据

（1）创建博客对象

　　

　　创建好的博客对象如下所示：

　　

（2）博客对象和用户绑定一对一关系

　　如下所示将alex绑定曹刘社区,yuan绑定yuan个人博客。

　　

（3）在Articles表里录入文章数据

　　

　　填写并保存文章，发现admin强行限制Category(分类)必须得加。

　　添加category对象：

　　

　　文章添加成功：

　　

四、系统首页的文章列表渲染

1、拿到当前所有文章对象传递到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})

2、首页文章列表初步渲染

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>标签分隔文章块。

显示效果如下：

　　

3、进一步渲染文章列表详细信息

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>

显示效果：

　　

 

posted @ 2018-07-31 16:26  休耕  阅读(1619)  评论(0)  编辑  收藏  举报