如何构建 Astro.js 后端？

Astro.js 是一个静态网站生成器（SSG）和前端框架，用于构建快速、现代的网络应用程序。

它允许您在构建时预先渲染静态 HTML、CSS 和 JavaScript 文件，从而快速构建轻量级网站。

与传统的 SSG 不同，Astro.js 还允许您在运行时用 JavaScript 填充静态页面，从而灵活地创建动态和交互式网站。

本文提供了如何使用 Back4app 作为后端即服务（BaaS）来构建 Astro.js 应用程序的全面教程。

它将概述 Astro.js、其优势和局限性，并逐步介绍如何构建和托管 Astro.js 应用程序。

Astro.js 的优势

Astro.js 拥有多项关键功能，是构建现代网站的最佳选择，其中包括

岛屿建筑

岛式架构是一种网页架构模式，它将网页分解为封装的、独立的功能岛。

每个岛屿可以由一个组件、一组组件甚至整个页面来表示。

Astro.js 可将用户界面（UI）提取为更小、更独立的组件，称为 “Astro 岛”。您可以在任何页面上使用这些孤岛，从而用轻量级 HTML 替代未使用的 JavaScript。

岛式架构有几个优点，包括提高性能、增加灵活性和简化开发。

极简 JavaScript

Astro 采用 “少用 JavaScript “的方法。只有在需要进行交互时，它才会向客户端发送 JavaScript。这有助于减少 JavaScript 捆绑程序的大小，并缩短加载时间。

Astro.js 中极少的 JavaScript 带来了一些切实的好处，包括提高网站性能、改善搜索引擎优化、减少资源消耗、增强安全性以及更灵敏的用户体验。

这种方法可提供高效、高性能的网络应用程序，使 Astro.js 成为现代网络开发的理想选择。

与流行框架集成

您可以将 Astro.js 与各种流行的 JavaScript 框架结合使用，包括 React、Svelte、Vue 和 Lit。

这样，您就可以选择自己喜欢的工具，重复使用现有的组件和知识，利用已有的生态系统，并保持顺畅的开发流程。

这种灵活性和兼容性使 Astro.js 成为各种项目的理想选择。

优化加载

优化加载是 Astro.js 的核心优势。它从根本上改变了网页的设计和交付方式，专注于增强用户体验和网站性能。

Astro 可针对不同设备（包括智能手机等低功耗设备）优化加载和渲染。无论用户的设备或网络条件如何，它都能提供流畅的体验。

Astro.js 的局限性

Astro.js 有一些限制，您应该了解。以下是其中一些：

生态系统兼容性

Astro.js 设计用于与 React、Svelte 和 Vue.js 等流行的前端框架配合使用。不过，它的生态系统不如 React 或 Vue 等框架成熟，所以你可能会发现明确为 Astro 构建的第三方库和组件较少。

熟悉框架要求

Astro.js 允许使用各种前端框架，因此必须熟悉所选的每个框架。

这种知识的广度可能会让专注于一种框架的开发人员或网络开发新手不知所措。

在一个需要使用多个框架的项目中，需要保持不同框架之间的一致性。

这可能非常具有挑战性，因为不同的框架都有自己的惯例和最佳实践，而在一个项目中协调这些惯例和最佳实践可能会导致代码结构支离破碎。

优化学习

优化学习指的是了解和实施特定策略，以最大限度地提高使用框架构建的网络应用程序的性能。

虽然 Astro.js 是为提高效率和速度而设计的，但要充分利用其功能，您需要深入了解其优化技术，并在开发过程中加以实施。这可能很复杂，需要高级知识。

创建日志应用程序

通过本教程，您将使用 Astro.js 框架和 React.js 构建一个基本的日志应用程序。

日志应用程序将提供 CRUD（创建、读取、更新、删除）功能，并使用 Back4app 进行数据存储和检索。

在终端运行此命令即可创建 Astro.js 项目：

npm create astro@latest

上述命令将生成一个基本的 Astro.js 项目，并指导您配置应用程序，包括 TypeScript 的使用和严格程度等方面。

要在 Astro.js 项目中添加 React.js，请在终端中运行此命令：

npx astro add react

现在，您的项目已经准备就绪。您可以使用自己喜欢的集成开发环境开始开发应用程序。首先，您要定义全局样式和应用程序的布局。

要定义全局样式，请在src目录中创建styles文件夹。在样式文件夹中创建名为global.css 的文件，并在其中定义全局样式。

就像这样

全局样式就绪后，就该定义布局了。你可以在src目录的layouts文件夹中找到Layout.astro文件。

用以下代码块替换Layout.astro文件中的现有代码：

上面的代码块表示布局组件。它导入了全局样式，设置了元数据，并使用槽元素为动态内容提供了一个占位符。

组件的主要内容是一个h1标题，在样式标签中定义了特定的样式。

要在页面中应用布局和全局样式，请将布局组件导入页面文件，并将 HTML 部分包含在布局组件中。

要将布局应用到主页，请按照位于src/pages目录下的index.astro文件中的相同步骤操作。

就像这样

该代码块定义了应用程序的主页。它定义了一个带有“/journal “页面链接的导航菜单，并应用特定样式将导航元素居中和间隔。

要创建日志页面，请在src/pages目录下创建名为journal.astro的文件，并在文件中加入以下代码块。

上面的代码块代表了应用程序的日志页面。它导入布局组件并封装 HTML 部分，以提供一致的页面结构。

代码还定义了一个用于捕捉日志条目的表单，配备了标题和正文输入框，以及一个“日志 “按钮。样式标签中定义的 CSS 样式可控制表单及其元素的外观。

要在网络浏览器中启动应用程序，请启动应用程序的开发服务器。在终端导航到项目目录，执行以下命令启动开发服务器。

npm run dev

上述命令将为您提供http://localhost:4321/ 链接。请在网络浏览器上导航至该链接，以查看您的应用程序。

主页应该是这样的

要查看日志页面，请单击导航链接“记录您的体验”。

将 Back4app 与您的应用程序集成

Back4App是一个基于云的后端服务平台，旨在简化应用程序的开发和管理，并将使用 Back4app 作为 Astro.js 的后端。

它利用开源Parse Server 框架，提供了一套强大的工具，使开发人员能够专注于前端开发，同时简化后端复杂性。

Back4App 的核心功能是提供对现代应用程序开发至关重要的功能，如数据存储、用户身份验证和实时数据库。

这使其在创建交互式动态用户体验方面具有重要价值。该平台支持各种编程语言和框架，可满足不同的开发需求。

创建 Back4app 账户

要在您的应用程序中集成 Back4app 提供的功能，您需要拥有一个 Back4app 帐户。您可以通过以下简单步骤创建一个账户：

1. 访问Back4app 网站。
2. 点击 “注册 “按钮。
3. 填写报名表并提交。

介绍 Back4app ChatGPT 插件

Back4app 最近推出了ChatGPT 插件，帮助开发人员和非技术爱好者创建 Back4app 应用程序并与之互动。

使用 Back4app ChatGPT 插件，您可以将您的对话转换为真正的应用程序。这意味着在进行互动之前，您无需具备使用 Back4app 平台的经验。

要访问 ChatGPT 插件，您必须订阅 ChatGPT Plus。订阅后，点击“GPT-4 “按钮，弹出菜单。选择“插件 “选项继续。

屏幕上将显示可用插件列表。找到并选择 Back4app 插件（在搜索栏中输入 “Back4app”）。

使用插件创建 Back4app 应用程序

使用 ChatGPT 上的 Back4app 插件创建 Back4app 应用程序非常简单。只需告知 ChatGPT 您希望创建的应用程序类型，其余的工作都将由 ChatGPT 来完成。

例如

如上图所示，Back4app ChatGPT 插件创建了一个名为“日志应用程序 “的Back4app应用程序。

要验证 Back4app ChatGPT 插件是否成功创建了应用程序，请访问 Back4app 网站，登录您的账户并查看您的应用程序。您应该能在应用程序中找到名为“日志应用程序 “的应用程序。

使用插件，在日志应用程序中创建日志类。

如上图所示，Back4app ChatGPT 插件创建了日记类，并添加了标题、内容和日期字段。

向 Back4app 应用程序添加数据

使用 Back4app ChatGPT 插件，您还可以在应用程序中添加自定义数据。例如，您可以在标题和内容字段中添加自定义文本。

添加文本后，导航到应用程序仪表板，点击日记类，确认文本已添加。

连接到 Back4app

要将日志应用程序连接到 Back4app 应用程序，您需要在应用程序中安装 Parse JavaScript SDK。

为此，请在终端中运行以下命令：

npm install parse 

安装 Parse JavaScript SDK 后，你需要应用程序 ID和Javascript KEY认证。

您可以在 Back4app 应用程序控制面板的安全与密钥部分找到这些凭证。将应用程序 ID和Javascript KEY安全地存储在您的应用程序中。

从应用程序向 Back4app 添加数据

在文章的前面部分，您了解了如何使用 Back4app ChatGPT 插件向 Back4app 添加数据。要使用日志应用程序来添加数据，您需要使用 Parse Javascript SDK。

在journal.astro文件中添加以下代码块：

此代码块代表一个 JavaScript 脚本，它与 Parse 集成，用于创建和保存日记账条目。它从parse/dist/parse.min.js导入Parse的最小化版本，并调用初始化方法。

该方法将Application_ID和Javascript_KEY作为参数。调用 Parse 的初始化方法后，将 Parse 的 serverURL 属性设置为https://parseapi.back4app.com/。

代码会从 DOM 中选择输入、文本区和按钮元素，并将它们赋值给标题、正文和按钮变量。

输入框使用日记账条目的标题，文本框使用日记账条目的正文。

addJournal函数包含向 Back4app 数据库添加数据所需的逻辑。它创建一个新的日志对象实例，将其标题和内容属性设置为输入和文本区域元素的值，然后将其保存到 Back4app。

通过addEventListener方法，代码为按钮添加了一个事件监听器，确保单击按钮会触发addJournal函数。

从 Back4app 获取数据

要从 Back4app 获取数据并在应用程序中显示，您需要使用 React 组件。在src/components目录中创建Journal.tsx文件。在该文件中，导入并初始化 Parse 库。

就像这样

然后，定义组件的 JSX 元素：

接下来，创建日志状态，并定义一个包含从 Back4app 获取数据逻辑的函数。

就像这样

通过Parse.Query方法，fetchJournal函数使用 Parse SDK 构建一个查询，从Journal类中检索数据。

查询对象的find方法会返回一个包含查询结果的数组，而setJournal函数会用检索到的数据更新日志状态。

这段代码使用useEffect钩子在组件中运行副作用。当组件挂载时，它会调用fetchJournal来获取数据。现在，在组件中显示日志状态的内容。

就像这样

上面的代码块将日记条目列表渲染为一组div元素，每个元素都有特定的内容和专门的“删除 “按钮。

它在h3和p标签中显示每个日志条目的标题和内容，并有一个“删除 “按钮，方便用户删除条目。

要为日志组件中定义的 JSX 元素设计样式，请在global.css文件中添加以下样式：

现在，在主页上显示日志组件。为此，请用下面的代码块替换index.astro文件中的现有代码：

该代码块导入期刊组件并对其进行渲染。客户端:加载指令可确保在页面加载时立即加载期刊组件，从而提供流畅、响应迅速的用户体验。

从 Back4app 中删除数据

为确保应用程序中每个条目旁的删除按钮都能正常工作，您需要定义一个函数来删除所选的条目。然后，使用点击事件将该函数绑定到删除按钮。

就像这样

函数deleteJournal使用Parse.Object.extend方法创建了一个新的Journal对象实例。创建对象后，函数会将对象的id属性设置为传递给函数的id参数。

接下来，函数会调用“日记账 “对象的异步destroy方法，从 Back4app 中删除带有给定 ID 的日记账条目。

使用filter方法，函数会从日记账状态中过滤出具有指定id的日记账条目，并创建一个不包含已删除条目的新数组。

最后，通过setJournal方法，函数会用这个新数组更新日志状态。

现在，使用点击事件处理程序将deleteJournal函数绑定到"删除 "按钮。这将使Journal.tsx文件中的 JSX 元素看起来像这样：

测试应用程序

现在，您已经完成了应用程序的构建，重要的是要对其进行测试。为此，请导航到终端，运行开发服务器，并在网络浏览器上查看应用程序。

应用程序应该是这样的

点击“记录您的经历”，访问申请的日志页面并填写输入字段。

填写完输入字段后，点击日志，将数据添加到 Back4app 数据库中。返回主页。

现在，要测试能否删除条目，请单击“我的第一天日志 “条目的删除按钮。您的主页现在应该如下图所示。

结论

在本文中，您将深入了解 Astro.js 框架，了解其优点和潜在缺点。您还学会了如何构建一个与 React 库无缝集成的 Astro 应用程序。

Astro.js 是构建各种网站（从简单的登陆页面到复杂的网络应用程序）的绝佳选择。它尤其适合需要快速、轻量级和可扩展的网站。

要了解更多信息，请阅读教程《如何为 Astro.js 创建后台》。