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

阅读之前

你应该:

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

常用元数据简介

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

图解

image.png

``` mermaid
graph TD
Module ---> DataDictionary
Module ---> Model

Model ---> Field
Model ---> Function1(Function)
Model ---> Action

Action ---> ViewAction ---> View
Action ---> ServerAction ---> Function2(Function)
Action ---> UrlAction
Action ---> ClientAction
```

概念解释
  • 模块(Module):用于定义元数据的作用域。
  • 数据字典(DataDictionary):固定数据可选项。
  • 模型(Model):用于描述一个具体对象的集合。
  • 字段(Field):模型中字段,用于描述对象属性。
  • 函数(Function):模型中的函数,用于定义对象的服务端行为。
  • 动作(Action):模型中的动作,用于定义对象的交互行为。具体表现为以下四个行为。
  • 跳转动作(ViewAction):用于视图与视图之间的跳转。
  • 视图(View):用于定义主内容分发区的页面内容。
  • 服务端动作(ServerAction):用于客户端调用服务端行为。特殊的,当函数被作为API级别开放时,客户端也可以直接调用。
  • 链接动作(UrlAction):用于执行浏览器超链接行为。
  • 客户端动作(ClientAction):用于自定义客户端动作。
其他概念解释
  • 应用(Application):特殊的模块,可以被用户访问的模块。
  • 模块依赖(ModuleDependencies):模块与模块之间具备的一种关系,使得模块可以使用被依赖模块的相关元数据。

场景描述

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

创建第一个无代码应用

(基于低代码开发的应用,可以跳过这一步骤。)

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

切换应用到应用中心

image.png

image.png

创建第一个应用

image.png

image.png

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

创建第一个无代码模型

(基于低代码开发的模型,可以跳过这一步骤。)

切换应用到模型设计器

image.png

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

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

在这里我们使用表模式

image.png

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

image.png

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

image.png

image.png

image.png

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

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

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

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

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

创建第一个表格视图

切换应用到界面设计器

image.png

选择应用和模型

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

image.png

创建表格视图

image.png

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

image.png

页面设计

image.png

设计表格视图

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

image.png

小贴士:

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

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

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

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

image.png

image.png

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

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

image.png

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

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

image.png

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

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

image.png

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

image.png

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

image.png

image.png

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

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

设计表单视图

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

image.png

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

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

image.png

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

image.png

image.png

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

image.png

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

image.png

image.png

为表单提供【返回】功能

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

image.png

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

(同表格视图发布)

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

image.png

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

image.png

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

image.png

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

跳转动作元数据配置

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

客户端动作元数据配置

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

Q/A

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

通常情况下,我们可以通过目标页面是否需要携带数据以及携带的数据行数,来决定数据控制类型。

在演示内容中,从【表格】视图通过【创建】按钮跳转到表单时,通常我们不需要任何数据,因此我们选择【不进行数据处理】来实现这一目的。从【表格】视图通过【编辑】按钮跳转到表单时,通常我们在行内进行操作,并且我们一次只能编辑一行数据,因此我们选择【处理单条数据】。

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

【组件库】-【组件】中的动作拖入页面时,会创建一个对应的动作,因此需要输入元数据相关信息。
【组件库】-【模型】中的动作为当前模型中的【服务端动作】,因此拖入页面后无需输入元数据相关信息。

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

在模型中内置的【删除】动作,其数据类型为【处理单条或多条数据】,因此可以在表格的【动作区】和【行内动作区】各放置一个。不仅如此,所有的数据类型为【处理单条或多条数据】的【服务端动作】都可以这样做。

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

在新增【创建】这个【跳转动作】时,由于我们在当前模型下没有一个【表单】视图可以直接使用,因此在这里我们使用【创建新页面】的方式直接创建【表单】视图,并绑定至当前动作。

在新增【编辑】这个【跳转动作】时,由于我们在上一步骤已经创建了一个可以直接使用的【表单】视图,因此在这里我们使用【绑定已有视图】。

在演示内容中,我们假设【创建商品】和【编辑商品】使用的【表单】视图可以通过【是否隐藏】属性进行简单区分,因此采取了这样的演示操作。根据我们实践经验,在大多数场景中也的确如此。

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

在平台任何存储模型/代理模型(不包含中间模型)中,都具备ID这一系统字段。通过【不进行数据处理】的跳转动作跳转至【表单】视图时,ID不会在跳转时进行传递,因此在【表单】中的ID字段为空。通过【处理单条数据】的跳转动作跳转至【表单】视图时,ID会在跳转时进行传递(如URL上可以看到id属性),因此在【表单】中的ID字段不空。

根据这一特性,我们就可以通过【条件隐藏】区分当前这个视图的业务功能。

表单的【创建】可以通过当前视图数据.ID非空进行隐藏,即表示当前ID非空时隐藏(当前ID为空时显示)。

表单的【更新】可以通过当前视图数据.ID为空进行隐藏,即表示当前ID为空时隐藏(当前ID不空时显示)。

Oinone社区 作者:oinone原创文章,如若转载,请注明出处:https://doc.oinone.top/install/61.html

访问Oinone官网:https://www.oinone.top获取数式Oinone低代码应用平台体验

(0)
oinone的头像oinone
上一篇 2023年6月20日 pm4:07
下一篇 2023年11月2日 pm1:58

相关推荐

  • 后端无代码设计器Jar包启动方法

    下载Oinone专属启动器 oinone-boot-starter.zip Mac OS平台启动 # 直接运行 ./darwin-boot java -jar ./pamirs-designer-boot-4.7.0.jar # nohup后台运行 nohup ./darwin-boot java -jar ./pamirs-designer-boot-4.7.0.jar > out.log 2>&1 & Mac OS(arm64架构)平台启动 # 直接运行 ./darwin-boot-arm64 java -jar ./pamirs-designer-boot-4.7.0.jar # nohup后台运行 nohup ./darwin-boot-arm64 java -jar ./pamirs-designer-boot-4.7.0.jar > out.log 2>&1 & Linux平台启动 # 直接运行 ./linux-boot java -jar ./pamirs-designer-boot-4.7.0.jar # nohup后台运行 nohup ./linux-boot java -jar ./pamirs-designer-boot-4.7.0.jar > out.log 2>&1 & Linux(arm64架构)平台启动 # 直接运行 ./linux-boot-arm64 java -jar ./pamirs-designer-boot-4.7.0.jar # nohup后台运行 nohup ./linux-boot-arm64 java -jar ./pamirs-designer-boot-4.7.0.jar > out.log 2>&1 & Windows平台启动 .\win-boot.exe java -jar .\pamirs-designer-boot-4.7.0.jar 说明 上述命令使用的java -jar与常规使用方式完全相同。 Oinone无代码设计器不支持使用javaagent参数。 常用启动脚本 #!/bin/bash # 脚本所在目录 home=$(cd "$(dirname "$0")" && pwd) # 启动jar路径 jarPath=$home/pamirs-designer-boot-4.7.0.jar # 配置路径 applicationPath=$home/application.yml # 许可证信息 subject= licensePath= nohup $home/linux-boot java -Duser.timezone=GMT+08:00 -Dhttps.protocols=TLSv1.2 -Dfile.encoding=UTF-8 \ -jar $jarPath \ –spring.config.location=$applicationPath \ -Psubject=$subject \ -Plicense=$licensePath \ -Plifecycle=INSTALL > $home/out.log 2>&1 & sleep 1 tail -200f $home/out.log 出现cannot execute binary file异常该如何处理? 问题原因 Oinone专属启动器是通过go语言进行编译并执行,对于不同的操作系统架构需要分别编译。 解决方案 物理机安装go语言环境。 下载boot.go文件,放在run目录下。(需询问Oinone客服获取最新boot.go文件) 进入run目录,执行go build -o "boot-starter" "boot.go"命令。 在startup.sh命令中添加-v $home/run/boot-starter:/opt/pamirs/run/boot-starter \将文件挂载到容器。 删除docker容器后再执行startup.sh脚本重启镜像即可。 出现failed to open elf at /lib64/ld-linux-x86-64.so.2异常该如何处理? 问题原因 部分arm64架构的宿主机无法兼容amd64环境中编译的linux-boot启动器,需要将启动器换为linux-boot-arm64。 解决方案 下载oinone-boot-starter.zip并解压,获取linux-boot-arm64启动器。 将启动器放在run目录下。 在startup.sh命令中添加-v $home/run/linux-boot-arm64:/opt/pamirs/run/boot-starter替换镜像中的启动器。 删除docker容器后再执行startup.sh脚本重启镜像即可。

    2024年5月17日
    89200
  • Oinone开发的业务应用部署与升级

    应用部署 中间件及资源要求 用Oinone开发的业务工程后端本质是一个Springboot工程,其部署方式与其他Springboot工程类似; 中间件及版本 Oinone支持的操作系统和中间件版本参考:https://doc.oinone.top/install/middleware/20713.html Oinone启动最小集 包括:Java, MySQL、zk,redis和nginx(或其他httpserver) 中间件 版本 说明 Java(jdk) 1.8 1.8_221+,低于这个版本需要覆盖JCE Reids 4.x、5.x Nginx 版本无特殊要求 MySQL 5.7.x, 8.0.x zk 3.4.x, 3.5.x RocketMQ 4.x,推荐4.7+ 按需安装 硬件资源建议 这里列出的资源列表仅是建议值;实际情况需根据业务数据量和用户访问量进行综合评估。 总体说明:线上部署时数据库强烈建议使用云资源 或者 公司提供的公共资源,并配置完整的数据备份策略 推荐指标:考虑系统余量(内存使用率<=85%,硬盘使用量<=80%) Oinone业务应用部署,所需要的中间件与用标准的SpringBoot工程相比,并无多大的区别(对Redis性能要求稍等高点,其他的中间件参考项目部署的资源就可以)。下面列举出来的资源是预估值,实际项目可以根据访问量等做对应的调整。 组件 CPU核数 内存 硬盘 实例数 说明 Nginx – – 5G 2 静态资源 zk 2c 1.5G+ 20G 3 集群版安装 Redis 2c 8G+ 20G 1 可以使用云上资源 MySQL 4c 8G+ 300G+ 1 使用已有资源/云资源, 建议使用云资源 OSS 2c 4G – 1. 使用云上资源或搭建MINIO Oinone业务应用 4c 8G 50G 部署包数 * 2+ 后端部署 设计器页面数据导出 若项目中没有用到界面设计器设计器页面,则忽略该步骤。 1、项目中有用到界面设计器设计器页面,首先需要把设计页面导出1.1 通过接口的方式执行导出, 并把调用页面导出的结果JSON数据保存下来; 先执行登录 mutation { pamirsUserTransientMutation { login(user: { login: "admin", password: "admin" }) { needRedirect broken errorMsg errorCode errorField } } } 执行界面数据导出,请求示例: mutation { uiDesignerExportReqMutation { export( data: { module: "demo_core", fileName: "demo_meta", moduleBasics: false } ) { jsonUrl } } } 更多导出方式(如:按菜单导出、按页面导出),参考: https://doc.oinone.top/designer/uidesigner/7294.html 1.2 在应用中心执行导出导出成功后,在应用环境的设计导出中找到导入记录,把到处结果的JSON文件保存下来; 目标环境有设计器 数据数据在应用中心可视化的方式进行设计数据的导入和导出 业务工程中导入设计页面数据 后端工程中把界面设计器的页面数据导入,若无通过界面设计器设计页面时忽略 把上面导出的页面数据(JSON文件)放入到resources目录下,如防止的位置:resources/install/hr_demo_ui.json 业务工程中导入示例代码 package pro.shushi.pamirs.hr.core.init; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.context.ApplicationContext; import org.springframework.core.annotation.Order; import org.springframework.stereotype.Component; import pro.shushi.pamirs.boot.common.api.command.AppLifecycleCommand; import pro.shushi.pamirs.boot.common.extend.MetaDataEditor; import pro.shushi.pamirs.core.common.InitializationUtil; import pro.shushi.pamirs.hr.api.HrSimpleModule; import pro.shushi.pamirs.meta.annotation.fun.extern.Slf4j; import pro.shushi.pamirs.meta.api.dto.meta.Meta; import pro.shushi.pamirs.metadata.manager.core.helper.DesignerInstallHelper; import pro.shushi.pamirs.metadata.manager.core.helper.WidgetInstallHelper; import java.util.Map; @Slf4j @Order(Integer.MAX_VALUE-1) @Component public class DemoAppMetaInstall implements MetaDataEditor { @Autowired private ApplicationContext applicationContext; @Override public void…

    2025年3月18日
    28800
  • Oinone支持的操作系统和中间件

    Oinone支持的操作系统和中间件 操作系统 操作系统 支持版本 说明 银河麒麟-飞腾版 V10 支持Java和go环境即可; Java要求jdk1.8 (1.8_221+); 低于1.8_221版本需要覆盖掉jce 银河麒麟-鲲鹏版 V10 统信服务器操作系统 V4.0 CentOS/Ubuntu/Debian 7,8,9 其他兼容的Linux系统 能安装Docker或运行go和Java环境即可 Windows Server 能安装Docker或运行go和Java环境即可 数据库 数据库类型 支持版本 说明 MySQL 5.7.x、8.0.x MySQL协议相关的,如:MariaDB,TiDB,PolarDB等。推荐使用8.0.X 达梦数据库(Dameng) 7.6、8.1 PostgreSQL 14.x 华为GaussDB/openGauss 5.x SQL Server 2017 人大金仓/电科金仓 9 Kingbase CDN CDN类型 服务 OSS 阿里云OSS UPYUN 又拍云 MINIO MinIO HUAWEI_OBS 华为云OBS TENCENT_COS 腾讯云COS LOCAL NGINX文件存储 可自定义方式进行扩展 应用服务器 应用服务器 支持版本/说明 Tomcat 主流版本都支持 TongWeb 东方通web服务器 SpringBoot内嵌Tomcat 原生的启动方式: java -jar的方式启动 Jetty 主流版本都支持 其他Java web服务器 支持标准Servlet规范和JavaEE规范的应用服务器 消息队列 消息队列 支持版本/说明 RocketMQ 4.x,推荐4.7+ Kafka 2.x, 推荐 2.5+ Rabbitmq 5.x, 推荐5.7+ 可自定义方式进行扩展 注册中心和配置中心 类型 支持版本/说明 Nacos 1.4.1 + 和 2.x都可以; 支持ACL时,必须是1.4.1以上 Zookeeper 3.4.x, 3,5,x 其他基础 类型 支持版本/说明 Java(jdk) 1.8_221+,低于这个版本需要覆盖JCE Reids 4.x、5.x Nginx 版本无特殊要求 Elasticsearch(ES) 7.x, 8.x ,推荐8.x SpringBoot 2.3.8.Release

    2025年3月19日
    30600
  • 后端初始化工程启动

    在拿到Oinone初始化的后端工程体验时,配置修改点

    2023年11月3日
    94700
  • 无网络环境下 RPM离线导出以及部署docker

    1.操作系统 以Centos7.6为例 [root@haibovm ~]# cat /etc/redhat-release CentOS Linux release 7.6.1810 (Core) [root@haibovm ~]# 2.安装yum-config-manager工具 系统默认没有安装这个命令 yum-config-manager ,这个命令在 yum-utils 包里。 yum -y install yum-utils 添加yum软件源信息(国内有很多,我这里添加阿里): yum-config-manager –add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo 更新yum缓存 yum makecache fast 3.下载docker所有依赖到指定路径 mkdir -vp /opt/docker-rpm/ yum install docker-ce –downloadonly –downloaddir=/opt/docker-rpm/ 将所有的依赖rpm环境打包 cd /opt tar -czvf docker-ce-24-CentOS7.6-rpm.tar.gz docker-rpm/ 创建安装脚本install-docker-offline.sh #! /bin/bash cd /opt/docker-rpm yum -y localinstall *.rpm 4.在新的目标环境系统中,上传docker-ce-24-CentOS7.6-rpm.tar.gz 以及install-docker-offline.sh cd /opt tar zxvf docker-ce-24-CentOS7.6-rpm.tar.gz sh install-docker-offline.sh 安装完毕以后启动docker #查看启动状态(安装完默认未启动,需要手动执行启动命令) systemctl status docker # 启动docker systemctl start docker # 重新启动docker systemctl restart docker # 重新加载unit配置文件 systemctl daemon-reload

    2023年11月7日
    55500

Leave a Reply

登录后才能评论