登录注册表单公用节点抽取开发 - 登录注册开发(4)

登录注册表单公用节点抽取开发 - 登录注册开发(4)

教程概述

本教程将指导开发者如何将登录表单和注册表单抽取为共用节点,以便在不同的页面中复用,并简化后续的维护工作。通过本教程,你将学习如何创建共用节点、如何根据表单类型来引用不同的表单处理函数。

开发环境准备
  • 确保已注册并配置多八多AiIDE的开发环境。
  • 准备好相关的开发项目,包含登录页和注册页。
教程步骤
第一步:创建公共节点相关的分组
  1. 在界面上添加一个逻辑分组,用来放置公共节点。
  2. 将该分组命名为"公共节点相关"。
第二步:新建UI节点
  1. 在"公共节点相关"分组中,右键添加一个逻辑分组。
  2. 给它一个名字,例如"登录注册表单节点"。
第三步:复制登录表单到UI节点
  1. 打开登录页,找到登录表单节点。
  2. 点击复制,然后粘贴到"登录注册表单节点"中。
第四步:在登录页中创建UI输出节点
  1. 在登录页中,右键添加一个通用节点。
  2. 将其命名为"UI输出节点"。
  3. 在UI输出节点中,调用"登录注册表单节点"的ID。
第五步:在UI输出节点中调用方法
  1. 使用_f方法调用"登录注册表单节点"的ID。
  2. 通过右键"UI节点",选取"开发",复制其节点标识。
  3. 在UI输出节点内容里面,将其贴进去。
第六步:为表单类型传参
  1. 在UI输出节点中,添加一个表达式类型参数。
  2. 将参数命名为"表单类型",并给它传递一个值,例如"登录"。
第七步:在登录注册节点中新增登录的判断条件
  1. 在"登录注册表单节点"中,添加一个逻辑条件,例如"是登录"。
  2. 在"是登录"条件中,使用_f方法调用"表单类型"的值。
第八步:新增注册的判断条件
  1. 在"登录注册表单节点"中,再添加一个逻辑条件,例如"是注册"。
  2. 在"是注册"条件中,使用_f方法调用"表单类型"的值。
第九步:将登录表单相关的按钮放入"是登录"条件中
  1. 将登录按钮拖到"是登录"条件中。
第十步:将注册表单相关的按钮放入"是注册"条件中
  1. 将注册按钮拖到"是注册"条件中。
第十一步:在表单提交事件中引用表单处理函数
  1. 添加一个变量"表单类型",并给它赋值。
  2. 添加一个变量"表单处理函数",并给它赋初始值。
  3. 根据表单类型来引用不同的表单处理函数。
第十二步:同步返回表单处理函数
  1. 将表单处理函数返回给表单提交事件。
结束语

完成以上步骤后,你就成功地将登录表单和注册表单抽取为了共用节点,并能根据表单类型来引用不同的表单处理函数。下一节课,你将学习如何生成登录TOKEN并写入缓存。请确保及时下载并学习多八多AiIDE的应用和组件市场中的示例代码,以及查看详细的步骤文档。祝你学习愉快!

相关推荐
静待雨落19 小时前
使用langchain来调用AI大模型
ai编程
静待雨落19 小时前
使用openai初次调用Ai
ai编程
marsh020619 小时前
56 openclaw与Serverless:无服务器架构下的应用实践
云原生·架构·serverless
卷叶小树21 小时前
低代码接入外部数据能力:DataSource Runtime 的设计
低代码
ServBay21 小时前
Google I/O 2026 Antigravity 更新与 SDK
后端·ai编程·google io
Patrick_Wilson21 小时前
写给前端的 K8s 入门:用一张图和一个例子搞懂 5 个核心概念
云原生·kubernetes·devops
IT乐手21 小时前
Hermes + Qwen 的配置方法
ai编程
鱼樱前端21 小时前
我做了一个不止有基础组件的 Vue 3 UI 库,还把 AI 组件也做进去了
前端·vue.js·ai编程
靠谱者也1 天前
Agent Loop 越做越像 RPA:浏览器自动化里的五个反直觉
agent·ai编程
Jeking2171 天前
低代码平台表单设计器 unione form editor 布局组件 —— 向导布局
低代码·动态表单·表单设计·表单引擎·unione cloud