学习Python的Django系列四：博客文章的前台展示功能---优快云博客

本文介绍如何在Django框架下实现博客文章的前台展示功能，包括设计思路和具体步骤，帮助读者理解Django中文章展示的实现过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、显示文章标题

1.需要的能量补充：

  （1）.自行百度理解python的django中的一个概念：ORM，即对象关系映射 

  （2）.类似于java的MVC框架结构，自行百度理解django的MVT框架，即m表示model，负责与数据库交互；v表示view，是核心，负责接收请求、获取数据、返回结果；t表示template，负责呈现内容到浏览器。 

  （3）.自行学习在python manage.py shell中对数据库的增删改查操作，有助于理解MVT框架。 

2.开发中的具体设计：

  （1）编辑Blog/views.py内容 

  from django.shortcuts import render 

  # Create your views here. 

  from .models import BlogArticles 

  def blog_title(request): 

  blogs = BlogArticles.objects.all() 

  return render(request,"blog/titles.html",{"blogs":blogs}) 

  （2）在templates中写模板： 

  其中base.html为公共模板，其他可以“继承”这个公共模板。 

  首先配置template的目录，在BlogProject/settings.py的TEMPLATES配置'DIRS': [os.path.join(BASE_DIR,'templates')]。 

  base.html的内容： 

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta http-equiv="x-ua-compatible" content="IE=Edge">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>{% block title %} {% endblock %}</title>
    <link rel="stylesheet" href="http://necolas.github.io/normalize.css">
    <link rel = "stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        {% block content %}

        {% endblock %}
    </div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

  编写titles.html的代码： 

{% extends "base.html" %}

{% block title %}
blog titles
{% endblock %}

{% block content %}
<div class="row text-center vertical-middle-sm">
    <h1>我的博客</h1>
</div>
<div class="row">
    <div class="col-xs-12 col-md-8">
        <ul>
        {% for bolg in  blogs%}
            <li>{{ bolg.title }}</li>
        {% endfor %}
        </ul>
    </div>

    <div class="col-xs-6 col-md-4">
        <h2>优快云博客</h2>
        <p><a href="https://blog.youkuaiyun.com/yangwenjie12">跟我学习python django</a></p>
        <img width="200px" src="http://mpic.tiankong.com/80f/3e5/80f3e552395539ebe7c41134ce685c57/13ah0145rm.jpg@!670w">
    </div>
</div>
{% endblock %}

  （3）配置URL，保证链接可以访问到，配置BlogProject下的urls.py： 

from django.contrib import admin
from django.urls import path,include

urlpatterns = [
    path('admin/', admin.site.urls),
    path(r'^blog/',include('Blog.urls')),
]

 
 上述代码意思是用户在浏览器输入：http://127.0.0.1:8000/blog/ 地址后，通过url配置，寻找到blog应用下配置的urls,因此还需要配置blog/urls.py： 

 
 在Blog下新建urls.py: 

from django.conf.urls import url
from . import views

urlpatterns = [
    url(r'^$',views.blog_title,name="blog_title")
]

  （4）访问效果图： 

  3.配置点击查看文章内容： 

  （1）首先修改Blog/views.py增加blog_article类，具体为： 

from django.shortcuts import render, get_object_or_404

def blog_article(request,article_id):
    #article = BlogArticles.objects.get(id=article_id)
    article = get_object_or_404(BlogArticles,id=article_id)
    pub = article.publish
    return render(request,"Blog/content.html",{"article":article,"publish":pub})

  （2）编写显示文章内容的模板，在template下的Blog/新建content.html文件，内容为： 

{% extends "base.html" %}

{% block title %}
blog article
{% endblock %}

{% block content %}
<div class="row text-center vertical-middle-sm">
    <h1>{{ article.title }}</h1>
</div>

<div class="row">
    <div class="col-xs-12 col-md-8">
        <p class="text-center"><span>{{ article.author.username }}</span><span style="margin-left: 20px">{{ publish }}</span></p>
    <div>{{ article.body }}</div>
    </div>

    <div class="col-xs-6 col-md-4">
        <h2>优快云博客</h2>
        <p><a href="https://blog.youkuaiyun.com/yangwenjie12">跟我学习python django</a></p>
        <img width="200px" src="http://mpic.tiankong.com/80f/3e5/80f3e552395539ebe7c41134ce685c57/13ah0145rm.jpg@!670w">
    </div>
</div>
{% endblock %}

  （3）修改原来的title.html中的标题那里，做成链接形式，即点击标题进行跳转。 

        {% for bolg in  blogs%}
            <li><a href="{{ bolg.id }}">{{ bolg.title }}</a></li>
        {% endfor %}

  （4）修改Blog/urls.py： 

  增加：url(r'(?P<article_id>\d)/$',views.blog_article,name="blog_detail"), 

  ?P<article_id>指的是从点击的链接出接受标题的id的值传给article_id，给后端的views中的类调用 

  （5）访问效果 

  重新访问： 
 http://127.0.0.1:8000/blog/ 

  点击标题链接，可以跳转到博客展示页。 

据此，完成了一个最简单的后台管理发布及前台浏览功能。
后续根据书中章节，先介绍用户管理。