如何在几分钟内发送自定义登录表单——无需编码

已发表: 2019-02-14

如果您可以在几分钟内为您的产品或应用程序创建一个用户登录表单——并且无需编码——那么你一定是在做一些非法或神奇的事情。或者，您可以使用 Mason，这是一个功能构建平台，专为团队协作设计、构建和部署前端功能而设计。

让我们先解释一下梅森是什么。然后，我们将向您展示在几分钟内构建、设计和部署登录表单是多么容易。

Mason 是一个前端即服务平台，您可以在该平台上设计、构建和部署软件应用程序的全功能特性。您可以完全控制在代码库中管理前端体验，从而可以在几分钟内创建实时功能。

Mason 有效地消除了为开发提供文档和等待下一个部署周期的需要；从而从您的工作计划中消除数周甚至数月的时间。您将整合原型设计、QA 和工程设计，以闪电般的速度前进。

以下是您使用 Mason 的方法：

从您将用于设计您希望创建的功能的平台中选择一个或多个组件；在这种情况下，可以是单个用户登录，也可以是带有各种命令和选项的登录流。
选择一个模板来工作或构建您自己的模板。无论哪种方式，您都可以将其自定义到最终像素。
让开发人员花几分钟时间，让他们帮助您连接您的 API 端点，点击“发布”，您新创建的功能将在几秒钟内上线。现在，您可以导出您的功能并使用一行代码将其放入您的代码库中。

如何在不编写代码的情况下创建登录表单

正如您从视频教程中看到的那样，这并不难。您所要做的就是点击 Play，坐下来，准备好对它的简单程度留下深刻印象。

如果您想再看一遍这些说明以确保它们正确无误，为了您的利益，我们会重复一遍。

您将使用Mason Canvas和Mason Builder创建用户登录表单。

Mason Canvas是一个虚拟白板，您可以在上面直观地创建前端设计。不涉及编码，您不必将设计交给开发团队。

Mason Builder使您能够为网站或应用程序创建和自定义功能，并将它们连接到现有的后端。

重要的是要注意，每当您对功能进行更改时，它都会自动转换为有效的 HTML/CSS；不需要调试的代码可能会减慢部署周期。

有了这些工具，您就可以按照以下分步说明继续操作：

当您登录到您的Mason帐户时，您会看到一个“+新功能”按钮。单击它将显示各种选项。单击“画布”选项。

+新功能 → 画布

接下来，单击“元素”选项卡（在您的左侧），然后转到“表单”部分。选择一个表单并将其拖放到已经位于 Canvas 上的容器中。

元素 → 表单 → 从 Canvas 拖放表单

单击表单周围的空白区域以选择容器。这样做后，您会在右侧看到一个栏。重要提示：在继续之前检查栏以确保高度设置为 100%。

您现在只需点击 3 次即可塑造您的登录表单！做得好！

选择表单中的“数据”输入表单，然后单击顶部的“克隆”选项卡，以添加您需要的任意数量的输入字段。然后，您需要切换到右侧栏上的“属性”选项卡，以选择每个字段所需的输入类型——文本、数字、URL 等。

数据→克隆→添加输入字段

数据→属性→为每个输入字段选择输入类型

使用 Mason 自定义表单本质上是不费吹灰之力。再次选择您的表单并查找“样式”侧边栏。 “样式”可让您以任何您想要的方式设置表单样式，包括更改彩色编辑边框、更改大小或背景等等。

一旦达到你想要的风格，移动到“提交”按钮，顺便说一下，你也可以自定义。

剩下的就是点击“发布”。

不要忘记定期点击“保存”来保存您的工作！

要使您的表单功能齐全，您需要转到配置并选择“数据源”。这是您填写 API 端点的地方。如果您不是技术产品用户，您团队中的开发人员可以在几分钟内为您提供帮助。

如果您不确定 API 端点是什么，它是一个地址 (URL)，使用户能够访问您的应用程序（在这种情况下，请登录）。

Datasources → 填写 API Endpoint

下一步：返回“表格”部分并选择“发布”作为您的提交方式。剩下的就是点击“发布”并单击“预览”按钮以验证一切正常。

表单部分→发布→发布→预览

由于您遵循了这些说明，因此您可以确信一切正常，但检查也无妨。您可以通过使用 Chrome 的开发者工具检查网络请求来做到这一点。

只需转到“检查 - 网络”，您就可以看到浏览器正在发出的请求。通过填写一些测试凭据，您可以验证您的表单是否按计划工作。

梅森可以做的其他很酷的事情以及为什么你应该尝试它

为 UI 设计和构建功能部件可能需要数周甚至数月的时间，而使用Mason ，您可以在几分钟内获得相同的结果，并在几秒钟内测试您的创作——在此过程中节省时间、金钱和资源。

而且，您还将获得这些额外的好处：

交付功能解决方案的闪电般的快速周转将使您的客户惊叹不已，远远超出他们的预期。
您不会被困在一个项目上数周。相反，您可以承担额外的工作并为新客户腾出空间。
您创建的功能将与品牌风格指南保持一致。如果某些东西发生了变化，比如颜色或字体，只需在 Mason 中进行更改，点击发布，您的更改就会实时推送到您已经可以使用的前端功能中。

梅森以团队为导向。通过在前端完成所有工作，您的团队成员会感到被授权，团队成员、客户和其他项目利益相关者之间的协作成为第二天性。

最重要的是，您曾经不得不忍受的停机时间和部署周期可能会成为历史，因为任何授权的个人都可以登录、进行更改并使更新的功能生效。