django-Vue搭建博客：超链接与分页

最新推荐文章于 2022-06-07 07:26:00 发布

献伟吖

最新推荐文章于 2022-06-07 07:26:00 发布

阅读量208

点赞数

分类专栏：前后端分离文章标签： python django

本文链接：https://blog.youkuaiyun.com/qq_25415097/article/details/117947703

版权

前后端分离专栏收录该内容

18 篇文章

订阅专栏

本文介绍了如何在Django REST Framework（DRF）中使用HyperlinkedIdentityField实现API列表中每个条目的超链接，以及如何通过配置DEFAULT_PAGINATION_CLASS和PAGE_SIZE实现分页功能。通过这些方法，可以方便地为前端提供文章的详细URL，并实现分页显示，简化了API的使用和开发流程。

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

超链接

教程来源杜塞-django-vue系列
博客链接传送门

目前我们的文章列表是这样的：

>http http://127.0.0.1:8000/api/article/
HTTP/1.1 200 OK
...
[
    {
        "author": null,
        "created": "2021-06-13T15:01:15.586622",
        "id": 8,
        "title": "may"
    },
    {
        "author": null,
        "created": "2021-06-14T13:49:22.210168",
        "id": 9,
        "title": "title1"
    },
    {
        "author": null,
        "created": "2021-06-14T13:50:01.272906",
        "id": 10,
        "title": "title2"
    },
    {
        "author": {
            "date_joined": "2021-06-13T14:58:00",
            "id": 3,
            "last_login": null,
            "username": "xianwei"
        },
        "created": "2021-06-14T14:00:30.477454",
        "id": 11,
        "title": "user"
    },
    {
        "author": {
            "date_joined": "2021-06-13T14:58:00",
            "id": 3,
            "last_login": null,
            "username": "xianwei"
        },
        "created": "2021-06-14T14:16:24.718403",
        "id": 12,
        "title": "sss"
    }
]

虽然列表包含着文章 id，但未能显示实际url地址，id和url也比一定必然关联，所以我们要在json数据中直接超链接到每篇文章的url，也方便后续前端使用。

实现超链接可以使用 DRF 框架提供的 HyperlinkedIdentityField:

# article/serializers.py

class ArticleListSerializer(serializers.ModelSerializer):
    # read_only 参数设置为只读
    author = UserDescSerializer(read_only=True)

    # 新增字段，添加超链接
    url = serializers.HyperlinkedIdentityField(view_name="article:detail")

HyperlinkedIdentityField是DRF框架提供的超链接字段，只需要在参数里提供路由名称，它就自动帮我们完成动态地址的映射。
view_name是路由的名称，即path(..., name='xxx'),,中的name、
超链接字段定义后，记得在序列化器中 fields列表中添加url。

在命令行重新发送请求：

>http http://127.0.0.1:8000/api/article/
HTTP/1.1 200 OK
···
[
    {
        "author": null,
        "created": "2021-06-13T15:01:15.586622",
        "id": 8,
        "title": "may",
        "url": "http://127.0.0.1:8000/api/article/8/"
    },
    {
        "author": null,
        "created": "2021-06-14T13:49:22.210168",
        "id": 9,
        "title": "title1",
        "url": "http://127.0.0.1:8000/api/article/9/"
    },
    {
        "author": null,
        "created": "2021-06-14T13:50:01.272906",
        "id": 10,
        "title": "title2",
        "url": "http://127.0.0.1:8000/api/article/10/"
    },
    {
        "author": {
            "date_joined": "2021-06-13T14:58:00",
            "id": 3,
            "last_login": null,
            "username": "xianwei"
        },
        "created": "2021-06-14T14:00:30.477454",
        "id": 11,
        "title": "user",
        "url": "http://127.0.0.1:8000/api/article/11/"
    },
    {
        "author": {
            "date_joined": "2021-06-13T14:58:00",
            "id": 3,
            "last_login": null,
            "username": "xianwei"
        },
        "created": "2021-06-14T14:16:24.718403",
        "id": 12,
        "title": "sss",
        "url": "http://127.0.0.1:8000/api/article/12/"
    }
]

这就人性化了许多。

DRF还提提供了一种超链接的序列化器 HyperlinkedModelSerializer,具体看官方文档

分页

DRF 框架集成Django 方便易用的传统，分页这种常见的功能提供默认实现。

你只需要在 setting.py中配置就可以。

# DRF_VUE_BLOG/setting.py
# 添加下面三行

REST_FRAMEWORK = {
    "DEFAULT_PAGINATION_CLASS": 'rest_framework.pagination.PageNumberPagination',
    'PAGE_SIZE': 2
}

为方便测试，我们把分页文章数设置为2。

重新发送请求：

>http http://127.0.0.1:8000/api/article/
HTTP/1.1 200 OK
Allow: GET, POST, HEAD, OPTIONS
Content-Length: 335
Content-Type: application/json
Date: Wed, 16 Jun 2021 00:39:51 GMT
Referrer-Policy: same-origin
Server: WSGIServer/0.2 CPython/3.9.4
Vary: Accept, Cookie
X-Content-Type-Options: nosniff
X-Frame-Options: DENY

{
    "count": 5,
    "next": "http://127.0.0.1:8000/api/article/?page=2",
    "previous": null,
    "results": [
        {
            "author": null,
            "created": "2021-06-13T15:01:15.586622",
            "id": 8,
            "title": "may",
            "url": "http://127.0.0.1:8000/api/article/8/"
        },
        {
            "author": null,
            "created": "2021-06-14T13:49:22.210168",
            "id": 9,
            "title": "title1",
            "url": "http://127.0.0.1:8000/api/article/9/"
        }
    ]
}

我们发现时是完全可以的。

DRF非常聪明的分页相关的元信息：

count：文章总数
next：下一页的url
previous：上一页的url

实际的数据被放到results列表中。

尝试获取第二页：

>http http://127.0.0.1:8000/api/article/?page=2
HTTP/1.1 200 OK
Allow: GET, POST, HEAD, OPTIONS
Content-Length: 521
Content-Type: application/json
Date: Wed, 16 Jun 2021 00:43:26 GMT
Referrer-Policy: same-origin
Server: WSGIServer/0.2 CPython/3.9.4
Vary: Accept, Cookie
X-Content-Type-Options: nosniff
X-Frame-Options: DENY

{
    "count": 5,
    "next": "http://127.0.0.1:8000/api/article/?page=3",
    "previous": "http://127.0.0.1:8000/api/article/",
    "results": [
        {
            "author": {
                "date_joined": "2021-06-13T06:47:00",
                "id": 2,
                "last_login": null,
                "username": "Obama"
            },
            "created": "2021-06-14T13:50:01",
            "id": 10,
            "title": "title2",
            "url": "http://127.0.0.1:8000/api/article/10/"
        },
        {
            "author": {
                "date_joined": "2021-06-13T14:58:00",
                "id": 3,
                "last_login": null,
                "username": "xianwei"
            },
            "created": "2021-06-14T14:00:30.477454",
            "id": 11,
            "title": "user",
            "url": "http://127.0.0.1:8000/api/article/11/"
        }
    ]
}

分页的实现方法基本与Django 原有的方法基本雷同，但更方便了我们，不需要我们再在views.py中定义翻页器。

超链接和分页就完成了。代码少且比较简单，都是使用DRF内置写好的，直接调用即可，方便我们开发。