---
order: 6
navTitle: 设置组件交互
indexTitle: 概述
---
# SuperPage组件的交互概述

交互是一个动作，SuperPage中的大部分动作需要靠交互实现，如

- 将数据提交到数据库中需要使用[提交表单](./submit-data.md)或[更新数据](./update-data.md)等交互
- 点击按钮时为参数赋值需要使用[设置参数值](./set-param-value.md)交互
- 跳转到新的页面需要使用[打开链接](./linkto.md)交互

交互的使用需要载体组件，通过搭配不同的交互，能够快速实现各种功能，各交互之间相互独立，从上至下依次执行。

## 前端交互与后端交互{#browser-and-server}

交互主要分为前端交互和后端交互。

前端交互：主要是UI交互，如打开对话框、设置属性值、设置参数值、切换多页面板等。

后端交互：提交表单、更新数据、导入数据、删除数据、发送消息等，需要由后端接口处理。后端交互如果连续配置，且**启用条件**都是**启用**或等待**上一个交互完成**，则在一个事务中执行。如果交互中配置了成功或失败后的提示，则以事务中最后一个交互为准。

一个组件的交互执行完毕后，会返回交互执行的布尔值结果，有任何一个失败了，就返回false，否则返回true。

## 交互的执行条件和执行顺序{#condition}

交互可以设置生效条件，在**生效条件**属性中设置，提供了如下选项：

- **启用**：默认为**启用**，将等待上一个交互正常执行完成后执行
- **禁用**：禁用该交互，通常用于调试
- **条件**：需要满足某种条件后再执行交互，同时需要对**等待执行**、**等待状态**和**启用条件**进行设置。交互在执行前先进行等待，等待结束后根据**启用条件**判断是否执行
  - **等待执行**：
    - 上一个交互：上一个交互，默认为该选项
    - 立即执行：立即执行该交互，与上一个交互并行执行
    - 其他可选交互列表：除了当前交互之外的所有交互列表，按交互设置顺序显示
  - **等待状态**：
    - 完成：等待的交互执行成功
    - 失败：等待的交互执行失败
    - 结束：等待的交互执行结束（包括成功和失败）
  - **启用条件**：输入表达式对交互的使用条件进行限制，当表达式返回`true`时交互生效，否则交互不生效，如等待**上一个交互完成**，**启用条件**为`[参数1]=1`，表示等待上一个交互正常执行完成后，判断参数1的值是否等于1，该交互方可执行

设置多个动作交互时可使用一些技巧，下面列举一些典型的应用场景：

1. **如何将多个数据提交动作合并在一个事务中**：只需要使多个提交动作交互连续，即可自动合并到一个事务中，详情可参考[多个提交数据请求合并一个事务提交](#merge)。
2. **特殊交互的位置设置**：当使用[关闭对话框/悬浮面板](./show-dialog.md#close)、[打开链接](./linkto.md)等交互时，建议将该交互放在交互列表最下面，例如当[关闭对话框/悬浮面板](./show-dialog.md#close)放到多个交互的中间位置时，执行交互后对话框关闭将导致后面的交互无法执行。

## 设置交互的触发事件{#trigger}

交互可以设置生效的前置触发事件，在**触发事件**属性中设置，有以下几个选项：

- **单击**：鼠标左键单击或移动端进行点击
- **双击**：鼠标左键双击
- **右键单击**：鼠标右键单击
- **移入**：鼠标移动到该组件时，就触发交互
- **移出**：鼠标光标从该组件上移开时，触发该交互

若交互的载体组件为**输入组件**，则触发事件的选项为：

- **内容变化**：输入框内容发生变化触发交互
- **输入**：输入内容时触发该交互。值得注意的是，**正在输入**的时候不是**内容变化**，输入完成并失去焦点后，才是内容变化
- **回车**：按回车时触发交互

若交互的载体组件为**画布**时，则触发事件的选项为：

- **页面加载完成**：当前页面加载完成后触发交互
- **单击**：鼠标左键单击或移动端进行点击
- **右键单击**：鼠标右键单击

## 后端交互事务{#transaction}

通过设置`等待`选项，可以控制交互之间的执行顺序。下面列举一些典型的应用场景：

### 多个提交数据请求合并一个事务提交{#merge}

在交互列表中，后端交互如果连在一起，且都是**启用**或等待**上一个交互完成**，那么这些提交数据的交互会合并为一个事务，一起提交到后端。如果提交完成后有提示信息，那么以最后一个交互上的配置为准。

### 提交数据成功后打开成功对话框，失败后打开失败对话框{#submit}

提交数据后可以配置两个打开对话框的交互，分别打开成功对话框和失败对话框，成功对话框配置等待上一个交互完成，失败对话框配置等待提交数据交互失败。

### 点击按钮提交数据，同时记录一条日志{#log}

按钮上配置**提交表单**交互用于提交表单数据，配置**插入数据**交互用于提交一条操作日志，两个交互都配置**立即执行**，他们会并行执行，发送2个请求。

## 安全策略{#security}

在执行后端交互时，为了保证交互执行的正确性，系统提供了一些额外的手段来提高系统提交数据的安全性。

### 一个事务的交互在一起执行{#together}

当配置一系列的后端交互在一个事务中执行时，这些交互会通过一个提交请求到后端执行，一起成功或失败。

### 校验更新数据的结果{#validate}

在更新库存时，我们会遇到先更新库存再插入订单的情况，当库存为0时不应该插入订单。此时可以在更新库存的数据集上增加`[库存]>0`的条件，如果更新语句返回的结果等于0，那么**更新数据**交互的**检查更新结果**选项默认会判断该语句失败，则不会继续执行。在**检查更新结果**选项中，还可以设置更多选项以调整检查策略。

### 防止提交到数据库的数据被篡改{#tampering}

黑客可以通过模拟或修改http请求的参数等手段对提交的数据进行修改。我们可以通过如下手段来防止写入数据库的数据被篡改：

- 在更新或删除数据交互中设置的数据集，需要加上严格的过滤条件，而不是仅仅依靠用户传递的参数。比如用户仅能删除或更新创建者为自身的数据，那么数据集上应该有条件`[XX表].[创建者]=$user.id`。
- 在后端交互事务最前面增加一个**后端校验**的交互，将对参数的校验或对数据库中的数据校验写在该交互中。如当数据库中无法select出指定参数的数据时，才能够将该参数的数据插入到数据库中。由于校验使用的参数和插入的参数是一致的，所以即使参数被修改，也可以避免提交脏数据。