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

阅读之前

你应该:

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

常用元数据简介

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

图解

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

相关推荐

  • 自定义表达式函数

    由于表达式内的函数在前后端都可能执行,所以同一个表达式需要前后端同时定义 后端表达式自定义 package pro.shushi.pamirs.demo.core.fun; import org.apache.commons.lang3.StringUtils; import org.joda.time.DateTime; import pro.shushi.pamirs.meta.annotation.Fun; import pro.shushi.pamirs.meta.annotation.Function; import pro.shushi.pamirs.meta.common.constants.NamespaceConstants; import java.util.Date; import java.util.List; import static pro.shushi.pamirs.meta.enmu.FunctionCategoryEnum.TEXT; import static pro.shushi.pamirs.meta.enmu.FunctionCategoryEnum.TIME; import static pro.shushi.pamirs.meta.enmu.FunctionLanguageEnum.JAVA; import static pro.shushi.pamirs.meta.enmu.FunctionOpenEnum.LOCAL; import static pro.shushi.pamirs.meta.enmu.FunctionSceneEnum.EXPRESSION; /** * 自定义函数 */ @Fun(NamespaceConstants.expression) public class DemoCustomFunctions { @Function.Advanced( displayName = "逗号分隔字符串数组", language = JAVA, builtin = true, category = TEXT ) @Function.fun("MY_COMMA") @Function(name = "MY_COMMA", scene = {EXPRESSION}, openLevel = LOCAL, summary = "函数示例: MY_COMMA(list)\n函数说明: 将字符串数组转为逗号分隔的字符串" ) public String myComma(List<String> list) { return StringUtils.join(list, ","); } @Function.Advanced( displayName = "根据出生算年龄", language = JAVA, builtin = true, category = TIME ) @Function.fun("CALC_AGE") @Function(name = "CALC_AGE", scene = {EXPRESSION}, openLevel = LOCAL, summary = "函数示例: CALC_AGE(birthDate)\n函数说明: 根据出生算年龄" ) public Integer calcAge(Date birthDate) { if (birthDate == null) { return 0; } return new DateTime().getYear() – new DateTime(birthDate).getYear(); } } 前端表达式定义 定义后导入到main.ts里,导入@kunlun/dependencies的代码之后 import { Expression } from '@kunlun/dependencies'; import dayjs from 'dayjs'; Expression.getInstance().registerFunction('MY_COMMA', ['array'], (list: string[]) => { return (list || []) .map((value) => { return `'${value}'`; }) .join(','); }); Expression.getInstance().registerFunction('CALC_AGE', ['string'], (birthDate: string) => { if (birthDate == null) { return 0; } return Math.ceil(dayjs().year() – dayjs(birthDate,…

    2024年7月10日
    2.0K00
  • 东方通Web和Tomcat部署Oinone项目

    场景描述 在国产化和信创体系下,可能会要求使用东方通Web服务器(TongWeb)或者Tomcat等应用服务器部署项目;本文介绍使用TongWeb或者Tomcat部署Oinone项目时的方法。 你需要了解 了解Tomcat容器,TongWeb的操作基本和Tomcat类似; 项目打包成成war包和Jar的区别; Springboot项目打成war包 详细步骤参考:https://www.cnblogs.com/memoa/p/10250553.html TongWeb和Tomcat部署War包 TongWeb部署war包一般会有提供操作手册,这里不在说明; Tomcat部署war包可以参考网上的资料,这里不在说明; 本文仅说明部署Oinone打成的War包不同之处; Oinone项目War包部署 已知限制 Oinone项目在部署时,需要指定生命周期-Plifecycle=INSTALL等 而TongWeb和Tomcat无法在启动脚本中设置Program arguments 解法办法 通过yml文件的配置,可以配置等同于-Plifecycle=INSTALL的参数 pamirs: boot: init: true sync: true profile: AUTO install: AUTO upgrade: FORCE modules: 配置参考 配置参考 模块之启动指令 参数 名称 默认值 说明 -Plifecycle 生命周期部署指令 RELOAD 可选项:无/INSTALL/PACKAGE/RELOAD/DDL 安装(INSTALL) install为AUTO;upgrade为FORCE;profile为AUTO 打包(PACKAGE) install为AUTO;upgrade为FORCE;profile为PACKAGE 重启(RELOAD) install、upgrade、profile为READONLY 打印变更DDL(DDL) install为AUTO;upgrade为FORCE;profile为DDL

    2024年5月18日
    2.5K00
  • 无网络环境下 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日
    1.0K00
  • 后端初始化工程启动

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

    2023年11月3日
    1.8K00
  • 如何更新升级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.4K00

Leave a Reply

登录后才能评论