使用 Django、Vue 和 GraphQL 构建博客(1)

项目概况

您将创建一个具有一些基本功能的小型博客应用程序。作者可以写很多帖子。帖子可以有许多标签，可以发布或未发布。

您将在 Django 中构建此博客的后端，并配有用于添加新博客内容的管理员。然后，您将内容数据公开为 GraphQL API，并使用 Vue 在浏览器中显示该数据。您将通过几个高级步骤完成此操作：

1. 设置 Django 博客
2. 创建 Django 博客管理员
3. 设置 Graphene-Django
4. 设置 django-cors-headers
5. 设置 Vue.js
6. 设置Vue路由器
7. 创建 Vue 组件
8. 获取数据

每个部分都将提供指向任何必要资源的链接，并让您有机会根据需要暂停和返回。

先决条件

如果您已经在某些 Web 应用程序概念方面打下了坚实的基础，那么您将最适合本教程。您应该了解HTTP 请求和响应以及 API 的工作原理。您可以查看Python & APIs: A Winning Combo for Reading Public Data以了解使用 GraphQL APIs 与 REST APIs 的详细信息。

因为您将使用 Django 为您的博客构建后端，所以您需要熟悉启动 Django 项目和自定义 Django admin。如果您以前没有经常使用 Django，您可能还想先尝试构建另一个仅限 Django 的项目。要获得很好的介绍，请查看Django 入门第 1 部分：构建投资组合应用程序。

因为您将在前端使用 Vue，所以一些响应式JavaScript 的经验也会有所帮助。如果你过去只用过像jQuery这样的框架的 DOM 操作范式，那么Vue 介绍是一个很好的基础。

熟悉 JSON 也很重要，因为 GraphQL 查询类似于 JSON，并以 JSON 格式返回数据。您可以阅读在 Python 中使用 JSON 数据以获取介绍。您还需要安装 Node.js才能在本教程后面的前端工作。

第 1 步：设置 Django 博客

在走得太远之前，您需要一个目录，您可以在其中组织项目的代码。首先创建一个名为dvg/的 Django-Vue-GraphQL 的缩写：

$ mkdir dvg/
$ cd dvg/

您还将完全拆分前端和后端代码，因此最好立即开始创建这种分离。backend/在您的项目目录中创建一个目录：

$ mkdir backend/
$ cd backend/

您将把 Django 代码放在这个目录中，与您将在本教程后面创建的 Vue 代码完全隔离。

Django==3.1.7

(venv) $ python -m pip install -r requirements.txt

创建 Django 项目

现在 Django 已安装，使用django-admin命令初始化您的 Django 项目：

(venv) $ django-admin startproject backend .

这将在目录中创建一个manage.py模块和一个backend包backend/，因此您的项目目录结构现在应如下所示：

dvg
└── backend
    ├── manage.py
    ├── requirements.txt
    └── backend
        ├── __init__.py
        ├── asgi.py
        ├── settings.py
        ├── urls.py
        └── wsgi.py

本教程不会涵盖或需要所有这些文件，但它们的存在不会有什么坏处。

运行 Django 迁移

在添加任何特定于您的应用程序之前，您还应该运行 Django 的初始迁移。如果您之前没有处理过迁移，请查看Django Migrations: A Primer。使用migrate管理命令运行迁移：

(venv) $ python manage.py migrate

您应该会看到一长串迁移，每个迁移后都有一个OK：

Operations to perform:
  Apply all migrations: admin, auth, contenttypes, sessions
Running migrations:
  Applying contenttypes.0001_initial... OK
  Applying auth.0001_initial... OK
  Applying admin.0001_initial... OK
  Applying admin.0002_logentry_remove_auto_add... OK
  Applying admin.0003_logentry_add_action_flag_choices... OK
  Applying contenttypes.0002_remove_content_type_name... OK
  Applying auth.0002_alter_permission_name_max_length... OK
  Applying auth.0003_alter_user_email_max_length... OK
  Applying auth.0004_alter_user_username_opts... OK
  Applying auth.0005_alter_user_last_login_null... OK
  Applying auth.0006_require_contenttypes_0002... OK
  Applying auth.0007_alter_validators_add_error_messages... OK
  Applying auth.0008_alter_user_username_max_length... OK
  Applying auth.0009_alter_user_last_name_max_length... OK
  Applying auth.0010_alter_group_name_max_length... OK
  Applying auth.0011_update_proxy_permissions... OK
  Applying auth.0012_alter_user_first_name_max_length... OK
  Applying sessions.0001_initial... OK

这将创建一个名为的 SQLite 数据库文件db.sqlite3，该文件还将存储项目的其余数据。

创建超级用户

现在您拥有了数据库，您可以创建一个超级用户。您将需要此用户，以便您最终可以登录到 Django 管理界面。使用createsuperuser管理命令创建一个：

(venv) $ python manage.py createsuperuser

在下一部分中，您将能够使用您在此步骤中提供的用户名和密码登录到 Django 管理员。

第 1 步总结

既然您已经安装了 Django、创建了 Django 项目、运行了 Django 迁移并创建了一个超级用户，那么您就有了一个功能齐全的 Django 应用程序。您现在应该能够启动 Django 开发服务器并在浏览器中查看它。使用runserver管理命令启动服务器8000，默认会监听端口：

(venv) $ python manage.py runserver

现在http://localhost:8000在您的浏览器中访问。您应该会看到 Django 启动页面，表明安装成功。您还应该能够访问http://localhost:8000/admin，在那里您会看到一个登录表单。

使用您为超级用户创建的用户名和密码登录到 Django 管理员。如果一切正常，那么您将被带到Django 管理仪表板页面。此页面目前非常简单，但您将在下一步中让它变得更有趣。

创建 Django 博客应用程序

请记住，单个 Django 项目可以包含多个 Django 应用程序。您应该将特定于博客的行为分离到它自己的 Django 应用程序中，以便它与您构建到项目中的任何未来应用程序保持不同。使用startapp管理命令创建应用程序：

(venv) $ python manage.py startapp blog

这将创建一个blog/包含几个骨架文件的目录：

blog
├── __init__.py
├── admin.py
├── apps.py
├── migrations
│   └── __init__.py
├── models.py
├── tests.py
└── views.py

在本教程的后面部分，您将对其中一些文件进行更改和添加。

启用 Django 博客应用程序

默认情况下，创建 Django 应用程序不会使其在您的项目中可用。为确保项目了解您的新blog应用程序，您需要将其添加到已安装应用程序列表中。更新INSTALLED_APPS变量backend/settings.py：

INSTALLED_APPS = [
  ...
  "blog",
]

这将帮助 Django 发现有关您的应用程序的信息，例如它包含的数据模型和 URL 模式。

创建 Django 博客数据模型

现在 Django 可以发现您的blog应用程序，您可以创建数据模型。您将创建三个模型来开始：

1. Profile 存储有关博客用户的附加信息。
2. Tag 表示可以对博客文章进行分组的类别。
3. Post 存储每个博客文章的内容和元数据。

您将把这些模型中的每一个添加到blog/models.py. 首先，导入Django 的django.db.models模块：

from django.db import models

您的每个模型都将从models.Model该类继承。

from django.conf import settings

class Profile(models.Model):
    user = models.OneToOneField(
        settings.AUTH_USER_MODEL,
        on_delete=models.PROTECT,
    )
    website = models.URLField(blank=True)
    bio = models.CharField(max_length=240, blank=True)

    def __str__(self):
        return self.user.get_username()

class Tag(models.Model):
    name = models.CharField(max_length=50, unique=True)

    def __str__(self):
        return self.name

class Post(models.Model):
    class Meta:
        ordering = ["-publish_date"]

    title = models.CharField(max_length=255, unique=True)
    subtitle = models.CharField(max_length=255, blank=True)
    slug = models.SlugField(max_length=255, unique=True)
    body = models.TextField()
    meta_description = models.CharField(max_length=150, blank=True)
    date_created = models.DateTimeField(auto_now_add=True)
    date_modified = models.DateTimeField(auto_now=True)
    publish_date = models.DateTimeField(blank=True, null=True)
    published = models.BooleanField(default=False)

    author = models.ForeignKey(Profile, on_delete=models.PROTECT)
    tags = models.ManyToManyField(Tag, blank=True)

创建模型管理配置

现在您的模型已经就位，您需要告诉 Django 它们应该如何在管理界面中显示。在 中blog/admin.py，首先导入 Django 的admin模块和您的模型：

from django.contrib import admin

from blog.models import Profile, Post, Tag

然后为Profileand创建并注册管理类Tag，只需要model指定的：

@admin.register(Profile)
class ProfileAdmin(admin.ModelAdmin):
    model = Profile

@admin.register(Tag)
class TagAdmin(admin.ModelAdmin):
    model = Tag

就像模型一样，管理类Post更复杂。帖子包含大量信息，因此有助于更明智地了解您显示的信息，以避免界面拥挤。

在所有帖子的列表中，您将指定 Django 应仅显示有关每个帖子的以下信息：

1. ID
2. 标题
3. 字幕
4. 弹头
5. 发布日期
6. 发布状态

为了使浏览和编辑帖子更加流畅，您还将告诉 Django 管理系统采取以下操作：

• 允许按已发布或未发布的帖子过滤帖子列表。
• 允许按发布日期过滤帖子。
• 允许编辑所有显示的字段，ID 除外。
• 允许使用标题、副标题、slug 和正文搜索帖子。
• 使用标题和副标题字段预填充 slug 字段。
• 使用所有帖子的发布日期来创建可浏览的日期层次结构。
• 在列表顶部显示一个按钮以保存更改。

创建并注册PostAdmin类：

@admin.register(Post)
class PostAdmin(admin.ModelAdmin):
    model = Post

    list_display = (
        "id",
        "title",
        "subtitle",
        "slug",
        "publish_date",
        "published",
    )
    list_filter = (
        "published",
        "publish_date",
    )
    list_editable = (
        "title",
        "subtitle",
        "slug",
        "publish_date",
        "published",
    )
    search_fields = (
        "title",
        "subtitle",
        "slug",
        "body",
    )
    prepopulated_fields = {
        "slug": (
            "title",
            "subtitle",
        )
    }
    date_hierarchy = "publish_date"
    save_on_top = True

您可以在使用 Python 自定义 Django 管理员中阅读有关 Django 管理员必须提供的所有选项的更多信息。

创建模型迁移

Django 拥有管理和保存博客内容所需的所有信息，但您首先需要更新数据库以支持这些更改。在本教程的前面部分，您为其内置模型运行了 Django 的迁移。现在，您将为模型创建和运行迁移。

首先，使用makemigrations管理命令创建迁移：

(venv) $ python manage.py makemigrations
Migrations for 'blog':
  blog/migrations/0001_initial.py
    - Create model Tag
    - Create model Profile
    - Create model Post

这将创建一个名称为0001_initial.py默认的迁移。使用migrate管理命令运行此迁移：

(venv) $ python manage.py migrate
Operations to perform:
  Apply all migrations: admin, auth, blog, contenttypes, sessions
Running migrations:
  Applying blog.0001_initial... OK

请注意，迁移应OK在迁移名称之后显示。