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

阅读之前

你应该:

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

常用元数据简介

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

图解

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

相关推荐

  • 无代码docker启动说明

    1. 安装docker 1.1 Linux内核系统 1.1.1 检查防火墙(以CentOS7为例) 查看防火墙是否开启 systemctl status firewalld 如防火墙处于开启状态,有2种处理方式,选择其中一种,开发环境如内网环境建议选择处理方案1 处理方案1:停止防火墙 systemctl stop firewalld 处理方案2:开放docker镜像内置中间件透出的端口 88:web访问端口 8099:后端Java服务端口 19876:rocketmq的namesrv端口: 6378:缓存redis的端口 3307:数据库mysql的端口 2182:zookeeper的端口 20880:dubbo的通信端口 15555:预留Java的debug端口 10991:rocketmq的broker端口 查看防火墙已经开放的端口 firewall-cmd –list-ports # 防火墙新增开放端口示例: firewall-cmd –permanent –zone=public –add-port=88/tcp #新增以后生效需要重新加载防火墙 systemctl reload firewalld #查看端口是否开放成功 firewall-cmd –list-ports 也可以从外部使用telnet命令检查端口是否开放成功,如telnet 192.168.0.121 3307 1.1.2 官方安装地址:https://docs.docker.com/engine/install/centos/ #删除原有版本 yum remove docker \ docker-client \ docker-client-latest \ docker-common \ docker-latest \ docker-latest-logrotate \ docker-logrotate \ docker-engine yum install -y yum-utils yum-config-manager –add-repo https://download.docker.com/linux/centos/docker-ce.repo 如果docker这个源异常可以用阿里云的源 #yum-config-manager –add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo yum install docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin #启动docker systemctl start docker #查看是否安装成功 docker -v 1.1.3 可使用一键安装脚本 wget https://pamirs.oss-cn-hangzhou.aliyuncs.com/docker/quick-install.sh sh quick-install.sh 1.2 无公网环境Linux系统 需要根据指定的版本以及内核架构来生成对应docker以及镜像包 1.3 window环境 https://docs.docker.com/desktop/install/windows-install/ 2. 解压提供的部署.zip 部署.zip包含: settings-3.6.3.xml:拉取平台jar的maven仓库settings,对应maven版本3.6.x settings-3.8.x.xml:拉取平台jar的maven仓库settings,对应maven版本3.8.x pamirs-demo:后端示例工程 oinone-op-ds-all-full:包含所有中间件及前后端工程,用于启动docker脚本 oinone-op-ds-all-mini:仅包含前后端工程,用于启动docker脚本 license:平台证书 docker和mvn账号信息.md 3. 对应版本的docker镜像拉取 镜像地址 镜像概述 harbor.oinone.top/oinone/designer:4.8.2.4-allinone-full 包含所有中间件及前后端工程 harbor.oinone.top/oinone/designer:4.8.2.4-allinone-mini 仅包含前后端工程 👆🏻上面镜像地址中的4.7.9是示例版本号,具体安装时根据数式提供的为准。 #注意:docker镜像拉取的账号密码在部署.zip里面 docker login –username=用户名 harbor.oinone.top docker pull harbor.oinone.top/oinone/designer:xxx 4. 修改startup.sh中的路径 4.1 linux环境修改参数 在文件中找到如下configDir=/opt/docker/oinone-op-ds-all-fullversion=4.8.2.4IP=192.168.0.121 修改configDir的路径(下载oinone-op-ds-xx.zip解压后的路径) 修改对应的镜像版本号 修改对应的IP为docker宿主机IP 4.2 window环境修改参数 在文件中找到如下set configDir=/d/shushi/docker/oinone-op-ds-all-fullset version=4.8.2.4set IP=192.168.0.121 修改configDir的路径((下载oinone-op-ds-xx.zip解压后的路径) 修改对应的镜像版本号 修改对应的IP为docker宿主机IP 5. (用oinone-op-ds-all-full版本可跳过)修改conf/application.yml 对应中间件的配置:指定对应IP和端口或密码,把其中192.168.0.121改为宿主机IP zookeeper mysql rocket-mq redis 阿里云oss配置 6. 修改mq/broker.conf(**注意:使用allinone-full包含中间件版本) 修改其中brokerIP1的IP从192.168.0.121改成宿主机IP brokerClusterName = DefaultCluster namesrvAddr=127.0.0.1:9876 brokerIP1=192.168.0.121 brokerName = broker-a brokerId = 0 deleteWhen = 04 fileReservedTime = 48 brokerRole = ASYNC_MASTER flushDiskType = ASYNC_FLUSH autoCreateTopicEnable=true…

    2023年11月6日
    1.0K00
  • 自定义表达式函数

    由于表达式内的函数在前后端都可能执行,所以同一个表达式需要前后端同时定义 后端表达式自定义 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日
    1.1K00
  • 数据源配置使用注意事项

    启动工程的application.yml内可以通过ds-map为每个模块配置数据源,未在ds-map指定的会根据default-ds-key的值设置默认的数据源, 1. 共一套base库的所有启动工程,相同模块的dsKey名称一定要是一样的 2. 如果有需求2个启动工程中对同一个模块要区分库,如:2个启动工程的“用户user模块”读不同的库,那么需要将配置中“用户user模块”的dsKey配置一致,然后在各自启动工程配置中的数据库链接地址填不一样

    2024年7月25日
    1.3K00
  • 如何排查启动依赖错误的问题

    场景 启动的时候可能会出现以下错误提示 启动模块中包含jar包或者数据库中不存在的模块 启动模块中包含不存在的模块 启动模块互斥模块中包含已安装模块 排查项 确保启动工程的application.yml中的启动模块pamirs.boot.modules配置项内的模块在pom.xml内依赖了对应模块的jar包 确保出问题的模块的定义文件内的包扫描前缀packagePrefix方法内的路径定义正确,该路径可以是多个,但是一定要包含模块下所有子工程的路径,包括但不限于api子工程、core工程等,另外该路径也不能和其他模块的配置有重复、交集、包含关系(例如:a模块是 aa.bb.cc, b模块是aa.bb,这样b模块的路径就包含了a模块的) 启动类里spring自带的@ComponentScan.basePackages注解项需要包含所有依赖模块的路径 无代码应用创建的时候,配置了依赖模块。但这个依赖没有被本地安装,该模块就会出问题,要么删除该依赖,要么在代码里添加该依赖。

    2024年7月18日
    92100
  • 平台配置日志输出和推送到APM与LogStash

    场景描述 目前设计器镜像启动后日志文件为out.log,是启动脚本中定向输出了(>>)out.log文件。实际项目可能: 日志输出到特定目录的特定文件名中 指定以日志保留策略(单个文件大小和文件保留个数) 日志输出到APM工具中(如skywalking) 日志推送到LogStash 日志自定义输出 不定向输出,采用自己配置的方式,与标准的SpringBoot工程配置日志一样。两种方式(都是Spring提供的方式): 方式一 bootstrap.yml 里面可以按profiles指定logback的配置文件,具体文件名和文件输入在logback里面进行配置,跟通用的logback配置一致. 例如: logging: config: classpath:logback-pre.xml 方式二 resources的根目录,直接配置 logback-spring.xml, 启动会自动加载。 日志自定义场景 配置日志推送到LogStash <!–配置日志推送到LogStash–> <contextListener class="pro.shushi.pamirs.demo.core.config.DemoLogbackFiledConfig"/> <appender name="LogStash" class="net.logstash.logback.appender.LogstashTcpSocketAppender"> <destination>127.0.0.1:4560</destination> <!– encoder必须配置,有多种可选 –> <encoder charset="UTF-8" class="net.logstash.logback.encoder.LogstashEncoder"> <!– SkyWalking插件, log加tid–> <provider class="org.apache.skywalking.apm.toolkit.log.logback.v1.x.logstash.TraceIdJsonProvider" /> <!–在生成的json中会加这些字段–> <customFields> {"app.name":"pamirs-demo", "app.type":"Microservice", "platform":"pamirs", "env":"dev"} </customFields> <timeZone>Asia/Shanghai</timeZone> <writeVersionAsInteger>true</writeVersionAsInteger> <providers> <pattern> <pattern> <!–动态的变量–> { "ip": "%{ip}", "server.name": "%{server.name}", "logger_name": "%logger" } </pattern> </pattern> </providers> </encoder> </appender> skywalking的日志rpc上传 <!– skywalking的日志rpc上传 –> <appender name="SkyWalkingLogs" class="org.apache.skywalking.apm.toolkit.log.logback.v1.x.log.GRPCLogClientAppender"> <encoder class="ch.qos.logback.core.encoder.LayoutWrappingEncoder"> <layout class="org.apache.skywalking.apm.toolkit.log.logback.v1.x.mdc.TraceIdMDCPatternLogbackLayout"> <Pattern>${CONSOLE_LOG_PATTERN}</Pattern> </layout> </encoder> </appender> 完整的代码示例 Logback自定义字段 package pro.shushi.pamirs.demo.core.config; import ch.qos.logback.classic.Level; import ch.qos.logback.classic.Logger; import ch.qos.logback.classic.LoggerContext; import ch.qos.logback.classic.spi.LoggerContextListener; import ch.qos.logback.core.Context; import ch.qos.logback.core.spi.ContextAwareBase; import ch.qos.logback.core.spi.LifeCycle; import java.net.InetAddress; import java.net.UnknownHostException; /** * Logback自定义字段 * * @author wx@shushi.pro * @date 2024/4/17 */ public class DemoLogbackFiledConfig extends ContextAwareBase implements LoggerContextListener, LifeCycle { private boolean started = false; @Override public boolean isResetResistant() { return false; } @Override public void onStart(LoggerContext loggerContext) { } @Override public void onReset(LoggerContext loggerContext) { } @Override public void onStop(LoggerContext loggerContext) { } @Override public void onLevelChange(Logger logger, Level level) { } @Override public void start() { if (started) { return; } Context context = getContext();…

    2024年5月18日
    1.0K00

Leave a Reply

登录后才能评论