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

举报
Yuchuan 发表于 2021/12/04 08:34:16 2021/12/04
【摘要】 你是一个普通的 Django 用户吗?您是否发现自己想要将后端和前端分离?您是否希望在使用 React 或 Vue 等客户端框架在浏览器中的单页应用程序 (SPA) 中显示数据时处理 API 中的数据持久性?你很幸运。本教程将带您完成构建 Django 博客后端和Vue前端的过程,并使用GraphQL在它们之间进行通信。 项目是学习和巩固概念的有效方式。本教程是一个循序渐进的项目,因此您可以通过

目录

你是一个普通的 Django 用户吗?您是否发现自己想要将后端和前端分离?您是否希望在使用 React 或 Vue 等客户端框架在浏览器中的单页应用程序 (SPA) 中显示数据时处理 API 中的数据持久性?你很幸运。本教程将带您完成构建 Django 博客后端和Vue前端的过程,并使用GraphQL在它们之间进行通信。

项目是学习和巩固概念的有效方式。本教程是一个循序渐进的项目,因此您可以通过动手方式学习并根据需要休息。

在本教程中,您将学习如何:

  • 将您的Django 模型转换为GraphQL API
  • 同时在您的计算机上运行Django 服务器Vue 应用程序
  • Django admin 中管理您的博客文章
  • 在 Vue 中使用 GraphQL API 在浏览器中显示数据

演示:Django 博客管理员、GraphQL API 和 Vue 前端

博客应用程序是一个常见的入门项目,因为它们涉及创建、读取、更新和删除 (CRUD) 操作。在这个项目中,您将使用 Django 管理员来完成繁重的 CRUD 提升,并专注于为您的博客数据提供 GraphQL API。

这是已完成项目的演示:

接下来,在开始构建博客应用程序之前,您将确保拥有所有必要的背景信息和工具。

项目概况

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

您将在 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

现在您已准备好开始构建 Django 应用程序。要将这个项目的依赖项与您的其他项目分开,请创建一个虚拟环境,您将在其中安装项目的需求。您可以在Python Virtual Environments: A Primer 中阅读有关虚拟环境的更多信息。本教程的其余部分假设您将在活动的虚拟环境中运行与 Python 和 Django 相关的命令。

现在您有一个安装需求的虚拟环境,requirements.txtbackend/目录中创建一个文件并定义您需要的第一个需求:

Django==3.1.7

保存requirements.txt文件后,使用它来安装 Django:

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

现在您将能够开始创建您的 Django 项目。

创建 Django 项目

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

(venv) $ django-admin startproject backend .

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

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 管理仪表板页面。此页面目前非常简单,但您将在下一步中让它变得更有趣。

第 2 步:创建 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该类继承。

Profile模型

Profile模型将有几个字段:

  • user 是与配置文件关联的 Django 用户的一对一关联。
  • website 是一个可选的 URL,您可以在其中了解有关用户的更多信息。
  • bio 是一个可选的、推特大小的简介,用于快速了解用户的更多信息。

您首先需要settings从 Django导入模块:

from django.conf import settings

然后创建Profile模型,它应该类似于以下代码段:

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()

__str__方法将使Profile您创建的对象以更人性化的方式出现在管理站点上。

Tag模型

Tag模型只有一个字段 ,name它为标签存储一个简短的、唯一的名称。创建Tag模型,它应类似于以下代码段:

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

    def __str__(self):
        return self.name

同样,__str__将使Tag您创建的对象以更人性化的方式出现在管理站点上。

Post模型

Post模型,如你所想,是最复杂。它将有几个字段:

字段名称 目的
title 显示给读者的帖子的唯一标题
subtitle 帖子内容的可选说明,以帮助读者了解他们是否想阅读
slug 在 URL 中使用的帖子的唯一可读标识符
body 帖子内容
meta_description 用于搜索引擎(如 Google)的可选描述
date_created 帖子创建的时间戳
date_modified 帖子最近编辑的时间戳
publish_date 帖子上线时的可选时间戳
published 该帖子当前是否可供读者阅读
author 对撰写帖子的用户个人资料的引用
tags 与帖子关联的标签列表(如果有)

因为博客通常首先显示最近的帖子,所以您还希望ordering按发布日期显示,最近的帖子在前。创建Post模型,它应类似于以下代码段:

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)

on_delete=models.PROTECT参数author确保您不会意外删除在博客上仍有帖子的作者。在ManyToManyField对关系Tag可以让你一用后零个或多个标签相关联。每个标签可以与许多帖子相关联。

创建模型管理配置

现在您的模型已经就位,您需要告诉 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在迁移名称之后显示。

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。