登录事件与数据传递 - 登录注册开发入门(2)

课程简介

在上一课中，我们学习了如何创建和设置表单的基本元素。本课程将指导你如何给登录表单增加交互功能，使其能够响应用户的操作，以便在低代码开发中更灵活地控制表单的行为。

前提条件

在开始本课程之前，请确保你已经完成了表单基本元素的设置，并且有一个“登录”按钮。

教程步骤

1. 打开源码:
   打开多八多应用市场中上一课的应用源码，找到登录表单。
2. 设置表单项名称:
   你会发现一个“登录”按钮，但是现在点击它没有任何反应。这是因为我们还没有给表单设置一个事件接收。通过这个事件接收，会返回表单的数据。在设置之前，我们需要给这些表单项增加“name”，也就是它们的字段名。
   • 在大纲视图中直接右键编辑，或者双击。
   • 在界面上右键然后编辑。
   • 将用户名字段指定为“用户名”，密码字段指定为“密码”。
3. 创建事件处理函数:
   • 在前台函数这里创建一个新的JS函数，叫做“登录处理”。
4. 绑定事件:
   • 在表单这里添加这个函数的调用。
   • 选择“调用函数”，把刚才创建的JS函数传递给这个表单的提交事件。
5. 编辑事件处理函数:
   • 在“登录处理”中，先放一个消息提示，比如“设置成功”。
   • 然后开始和结束连线。现在默认的情况下是成功的，但是信息是空的。
6. 测试表单:
   • 尝试进行登录操作。当点击登录按钮时，相应的提示信息已经能够正常显示。
7. 传递表单数据:
   • 将表单数据传递出去。在这里，我们选择将消息内容转化成一个参数，这个参数可以通过函数的形式进行传递。
   • 为了能在前台看到这个参数，我们将其转换为json字符串。
8. 测试数据传递:
   • 在用户名这一栏输入admin，密码输入123123。当点击登录时，你应该能看到用户名为admin，密码为123123的显示结果。

课程回顾

• 设置了登录按钮的类型为submit，即提交类型。
• 为这两个表单项设置了各自的字段名称，分别是用户名和密码。
• 新建了一个名为登录处理的js函数，其中包含了一个显示成功消息的流程，并将这个参数通过json.stringify转换为字符串形式。
• 在表单中添加了这个函数的引用，并将其传给了表单的提交处理回调函数。

下一步计划

在第三课中，你将学习如何连接后端服务，真正实现前后端数据交互。

教学总结

利用多八多AI应用开发助手提供的各种可视化组件和流程图生成代码功能，只需几步操作就可以实现表单交互和事件触发。