Quickstarters
Feature Overview

如何为 Astro 构建后端?

19min

介绍

在本指南中,您将学习如何为您的 Astro 项目构建一个完整的后台,使用Back4App

我们将涵盖集成重要的 Back4App 功能,包括数据库管理、云函数、身份验证、文件存储、实时查询等——展示使用现代工具构建快速应用程序的实用方法。

通过利用 Back4App 的环境,您可以跳过许多繁重的工作,比如配置服务器或从头编写安全层。

此设置为您节省了时间和精力,同时仍然让您能够定义一个强大的服务器端逻辑的端点。

您还将看到如何在您的 Astro 项目中集成环境变量,使得安全存储凭据或其他敏感数据变得更加容易。

完成后,您将拥有一个可扩展的 Astro 后台结构,并知道如何使用 REST、GraphQL、用户身份验证、实时事件等处理数据。

您将准备好为任何现实世界的需求添加自己的逻辑,同时保持强大的安全基础。

先决条件

  • 一个 Back4App 账户和一个新的 Back4App 项目 开始使用 Back4app。
  • 一个 Astro 项目 设置 Astro - 确保您有一个基本的 Astro 开发环境和安装了 Node.js。
  • 安装 Node.js(版本 14 或更高) 安装 Node.js
  • 熟悉前端和服务器端概念 您应该知道如何创建或编辑 .astro 文件,处理环境变量,并使用 fetch 或类似库进行简单的 POST 请求。

在开始之前,请确保这些先决条件已到位。拥有您的 Back4App 账户、Astro 环境和基本的 JavaScript 知识将帮助您更顺利地跟随本教程。

步骤 1 – 在 Back4App 上创建新项目并连接

  1. 创建新项目:
    • 登录到您的 Back4App 账户。
    • 在您的 Back4App 控制面板中点击 新应用 并给它命名(例如,“Astro-Backend-Tutorial”)。
  2. 获取 Back4App 凭据: 在您的 Back4App 控制面板中,找到 应用设置安全与密钥, 记录下您的 应用程序 ID, REST API 密钥, 以及服务器 URL (https://parseapi.back4app.com 默认情况下)。这些环境变量将在您的 Astro 集成中使用。
  3. 通过 API 将 Astro 连接到 Back4App: 由于我们不直接使用 Parse SDK,我们将使用 fetch 或其他库从我们的 Astro 文件中发出请求。出于安全考虑,将您的凭据存储在环境变量中。例如,在一个 .env 文件中:

步骤 2 – 设置数据库

创建数据模型

  1. 手动创建数据模型:
    • 前往您的 Back4App 控制面板并点击 数据库.
    • 创建一个新类(例如,“Todo”),并添加字段如 title(字符串)和 isCompleted(布尔值)。
  2. 使用 AI 代理创建数据模型:
    • 从您的应用程序控制面板打开 AI 代理。
    • 用简单的语言描述您的模式(例如,“创建一个新的待办事项应用程序,类中包含标题和已完成字段。”)。
    • 代理将为您生成类和字段。

使用 REST API 读取和写入数据

准备好数据模型后,让我们在Astro组件或服务器端文件中定义一个端点,以处理POST请求和读取请求。例如,您可以创建一个文件,如 src/pages/api/todos.astro:

Text


此示例使用环境变量 (import.meta.env.*) 来存储您的Back4App凭据。我们在一个文件中定义了两种方法: export const post 用于创建一个Todo,以及 export const get 用于检索所有Todos。您可以根据您的布局组件结构和其他站点页面进行调整。

使用GraphQL API读取和写入数据

同样,您可以从您的Astro页面执行GraphQL请求:

Text


使用实时查询(可选)

实时查询使您的数据能够实时更新。要使用它们,请在 Back4App 仪表板中启用实时查询并配置 WebSocket 连接。然而,如果您正在构建一个静态的 Astro 网站,您可以通过指向 wss://YOUR_SUBDOMAIN.b4a.io. 的客户端脚本集成实时更新。实时查询可以在记录被创建、更新或删除时将更改推送到您的连接客户端。

步骤 3 – 使用 ACL 和 CLP 应用安全性

ACLs(访问控制列表)CLPs(类级权限) 是控制数据访问的基础。您可以在您的 Back4App 仪表板的 数据库 部分配置它们。例如:

  • 仅限制经过身份验证的用户的读/写权限
  • 对每个对象使用 ACLs 进行安全控制

使用 Back4App 安全指南 确保您的数据保持安全。您还可以从仪表板设置这些规则,确保即使您的 REST 调用是开放的,只有正确的凭据才能修改或查看数据。

步骤 4 – 编写云代码函数

为什么使用云代码: 您可以将关键业务逻辑移动到服务器端,避免泄露秘密或需要维护单独的服务器。云代码可以监听触发器(beforeSave,afterSave)或处理自定义端点。

示例

JS


通过 Back4App CLI 部署此内容,或直接在您的 Back4App 仪表板的 云代码 部分中。

调用函数

在 Astro 中,您可以定义一个端点,使用 fetch 来调用您的云函数:

Text


步骤 5 – 配置身份验证

Back4App 使用 _User 类来处理用户帐户。通过 REST,您可以管理注册、登录或注销。例如,注册 新用户:

Bash


您可以以类似的方式从 Astro 中使用 fetch 复制此逻辑,使用环境变量。一旦登录,用户将收到一个会话令牌以供后续请求使用。

社交登录

对于社交提供商(如 Google 或 Apple),请使用特定的端点或设置 OAuth 流程. 请参考 使用 Apple 登录文档 或其他社交登录指南,以集成高级身份验证。如果您希望用户能够在您的 astro 项目中轻松登录,这尤其有用。

步骤 6 – 处理文件存储

要在 Back4App 中存储文件,您需要通过 REST API 发送它们。例如:

Bash


响应包含一个文件 URL。您可以将该 URL 链接到记录,例如一个 照片 类对象,以确保您在数据库中跟踪对文件的引用。您还可以通过调整应用配置中的文件安全设置来控制谁可以上传。

步骤 7 – 邮件验证和密码重置

  1. 启用邮件验证: 在 Back4App 仪表板的 应用设置 中启用邮件验证并自定义您的验证邮件模板。
  2. 设置密码重置: 同样,配置您的密码重置邮件,并确保 _User 类具有有效的电子邮件地址。
  3. 流程: 当用户从您的 astro 项目请求重置(通过 API 调用)时,Back4App 会自动发送一封包含安全链接的电子邮件,以更改他们的密码。

步骤 8 – 使用云作业调度任务

使用 云作业 来调度重复的维护或其他任务:

JS


部署您的代码,然后从 服务器设置 > 后台作业 在 Back4App 控制台中安排作业。这可以自动化任务,例如清理数据、发送电子邮件或您希望在特定时间间隔内运行的任何例行功能。

步骤 9 – 集成 Webhooks

Webhooks 让您在 Back4App 应用中发生某些事件时通知外部服务。例如,您可以在创建新 Todo 时将数据发送到 Slack:

  1. 转到更多 > WebHooks 在您的 Back4App 仪表板中。
  2. 添加一个 Webhook 指向 Slack URL。
  3. 选择事件(例如,对象创建 在 Todo 类中)。

这允许请求/响应流使您的外部系统与基于 Astro 的应用程序的数据保持同步。

步骤 10 – 探索 Back4App 管理面板

Back4App 管理应用 是一个用户友好的数据编辑管理面板。它对需要直接访问数据库的非技术团队成员特别有用。

  1. 启用 管理员应用程序在 更多 > 管理员应用程序.
  2. 创建 一个管理员用户以进行安全访问。
  3. 使用 此面板快速执行 CRUD 操作,检查日志或配置更高级的设置。

结论

您已成功为 Astro 项目使用 Back4App 创建了一个安全高效的后端。在本教程中,您:

  • 定义并配置 数据库架构
  • 使用 REST 和 GraphQL API 读取和写入数据
  • 使用 ACL、CLP 和用户身份验证 保护数据
  • 通过云代码和定时任务 扩展逻辑
  • 处理文件存储 用于图像或文档
  • 集成 Webhooks 用于外部通知
  • 探索 管理面板以简化数据管理

这种方法强调如何为Astro构建一个可靠、可扩展且易于维护的后端。通过利用环境变量,您可以保护您的凭据,同时确保您的代码在未来增长时保持灵活。

下一步

  • 部署您的Astro项目,使用支持服务器端渲染或基于Node的环境的托管平台。
  • 添加高级功能, 如基于角色的访问控制或使用Cloud Code或外部API的专业支付集成。
  • 优化性能,通过实施缓存策略和调整视口内容设置以改善用户体验。
  • 查看Back4App文档,了解日志、分析和更多高级安全措施。
  • 继续探索实时功能,使用实时查询构建真正动态的协作应用程序。