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

第 2 步总结

您现在已经拥有所有数据模型，并且您已经配置了 Django 管理员，以便您可以添加和编辑这些模型。

启动或重新启动 Django 开发服务器，访问 admin 界面http://localhost:8000/admin，并探索发生了什么变化。您应该会看到指向标签、个人资料和帖子列表的链接以及添加或编辑它们的链接。尝试添加和编辑其中的一些以查看管理界面如何响应。

安装 Graphene-Django

要开始使用 Graphene-Django，首先将其添加到项目的需求文件中：

graphene-django==2.14.0

然后使用更新的需求文件安装它：

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

添加"graphene_django"到INSTALLED_APPS项目settings.py模块中的变量，以便 Django 找到它：

INSTALLED_APPS = [
  ...
  "blog",
  "graphene_django",
]

Graphene-Django 现在已安装并准备好进行配置。

配置石墨烯-Django

为了让 Graphene-Django 在你的项目中工作，你需要配置几个部分：

1. 更新settings.py以便项目知道在哪里查找 GraphQL 信息。
2. 添加一个 URL 模式来为 GraphQL API 和 GraphiQL（GraphQL 的可探索界面）提供服务。
3. 创建 GraphQL 模式，以便 Graphene-Django 知道如何将您的模型转换为 GraphQL。

GRAPHENE = {
  "SCHEMA": "blog.schema.schema",
}

from django.views.decorators.csrf import csrf_exempt
from graphene_django.views import GraphQLView

urlpatterns = [
    ...
    path("graphql", csrf_exempt(GraphQLView.as_view(graphiql=True))),
]

from django.contrib.auth import get_user_model
from graphene_django import DjangoObjectType

from blog import models

class UserType(DjangoObjectType):
    class Meta:
        model = get_user_model()

class AuthorType(DjangoObjectType):
    class Meta:
        model = models.Profile

class PostType(DjangoObjectType):
    class Meta:
        model = models.Post

class TagType(DjangoObjectType):
    class Meta:
        model = models.Tag

import graphene

class Query(graphene.ObjectType):
    all_posts = graphene.List(PostType)
    author_by_username = graphene.Field(AuthorType, username=graphene.String())
    post_by_slug = graphene.Field(PostType, slug=graphene.String())
    posts_by_author = graphene.List(PostType, username=graphene.String())
    posts_by_tag = graphene.List(PostType, tag=graphene.String())

    def resolve_all_posts(root, info):
        return (
            models.Post.objects.prefetch_related("tags")
            .select_related("author")
            .all()
        )

    def resolve_author_by_username(root, info, username):
        return models.Profile.objects.select_related("user").get(
            user__username=username
        )

    def resolve_post_by_slug(root, info, slug):
        return (
            models.Post.objects.prefetch_related("tags")
            .select_related("author")
            .get(slug=slug)
        )

    def resolve_posts_by_author(root, info, username):
        return (
            models.Post.objects.prefetch_related("tags")
            .select_related("author")
            .filter(author__user__username=username)
        )

    def resolve_posts_by_tag(root, info, tag):
        return (
            models.Post.objects.prefetch_related("tags")
            .select_related("author")
            .filter(tags__name__iexact=tag)
        )

schema = graphene.Schema(query=Query)

第 3 步总结

您已经充实了博客的数据模型，现在您还使用 Graphene-Django 包装了您的数据模型，以将该数据作为 GraphQL API 提供服务。

运行 Django 开发服务器并访问http://localhost:8000/graphql. 您应该会看到带有一些注释文本的 GraphiQL 界面，这些文本解释了如何使用该工具。

展开屏幕右上角的Docs部分，然后单击query: Query。您应该会看到您在架构中配置的每个查询和类型。

如果您尚未创建任何测试博客内容，请立即创建。尝试以下查询，它应该返回您创建的所有帖子的列表：

{
  allPosts {
    title
    subtitle
    author {
      user {
        username
      }
    }
    tags {
      name
    }
  }
}

响应应该返回一个帖子列表。每个帖子的结构应与查询的形状相匹配，如下例所示：

{
  "data": {
    "allPosts": [
      {
        "title": "The Great Coney Island Debate",
        "subtitle": "American or Lafayette?",
        "author": {
          "user": {
            "username": "coney15land"
          }
        },
        "tags": [
          {
            "name": "food"
          },
          {
            "name": "coney island"
          }
        ]
      }
    ]
  }
}

如果您保存了一些帖子并在回复中看到它们，那么您就可以继续了。

安装 django-cors-headers

首先，添加django-cors-headers到您的需求文件：

django-cors-headers==3.6.0

然后使用更新的需求文件安装它：

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

添加"corsheaders"到INSTALLED_APPS项目settings.py模块的列表中：

INSTALLED_APPS = [
  ...
  "corsheaders",
]

然后添加"corsheaders.middleware.CorsMiddleware"到MIDDLEWARE变量的末尾：

MIDDLEWARE = [
  "corsheaders.middleware.CorsMiddleware",
  ...
]

该django-cors-headers文档建议将中间件尽可能早地放在MIDDLEWARE列表中。您可以将它放在此项目中列表的最顶部。

配置 django-cors-headers

CORS 的存在是有充分理由的。您不想公开您的应用程序以供从 Internet 上的任何地方使用。您可以使用两个设置来非常精确地定义要打开 GraphQL API 的程度：

1. CORS_ORIGIN_ALLOW_ALL 定义默认情况下 Django 应该全部打开还是全部关闭。
2. CORS_ORIGIN_WHITELIST 定义您的 Django 应用程序将允许来自哪些域的请求。

将以下设置添加到settings.py：

CORS_ORIGIN_ALLOW_ALL = False
CORS_ORIGIN_WHITELIST = ("http://localhost:8080",)

这些设置将只允许来自您的前端的请求，您最终将在8080本地端口上运行。

第 4 步总结

后端完成！您有一个工作数据模型、一个工作管理界面、一个可以使用 GraphiQL 探索的工作 GraphQL API，以及从接下来将构建的前端查询 API 的能力。如果您有一段时间没有休息，这是一个停下来的好地方。

创建 Vue 项目

与 Django 非常相似，Vue 提供了一个命令行界面，无需完全从头开始即可创建项目。您可以将其与 Node 的npx命令配对，以引导其他人发布的基于 JavaScript 的命令。使用这种方法，您无需手动安装启动和运行 Vue 项目所需的各种单独的依赖项。用npx现在来创建Vue公司的项目：

$ cd /path/to/dvg/
$ npx @vue/cli create frontend --default
...
🎉  Successfully created project frontend.
...
$ cd frontend/

这将frontend/在现有目录旁边创建一个目录backend/，安装一些 JavaScript 依赖项，并为应用程序创建一些框架文件。

安装 Vue 插件

你需要一些 Vue 插件来执行正确的浏览器路由并与你的 GraphQL API 交互。这些插件有时会影响您的文件，因此最好在刚开始时安装它们，这样它们就不会覆盖任何内容，然后再配置它们。安装 Vue Router 和 Vue Apollo 插件，在出现提示时选择默认选项：

$ npx @vue/cli add router
$ npx @vue/cli add apollo

这些命令需要一些时间来安装依赖项，它们会添加或更改项目中的一些文件以配置和安装 Vue 项目中的每个插件。

第 5 步总结

您现在应该能够运行 Vue 开发服务器：

$ npm run serve

现在，您的 Django 应用程序运行于http://localhost:8000，Vue 应用程序运行于http://localhost:8080。

http://localhost:8080在浏览器中访问。您应该会看到 Vue 启动页面，这表明您已成功安装所有内容。如果您看到启动页面，您就可以开始创建您自己的一些组件了。