Django学习教程（十五）实现文章详情页面跳转

前言
1.添加详情链接
2.编写详情视图
3.配置详情路由
4.创建详情模板
5.访问测试
6.总结

前言

上一篇我们实现了博客文章列表页面，可以在页面中显示所有文章。这一篇我们继续实现文章详情页面。

一般博客列表页只显示文章标题和部分内容，点击查看详情后，才进入文章详情页查看完整内容。

1.添加详情链接

修改article_list.html，在每篇文章后面添加查看详情按钮。

代码：

复制代码

{% for article in articles %}
    <div class="card mb-3">
        <div class="card-body">
            <h5 class="card-title">{{ article.title }}</h5>
            <p class="card-text">{{ article.content }}</p>
            <a href="/article/{{ article.id }}/" class="btn btn-primary">查看详情</a>
        </div>
    </div>
{% endfor %}

这里通过article.id拼接文章详情地址。

2.编写详情视图

打开views.py文件，添加文章详情方法。

代码：

复制代码

from django.shortcuts import render
from .models import Article


def article_detail(request, article_id):
    article = Article.objects.get(id=article_id)
    return render(request, 'blog/article_detail.html', {'article': article})

这里的article_id来自路由参数。

Article.objects.get(id=article_id)表示根据文章id查询文章。

3.配置详情路由

打开urls.py文件，添加详情路由。

代码：

复制代码

from django.contrib import admin
from django.urls import path
from blog import views

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', views.article_list),
    path('article/<int:article_id>/', views.article_detail),
]

<int:article_id>表示接收一个整数类型的参数。

4.创建详情模板

在blog/templates/blog目录下创建article_detail.html。

代码：

复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>{{ article.title }}</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-4">
    <h2>{{ article.title }}</h2>
    <p class="text-muted">{{ article.created_time }}</p>
    <hr/>
    <p>{{ article.content }}</p>

    <a href="/" class="btn btn-secondary">返回首页</a>
</div>
</body>
</html>

5.访问测试

访问首页：

复制代码

http://127.0.0.1:8000/

点击查看详情按钮，就可以进入文章详情页面。

6.总结

这一篇我们实现了文章详情页面跳转，主要用到了路由参数和根据id查询文章数据。

文章列表页负责展示多篇文章，详情页负责展示某一篇文章的完整内容。好了这一篇就到这里，下一篇我们继续学习实现上下篇文章跳转，如果对你有帮助，点赞加关注，下篇见。