实践五：详情页

实践五：详情页

内容简介：本机课将在实践四的基础上，将Post模型增加几个字段，并创建详情页。

1.在完成实践4的基础上开始本节课的内容。

2.更新posts/models.py文件，代码如下：

from django.db import models

class Post(models.Model):
    title=models.CharField(max_length=100) #新增字段
    author=models.ForeignKey('auth.User',on_delete=models.CASCADE) #新增字段
    created_at = models.DateTimeField(auto_now_add=True) #新增字段
    text = models.TextField()

    def __str__(self):
        return self.title  #更新内容

代码解读：此处我们增加了标题（title），作者（author）和创建时间（created_at）3个字段，其中author为外键，它与user表相关联（user表是Django数据库中自带的），created_at为该文章的创建日期，设置auto_now_add=True后，每次我们新建一篇文章，系统都会将当前的时间填充到created_at字段中，这样我们就不用自己手动输入时间了。

3.删除原有数据库，重新迁移数据，重新创建超级用户。

注意：因为上节内容中，我们已经向Posts表格中填充了数据（记录），更新models后，Posts表格会增加title、author和创建created_at三个字段，而原有的记录中只有text字段，缺少这些新增字段的值，直接迁移数据会出现各种问题，最简单的方法就是删除原有数据库，重新迁移数据。

（1）删除db.sqlite3数据库

 

（2）删除0001.initial.py文件

 

 （3）重新迁移数据

python manage.py makemigrations

python manage.py migrate

 （4）重新创建superuser

python manage.py createsuperuser

4.启动本地服务器，登录管理页面添加记录

python manage.py runserver

注意：建议添加3个及以上条记录，方便后期详情页的理解

5.更新posts/views.py文件

# posts/views.py
from django.views.generic import ListView #引用DetailView视图
from .models import Post

class PostsPageView(ListView):
    model=Post    
    template_name='posts.html'

6.更新templates/posts.html文件，刷新信息公开页面，查看效果如下

{% extends 'base.html' %}
{% block content %}
<h1 class="text-center">文章列表</h1>
    {% for post in object_list %}
    <div class="card mb-4">
        <div class="card-body">
            <h4 class="card-title">{{post.title}}</h4>
            <p class="text-secondary">作者：{{post.author}}&nbsp;&nbsp;创建日期：{{post.created_at}}</p>
            <a href="#" class="btn btn-primary">详情页</a>
        </div>
    </div>
    {% endfor %}
{% endblock content %}

 

接下来，我们将设置详情页

7.更新posts/views.py文件，代码如下

# posts/views.py
from django.views.generic import ListView, DetailView #引用DetailView视图
from .models import Post

class PostsPageView(ListView):
    model=Post    
    template_name='posts.html'

class PostsDetailView(DetailView):  #新增详情页的类
    model=Post
    template_name='post_detail.html'
    context_object_name = 'mypost'

代码解读：视图中引入了DetailView类，并创建了一个用于显示详情页的类PostDetailView，context_object_name中的名字可以自定义，此处我们命名为mypost。

 8.在templates中新建post_detail.html文件，并添加如下代码：

{% extends 'base.html' %}
{% block content %}
<h2 class="text-center pt-2">{{mypost.title}}</h2>
<p class="text-secondary">作者：{{mypost.author}}&nbsp;&nbsp;创建日期：{{mypost.created_at}}</p>
<div class="card p-4">
    <p>{{mypost.text}}</p>
</div>
{% endblock content %}

9.更新posts/urls.py文件，代码如下

from django.urls import path
from . import views
urlpatterns = [
    path('',views.PostsPageView.as_view(),name='posts'),
    path('post/<int:pk>/', views.PostsDetailView.as_view(), name='post_detail'), #该url将导航到详情页
]

10.更新posts.html文件，代码如下：

{% extends 'base.html' %}
{% block content %}
<h1 class="text-center">文章列表</h1>
    {% for post in object_list %}
    <div class="card mb-4">
        <div class="card-body">
            <h4 class="card-title">{{post.title}}</h4>
            <p class="text-secondary">作者：{{post.author}}&nbsp;&nbsp;创建日期：{{post.created_at}}</p>
            <!-- 更新详情页的超链接 -->
            <a href="{% url 'post_detail' post.pk %}" class="btn btn-primary">详情页</a>  
        </div>
    </div>
    {% endfor %}
{% endblock content %}

11.刷新页面，现在从文章列表可以导航到详情页