版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
前言
上一篇文章完成了一个文章列表的页面,本篇文章就来做一个文章详情页面.
感谢大神的教程:Django搭建个人博客.
一.编写视图函数
首先添加一个页面详情的视图函数:
article/views.py:
def article_detail(request,nid):
# 取出相应文章
article = ArticlePost.objects.get(id=你+id)
context = {'article':article}
return render(request,'article/detail.html',context)
- 函数中的nid是从前端页面中传入的.
- article = ArticlePost.objects.get(id=id):是按id进行查询.
二.配置url:
article/views.py:
from django.urls import path,re_path
from article import views
app_name = 'article' # 正在部署的应用的名称
urlpatterns = [
# 参数name用于反查url地址,相当于给url起个名字
path('article-list/',views.article_list,name='article_list' ),
path('article-detail/<int:id>',views.article_detail,name='article_detail' ),
# <int:id>：Django2.0的path新语法用尖括号<>定义需要传递的参数。这里需要传递名叫id的整数到视图函数中去。
]
三.编写文章详情页面
templates/article/detail.html
<!-- extends表明此页面继承自 base.html 文件 -->
{% extends "base.html" %}
{#加载静态文件#}
{% load staticfiles %}
{#写入title#}
{% block title %}
文章详情
{% endblock %}
{#写入自定义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 %}
一切准备就绪,运行程序,在浏览器中输入:http://127.0.0.1:8000/article/article-detail/1
这样,一个文章详情的页面就完成了.
但是这里有一个问题,就是总不能每次查看文章的时候都在url上输入把,这样太不友好了,所以我们要优化一下.
四.优化
首先改写header.html，让用户可通过导航栏右侧的文章链接返回首页：
<!-- 定义导航栏 -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<!-- 导航栏商标 -->
<a class="navbar-brand" href="#">我的博客</a>
<!-- 导航入口 -->
<div>
<ul class="navbar-nav">
<!-- 条目 -->
<li class="nav-item">
<a class="nav-link" href="{% url 'article:article_list' %}">文章</a>
</li>
</ul>
</div>
</div>
</nav>
注:看这里的url的跳转方式:
- href定义了链接跳转的地址;
- {% url ‘…’ %}是Django规定的模板解耦语法，用它可以根据我们在urls.py中设置的名字，反向解析到对应的url中去。
然后改写list.html,让用户可以点击阅读本文就能跳转到文章详情页面:
<div class="card-footer">
<a href="{% url 'article:article_detail' article.id %}" class="btn btn-primary">阅读本文</a>
</div>
这里的url跳转方式和上面是一样的.
优化完成,再次运行,我们就可以点击阅读本文来查看文章的详情了!
写在最后
本文是个人的一些学习笔记,如有侵权,请及时联系我进行删除,谢谢大家.