Django做一个简单的博客系统(3)----文章详情

前言

    上一篇文章完成了一个文章列表的页面,本篇文章就来做一个文章详情页面.

    感谢大神的教程: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跳转方式和上面是一样的.

    优化完成,再次运行,我们就可以点击阅读本文来查看文章的详情了!

写在最后

    本文是个人的一些学习笔记,如有侵权,请及时联系我进行删除,谢谢大家.