【界面设计器】模型增删改查基础

阅读之前

你应该：

• 已搭建包含界面设计器的基础环境。
• 对平台元数据有基本了解和认识。（如果不是特别清楚也没关系）

常用元数据简介

平台中包含了许多元数据，以这些元数据为基础，可以较为完整的描述了一个【应用】或【模块】的存储结构以及用户交互。

图解

概念解释

• 模块（Module）：用于定义元数据的作用域。
• 数据字典（DataDictionary）：固定数据可选项。
• 模型（Model）：用于描述一个具体对象的集合。
• 字段（Field）：模型中字段，用于描述对象属性。
• 函数（Function）：模型中的函数，用于定义对象的服务端行为。
• 动作（Action）：模型中的动作，用于定义对象的交互行为。具体表现为以下四个行为。
• 跳转动作（ViewAction）：用于视图与视图之间的跳转。
• 视图（View）：用于定义主内容分发区的页面内容。
• 服务端动作（ServerAction）：用于客户端调用服务端行为。特殊的，当函数被作为API级别开放时，客户端也可以直接调用。
• 链接动作（UrlAction）：用于执行浏览器超链接行为。
• 客户端动作（ClientAction）：用于自定义客户端动作。

其他概念解释

• 应用（Application）：特殊的模块，可以被用户访问的模块。
• 模块依赖（ModuleDependencies）：模块与模块之间具备的一种关系，使得模块可以使用被依赖模块的相关元数据。

场景描述

在以下演示过程中，我们将通过【演示模块】这一应用来引导大家完成【商品】模型的增删改查操作。并根据实际应用场景，为大家提供模型增删改查的最佳实践。

创建第一个无代码应用

（基于低代码开发的应用，可以跳过这一步骤。）

登录进入系统后，将可以按照如下步骤进行操作。（为了方便演示和体验，可直接使用admin用户进入系统）

切换应用到应用中心

创建第一个应用

至此，你已经创建了一个【演示应用】，用于接下来的操作。

创建第一个无代码模型

（基于低代码开发的模型，可以跳过这一步骤。）

切换应用到模型设计器

在模型设计器切换视图为表模式

模型设计器具有表模式和图模式两种模型展示形式，表模式主要用于单个模型的管理，图模式主要用于查看多个模型之间的关联关系。

在这里我们使用表模式。

在模型设计器切换模块到【演示模块】

创建一个存储模型【商品】

在无代码模式中，只能选择【存储模型】和【传输模型】，其代表的含义为：

• 存储模型：创建模型时同步创建数据库表，具备数据存储能力。
• 传输模型：仅创建模型，不创建数据库表，不具备数据存储能力，仅作用户交互使用。

创建模型时，一定会继承一个父模型，在模型设计器创建模型都将默认继承【基础存储模型】，该模型中默认包含【编码】和【名称】两个业务字段，以及【ID】、【创建人ID】、【更新人ID】、【创建时间】、【更新时间】五个系统字段。

在专家模式中，可以查看模型的父模型进行查看，也可以在创建模型时修改父模型。这一功能在这里不进行演示。

在下面的操作中，我们仅需使用【编码】和【名称】这两个业务字段来创建相关视图。

创建第一个表格视图

切换应用到界面设计器

选择应用和模型

这里为了方便查看，我们可以使用【全部视图类型】。

创建表格视图

输入【页面标题】，修改【视图类型】为【表格】，直接点击确定即可。会自动进入【页面设计】。

页面设计

设计表格视图

从【组件库】-【模型】中将【编码】和【名称】两个【低代码字段】拖入【表格区】

小贴士：

• 在左侧组件库可以切换【组件】和【模型】。【组件】用于创建和选择字段，【模型】用于直接使用现有字段。
• 在模型面板可以查看当前选中字段所在模型。如未选择时，为当前视图模型。
• 对于存储模型而言，创建字段应该是一个谨慎的操作，在学习阶段尽可能从【模型】中使用现有字段。除非有创建新字段的需求。
• 大家可以自由发挥，将【编码】和【名称】拖入【列表搜索区】即可使用这两个字段进行搜索。单行文本默认使用模糊搜索。

为表格提供【创建商品】功能

从【组件库】-【组件】中将【跳转动作】组件拖入【动作区】，并填写相关的元数据信息，按图示输入完成后，点击保存即可。（具体解释在文章下方）

这里会创建一个【表单】视图，并绑定至当前动作。设计完表格视图后，我们需要设计表单视图。

为表格提供【编辑商品】功能

从【组件库】-【组件】中将【跳转动作】组件拖入【行内动作区】，并填写相关的元数据信息，按图示输入完成后，点击保存即可。

为表格提供【删除商品】功能

从【组件库】-【模型】中将【删除】动作分别拖入【动作区】和【行内动作区】即可。

将表格绑定到菜单，可以让用户访问

使用【显示母版】可以查看当前页面在母版中的预览效果

添加菜单项【商品管理】并【绑定当前视图】

发布表格视图，并返回列表页

至此，我们已完成了【表格】视图的基本功能设计。

接下来，我们需要设计刚刚在【创建商品】步骤时创建的【表单】视图。点击【商品表单】卡片任意区域进入【页面设计】。

设计表单视图

从【组件库】-【模型】中将【编码】和【名称】两个【低代码字段】拖入【表单区】

为表单提供【创建/更新】功能，使得表单可以提交数据到服务端

从【组件库】-【模型】中将【创建】动作拖入【动作区】

将【创建】动作的【是否隐藏】属性改为【条件隐藏】并设置表达式

从【组件库】-【模型】中将【更新】动作拖入【动作区】

将【更新】动作的【是否隐藏】属性改为【条件隐藏】并设置表达式

为表单提供【返回】功能

将【组件】-【客户端动作】拖入【动作区】添加【返回】功能

发布表单视图，并返回列表页

（同表格视图发布）

切换应用到应用中心，为应用设置首页

使用绑定菜单，将【商品管理】菜单设置为【演示模块】的应用首页。

切换应用到演示模块，查看刚刚设计的视图以及体验增删改查基本功能

至此，一个模型的全部增删改查功能已进行完整演示。下面将对上述步骤中可能产生的疑问点进行解释说明。

跳转动作元数据配置

• 动作名称：跳转动作的默认显示名称
• 数据控制类型：用于动作点击后的数据行为控制。
  • 处理单条数据：携带当前可用数据的一行到目标页面中，仅一行，如果勾选了多行也仅有首行（首行按勾选顺序决定）。
  • 处理多条数据：携带当前可用数据的多行到目标页面中，至少是两行。
  • 处理单条或多条数据：携带当前可用数据的多行到目标页面中，至少是一行。
  • 不进行数据处理：不携带任何数据到目标页面。
• 打开方式：用于动作点击后的跳转行为控制。
  • 当前窗口打开：基本的页面跳转，不打开新的浏览器窗口或标签页。
  • 新窗口打开：打开新的浏览器窗口或标签页。特殊的，使用了平台内置的多标签页时，将不再打开新的浏览器窗口或标签页，仅会在多标签页中添加一个新的标签页。
  • 弹窗打开：使用弹窗打开，并渲染目标页面。
  • 抽屉打开：使用抽屉打开，并渲染目标页面。
• 页面内容：界面设计器交互属性。
  • 绑定已有视图：从平台中已存在的视图中选择视图作为目标页面。
  • 创建新页面：输入视图相关信息，创建新视图并绑定到当前动作作为目标页面。
• 绑定页面：【绑定已有视图】时用于选择视图。
• 页面标题：【创建新页面】时使用的页面信息，与【界面设计器】中【创建视图】的【页面标题】一致。
• 页面模型：【创建新页面】时使用的页面信息，与【界面设计器】中【创建视图】的【模型】一致。
• 业务类型：【创建新页面】时使用的页面信息，与【界面设计器】中【创建视图】的【业务类型】一致。
• 视图类型：【创建新页面】时使用的页面信息，与【界面设计器】中【创建视图】的【视图类型】一致。
• 操作栏位置：【创建新页面】时使用的页面信息，与【界面设计器】中【创建视图】的【操作栏位置】一致。
• 禁用数据加载：打开目标页面时不发起服务端查询。
• 加载函数：打开目标页面时使用指定的加载函数发起服务端查询。

客户端动作元数据配置

• 动作名称：客户端动作的默认显示名称
• 客户端行为：平台内置的客户端行为
  • 数据校验：同提交动作的数据校验功能
  • 返回上一页/关闭弹窗/关闭抽屉
  • 刷新数据：同提交动作的刷新当前视图功能
  • 批量更新：在批量动作打开的弹窗中使用的特殊客户端动作
  • 删除数据：在一对多(O2M)和多对多(M2M)使用表格组件时使用的删除功能

Q/A

跳转动作的数据控制类型该如何选择？

【组件库】-【组件】中的动作和【组件库】-【模型】中的动作有什么区别？

【删除】动作为什么可以显示在两个区域？

表格的【创建】和【编辑】为什么一个使用【创建新页面】，另一个使用【绑定已有视图】？

表单的【创建】和【更新】配置的【条件隐藏】具有怎样的含义？