基于Django的Blog 7.编写文章详情页面

编写文章详情页面

1.编写视图函数

1.1 视图中定义方法 article/views.py

# 文章详情
def article_detail(request, id):
    # 取出相应的文章
    article = ArticlePost.objects.get(id=id)
    # 传递给模板的对象
    context = { 'article': article }
    # 载入模板
    return render(request, 'article/detail.html', context)

• article_detail(request, id)函数中多了id这个参数。注意我们在写model的时候并没有写叫做id的字段，这是Django自动生成的用于索引数据表的主键（Primary Key，即pk）。有了它才有办法知道到底应该取出哪篇文章。
• ArticlePost.objects.get(id=id)意思是在所有文章中，取出id值相符合的唯一的一篇文章

1.2 分配url地址 article/urls.py

urlpatterns = [
	...
    # 文章详情
    path('article-detail/<int:id>/', views.article_detail, name='article_detail'),
]

<int:id>：Django2.0的path新语法用尖括号<>定义需要传递的参数。这里需要传递名叫id的整数到视图函数中去。

1.3添加对应模板 templates/article/detail.html

templates/article/detail.html

<!-- extends表明此页面继承自 base.html 文件 -->
{% extends "base.html" %}
{% load staticfiles %}

<!-- 写入bas.html 中定义的title-->
{% block title %}
    文章详情
{% endblock title %}


<!--写入 base.html 中定义的content -->

{% block content %}

<!-- 文章详情 -->
<div class="container">
    <div class="row">
        <!-- 标题及作者 -->
        <h1 class="col-12 mt-4 mb-4">{{ article.title }}</h1>
        <div class="col-12 alert alert-success">作者: {{ article.author }}</div>
        <!-- 文章正文 -->
        <div class="col-12">
            <p>{{ article.body }}</p>
        </div>
    </div>
</div>

{% endblock content %}

这里我们用{{ article.xxx }}取出了文章标题、作者以及正文。

python manage.py runserver 后输入地址

http://127.0.0.1:8000/article/article-detail/1/

2.优化网页入口

每次都通过url输入 实在太麻烦

2.1 添加链接 返回首页 header.hml

        <!-- 导航入口 -->
        <div>
            <ul class="navbar-nav">
                <!-- 条目 -->
                <li class="nav-item">
                    <a class="nav-link" href="{% url 'article:article_list' %}">文章</a>
                </li>
            </ul>

注意看这里href是如何改写的

• href 定义了链接跳转的地址
• {% url '...' %} Django模板解耦元,可以根据我们在urls.py中设置的名字,反向解析到对应的url中

关于其中的'article:article_list'的解释:

• 前面的article 是在项目根目录的urls.py中定义的app的名称
• 后面的article_list是在app中的urls.py中定义的具体的路由地址

也就是在html中,通过Django找到根目录urls中网页的爸爸的name:article,再找到子目录urls中爸爸的儿子的name:article_list

通过这样的方法就将链接跳转的指向给配置好了，只要对应url的名称不变，url本身无论怎么变化，Django都可以解析到正确的地址，很灵活。

当然你也可以直接在href中写入url的地址，但是一旦url有变化，所有相关的链接都会失效，维护性不好。

然后再改写list.html，让用户可点击阅读本文按钮进入文章详情

2.2 通过阅读本文按钮进入文章详情

templates/article/list.html

templates/article/list.html

...

<div class="card-footer">

    <!-- 同样改写 href -->
    <a href="{% url 'article:article_detail' article.id %}" class="btn btn-primary">阅读本文</a>

</div>

...

这里需要在 Django{% url ' xxxx ' %}的语法中加入一个article.id

• 在list.html中. 现将id传递给article/url.py
• 在article/urls.py中,通过int:id传递个视图函数article_detail()
• article_detail(), 通过形参id获取了文章的id值,进行处理,定位了需要获取的文章对象

http://127.0.0.1:8000/article/article-detail/3/