Django-Vue搭建个人博客:超链接与分页

8294 views, 2021/04/30 updated   Go to Comments

超链接

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

> C:\...>http http://127.0.0.1:8000/api/article/

HTTP/1.1 200 OK
...
[
    {
        "author": {
            ...
        },
        "created": "2020-07-03T07:21:49.865414Z",
        "id": 6,
        "title": "post with user"
    },
    {
        "author": {
            ...
        },
        "created": "2020-07-12T09:11:25.688996Z",
        "id": 10,
        "title": "new test hello!"
    },
    ...
]

通过数据看不出每篇文章的实际 url 地址。虽然包含了文章的 id 号,但 id 和 url 不一定总是关联的。最好 json 数据中直接提供超链接到每篇文章的 url,以后前端用起来就方便了。

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

# article/serializers.py

...

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

    class Meta:
        model = Article
        fields = [
            # 有了 url 之后,id 就不需要了
            'url',
            # 'id',
            ...
        ]
  • HyperlinkedIdentityField 是 DRF 框架提供的超链接字段,只需要你在参数里提供路由的名称,它就自动帮你完成动态地址的映射。
  • view_name 是路由的名称,也就是我们在 path(... name='xxx') 里的那个 name
  • 别忘了在序列化器的 fields 列表里加上 url

在命令行中重新发个请求:

C:\...>http http://127.0.0.1:8000/api/article/
...

[
    {
        "author": {
            ...
        },
        "created": "2020-07-03T07:21:49.865414Z",
        "title": "post with user",
        "url": "http://127.0.0.1:8000/api/article/6/"
    },
    {
        "author": {
            ...
        },
        "created": "2020-07-12T09:11:25.688996Z",
        "title": "new test hello!",
        "url": "http://127.0.0.1:8000/api/article/10/"
    },
    ...
]

这样就人性化多了。

DRF 框架还提供了一个专门的超链接序列化器 HyperlinkedModelSerializer,大体上跟普通序列化器差不多,不同的是默认以超链接来表示关系字段。详情见官方文档

分页

DRF 框架继承了 Django 方便易用的传统,分页这种常见功能提供了默认实现。

你只需要在 settings.py 里配置一下就行了:

# drf_vue_blog/settings.py

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

为了测试把每页的文章数量设置到 2。

在命令行发送请求:

C:\...> http http://127.0.0.1:8000/api/article/
HTTP/1.1 200 OK
...

{
    "count": 5,
    "next": "http://127.0.0.1:8000/api/article/?page=2",
    "previous": null,
    "results": [
        {
            "author": {
                ...
            },
            "created": "2020-07-03T07:21:49.865414Z",
            "title": "post with user",
            "url": "http://127.0.0.1:8000/api/article/6/"
        },
        {
            "author": {
                ...
            },
            "created": "2020-07-12T09:11:25.688996Z",
            "title": "new test hello!",
            "url": "http://127.0.0.1:8000/api/article/10/"
        }
    ]
}

DRF 非常聪明的封装了分页相关的元信息:

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

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

试着获取第二页的数据:

C:\...> http http://127.0.0.1:8000/api/article/?page=2
HTTP/1.1 200 OK
...

{
    "count": 5,
    "next": "http://127.0.0.1:8000/api/article/?page=3",
    "previous": "http://127.0.0.1:8000/api/article/",
    "results": [
        {
            "author": {
                ...
            },
            "created": "2020-08-17T07:44:55Z",
            "title": "澳门风景探秘",
            "url": "http://127.0.0.1:8000/api/article/11/"
        },
        {
            "author": {
                ...
            },
            "created": "2020-08-17T07:46:21Z",
            "title": "珠海,我的家乡",
            "url": "http://127.0.0.1:8000/api/article/12/"
        }
    ]
}

超链接和分页就完成了。代码量非常少,原因就是 DRF 把常用功能都内置了,直接调用就行,很适合快速开发。




本文作者: 杜赛
发布时间: 2021年03月08日 - 09:24
最后更新: 2021年04月30日 - 10:18
转载请保留原文链接及作者