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

阅读之前

你应该:

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

常用元数据简介

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

图解

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

相关推荐

  • RocketMQ如何配置日志路径和日志自动清理规则

    RocketMQ的日志路径和日志自动清理规则可以通过以下方式进行配置: 配置日志路径 对于RocketMQ客户端: RocketMQ客户端日志默认存储在系统盘的特定位置,但你可以通过JVM启动参数来修改日志的输出路径。例如,在启动Java应用时,可以通过 -Dlogging.path 或 -Drocketmq.client.logRoot 参数指定日志根目录。例如: java -Drocketmq.client.logRoot=/path/to/your/log/directory -jar your_application.jar 对于RocketMQ服务端(Broker和NameServer): RocketMQ服务端的日志路径通常在 conf/logback_broker.xml(对于Broker)和 conf/logback_namesrv.xml(对于NameServer)配置文件中定义。你可以在这些XML配置文件中修改 <property name="LOG_HOME"> 的值来改变日志存储路径。 配置日志自动清理规则 RocketMQ服务端提供了日志滚动策略来自动清理旧日志,这通常在上述提到的 logback_broker.xml 和 logback_namesrv.xml 文件中通过Logback的RollingPolicy配置实现。例如,可以配置文件大小限制、保留文件数量等: <appender name="FILE" class="ch.qos.logback.core.rolling.RollingFileAppender"> <file>${LOG_HOME}/rocketmq.log</file> <rollingPolicy class="ch.qos.logback.core.rolling.TimeBasedRollingPolicy"> <!– 按天滚动日志文件 –> <fileNamePattern>${LOG_HOME}/archived/rocketmq.%d{yyyy-MM-dd}.%i.log</fileNamePattern> <!– 保留最多30天的日志 –> <maxHistory>30</maxHistory> <!– 单个日志文件最大大小,默认RocketMQ不直接支持配置此参数,但可通过Logback的SizeAndTimeBasedFNATP配置间接控制 –> <!–<timeBasedFileNamingAndTriggeringPolicy class="ch.qos.logback.core.rolling.SizeAndTimeBasedFNATP">–> <!–<maxFileSize>100MB</maxFileSize>–> <!–</timeBasedFileNamingAndTriggeringPolicy>–> </rollingPolicy> … </appender> 请注意,虽然RocketMQ客户端日志默认不直接支持配置单个日志文件大小,但你可以通过外部日志框架(如Logback或Log4j)的配置来间接影响日志文件的大小管理。 对于日志清理,RocketMQ本身对于消息存储的文件有自动清理机制,但针对日志文件的自动清理主要依赖于日志框架的配置,如上述Logback的配置示例所示。 确保在修改任何配置前备份原有的配置文件,并且理解修改可能对系统监控和故障排查造成的影响。

    2024年5月28日
    4.0K00
  • 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.7K00
  • Docker部署常见问题

    问题1:容器启动出现library initialization failed – unable to allocate file descriptor table – out of memory异常如何处理? 原因 不同操作系统安装Docker后,容器运行环境并不一致,需要对Docker运行参数进行调整。 解决方案 编辑/etc/systemd/system/docker.service文件, 有些系统该文件位置:/lib/systemd/system/docker.service 查看docker的systemd(docker.service)配置位置 systemctl status docker 查看docker的systemd配置位置 将下列参数进行修改 LimitNOFILE=65535 LimitNPROC=65535 LimitCORE=65535 执行以下脚本 systemctl daemon-reload systemctl restart docker 问题2:容器启动出现library initialization failed – unable to allocate file descriptor table – out of memorypanic: signal: aborted (core dumped)异常如何处理? 问题现象 1、 按照【问题1】的设置进行配置后,仍然不生效; 2、 尝试修改宿主机系统内核的ulimits,重启docker仍报错。修改docker.service(文件位置:/etc/systemd/system/docker.service文件, 有些系统该文件位置:/lib/systemd/system/docker.service) 解决方案 查看docker的systemd(docker.service)配置位置【问题1】中的办法 在ExecStart命令后加上创建容器的默认ulimit配置,如下,设置容器启动时的ulimit为65535:65535 –default-ulimit nofile=65535:65535 配置好后: ExecStart=/usr/bin/dockerd -H fd:// –containerd=/run/containerd/containerd.sock –default-ulimit nofile=65535:65535 执行以下脚本 systemctl daemon-reload systemctl restart docker 资料参考:https://blog.csdn.net/weixin_42241322/article/details/137122868 问题3:拉取设计器镜像报错 报错信息,拉取镜像harbor.oinone.top连不上。 docker login –username=schhsw_oinone harbor.oinone.top i Info → A Personal Access Token (PAT) can be used instead. To create a PAT, visit https://app.docker.com/settings Password: time="2025-02-27T11:24:58+08:00" level=info msg="Error logging in to endpoint, trying next endpoint" error="Get \"https://harbor.oinone.top/v2/\": dial tcp 0.0.0.0:443: connect: connection refused" Get "https://harbor.oinone.top/v2/": dial tcp 0.0.0.0:443: connect: connection refused kfpt@kfpt-virtual-machine:~$ sudo -i root@kfpt-virtual-machine:~# docker login –username=schhsw_oinone harbor.oinone.top i Info → A Personal Access Token (PAT) can be used instead. To create a PAT, visit https://app.docker.com/settings Password: Error response from daemon: Get "https://harbor.oinone.top/v2/": dial tcp 0.0.0.0:443: connect: connection refused 排查过程: 排除到后面发现原因是DNS配置的问题,换了一个阿里云的IP就可以了

    2025年3月13日
    1.3K00
  • 后端初始化工程启动

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

    2023年11月3日
    1.7K00
  • 如何添加数据可视化运行时依赖

    前端 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.4K00

Leave a Reply

登录后才能评论