如何为 Astro 构建后端？

19 分

介绍在本指南中，您将学习如何为您的 astro 项目构建一个完整的后台，使用 back4app 。我们将涵盖集成重要的 back4app 功能，包括数据库管理、云函数、身份验证、文件存储、实时查询等——展示使用现代工具构建快速应用程序的实用方法。通过利用 back4app 的环境，您可以跳过许多繁重的工作，比如配置服务器或从头编写安全层。此设置为您节省了时间和精力，同时仍然让您能够定义一个强大的服务器端逻辑的端点。您还将看到如何在您的 astro 项目中集成环境变量，使得安全存储凭据或其他敏感数据变得更加容易。完成后，您将拥有一个可扩展的 astro 后台结构，并知道如何使用 rest、graphql、用户身份验证、实时事件等处理数据。您将准备好为任何现实世界的需求添加自己的逻辑，同时保持强大的安全基础。先决条件一个 back4app 账户和一个新的 back4app 项目开始使用 back4app。 https //www back4app com/docs/get started/new parse app 一个 astro 项目设置 astro https //docs astro build/en/getting started/ 确保您有一个基本的 astro 开发环境和安装了 node js。安装 node js（版本 14 或更高）安装 node js https //nodejs org/en/download/ 熟悉前端和服务器端概念您应该知道如何创建或编辑 astro 文件，处理环境变量，并使用 fetch 或类似库进行简单的 post 请求。在开始之前，请确保这些先决条件已到位。拥有您的 back4app 账户、astro 环境和基本的 javascript 知识将帮助您更顺利地跟随本教程。步骤 1 – 在 back4app 上创建新项目并连接创建新项目：登录到您的 back4app 账户。在您的 back4app 控制面板中点击新应用并给它命名（例如，“astro backend tutorial”）。获取 back4app 凭据：在您的 back4app 控制面板中，找到应用设置或安全与密钥 , 记录下您的应用程序 id , rest api 密钥 , 以及服务器 url ( https //parseapi back4app com 默认情况下)。这些环境变量将在您的 astro 集成中使用。通过 api 将 astro 连接到 back4app：由于我们不直接使用 parse sdk，我们将使用 fetch 或其他库从我们的 astro 文件中发出请求。出于安全考虑，将您的凭据存储在环境变量中。例如，在一个 env 文件中：步骤 2 – 设置数据库创建数据模型手动创建数据模型：前往您的 back4app 控制面板并点击数据库创建一个新类（例如，“todo”），并添加字段如 title （字符串）和 iscompleted （布尔值）。使用 ai 代理创建数据模型：从您的应用程序控制面板打开 ai 代理。用简单的语言描述您的模式（例如，“创建一个新的待办事项应用程序，类中包含标题和已完成字段。”）。代理将为您生成类和字段。使用 rest api 读取和写入数据准备好数据模型后，让我们在astro组件或服务器端文件中定义一个端点，以处理post请求和读取请求。例如，您可以创建一个文件，如 src/pages/api/todos astro \ import type { apiroute } from 'astro'; export const post apiroute = async ({ request }) => { const body = await request json(); // "create" a todo const url = `${import meta env back4app server url}/classes/todo`; const response = await fetch(url, { method 'post', headers { 'x parse application id' import meta env back4app app id, 'x parse rest api key' import meta env back4app rest key, 'content type' 'application/json' }, body json stringify({ title body title, iscompleted body iscompleted }) }); const data = await response json(); return new response(json stringify(data), { status 200 }); }; export const get apiroute = async () => { // "read" all todos const url = `${import meta env back4app server url}/classes/todo`; const response = await fetch(url, { method 'get', headers { 'x parse application id' import meta env back4app app id, 'x parse rest api key' import meta env back4app rest key } }); const data = await response json(); return new response(json stringify(data), { status 200 }); }; \ \<html lang="en"> \<head> \<meta name="viewport" content="width=device width, initial scale=1 0" /> \<link rel="icon" type="image/svg+xml" href="/favicon svg" /> \<meta name="generator" content="astro generator" /> \<title>todos api\</title> \</head> \<body> \<h1>api for todo\</h1> \</body> \</html> 此示例使用环境变量 ( import meta env ) 来存储您的back4app凭据。我们在一个文件中定义了两种方法： export const post 用于创建一个todo，以及 export const get 用于检索所有todos。您可以根据您的布局组件结构和其他站点页面进行调整。使用graphql api读取和写入数据同样，您可以从您的astro页面执行graphql请求： \ export async function post({ request }) { const body = await request json(); const url = `${import meta env back4app server url}/graphql`; const query = ` mutation { createtodo(input { fields { title "${body title}" iscompleted ${body iscompleted} } }) { todo { objectid title iscompleted } } } `; const response = await fetch(url, { method 'post', headers { 'x parse application id' import meta env back4app app id, 'x parse rest api key' import meta env back4app rest key, 'content type' 'application/json' }, body json stringify({ query }) }); const data = await response json(); return new response(json stringify(data), { status 200 }); } \ \<html lang="en"> \<head> \<meta name="viewport" content="width=device width, initial scale=1 0" /> \<link rel="icon" type="image/svg+xml" href="/favicon svg" /> \<title>todos graphql\</title> \</head> \<body> \<h1>graphql endpoint for todos\</h1> \</body> \</html> 使用实时查询（可选）实时查询使您的数据能够实时更新。要使用它们，请在 back4app 仪表板中启用实时查询并配置 websocket 连接。然而，如果您正在构建一个静态的 astro 网站，您可以通过指向 wss\ //your subdomain b4a io 的客户端脚本集成实时更新。实时查询可以在记录被创建、更新或删除时将更改推送到您的连接客户端。步骤 3 – 使用 acl 和 clp 应用安全性 acls（访问控制列表）和 clps（类级权限）是控制数据访问的基础。您可以在您的 back4app 仪表板的数据库部分配置它们。例如：仅限制经过身份验证的用户的读/写权限对每个对象使用 acls 进行安全控制使用 back4app 安全指南 https //www back4app com/docs/security/parse security 确保您的数据保持安全。您还可以从仪表板设置这些规则，确保即使您的 rest 调用是开放的，只有正确的凭据才能修改或查看数据。步骤 4 – 编写云代码函数为什么使用云代码：您可以将关键业务逻辑移动到服务器端，避免泄露秘密或需要维护单独的服务器。云代码可以监听触发器（beforesave，aftersave）或处理自定义端点。示例 // main js (cloud code) parse cloud define('greetuser', async (request) => { const username = request params name || 'guest'; return `hello, ${username}! welcome to the astro project `; }); parse cloud beforesave('todo', (request) => { const todo = request object; if (!todo get('title')) { throw 'todos must have a title '; } }); 通过 back4app cli https //www back4app com/docs/local development/parse cli 部署此内容，或直接在您的 back4app 仪表板的云代码部分中。调用函数在 astro 中，您可以定义一个端点，使用 fetch 来调用您的云函数： \ export async function post({ request }) { const body = await request json(); const url = `${import meta env back4app server url}/functions/greetuser`; const response = await fetch(url, { method 'post', headers { 'x parse application id' import meta env back4app app id, 'x parse rest api key' import meta env back4app rest key, 'content type' 'application/json' }, body json stringify({ name body name }) }); const data = await response json(); return new response(json stringify(data), { status 200 }); } \ \<html lang="en"> \<head> \<meta name="viewport" content="width=device width, initial scale=1 0" /> \<link rel="icon" type="image/svg+xml" href="/favicon svg" /> \<title>cloud code greet\</title> \</head> \<body> \<h1>greet function endpoint\</h1> \</body> \</html> 步骤 5 – 配置身份验证 back4app 使用 user 类来处理用户帐户。通过 rest，您可以管理注册、登录或注销。例如，注册新用户： curl x post \\ h "x parse application id your app id" \\ h "x parse rest api key your rest key" \\ h "content type application/json" \\ d '{"username" "user1","password" "secret123","email" "user1\@example com"}' \\ https //parseapi back4app com/users 您可以以类似的方式从 astro 中使用 fetch 复制此逻辑，使用环境变量。一旦登录，用户将收到一个会话令牌以供后续请求使用。社交登录对于社交提供商（如 google 或 apple），请使用特定的端点或设置 oauth 流程请参考使用 apple 登录文档 https //www back4app com/docs/platform/sign in with apple 或其他社交登录指南，以集成高级身份验证。如果您希望用户能够在您的 astro 项目中轻松登录，这尤其有用。步骤 6 – 处理文件存储要在 back4app 中存储文件，您需要通过 rest api 发送它们。例如： curl x post \\ h "x parse application id your app id" \\ h "x parse rest api key your rest key" \\ h "content type image/png" \\ \ data binary "@path/to/local/image png" \\ https //parseapi back4app com/files/myimage png 响应包含一个文件 url。您可以将该 url 链接到记录，例如一个照片类对象，以确保您在数据库中跟踪对文件的引用。您还可以通过调整应用配置中的文件安全设置来控制谁可以上传。步骤 7 – 邮件验证和密码重置启用邮件验证在 back4app 仪表板的应用设置中启用邮件验证并自定义您的验证邮件模板。设置密码重置同样，配置您的密码重置邮件，并确保 user 类具有有效的电子邮件地址。流程当用户从您的 astro 项目请求重置（通过 api 调用）时，back4app 会自动发送一封包含安全链接的电子邮件，以更改他们的密码。步骤 8 – 使用云作业调度任务使用云作业来调度重复的维护或其他任务： // main js parse cloud job('cleanupoldtodos', async () => { const query = new parse query('todo'); const now = new date(); const thirty days = 30 24 60 60 1000; query lessthan('createdat', new date(now thirty days)); const oldtodos = await query find({ usemasterkey true }); await parse object destroyall(oldtodos, { usemasterkey true }); return `deleted ${oldtodos length} old todos `; }); 部署您的代码，然后从服务器设置 > 后台作业在 back4app 控制台中安排作业。这可以自动化任务，例如清理数据、发送电子邮件或您希望在特定时间间隔内运行的任何例行功能。步骤 9 – 集成 webhooks webhooks 让您在 back4app 应用中发生某些事件时通知外部服务。例如，您可以在创建新 todo 时将数据发送到 slack：转到更多 > webhooks 在您的 back4app 仪表板中。添加一个 webhook 指向 slack url。选择事件（例如，对象创建在 todo 类中）。这允许请求/响应流使您的外部系统与基于 astro 的应用程序的数据保持同步。步骤 10 – 探索 back4app 管理面板该 back4app 管理应用是一个用户友好的数据编辑管理面板。它对需要直接访问数据库的非技术团队成员特别有用。启用管理员应用程序在更多 > 管理员应用程序创建一个管理员用户以进行安全访问。使用此面板快速执行 crud 操作，检查日志或配置更高级的设置。结论您已成功为 astro 项目使用 back4app 创建了一个安全高效的后端。在本教程中，您：定义并配置数据库架构使用 rest 和 graphql api 读取和写入数据使用 acl、clp 和用户身份验证保护数据通过云代码和定时任务扩展逻辑处理文件存储用于图像或文档集成 webhooks 用于外部通知探索管理面板以简化数据管理这种方法强调如何为astro构建一个可靠、可扩展且易于维护的后端。通过利用环境变量，您可以保护您的凭据，同时确保您的代码在未来增长时保持灵活。下一步部署您的astro项目，使用支持服务器端渲染或基于node的环境的托管平台。添加高级功能 , 如基于角色的访问控制或使用cloud code或外部api的专业支付集成。优化性能，通过实施缓存策略和调整视口内容设置以改善用户体验。查看back4app文档，了解日志、分析和更多高级安全措施。继续探索实时功能，使用实时查询构建真正动态的协作应用程序。