django2实战4.创建文章列表页和详情页url适配自定义模型管理器在view中写业务逻辑新建模板文件添加分页功能

继上篇 django2实战3.模型的增删改查

我们已经知道如何操作文章表的数据,接下来要将这些数据用界面显示出来。这就需要用到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实战文集

如果觉得本文对你有所帮助,点个赞,或者赏杯咖啡钱,你的认可对我很重要

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏地方网络工作室的专栏

打造前端 Deepin Linux 工作环境——安装配置 atom 编辑器

打造前端 Deepin Linux 工作环境——安装配置 atom 编辑器 好,我个人推荐大家使用 atom 编辑器,第一是免费,第二是好看,第三是好用。 安装...

56780
来自专栏前端儿

既之前的基础,先写个简单的PHP 与数据库 的数据交流

现在先不用 css 和 javascript     先用纯 html  php  写吧。 所以那些 嵌入式 <font  size=....  什么的看看就算...

13020
来自专栏腾讯NEXT学位

小程序iOS客户端框架——控件事件逻辑框架与控件原生化(上)

? 小程序自发布以来,为开发者和用户提供了一种轻量级的App。作为一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或者搜一下即可打...

18910
来自专栏编程坑太多

python使用selenium+chromedriver调用chrome截图

40550
来自专栏Coco的专栏

【nodeJS爬虫】前端爬虫系列 -- 小爬「博客园」

26080
来自专栏腾讯NEXT学位

React 16 加载性能优化指南(上)

公司的新项目迁移到了 React 16 和 Webpack 4.0,写一篇文章来总结一下。

71350
来自专栏不二小段

【爬虫军火库】AnyProxy安装使用【Windows】

分析网络请求详情是写爬虫应用的初始步骤,抓包便是一种十分强大的分析手段,尤其是对手机App进行抓包,往往能收获到Web端没有的API接口。抓包的工具多种多样,功...

2.1K60
来自专栏用户2442861的专栏

Python安装模块出错解决的办法(pip相关的安装)

然后在cmd进入命令行窗口, 进入ez_setup.py目录,我这里是下载放置在F盘,然后输入命令:python ez_setup.py 系统就会自动下载se...

49330
来自专栏MasiMaro 的技术博文

Facebook 爬虫

title: Facebook 爬虫 tags: [python3, facebook, scrapy, splash, 爬虫] date: 2018-06...

70720
来自专栏IT笔记

前后端分离之Vue项目构建测试打包发布

写在开始 其实之前对前后端分离研究过一段时间,中间由于项目进度耽搁也就不了了之了,最近项目中部分使用到了Vue,恰逢前端小伙伴们居然说要使用这个东西,也许是前端...

38690

扫码关注云+社区

领取腾讯云代金券