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

阅读之前

你应该:

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

常用元数据简介

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

图解

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低代码应用平台体验

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

相关推荐

  • 如何解决界面设计器保存提示:元数据不存在或已删除

    现象 界面设计器设计页面的时候,从左侧边栏模型下拖入了一个字段到页面,保存的时候提示:元数据不存在或已删除 原因 共base库不共元数据缓存redis导致的,不共redis的情况下,每次本地新增或修改元数据(如:字段、方法)启动后会同步本地redis,再去线上启动的时候,由于元数据已经在本地写入到了base库,所以该次启动不会触发redis差量更新 解决方案 通过将boot工程application.yml以下配置,让redis全量刷新元数据缓存 pamirs: distribution: session: allMetaRefresh: true 扩展 这个方法只能解决新增或修改元数据,如果出现了删除元数据的话,改为true也不行,清空或者手动删除问题redis的key都可以

    2024年7月21日
    1.1K00
  • 如何添加数据可视化运行时依赖

    前端 package.json中新增依赖 @kunlun/data-designer-open-pc,版本跟@kunlun/dependencies的填一样 src/main.ts内导入依赖 import 'reflect-metadata'; import { VueOioProvider } from '@kunlun/dependencies'; // START 导入代码放在导入@kunlun/dependencies之后 import '@kunlun/data-designer-open-pc'; // END 导入代码放在VueOioProvider()方法执行前 VueOioProvider({ // TODO }); 后端 父pom新增依赖 <properties> <pamirs.data.visualization.version>4.7.8</pamirs.data.visualization.version> </properties> <dependencyManagement> <dependencies> <dependency> <groupId>pro.shushi.pamirs.data.visualization</groupId> <artifactId>pamirs-data-visualization</artifactId> <version>${pamirs.data.visualization.version}</version> <type>pom</type> <scope>import</scope> </dependency> </dependencies> </dependencyManagement> 2.boot启动工程的pom新增依赖 <dependency> <groupId>pro.shushi.pamirs.data.visualization</groupId> <artifactId>pamirs-data-visualization-core</artifactId> </dependency> 3.application.yml配置新增依赖 pamirs: boot: modules: – datavi 注意:datavi 这个模块在业务工程和设计器指定数据源要保持一致。

    2024年5月15日
    1.2K00
  • 【OceanBase】后端部署使用 OceanBase 数据库(海扬/OB)

    OceanBase 数据库配置 驱动配置 Maven配置(4.2.5.3版本可用) <oceanbase.version>2.4.14</oceanbase.version> <dependency> <groupId>com.oceanbase</groupId> <artifactId>oceanbase-client</artifactId> <version>${oceanbase.version}</version> </dependency> PS: oceanbase 驱动必须使用 2.4.5 版本或以上,低于此版本的驱动无法使用自增ID功能,无法正常启动。点击查看官方JDBC版本发布记录 JDBC连接配置 OceanBase – Oracle 版 pamirs: datasource: base: type: com.alibaba.druid.pool.DruidDataSource driverClassName: com.alipay.oceanbase.jdbc.Driver url: jdbc:oceanbase://10.xxx.xxx.xxx:1001/BASE?useServerPrepStmts=true&useOraclePrepareExecute=true&defaultFetchSize=4096 username: xxxxxx password: xxxxxx validConnectionCheckerClassName: com.alibaba.druid.pool.vendor.OracleValidConnectionChecker validationQuery: SELECT 1 FROM DUAL OceanBase – MySQL 版 pamirs: datasource: base: type: com.alibaba.druid.pool.DruidDataSource driverClassName: com.alipay.oceanbase.jdbc.Driver url: jdbc:oceanbase://10.xxx.xxx.xxx:1001/base username: xxxxxx password: xxxxxx 连接 URL 配置 点击查看官方JDBC连接配置说明 URL 格式(OceanBase – Oracle 版) jdbc:oceanbase://${host}:${port}/${database}?useServerPrepStmts=true&useOraclePrepareExecute=true&defaultFetchSize=4096 在jdbc连接配置时,useServerPrepStmts=true&useOraclePrepareExecute=true 必须配置,否则自增主键无法正常使用。 defaultFetchSize=4096 意味着在使用服务端预处理时,游标每次获取的结果集行数,驱动默认值为 10,在进行大量数据获取时会出现卡顿的现象,因此推荐使用 4096 作为其结果集大小。过大可能会导致 OOM,过小可能还是会出现卡顿,该值需要按实际情况进行配置。 其他连接参数如需配置,可自行查阅相关资料进行调优。 方言配置(OceanBase – Oracle 版) PS:OceanBase – MySQL 版无需配置方言,只需修改数据库连接即可正常使用。 pamirs方言配置 pamirs: dialect: ds: base: type: OceanBase version: 4.2.5.3 major-version: oracle-4.2 pamirs: type: OceanBase version: 4.2.5.3 major-version: oracle-4.2 plus: configuration: jdbc-type-for-null: "NULL" using-model-as-property: true using-statement-handler-dialect: true mapper: batch: collectionCommit default-batch-config: read: 500 write: 100 数据库版本 type version majorVersion 4.2.5.3 OceanBase 4.2.5.3 oracle-4.2 PS:由于方言开发环境为4.2.5.3版本,其他类似版本(4.x)原则上不会出现太大差异,如出现其他版本无法正常支持的,可在文档下方留言。 schedule方言配置 pamirs: event: enabled: true schedule: enabled: true dialect: type: Oracle version: 12.2 major-version: 12c type version majorVersion Oracle 12.2 12c PS:由于 schedule 的方言与 Oracle 数据库并无明显差异,OceanBase 数据库可以直接使用 Oracle 数据库方言。 其他配置(OceanBase – Oracle 版) 逻辑删除的值配置 pamirs: mapper: global: table-info: logic-delete-value: (CAST(SYSTIMESTAMP AS DATE) – TO_DATE('1970-01-01 08:00:00', 'YYYY-MM-DD HH24:MI:SS')) * 8640000000000

    2025年7月21日
    74800
  • 如何更新升级docker中的设计器版本

    升级docker中的设计器版本 1.升级docker 1.1 修改结构包中startup.sh中对应的新版本号 结构包文件夹以及文件说明 – oinone-op-ds-all-full – config:Java启动的application.yml以及证书等 – lib:额外启动jar包 – logs:Java日志 – mq:mq的中间件broker.conf – nginx:nginx的配置文件 – run:可配置docker中启动的中间件 – startup.cmd:window启动脚本 – startup.sh:linux启动脚本 1.2 需要备份原oinone-op-ds-all-full中的mysql数据库 如果原先再安装的版本为full包含中间件的版本,删除原docker中的容器会清除所有的容器,需要备份数据库的数据 可使用navicat导出数据库 1.3 停止容器,并删除容器 docker ps -a #查询到对应容器的id 如 283747263 docker stop 283747263 docker rm 283747263 1.4 更新docker镜像版本 #启动脚本 sh startup.sh tail -200f logs/2024-01-26.0.log 1.5 启动新版本docker #启动脚本 sh startup.sh #查看日志 tail -200f logs/2024-01-26.0.log 2.业务项目工程中的平台jar版本 2.1 更新业务工程的主pom.xml中平台版本包 根据提供的版本更新日志,更新对应的平台jar包 2.2 更新maven,重启业务工程

    2024年2月28日
    1.1K00
  • Oinone离线部署设计器JAR包

    概述 Oinone平台为合作伙伴提供了多种部署方式,这篇文章将介绍如何在私有云环境部署Oinone平台JAR包。 本文以5.2.6版本为例进行介绍。 部署环境要求 包含全部中间件及设计器服务的环境要求 CPU:8 vCPU 内存(RAM):16G以上 硬盘(HDD/SSD):60G以上 仅设计器服务的环境要求 CPU:8 vCPU 内存(RAM):8G以上 硬盘(HDD/SSD):40G以上 部署准备 在部署环境创建部署目录 mkdir -p /home/admin/oinone-designer PS:为方便管理,所有Oinone部署所需文件都应该在该目录下存放。 服务器需要安装的中间件 JDK:jdk_1.8_221版本以上 下载地址 MySQL:8.0.26版本以上 下载地址 Redis:5.0.2版本以上 下载地址 安装教程 Zookeeper:3.5.8版本以上 下载地址 安装教程 Nginx:任意版本(推荐使用源码编译安装方式,并开启rewrite、https等功能模块) Linux安装教程 下载地址 使用Docker启动所有中间件 点击下载一键部署所有中间件套件包 middleware-kits.zip 部署清单 下面列举了文章中在本地环境操作结束后的全部文件: 设计器JAR包:pamirs-designer-boot-v5.2-5.2.6.jar 离线部署结构包:oinone-designer-jar-offline.zip 第三方数据库驱动包(非MySQL数据库必须) PS:如需一次性拷贝所有部署文件到部署环境,可以将文档步骤在本地环境执行后,一次性将所有文件进行传输。 在本地环境准备部署文件 下载离线部署结构包 oinone-designer-jar-offline.zip 下载部署JAR包 5.2.6版本发布日志 查看更多版本 找到独立部署所有设计器JAR标题,下面有对应的JAR包提供下载。 例如:https://oinone-jar.oss-cn-zhangjiakou.aliyuncs.com/install/oinone-designer/pamirs-designer-boot-v5.2-5.2.6.jar 后端服务部署 将部署JAR包移动到backend目录下,并重命名为oinone-designer.jar mv pamirs-designer-boot-v5.2-5.2.6.jar backend/oinone-designer.jar PS:该名称为startup.sh脚本的默认值,可根据实际情况自行修改 将Pamirs许可证移动到backend/config目录下,并重命名为license.lic mv oinone-demo_1730163770607.lic backend/config/license.lic 加载非MySQL数据库驱动(按需) 将驱动jar文件移动到backend/lib目录下即可。 以KDB8数据库驱动kingbase8-8.6.0.jar为例 mv kingbase8-8.6.0.jar backend/lib/ PS:backend/lib目录为非设计器内置包的外部加载目录(外部库),可以添加任何jar包集成到设计器中。 修改backend/startup.sh脚本 IP:修改为可被外部访问的IP地址 DB_BASE_:base库相关数据库连接配置 DB_PAMIRS_:pamirs库相关数据库连接配置 REDIS_:Redis相关配置 MQ_NAME_SERVER:RocketMQ的name-server连接地址 ZOOKEEPER_:Zookeeper相关配置 PS:若需要配置方言或其他参数,可直接修改backend/config/application.yml配置文件,变量仅用于简单配置场景 执行startup.sh脚本启动 sh startup.sh 执行完成后会打印三个路径 后端路径:backend root path: /path/to/backend 前端路径:frontend root path: /path/to/frontend Nginx配置路径:nginx services path: /path/to/nginx Nginx配置 在本地nginx服务中找到nginx.conf,并添加Nginx配置路径为加载目录 http { … include /path/to/nginx/*.conf; } 修改结构包中的default.conf第7行root配置为前端路径到dist目录下 server { … root /path/to/frontend/dist; } 修改结构包中的oss.conf第30行alias配置为前端路径到static目录下 server { … location /static { … alias /path/to/frontend/static; } } 访问服务 使用http://127.0.0.1:9090访问服务

    2024年11月1日
    1.6K00

Leave a Reply

登录后才能评论