> 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/"
        }
    ]
}