我们已经知道如何操作文章表的数据,接下来要将这些数据用界面显示出来。这就需要用到django的view层负责处理http请求,并将数据传给template模板进行渲染
url适配
首先定义列表页与详情页的url, url规则如下:
django是怎么知道将url映射到相应的python文件的?这需要我们在blog下新建urls.py文件
mysite/blog/urls.py
from django.urls import path
from . import views
app_name = 'blog'
urlpatterns = [
path('', views.post_list, name='post_list'), # 列表页的url规则
path('<int:year>/<int:month>/<int:day>/<slug:post>', # 详情页的url规则
views.post_detail,
name='post_detail'),
]
然后需要在项目的urls.py中引入此文件:
mysite/mysite/urls.py
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path('admin/', admin.site.urls),
path('blog/', include('blog.urls', namespace='blog')) # 引入blog应用的url配置
]
自定义模型管理器
封装自定义的管理器,方便检索数据。如,博客前台要展示的数据肯定是已发布的,如果每次取已发布的数据都要通过过滤条件获取,显得很繁琐。可以通过自定义管理器,将已发布的文章封装成文章类的一个属性。
mysite/blog/models.py
class PublishedManager(models.Manager):
def get_queryset(self):
return super(PublishedManager, self).get_queryset().filter(status='published')
class Post(models.Model):
#...
objects = models.Manager() # 默认的管理器
published = PublishedManager() # 自定义的管理器
以后我们只需要调用Post.published.all()
就能获取所有已发布的文章
在view中写业务逻辑
mysite/blog/views.py
from django.shortcuts import render, get_object_or_404
from .models import Post
# 列表页
def post_list(request):
posts = Post.published.all() # 获取所有公开的文章
return render(request,
'blog/post/list.html',
{'posts': posts}) # 将数据传递到模板文件
# 详情页
def post_detail(request, year, month, day, post):
post = get_object_or_404(Post, slug=post,
status='published',
publish__year=year,
publish__month=month,
publish__day=day)
return render(request,
'blog/post/detail.html',
{'post': post})
在view中指定了list和detail的html文件路径,我们需要在相应位置创建html文件:
新建模板文件
☁ mysite mkdir -p blog/templates/blog/post
☁ mysite touch blog/templates/blog/base.html
☁ mysite touch blog/templates/blog/post/list.html
☁ mysite touch blog/templates/blog/post/detail.html
☁ mysite tree blog/templates # 模板文件结构
blog/templates
└── blog
├── base.html
└── post
├── detail.html
└── list.html
2 directories, 3 files
base.html 定义了html模板的框架,列表页和详情页都继承此文件
list.html 列表页,展示文章标题、摘要
detail.html 详情页,展示文章详情内容
html模板引用 Bootstrap4
base.html
{% load static %}
<!DOCTYPE html>
<html>
<head>
<title>{% block title %}{% endblock %}</title>
<link rel="stylesheet" href="{% static "css/blog.css" %}">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div id="content" class="col-md-9">
{% block content %}
{% endblock %}
</div>
<div id="sidebar" class="col-md-3">
<h3>唐诗鉴赏博客</h3>
<p>唐诗博大精深</p>
</div>
</div>
</div>
</body>
</html>
在base.html中,我们引入了样式文件{% static "css/blog.css" %}
,对应的路径是:
mysite/blog/static/css/blog.css
.container {
margin-top: 2%;
}
div.post {
margin-bottom: 2%;
}
关于模板语法的使用,详情见官方文档
list.html
{% extends "blog/base.html" %}
{% block title %}我的博客{% endblock %}
{% block content %}
{% for post in posts %}
<div class="post">
<h3>
<a href="{{ post.get_absolute_url }}" class="text-info">
{{ post.title }}
</a>
</h3>
<div class="card">
<div class="card-header">
发布时间:{{ post.publish }} 作者:{{ post.author }}
</div>
<div class="card-body">
{{ post.body|truncatewords:5|linebreaks }}
</div>
</div>
</div>
{% endfor %}
{% endblock %}
list.html继承了base.html, 并将内容注入到base.html中id为content的div中
detail.html
{% extends "blog/base.html" %}
{% block title %}{{ post.title }}{% endblock %}
{% block content %}
<h1>{{ post.title }}</h1>
<div class="card">
<div class="card-header">
发布时间:{{ post.publish }} 作者:{{ post.author }}
</div>
<div class="card-body">
{{ post.body|linebreaks }}
</div>
</div>
{% endblock %}
启动服务,访问 http://127.0.0.1:8000/blog/
点击列表页的文章标题,进入详情页,注意查看详情页的url
http://127.0.0.1:8000/blog/2018/9/6/jiang-jin-jiu
添加分页功能
如果我们的文章数据很多,不可能一次性全部取出,这时就需要做分页功能。
首先自行到后台多添加几条数据
在view中增加分页逻辑
mysite/blog/views.py
# ...
from django.core.paginator import Paginator, EmptyPage, PageNotAnInteger
# 列表页
def post_list(request):
object_list = Post.published.all() # 获取所有数据
paginator = Paginator(object_list, 3) # 每页3篇文章
page = request.GET.get('page') # 获取当前页数
try:
posts = paginator.page(page) # 取出当前页数的文章
except PageNotAnInteger:
posts = paginator.page(1)
except EmptyPage:
posts = paginator.page(paginator.num_pages)
return render(request,
'blog/post/list.html',
{'page': page,
'posts': posts}) # 将数据传递到模板文件
# ...
分页的样式采用独立的html页面
新建 mysite/blog/templates/pagination.html
<ul class="pagination pagination-sm">
{% if page.has_previous %}
<li class="page-item"><a class="page-link" href="?page={{ page.previous_page_number }}">上一页</a></li>
{% endif %}
<li class="page-item active"><a class="page-link" href="#">{{ page.number }}</a></li>
{% if page.has_next %}
<li class="page-item"><a class="page-link" href="?page={{ page.next_page_number }}">下一页</a></li>
{% endif %}
</ul>
在列表页中引入分页
mysite/blog/templates/blog/post/list.html
{% block content %}
# ...
{% include "pagination.html" with page=posts %}
{% endblock %}
浏览器访问 http://127.0.0.1:8000/blog/
点击下一页,查看url的变化:http://127.0.0.1:8000/blog/?page=2
至此,简易的分页功能已完成
下一节将讲解如何使用django发送邮件。如果你感兴趣,请关注我的django2实战
文集
如果觉得本文对你有所帮助,点个赞,或者赏杯咖啡钱,你的认可对我很重要