web面试super_Super Easy Forms简介：创建无服务器Web表单的最简单方法

web面试super

在过去的几年中，云服务的创新使托管静态网站变得非常方便。 由于它们不需要服务器，因此这些站点通常比动态站点更快，更安全且托管/维护成本更低。 使它们非常适合您的新目标网页之类的内容。

但是，如果您需要从访问者那里收集数据怎么办？ 您可以添加html表单，但需要某种后端来执行诸如保存提交数据或发送通知之类的操作。

Web表单本质上是一个非常简单的应用程序。 用户与界面（表单）进行交互，并将包含表单数据的请求提交给处理该表单的服务器，然后返回响应。 Web表单可用于收集诸如潜在客户的联系信息，用于邮件列表的电子邮件地址，用于调查的回复，用于商品/服务的付款等内容。

超级简单表单是一个开源且易于使用的解决方案，它使用AWS云中的服务来帮助您生成自己的完全可自定义的无服务器联系表单（前端和后端）。

超级简易表格的一些好处

• 免费和开源
• 快速和容易使用
• 完全可定制（前端和后端）
• 创建无限的项目，表单和提交
• 监控您的表单并在本地检索提交
• 有几个内置选项，例如CAPTCHA

• 要了解有关超级简单表格的更多信息，请访问我们的网站并阅读文档 。 如果您想查看源代码或使其适合您的用例，请转到项目的存储库 。

  为什么没有服务器？

  无服务器，或称为服务即服务（FaaS），是指基础架构即服务模型，即云提供商动态分配机器资源并向您收取每执行负载/时间的可变成本。

  社区中有很多关于AWS lambda和无服务器技术的问题。 有些人喜欢它，并想将其用于所有事物，而另一些人则讨厌它。 就个人而言，我是无服务器技术的大力支持者，但是我知道它并不意味着可以用于一切。 像任何新技术一样，它也有其优点和缺点，应在实施之前对其进行评估。

  根据经验，在lambda内部执行的代码应该是具有定义的输入和输出且执行时间较短的函数。

  对于超级简单的表单，我们发现使用AWS lambda较为方便，因为它是一项完全托管的服务，但它仍然允许我们独立自定义每个表单的后端。 同样，由于表单提交不是恒定的（高空闲时间），因此与执行虚拟机的固定每月费用相比，为每次执行支付完全可变的费用更为方便。

  Super Easy Forms入门

  1. 在开始之前，您将需要一个AWS账户。 如果您没有，可以在这里轻松创建一个。 不用担心，您对该项目所做的一切都将落在AWS免费套餐限制之内 ！
  2. 您必须有一台安装了node.js / npm的计算机。 您可以按照本教程在Mac / Linux中安装npm和node。

  配置

  首先，打开您的命令行。 如果您的静态网站项目没有目录，请创建一个mkdir project-name

  1. 进入项目的目录。 cd project-name
  2. 安装超级简单的表格。 npm install super-easy-forms
  3. 全局安装超级简单表单CLI。 npm install -g super-easy-forms-cli
  4. 运行构建命令 sef build -r=your_aws_region -p=profile_name 。 用所需的IAM用户名称替换profile_name，并用所需的AWS区域替换your_aws_region
  5. 完成创建您的IAM用户。 在AWS控制台中，按住访问键。 如果您已经创建了IAM用户，则可以忽略此步骤并关闭浏览器窗口。
  6. 更新计算机中的本地配置文件。 在Mac / Linux中，本地配置文件通常存储在〜/ .aws / credentials中。 在Windows中，它们通常存储在C：\ Users \ USER_NAME \ .aws \ credentials中。 创建或编辑此文件sudo nano ~/.aws/credentials并以下面显示的格式添加访问密钥。

  [profilename]
  aws_access_key_id = <YOUR_ACCESS_KEY_ID>
  aws_secret_access_key = <YOUR_SECRET_ACCESS_KEY>

  生成表格

  1. 运行sef init formname 。 用您要赋予新表单的名称替换表单名，例如您的网站域，后跟contactform。
  2. 编辑保存在./forms/formname/config.json中的配置文件，并以相同的格式将值添加到下面显示的变量中。 验证码，emailMessage和emailSubject的值是可选的。
  3. 运行sef fullform formname

  4. {"email" : "your@email.com" ,
     "formFields" :{
         "fullName" :{ "type" : "text" , "label" : "Full Name" , "required" : true },
         "email" :{ "type" : "email" , "label" : "Email" , "required" : true },
      },
     "captcha" : false ,
     "emailSubject" : "" ,
     "emailMessage" : "" ,
     }

  （可选）您可以直接将所有需要的值作为CLI标志提供，如下面的命令所示。 您在CLI标志中提供的所有值将覆盖保存在配置文件中的值。

  sef fullform formname --email=your@email.com --fields=fullName=text=required,email=email=required,paymentMethod=select=required=visa/master_card/cash,paymentAmount=number=required --recipients=recipient1@email.com,recipient2@email.com

  您可以连续修改配置文件并重新部署表单的各个组件。 有关所有可用命令和命令标志的完整列表，请参考文档的命令部分 。

  了解其运作方式

  当您运行sef fullform将在AWS云中创建一些资源，并在本地创建一些文件/文件夹，包括带有内联JQuery处理程序的响应HTML表单。

  在AWS云中创建的资源

  • 一个用于存储lambda函数部署包的s3存储桶
  • Lambda函数，用于对表单提交执行一些操作
  • DynamoDB表用于存储表单提交
  • 一个API网关端点，用于远程调用lambda函数

  lambda函数执行的操作

  1. 如果提供了验证码选项，它将使用Google的reCAPTCHA服务器验证reCAPTCHA响应。
  2. 它将表单输出存储在DynamoDB表中。
  3. 它发送电子邮件以通知利益相关者有关新表单提交的信息

  合作中

  想要帮助改进超级简易表格吗？ 查看我们的项目委员会 ，查看所有计划的问题/更新。 随时提交新的问题/功能，派生存储库并提交拉取请求。 如果您有任何疑问或需要支持就打起来了我们的团队松弛 。

  翻译自: https://hackernoon.com/super-easy-forms-introduction-the-easiest-way-to-create-a-serverless-contact-form-u25g3yzq

  web面试super