|
|
创建应用程序的前端、后端和部署工作流程需要大量工作。在您的应用程序仅收集用户提交的有限数据的情况下，构建整个后端似乎不值得花费时间和精力。开发完整后端的另一种方法是使用 Netlify Forms。在本教程中，我将解释如何将 Angular 反应式表单与 Netlify Forms 结合使用。由于 Netlify Forms 仅在部署在 Netlify 上时才起作用，因此我还将说明如何在 Netlify Edge 上部署应用程序。
工具包
Angular 反应式表单是一种具有使用ReactiveFormsModule提供程序在组件类中显式创建的结构化数据模型的表单。为表单视图中的每个输入元素创建一个表单模型。该表单模型是FormControl类的实例，它跟踪表单元素的值。表单模型 加拿大电话号码表 是不可变的，因为每当模型发生更改时，FormControl 实例都会返回新的数据模型，而不是更新旧模型。它的不变性使变更检测更加有效，并允许使用可观察运算符更改数据。由于表单输入元素直接连接到其表单模型，因此它们之间的更新是同步的并且不依赖于 UI 渲染。
Netlify 是一个平台，允许您构建、部署和托管使用各种技术构建的站点。使用 Angular 构建的站点可以托管在 Netlify 上。Netlify 还提供了一系列工具来简化、自动化和增强这些站点的构建和部署。我们将在本教程中使用它的两个产品：Netlify Edge 和 Netlify Forms。
如前所述，Netlify Forms 是一项表单处理功能，可自动接收来自 HTML 表单的提交。它不需要任何提交处理配置，例如创建 API、脚本等。此功能仅适用于部署在 Netlify 上的站点中的表单。它默认启用，进一步减少了设置表单提交所需的配置。提交处理是在部署期间设置的，其中站点的 HTML 文件由 Netlify 的构建机器人进行解析。
Netlify Edge 是一个全球应用程序交付网络，可在其中发布网站和应用程序。它提供 A/B 测试、回滚、暂存和分阶段推出等功能。Netlify Edge 上的所有部署都是原子的，这意味着只有当所有文件都已上传/更新并且站点的更改已准备就绪时，站点才处于活动状态。部署站点后，在部署到生产环境时，会在netlify.app上为其分配一个子域。Netlify Edge 还支持预览和分支部署（暂存、开发等）。
Netlify 表单提交处理之所以有效，是因为构建机器人在部署期间解析站点上的 HTML 表单。这些机器人无法找到客户端 Javascript 呈现的表单（例如已编译的 Angular 站点中的表单）。因此 Netlify Forms 的正常设置不适用于 Angular Forms。
不过，有一个解决方法。为了让它接收提交的内容，将一个隐藏的纯 HTML 表单添加到文件中index.html。此表单适用于构建机器人。提交 Angular 表单时，系统会向该隐藏表单发出发布请求，然后 Netlify Forms 会捕获该隐藏表单。
在本文中，我们将创建一个反应式表单。我们还将开发一项服务来向隐藏的 HTML 表单发出发布请求。最后，我们将该应用程序部署到 Netlify Edge。
示例
为了说明如何构建应用程序，我们将以许多网站上常见的反馈表单为例。我们将使用此表格收集网站用户的评论/投诉、问题和建议以及他们的姓名和电子邮件。我们还将使用它来收集他们对网站的评级。
要求
要学习本教程，您需要一个 帐户并安装 Angular CLI。如果您没有 CLI，可以使用 安装它。
复制
如果您尚未注册 Netlify 帐户，您可以在此处创建一个。Netlify 提供通过 或电子邮件进行注册的服务。根据您选择采用的部署方法，它们可能还有其他要求。它们将在每种部署方法下进行说明。
|
|
发表于 2023-9-23 17:46:30