UIOTOS文档：示例10：表单请求接口| 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dat

目标

示例9介绍了接口返回数据提取。本示例通过介绍账户登录，了解表单数据提交给接口请求的全过程。效果如下：

步骤

对话框的内嵌页有两个输入框，弹窗输入用户名、密码后，点击登录，表单数据给到接口，并执行请求。

内嵌页

新建

略。参见1新建。命名为"登录内嵌"（即对话框内嵌的登录页）。

拖放组件

拖入两个输入框，分别设置如下：

• 用户名输入框
  • 基础-标识中设置：username（对应接口参数的用户名字段）

• 功能-值内容中设置：admin（对应接口参数的用户名字段）

点击后面，弹窗中点击选择，弹出列表中选择formValue（参见纯表单使用）。

• 外观-标签文本设置：用户名。

• 密码输入框
  • 功能-值内容设置："123456"（对应接口参数的用户名字段）。

点击，弹窗中也选择formValue，参照上面对用户名的设置。

• 类型选择密码。

• 外观-标签文本设置：密码。

![image.png](https://img-blog.csdnimg.cn/img_convert/314b1a5711129a94b66ea3803efbc55c.png)	

完整步骤如下：

布局

选中两个输入框，右键菜单选择自动布局（或快捷键shift + 回车）。（参见布局）

主页面

新建

略。参见1新建。命名为"账号登录"（即主页面）。

拖放组件

拖入按钮、两个对话框、接口组件，并设置属性。
**步骤1：**拖入普通按钮组件，设置如下：功能-文字设置：登录

**步骤2：**拖入两个对话框组件，分别设置：

• 对话框1（登录）
  • 外观-标题头文字设置：登录。
  • 勾选单关闭。

• 对话框2（登录提示）：
  • 外观-标题头文字设置：登录提示。
  • 勾选单关闭。
  • 勾选单按钮。

**步骤3：**拖入接口组件，设置如下：

• 功能-接口地址：长度为2，索引0、1分别设置如下：
  • 索引0设置："http://203.189.6.3:8081"
  • 索引1设置："/api/login"

也可以长度为1，索引0设置完整的"http://203.189.6.3:8081/api/login"（参见接口地址url）。

• 功能-请求类型选择POST

页面嵌套

对话框嵌套前面的内嵌页（操作参见容器嵌套）。随后勾选对话框的的纯表单（为什么勾选纯表单）。

连线操作

**步骤1：**按钮点击，触发登录弹窗。无关联属性（按钮）→ 弹窗（对话框）。

关联事件（属性）什么时候可以省？

**步骤2：**对话框连线到接口组件，传参并执行。

• 索引0：无关联属性（登录对话框）→ 参数对象（接口）。
• 索引1：无关联属性（登录对话框）→ 请求（接口）。

因勾选了纯表单，不关联属性时，输出表单仅包含纯表单数据。参见：

• 来源属性为空或事件函数时，连线输出表单对象。
• 容器勾选纯表单。

**步骤3：**接口返回结果弹窗显示。

• 索引0：无关联属性（接口）→值内容（登录提示对话框继承），并解析赋值："msg"。

• 索引1：无关联属性（接口）→弹窗（登录提示对话框）。

至此设置完毕，最终效果（参见目标）。

小结

容器直接输出表单（什么是表单？），由继承属性的标识和值组成，通常与接口参数要求不一致。通过表单绑定（formValue）和容器的纯表单设置，可以实现输出的字段数量和名称，与参数要求保持一致。详见（纯表单介绍）。