高级视图

史, 昂 • 2024年6月20日 am9:49 • Oinone 7天入门到精通 • 阅读 1005

Oinone社区作者：史, 昂原创文章，如若转载，请注明出处：https://doc.oinone.top/oio4/9404.html

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

Oinone 7天从入门到精通

史, 昂数式管理员

0 0

页面

上一篇 2024年6月20日 am9:49

页面设计

下一篇 2024年6月20日 am9:49

Oinone 7天入门到精通

3.3.9 字段类型之关系与引用

有关系与引用类型才让oinone具备完整的描述模型与模型间关系的能力在PetShop以及其代理模型中已经上用到了O2M、M2O字段，分别如petItems(PetItem)和create(PamrisUser)字段，但是没有过多的讲解。本文重点举例RELATED、M2M、O2M，至于M2O留给大家自行尝试。一、引用类型(举例) 业务类型 Java类型数据库类型规则说明 RELATED 基本类型或关系类型不存储或varchar、text 引用字段【数据库规则】：点表达式最后一级对应的字段类型；数据库字段值默认为Java字段的序列化值，默认使用JSON序列化【前端交互规则】：点表达式最后一级对应的字段控件类型表3-3-9-1 字段引用类型 Step1 修改PetShopProxy类为PetShopProxy类新增一个引用字段relatedShopName，并加上@Field.Related("shopName")注解为PetShopProxy类新增一个引用字段createrId，并加上@Field.Related({"creater","id"})注解 package pro.shushi.pamirs.demo.api.proxy; import pro.shushi.pamirs.demo.api.model.PetShop; import pro.shushi.pamirs.meta.annotation.Field; import pro.shushi.pamirs.meta.annotation.Model; import pro.shushi.pamirs.meta.enmu.ModelTypeEnum; import pro.shushi.pamirs.user.api.model.PamirsUser; @Model.model(PetShopProxy.MODEL_MODEL) @Model.Advanced(type = ModelTypeEnum.PROXY) @Model(displayName = "宠物店铺代理模型",summary="宠物店铺代理模型") public class PetShopProxy extends PetShop { public static final String MODEL_MODEL="demo.PetShopProxy"; @Field.many2one @Field(displayName = "创建者",required = true) @Field.Relation(relationFields = {"createUid"},referenceFields = {"id"}) private PamirsUser creater; @Field.Related("shopName") @Field(displayName = "引用字段shopName") private String relatedShopName; @Field.Related({"creater","id"}) @Field(displayName = "引用创建者Id") private String createrId; } 图3-3-9-1 修改PetShopProxy类 Step2 重启系统查看效果我们发现商店管理-列表页面多出了两个有值字段：引用字段shopName和引用创建者Id 图3-3-9-2 商店管理-列表页面新增两个有值字段二、关系类型业务类型 Java类型数据库类型规则说明 O2O 模型/DataMap 不存储或varchar、text 一对一关系 M2O 模型/DataMap 不存储或varchar、text 多对一关系 O2M List<模型/DataMap> 不存储或varchar、text 一对多关系 M2M List<模型/DataMap> 不存储或varchar、text 多对多关系表3-3-9-2 字段关系类型多值字段或者关系字段需要存储，默认使用JSON格式序列化。多值字段数据库字段类型默认为varchar(1024)；关系字段数据库字段类型默认为text。关系字段关联关系用于描述模型间的关联方式：多对一关系，主要用于明确从属关系一对多关系，主要用于明确从属关系多对多关系，主要用于弱依赖关系的处理，提供中间模型进行关联关系的操作一对一关系，主要用于多表继承和行内合并数据图3-3-9-3 字段关联关系名词解释关联关系比较重要的名词解释如下：关联关系：使用relation表示，模型间的关联方式的一种描述，包括关联关系类型、关联关系双边的模型和关联关系的读写关联关系字段：业务类型ttype为O2O、O2M、M2O或M2M的字段关联模型：使用references表示，自身模型关联的模型关联字段：使用referenceFields表示，关联模型的字段，表示关联模型的哪些字段与自身模型的哪些字段建立关系关系模型：自身模型关系字段：使用relationFields表示，自身模型的字段，表示自身模型的哪些字段与关联模型的哪些字段建立关系中间模型，使用through表示，只有多对多存在中间模型，模型的relationship=true 举例M2M关系类型多对多关系，主要用于弱依赖关系的处理，提供中间模型进行关联关系的操作。这也是在业务开发中很常见用于描述单据间关系，该例子会举例两种方式描述多对多关系中间表，一是中间表没有在系统显示定义模型，二种是中间表显示定义模型。第一种往往仅是维护多对多关系，第二种往往用于多对多关系中间表自身也需要管理有业务含义，中间表模型还经常额外增加其他字段。一是中间表没有在系统显示定义模型：如果出现跨模块的场景，在分布式环境下两个模块独立启动，有可能会导致系统关系表被删除的情况发生，因为没有显示定义中间表模型，中间表的模型所属模块会根据两边模型的名称计算，如果刚好被计算到非关系字段所属模型的模块。那么单独启动非关系字段所属模型的模块，则会导致删除关系表。为什么不直接把中间表的模型所属模块设置为关系字段所属模型的模块？因为如果这样做，当模型两边都定义了多对多关系字段则会导致M2M关系表的所属模块出现混乱。所以这里建议大家都选用：第二种中间表显示定义模型，不论扩展性还是适应性都会好很多。请用：through=XXXRelationModel.MODEL_MODEL 或者 throughClass=XXXRelationModel.class Step1 新建宠物达人模型，并分别为宠物商品和宠物商店增加到宠物达人模型的字段新建宠物达人模型PetTalent package pro.shushi.pamirs.demo.api.model; import pro.shushi.pamirs.meta.annotation.Field; import pro.shushi.pamirs.meta.annotation.Model; @Model.model(PetTalent.MODEL_MODEL) @Model(displayName = "宠物达人",summary="宠物达人",labelFields ={"name"}) public class PetTalent extends AbstractDemoIdModel{ public static final String MODEL_MODEL="demo.PetTalent"; @Field(displayName = "达人") private String name; } 图3-3-9-4 新建宠物达人模型PetTalent 修改宠物商品模型，新增many2many字段petTalents，类型为List ，并加上注解@Field.many2many(relationFields = {"petItemId"},referenceFields = {"petTalentId"},through = PetItemRelPetTalent.MODEL_MODEL)，through为指定关联中间表。 package pro.shushi.pamirs.demo.api.model; import pro.shushi.pamirs.demo.api.tmodel.PetItemDetail; import pro.shushi.pamirs.meta.annotation.Field; import…

史, 昂
2024年5月23日
1.3K000
Oinone 7天入门到精通

4.2.4 框架之网络请求-HttpClient

oinone提供统一的网络请求底座，基于graphql二次封装一、初始化 import { HttpClient } from '@kunlun/dependencies'; const http = HttpClient.getInstance(); http.setMiddleware() // 必须设置，请求回调。具体查看文章https://shushi.yuque.com/yqitvf/oinone/vwo80g http.setBaseURL() // 必须设置，后端请求的路径图4-2-4-1 初始化代码示例二、HttpClient详细介绍获取实例 import { HttpClient } from '@kunlun/dependencies'; const http = HttpClient.getInstance(); 图4-2-4-2 获取实例接口地址 import { HttpClient } from '@kunlun/dependencies'; const http = HttpClient.getInstance(); http.setBaseURL('接口地址'); http.getBaseURL(); // 获取接口地址图4-2-4-3 接口地址请求头 import { HttpClient } from '@kunlun/dependencies'; const http = HttpClient.getInstance(); http.setHeader({key: value}); 图4-2-4-4 请求头 variables import { HttpClient } from '@kunlun/dependencies'; const http = HttpClient.getInstance(); http.setExtendVariables((moduleName: string) => { return customFuntion(); }); 图4-2-4-5 variables 回调 import { HttpClient } from '@kunlun/dependencies'; const http = HttpClient.getInstance(); http.setMiddleware([middleware]); 图4-2-4-6 回调业务使用-query private http = HttpClient.getInstance(); private getTestQuery = async () => { const query = `gql str`; const result = await this.http.query('module name', query); console.log(result) return result.data[`xx`]['xx']; // 返回的接口，打印出result对象层次返回 }; 图4-2-4-7 业务使用-query 业务使用-mutate private http = HttpClient.getInstance(); private getTestMutate = async () => { const mutation = `gql str`; const result = await this.http.mutate('module name', mutation); console.log(result) return result.data[`xx`]['xx']; // 返回的接口，打印出result对象层次返回 }; 图4-2-4-8 业务使用-mutate 三、如何使用HttpClient 初始化在项目目录src/main.ts下初始化httpClient 初始化必须要做的事: 设置服务接口链接设置接口请求回调业务实战前文说到自定义新增宠物表单，让我们在这个基础上加入我们的httpClient; 第一步新增service.ts 图4-2-4-8 新增service.ts service.ts import { HttpClient }…

史, 昂
2024年5月23日
1.1K000
Oinone 7天入门到精通

3.5.6.1 字段的配置

字段组件类型 ttype可以配置哪些widget？本文这里把oinone平台默认支持的所有widget都进行了罗列，方便大家查阅。字段组件匹配规则字段组件没有严格的按组件名(widget)、字段类型(ttype)、视图组件类型(viewType)限定，而是一个匹配规则按widget 最优先匹配按最大匹配原则 ttype、viewType。每个属性权重一分按后注册优先原则通用属性属性属性描述属性name 默认值类型标题字段的标题名称 label – string 占位提示一个字段的描述信息，常用于说明当前字典的范围、注意事项等 placeholder – string 描述说明组件描述信息 hint – string 数据校验与表单其他数据联动校验 validator – 表达式数据校验不通过提示数据校验不通过提示 validatorMessage 校验失败 string 只读字段的状态，可见，不可编辑 readonly false boolean或者表达式隐藏字段的状态，不，不可编辑 invisible false boolean或者表达式必填字段是否必填 required false boolean或者表达式禁用字段是否禁用 disabled false boolean或者表达式宽度属性在页面中的宽度 colSpan 01/02 标题排列方式标题排列方式: 水平 , 横向 layout vertical vertical | horizontal 默认值默认值,多值逗号分割 defaultValue – 根据不同ttype有不同的默认值类型表3-5-6-1 字段通用属性字段组件大全 widget为"-"表明不需要指定，是该ttype默认widget 组件名称 widget 对应ttype 属性属性描述属性name 默认值类型单行文本 – STRING 通用属性文本类型密码:password; 文本: text type text string 最小长度输入框填写数据时最少输入的长度值 minLength – number 最大长度输入框填写数据时最多输入的长度值 maxLength – number 输入格式单行文本组件特有的属性，通过规则校验内容，提供一些常用的，也支持自定义校验正则 pattern – 正则表达式输入格式不通过输入格式不通过提示语 tips 校验失败 string 显示计数器设置输入框是否显示字数计数器 showCount FALSE boolean 显示清除按钮设置输入框是否有一键清除的按钮及功能 allowClear TRUE TRUE 支持前缀开启前缀 showPrefix FALSE boolean 支持后缀开启后缀 showSuffix FALSE boolean 前缀类型 ICON: 图标; TEXT:文本 prefixType – string 后缀类型 ICON: 图标; TEXT:文本 suffixType – string 前缀内容文本内容或者图标引用名 prefix – string 后缀内容文本内容或者图标引用名 suffix – string 前缀存储前缀存储, 仅前缀类型为文本可用 prefixStore – boolean 后缀存储后缀存储, 仅后缀类型为文本可用 suffixStore – boolean 多行文本 -…

史, 昂
2024年5月23日
1.1K000
Oinone 7天入门到精通

3.6 问题排查工具

当前端发起对应用的访问时，如果出现错误，那么我们可以通过以下方式进行简易排查，如果排查不出来，则也可以把排查工具给出的信息发送给Oinone官方售后进行进一步分析。本文将通过模拟异常信息，来介绍排查工具，提供了哪些辅助信息帮我们来快速定位问题。排查工具基础介绍通过前端页面的 /debug 路由路径访问调试工具的页面，假设我们的前端页面访问地址为http://localhost:6800，那么我们的排查工具请求路径就是 http://localhost:6800/debug排查工具可以帮我们排查前端页面元数据异常和后端接口的异常排查前端页面元数据将问题页面浏览器地址栏内 page 后的部分复制到调试工具的 debug 路由后重新发起请求，如图可以看到调试工具展示的信息，可以根据这些信息排查问题。排查后端接口后端接口出现问题后，打开(在原页面）浏览器的调试工具，切换到“网络”的标签页，在左侧的历史请求列表中找到需要调试的请求，右键会弹出菜单，点击菜单中的 “复制”，再次展开该菜单，点击二级菜单中的“以 fetch 格式复制”，这样可以复制到调试所需要的信息 2.复制调试信息到“接口调试”标签页内的文本框内，点击“发起请求”按钮获取调试结果我们可以看到页面展示了该接口的各种调试信息，我们可以据此排查问题。场景化的排查思路业务代码中存在代码bug 报错后发起调试请求，我们可以看到，调试工具直接给出了异常抛出的具体代码所在位置，此时再切换到“全部堆栈”下，可以看到是业务类的233行导致的空指针异常，查看代码后分析可得是data.getName().eqauls方法在调用前未做条件判断补全该判断后代码可以正常执行业务代码中没有直接的错误，异常在平台代码中抛出报错后发起调试请求可以看到异常不在业务代码内再切换到“全部堆栈”，可以看到具体异常信息，提示core_demo_item表出现了重复的主键，该表是DemoItem模型的我们还可以切换到“sql调试”的标签页，可以看到出错的具体sql语句经过分析可以得知是240行的data.create()�重复创建数据导致的。三、排查工具无法定位怎么办当我们通过排查工具还是没有定位到问题的时候，可以通过调试页面的“下载全部调试数据”和“下载调试数据”按钮将调试信息的数据发送给官方售后人员帮助我们定位排查问题。点击页面最顶部的“下载全部调试数据”按钮，可以下载页面调试数据和接口调试数据点击“调试接口”标签页内的“下载调试数据”按钮，可以下载接口调试数据四、排查工具细节

史, 昂
2024年5月23日
1.2K000
Oinone 7天入门到精通

3.1.2 环境准备（windows版）

一、后端基础环境准备安装JDK1.8 ，高于1.8_221以上（下载地址见书籍【附件一】）打开Windows环境变量配置页此电脑 => 右键属性 => 系统高级设置 => 环境变量配置环境变量在用户环境变量中新建变量为JAVA_HOME的项,值为JDK安装之后的路径图3-1-27 新建环境变量JAVA_HOM 编辑变量为Path的项添加一个值%JAVA_HOME%\bin 图3-1-28 添加一个环境变量值%JAVA_HOME%\\bin PowerShell或者CMD中验证，输出类似信息为安装配置成功图3-1-29 验证JAVA是否安装成功安装 Apache Maven 3.8+ （下载地址见书籍【附件一】）删除Maven安装目录下的conf/settings.xml 配置mvn的settings，下载附件settings-open.xml，并重命名为settings.xml,建议直接放在【C:\Users\你的用户名.m2】下面。下载地址见oinone开源社区群公告，也可以联系oinone合作伙伴或服务人员配置环境变量在用户环境变量中新建变量为M2_HOME的项,值为Maven安装路径图3-1-30 新建变量M2_HOME 编辑变量为Path的项添加一个值%M2_HOME%\bin 图3-1-31 添加一个值%M2_HOME%\\bin 验证图3-1-32 验证Maven是否安装成功安装 Jetbrains IDEA （下载地址见书籍【附件一】）插件安装下载地址密码: mdji 如果IDEA安装了Lombok插件,请禁用Lombok插件点击菜单项File => Settings => Plugins 图3-1-33 插件管理页面操作示意下载插件包 (联系Oinone官方客服) 图3-1-35 操作指引图3-1-36 操作指引安装MySQL 8 （下载地址见书籍【附件一】）解压下载的ZIP安装包, 复制到自定义安装目录设置环境变量 MYSQL_BASE_DIR 提换成MySQL安装目录路径把 %MYSQL_BASE_DIR%\bin 加入到系统环境变量中在PowerShell中可以使用 Get-Command mysqld 命令验证环境变量是否配置成功，执行成功输出mysqld的所在路径初始化在命令行中执行 mysqld –initialize-insecure –user=mysql 安装 mysqld -install 启动MySQL服务 mysqld -install 设置root用户密码 alter user \’root\’@\’localhost\’ identified with mysql_native_password by \’oinone\’; flush privileges; 安装DB GUI工具 Datagrip、MySQLWorkbench、DBEaver 选其一 ### 安装Git （下载地址见书籍【附件一】）安装GraphQL测试工具Insomnia（下载地址见书籍【附件一】）安装RocketMQ（下载地址见书籍【附件一】）修改安装目录下bin中对应文件的默认配置 a. runserver.cmd文件内容 -Xms2g -Xmx2g为 -Xms1g -Xmx1g b. runbroker.cmd文件内容 -Xms2g -Xmx2g为 -Xms1g -Xmx1g，以及-XX:G1HeapRegionSize=1m 启动RocketMQ NameServer命令 RocketMQ安装目录\bin\mqnamesrv.cmd start 启动RocketMQ Broker命令 RocketMQ安装目录\bin\mqbroker.cmd -n localhost:9876 停止 RocketMQ命令 mqshutdown.cmd broker mqshutdown.cmd namesrv 安装ElasticSearch 版本 8.4.1（下载地址见书籍【附件一】）（非必须） ES运行时需要JDK18及以上版本JDK运行环境, ES安装包中包含了一个JDK18版本 set JAVA_HOME=ES安装路径\jdk 启动 ES安装路径\bin\elasticsearch.bat 停止 ctrl+c 或者关闭cmd、PowerShell的窗口安装Redis （下载地址见书籍【附件一】）解压安装包到安装目录在PowerShell进入到Redis安装目录在PowerShell中执行.\redis-server.exe，输出图中类似信息（如下图3-35所示）：图3-1-37 验证redis是否安装成功新开PowerShell窗口, 进入到Redis安装目录, 执行 .\redis-cli.exe回车，输入 ping 回车输出 PONG即表示Redis安装成功图3-1-38 验证redis是否安装成功 Zookeeper安装（下载地址见书籍【附件一】）解压安装, 在 PowerShell中执行 tar zxvf 安装包路径(tar.gz包) -C Zk安装目录进入 Zk安装目录\conf\ 复制 zoo_sample.cfg文件为 zoo.cfg 修改zoo.cfg文件的内容（其中dataDir需要自己设定） tickTime=2000…

史, 昂
2024年5月23日
2.4K003