学习Python的Django系列四:博客文章的前台展示功能---CSDN博客

一、显示文章标题

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>CSDN博客</h2>
        <p><a href="https://blog.csdn.net/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>CSDN博客</h2>
        <p><a href="https://blog.csdn.net/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/

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

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



猜你喜欢

转载自blog.csdn.net/yangwenjie12/article/details/80266772