3.5.3 Action的类型

各类动作我们都碰到过,但都没有展开讲过。这篇文章我们来系统介绍下oinone涉及到的所有Action类型。

一、动作类型

  • 服务器动作ServerAction
  • 类似于Spring MVC的控制器Controller,通过模型编码和动作名称路由,定义存储模型或代理模型将为该模型自动生成动作名称为consturct,queryOne,queryPage,create,update,delete,deleteWithFieldBatch的服务器动作。定义传输模型将为该模型自动生成动作名称为consturct的服务器动作
  • 窗口动作ViewAction
  • 站内跳转,通过模型编码和动作名称路由。系统将为存储模型和代理模型自动生成动作名称为redirectDetailPage的跳转详情页窗口动作,动作名称为redirectListPage的跳转列表页窗口动作,动作名称为redirectCreatePage的跳转新增页窗口动作,动作名称为redirectUpdatePage的跳转更新页窗口动作。
  • 跳转动作UrlAction
  • 外链跳转
  • 客户端动作ClientAction
  • 调用客户端函数

二、默认动作

  • 如果在UI层级,有开放新增语义函数,则会默认生成新增的窗口动作ViewAction,跳转到新增页面
  • 如果在UI层级,有开放更新语义函数,则会默认生成修改的窗口动作ViewAction,跳转到更新页面
  • 如果在UI层级,有开放删除语义函数,则会默认生成删除的客户端动作ClientAction,弹出删除确认对话框

三、第一个服务器动作ServerAction

回顾第一个ServerAction

第一个ServerAction是在3.3.2【模型的类型】一文中的“代理模型”部分出现的,再来看下当时的定义代码

package pro.shushi.pamirs.demo.core.action;

……引用类

@Model.model(PetShopProxy.MODEL_MODEL)
@Component
public class PetShopProxyAction extends DataStatusBehavior<PetShopProxy> {

    @Override
    protected PetShopProxy fetchData(PetShopProxy data) {
        return data.queryById();
    }
    @Action(displayName = "启用")
    public PetShopProxy dataStatusEnable(PetShopProxy data){
        data = super.dataStatusEnable(data);
        data.updateById();
        return data;
    }

……其他代码

}

图3-5-3-1 回顾第一个ServerAction

  1. @Action注解将创建服务器动作,并@Model.model绑定

  2. 自定义ServerAction请勿使用get、set、unset开头命名方法或toString命名方法

ServerAction之校验(举例)

Step1 为动作配置校验表达式

使用@Validation注解为PetShopProxyAction的dataStatusEnable服务端动作进行校验表达式配置

package pro.shushi.pamirs.demo.core.action;

……引用类

@Model.model(PetShopProxy.MODEL_MODEL)
@Component
public class PetShopProxyAction extends DataStatusBehavior<PetShopProxy> {

    @Override
    protected PetShopProxy fetchData(PetShopProxy data) {
        return data.queryById();
    }
    @Validation(ruleWithTips = {
            @Validation.Rule(value = "!IS_BLANK(data.code)", error = "编码为必填项"),
            @Validation.Rule(value = "LEN(data.shopName) < 128", error = "名称过长,不能超过128位"),
    })
    @Action(displayName = "启用")
    public PetShopProxy dataStatusEnable(PetShopProxy data){
        data = super.dataStatusEnable(data);
        data.updateById();
        return data;
    }

……其他代码

}

图3-5-3-2 为动作配置校验表达式

注:

  1. ruleWithTips可以声明多个校验规则及错误提示;

  2. IS_BLANK和LEN为内置文本函数,更多内置函数详见4.1.12【函数之内置函数与表达式】一文;

  3. 当内置函数不满足时参考4.1.13【Action之校验】一文。

Step2 重启看效果

在商店管理页面点击【启用】得到了预期返回错误信息,显示"编码为必填项"

3.5.3 Action的类型

图3-5-3-3 在商店管理页面点击启用得到了预期返回错误信息

ServerAction之前端展示规则(举例)

既然后端对ServerAction发起提交做了校验,那能不能在前端就不展示呢?当然可以,我们现在就来试下。

Step1 配置PetShopProxyAction的dataStatusEnable的前端出现规则

用注解@Action.Advanced(invisible="!(activeRecord.code !== undefined && !IS_BLANK(activeRecord.code))")来表示,注意这里配对invisible是给前端识别的,所以写法上跟后端的校验有些不一样,但如内置函数IS_BLANK这些是前后端一致实现的,activeRecord在前端用于表示当前记录。

package pro.shushi.pamirs.demo.core.action;

……引用类

@Model.model(PetShopProxy.MODEL_MODEL)
@Component
public class PetShopProxyAction extends DataStatusBehavior<PetShopProxy> {

    @Override
    protected PetShopProxy fetchData(PetShopProxy data) {
        return data.queryById();
    }
    @Validation(ruleWithTips = {
            @Validation.Rule(value = "!IS_BLANK(data.code)", error = "编码为必填项"),
            @Validation.Rule(value = "LEN(data.name) < 128", error = "名称过长,不能超过128位"),
    })
    @Action(displayName = "启用")
    @Action.Advanced(invisible="!(activeRecord.code !== undefined && !IS_BLANK(activeRecord.code))")
    public PetShopProxy dataStatusEnable(PetShopProxy data){
        data = super.dataStatusEnable(data);
        data.updateById();
        return data;
    }

……其他代码

}

图3-5-3-4 配置PetShopProxyAction的dataStatusEnable的前端出现规则

Step2 重启看效果

我们发现店铺编码为空的记录,没有了【启用】的操作按钮

3.5.3 Action的类型

图3-5-3-5 店铺编码为空的记录没有启用操作按钮

ServerAction配置说明

常用配合

  1. contextType设置动作上下文类型

a. SINGLE(默认)——单行,常用于列表页(展示在每行末尾的操作栏中)和表单页(展示在页面上方)

b. BATCH——多行,常用于列表页(展示在表格上方按钮区)

c. SINGLE_AND_BATCH——单行或多行,常用于列表页(展示在表格上方按钮区)

d. CONTEXT_FREE——上下文无关,常用于列表页(展示在表格上方按钮区)

  1. bindingType设置按钮所在页面类型(以下仅说明常用类型,详见ViewTypeEnum)

a. TABLE——列表页

b. GALLERY——画廊

c. FORM——表单页

d. DETAIL——详情页

e. CUSTOM——自定义页

注解大全

@Action
├── displayName 显示名称
├── summary 摘要摘要
├── contextType 动作上下文,可选项详见ActionContextTypeEnum
├── bindingType 所在页面类型,可选项详见ViewTypeEnum
├── Advanced 更多配置
│ ├── name 技术名称,默认Java方法名
│ ├── args 参数,默认java参数
│ ├── type 方法类型,默认UPDATE,可选项详见FunctionTypeEnum
│ ├── language 方法实现语言,默认JAVA,可选项详见FunctionLanguageEnum
│ └── invisible 隐藏规则
│ └── bindingView 绑定特定视图
│ └── priority 展示顺序

四、第一个窗口动作ViewAction

回顾第一个ViewAction

第一个ViewAction是在3.3.2【模型的类型】一文中的“传输模型”部分出现的,再来看下当时的定义代码。

package pro.shushi.pamirs.demo.core.init;

……引用类

@Component
public class DemoModuleMetaDataEditor implements MetaDataEditor {
    @Override
    public void edit(AppLifecycleCommand command, Map<String, Meta> metaMap) {
        InitializationUtil util = InitializationUtil.get(metaMap, DemoModule.MODULE_MODULE,DemoModule.MODULE_NAME);
        if(util==null){
            return;
        }
        ……其他代码
        //初始化自定义前端行为
        viewActionInit(util);
        ……其他代码
    }
    private void viewActionInit(InitializationUtil util){
        util.createViewAction("demo_petShop_batch_update","批量更新数据状态", PetShopProxy.MODEL_MODEL,
                InitializationUtil.getOptions(ViewTypeEnum.TABLE), PetShopBatchUpdate.MODEL_MODEL,ViewTypeEnum.FORM, ActionContextTypeEnum.SINGLE_AND_BATCH
                , ActionTargetEnum.DIALOG,null,null);
    }
     ……其他代码
}

图3-5-3-6 回顾第一个ViewAction

createViewAction参数详解(建议更换为注解方式)

参数名 类型 说明
name String 技术名称,唯一建要求
displayName String 展示名称
originModel String ViewAction的绑定模型
originViewTypes List ViewAction在绑定模型的哪些视图类型上展示
targetModel String ViewAction跳转到的目标模型
targetViewType ViewTypeEnum ViewAction跳转到的目标模型的什么类型视图
contextType ActionContextTypeEnum ViewAction在绑定模型视图上设置展示的动作上下文类型SINGLE(默认)——单行,常用于列表页(展示在每行末尾的操作栏中)和表单页(展示在页面上方)BATCH——多行,常用于列表页(展示在表格上方按钮区)SINGLE_AND_BATCH——单行或多行,常用于列表页(展示在表格上方按钮区)CONTEXT_FREE——上下文无关,常用于列表页(展示在表格上方按钮区)
pageTarget ActionTargetEnum 页面打开方式 ROUTER:页面路由 DIALOG:页面弹窗 OPEN_WINDOW:打开新窗口DRAWER:打开抽屉
resViewName String ViewAction跳转到的目标模型的指定视图的名称,该视图的类型需要跟targetViewType一致
title String 页面标题
非createViewAction方法的参数,但是ViewAction模型有的属性,可在调用createViewAction以后,在通过setXX属性方法来设置对应属性字段值
priority Intget 展示顺序
bindingView String 绑定特定视图
invisible String 隐藏规则
load String 对于特殊模型的窗口动作进行定制化的加载方式
filter String 代表后端过滤,是一定会加上的过滤条件,用户无感知
domain String 代表前端过滤,是默认会加上的过滤条件,用户可以去除该搜索条件

表3-5-3-1 createViewAction参数详解

注解见:@UxRouteButton(action = @UxAction(),value = @UxRoute())

ViewAction高级参数-Load(下个版本支持)

一般用于以下场景:

  1. 对于特殊模型的窗口动作进行定制化的加载方式。

  2. 不同模型间跳转时,可根据上一个模型的数据内容加载另一个模型的数据内容。

使用初始化工具类设置Load函数:

util.modifyViewAction(TestModele.MODEL_MODEL, InitializationUtil.DEFAULT_CREATE,
        viewAction -> viewAction.setLoad("createPageLoad"));

图3-5-3-7 使用初始化工具类设置Load函数

注:

所示修改窗口动作方法将TestModel模型的默认创建页的加载函数从construct函数改为了createPageLoad函数。

替代方案:构建模型子类,通过子类来重写construct方法

ViewAction高级参数filter和domain(举例)

filter当前版本支持,domain下个版本支持,之所以放一起讲是因为这是过滤的两种形态。

  1. filter代表后端过滤,是一定会加上的过滤条件,用户无感知

  2. domain代表前端过滤,是默认会加上的过滤条件,用户可以去除该搜索条件

Step1 修改自定义pet_talent_table.xml查询条件增加name字段

<view name="tableView" model="demo.PetTalent" cols="1" type="TABLE" enableSequence="true" layout="petTalentTableLayout">
    ……其他代码
    <template slot="search"  cols="4">
        <field data="name" label="达人"/>
        <field data="dataStatus" label="数据状态">
            <options>
                <option name="DRAFT" displayName="草稿" value="DRAFT" state="ACTIVE"/>
                <option name="NOT_ENABLED" displayName="未启用" value="NOT_ENABLED" state="ACTIVE"/>
                <option name="ENABLED" displayName="已启用" value="ENABLED" state="ACTIVE"/>
                <option name="DISABLED" displayName="已禁用" value="DISABLED" state="ACTIVE"/>
            </options>
        </field>
        <field data="createDate" label="创建时间"/>
    </template>
</view>

图3-5-3-8 修改自定义pet_talent_table.xml查询条件增加name字段

Step2 为宠物达人模型的两个菜单入口分配置filter和domain

把【宠物达人】菜单调整为三个菜单【宠物达人1】、【宠物达人2】、【宠物达人3】分别设置filter和domain

  1. 修改以菜单【宠物达人1】为入口的ViewAction的filter:

    1. @UxRoute(filter = "name =like= \'老\'")字符串要符合RSQL
  2. 修改以菜单【宠狗达人2】为入口的ViewAction的domain:

    1. @UxRoute(domain = "name =like= \'老\'") 字符串要符合RSQL
  3. 修改以菜单【宠狗达人3】跟函数结合,设置时间默认过滤条件:

    1. @UxRoute(domain = "createDate =ge= \'${ADD_DAY(NOW_STR(),-7)}\' and createDate =lt= \'${NOW_STR()}\'") 字符串要符合RSQL

    2. createDate =ge= \'${ADD_DAY(NOW_STR(),-7)}\' and createDate =lt= \'${NOW_STR()}\'

      1. 用到函数需要用${}装饰;

      2. 更多函数详见4.1.12【函数之内置函数与表达式】一文。

  4. domain的操作符需要跟页面搜索字段定义的操作符一致,比如name字符串字段搜索默认操作符是=like=,如果配置成其他则无效。

@UxMenu("宠物达人1")@UxRoute(value = PetTalent.MODEL_MODEL,filter = "name =like= '老'") class PetTalentMenu{}
@UxMenu("宠物达人2")@UxRoute(value = PetTalent.MODEL_MODEL,domain = "name =like= '老'") class PetTalent2Menu{}
@UxMenu("宠物达人3")@UxRoute(value = PetTalent.MODEL_MODEL,domain = "createDate =ge= '${ADD_DAY(NOW_STR(),-7)}' and createDate =lt= '${NOW_STR()}'") class PetTalent3Menu{}

图3-5-3-9 两个菜单入口分配置filter和domain

Step3 重启看效果

因为【宠物达人1】对应ViewAction加的是Filter,所以只能看到达人名称带“老”字的记录

3.5.3 Action的类型

图3-5-3-10 宠物达人1搜索记录

因为【宠物达人2】对应ViewAction加的是Domain,前端搜索栏里【达人】字段搜索条件为“老”字,达人名称带“老”字的记录,可以手工删除再次搜索全部数据

3.5.3 Action的类型

图3-5-3-11 宠物达人2搜索记录

因为【宠物达人3】对应ViewAction加的是Domain,前端搜索栏里【创建时间】字段带近7天过滤条件,可以手工删除再次搜索全部数据

3.5.3 Action的类型

图3-5-3-12 宠物达人3搜索记录

五、第一个跳转动作UrlAction

回顾第一个UrlAction

在3.5.1【构建第一个Menu】一文中用@UxMenu.url定义了一个百度的菜单,该菜单背后就是一个普通的UrlAction

@UxMenu("Oinone官网")@UxLink(value = "http://www.oinone.top",openType= ActionTargetEnum.OPEN_WINDOW) class SsLink{}

图3-5-3-13 回顾第一个UrlAction

URL计算表达式(暂不支持)

@UxMenu("百度") @UxLink(value = "http://www.baidu.com?wd=${activeRecord.technicalName}",openType= ActionTargetEnum.OPEN_WINDOW) class BaiduLink{}

图3-5-3-14 URL计算表达式

Compute函数(暂不支持)

@UxMenu("百度") @UxLink(value = "http://www.baidu.com",openType= ActionTargetEnum.OPEN_WINDOW,context = {@Prop(name="wd",value= "activeRecord.technicalName"),compute="computeSearchUrl"}) class BaiduLink{}

@Model.model(PetTalent.MODEL_MODEL)
public class PetTalentAction {

    @Function(openLevel = FunctionOpenEnum.API, summary = "计算搜索Url")
    @Function.Advanced(type = FunctionTypeEnum.QUERY)
    public String computeSearchUrl(TestModel data) {
        return "https://www.baidu.com/s?wd=" + data.getName();
    }
}

图3-5-3-15 Compute函数

注:

  1. 代码所示创建链接动作含义为:以新标签页方式跳转至指定URL,该URL值来自于调用后端computeSearchUrl方法的返回值。

六、第一个客户端动作ClientAction

基础客户端动作(举例)

给批量修改店铺状态弹出页面增加一个【自定义返回】和【自定义关闭】按钮,这里注意contextType只能配置为“ActionContextTypeEnum.SINGLE”,因为Form默认只展示contextType为SINGLE的Action

Step1 在PetShopBatchUpdateAction增加@UxClientButton注解

@Model.model(PetShopBatchUpdate.MODEL_MODEL)
@UxClientButton(action = @UxAction(name = "demo_back_test", label = "自定义返回",contextType = ActionContextTypeEnum.SINGLE,bindingType = ViewTypeEnum.FORM),value = @UxClient(value = "$$internal_GotoListTableRouter"))
@UxClientButton(action = @UxAction(name = "demo_close_test", label = "自定义关闭",contextType = ActionContextTypeEnum.SINGLE,bindingType = ViewTypeEnum.FORM),value = @UxClient(value = "$$internal_DialogCancel"))
@Component
public class PetShopBatchUpdateAction {
}

图3-5-3-16 在PetShopBatchUpdateAction增加@UxClientButton注解

Step2 重启看效果

3.5.3 Action的类型

图3-5-3-17 示例效果

前端动作之组合动作(举例)

通过自定义View的Template来设置组合动作,同时学习下自定义视图时如何设置需要展示Action,还是以批量修改店铺状态弹出页面为例子,我们只展示一个组合动作按钮【组合动作】,它包含表单校验、提交、关闭并刷新主视图等行为动作

Step1 自定义弹出框View

  1. 在views/demo_core/template路径下增加一个名为pet_shop_batch_update_form.xml文件

  2. 再通过数据库查看默认页面定义,找到base_view表,过滤条件设置为model =\'demo.PetShopBatchUpdate\',我们就看到该模型下对应的所有view,这些是系统根据该模型的ViewAction对应生成的默认视图,找到类型为【表单(type = FORM)】的记录,查看template字段,复制给pet_shop_batch_update_form.xml文件

  3. 把【<template slot="actions" autoFill="true"/>】替换成以下内容

    <template slot="actions" >
        <action actionType="composition" label="组合动作">
            <action actionType="client" name="$$internal_ValidateForm" />
            <action name="conform" />
            <action actionType="client" name="$$internal_GotoListTableRouter" />
        </action>
    </template>

图3-5-3-18 替换

Step2 重启看效果

这个页面只保留了【组合动作】一个按钮,其他没有配置的按钮就会隐藏掉。

3.5.3 Action的类型

图3-5-3-19 未配置的按钮均会被隐藏

平台默认前端动作:

有元数据定义名的建议最好用元数据名,比如平台默认前端导入动作“$$internal_GotoListImportDialog”可以用“internalGotoListImportDialog”来替代,这样的好处是管理一致,比如权限等功能设置.

<!-- <action name="$$internal_GotoListImportDialog" label="导入" /> 可以用下面方式替代,可以用于权限 -->
<action name="internalGotoListImportDialog" label="导入" />

图3-5-3-20 “$$internal_GotoListImportDialog”可用“internalGotoListImportDialog”替代

name 适用场景 功能描述 元数据定义名
$$internal_GotoListTableRouter 通用 返回上一个页面 internalGotoListTableRouter
$$internal_DeleteOne 关系字段表格 删除绑定的表格的选中数据 internalDeleteOne
$$internal_DialogCancel 弹窗 关闭当前弹窗
$$internal_ReloadData 弹窗 刷新当前主视图组件
$$internal_ListInsertOneAndCloseDialog 通用 打开一个创建弹窗
$$internal_GotoM2MListDialog 多对多关系 表格 打开M2M表格的创建弹窗
$$internal_GotoO2MCreateDialog 一对多关系 表格 打开O2M表格的创建弹窗
$$internal_GotoO2MEditDialog 一对多关系 表格 打开O2M表格的编辑弹窗
$$internal_ListInsertOneAndBackToList 表单 校验表单数据,提交到后端,返回表格(新建)
$$internal_ListUpdateOneAndBackToList 表单 校验表单数据,提交到后端,返回表格(更新)
$$internal_ValidateForm 表单 校验当前表单
$$internal_GotoListExportDialog 一般用于表格 数据导出的action internal_GotoListImportDialog
$$internal_GotoListImportDialog 一般用于表格 数据导入的action internalGotoListImportDialog

表3-5-3-2 平台默认前端动作

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

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

Like (0)
史, 昂's avatar史, 昂数式管理员
Previous 2024年5月23日 am9:23
Next 2024年5月23日 am9:25

相关推荐

  • 3.5.7.7 自定义主题

    主题是什么 Oinone框架提供了强大的主题定制功能,使得平台可以轻松适应和遵循公司的品牌和UI规范。通过自定义主题,你可以调整颜色、间距、圆角等视觉元素,从而使Oinone更好地融入到特定行业的需求和公司标准中。以下是关于如何定制主题的关键点和步骤: 关键点 使用CSS变量: Oinone使用CSS变量 (Css Var) 来实现主题定制。 CSS变量提供了一种高效且灵活的方式来定义和使用样式。 全面定制: 可以定制的范围广泛,包括颜色、字体、间距、边框、圆角等。 通过调整这些元素,可以确保UI符合公司的视觉标准。 定制步骤 了解CSS变量: 首先,了解如何在CSS中使用变量。 查看Oinone现有的CSS变量列表,以了解哪些样式可以被定制。 定义公司的UI规范: 根据公司的品牌指南,定义一套UI规范。 包括颜色方案、字体样式、元素尺寸等。 应用自定义样式: 在Oinone的样式表中,使用定义的CSS变量来覆盖默认样式。 确保在适当的地方应用这些自定义样式。 作用场景 Oinone平台提供了灵活的主题定制选项,包括内置的六套主题样式,涵盖深色和浅色模式以及不同的尺寸选项(大、中、小)。这些主题可以适应不同的业务需求和项目特性,同时提供了定制工具,方便用户根据公司的UI规范进行调整。下面是主题作用场景的详细说明: 主题选项 内置主题: 六套主题:包括深色和浅色模式,以及大、中、小尺寸。 用户可以通过系统设置功能轻松切换不同的主题。 可定制性: 提供CSS变量的JSON文件,方便用户下载和修改。 允许用户根据具体需求定制颜色、字体、间距等样式变量。 应用场景 公司UI规范对齐: 首先根据公司的UI规范调整一份基础主题。 这有助于确保平台的外观与公司品牌一致。 项目和业务适应性: 在不同项目或业务场景中,可以基于公司UI规范进行微调。 这提供了项目特定的灵活性,同时保持整体的品牌一致性。 实施建议 初始设置: 初始时,选择一个接近公司标准的内置主题作为起点。 通过系统设置功能体验不同的主题效果。 定制和微调: 下载并修改CSS变量的JSON文件,以符合公司的UI标准。 对于特定项目或业务场景,根据需要进行进一步的微调。 自定义主题 自定义主题功能允许在Oinone平台上创建和应用独特的视觉风格,以适应特定的业务需求和品牌标准。以下是自定义主题的步骤和示例,用于指导如何在Oinone平台上实现这一功能。 示例工程目录 以下是需关注的工程目录示例,main.ts更新导入./theme: 图3-5-7-24 自定义主题目录示例 步骤 1: 创建主题 定义主题变量: 创建一个包含主题样式变量的JavaScript文件。例如,可以定义一个名为OinoneTheme的新主题,并设置相应的CSS变量。 图3-5-7-24 自定义主题代码示例 注册主题: 使用registerTheme函数注册自定义主题。这个函数将新主题添加到可用主题列表中。 步骤 2: 应用主题 在主入口文件中引用: 在main.ts文件中引入自定义主题,并在VueOioProvider配置中指定。 图3-5-7-24 自定义主题应用配置示例 效果 图3-5-7-24 自定义黑色主题效果示例 主题叠加: Oinone支持多个主题变量同时存在,后导入的主题变量会覆盖前面导入的。 内置主题 Oinone平台内置了以下六个主题变量,你可以在自定义主题时参考或扩展它们: ‘default – large’ ‘default – medium’ ‘default – small’ ‘dark – large’ ‘dark – medium’ ‘dark – small’ 扩展变量 在定义主题变量时,根据业务需求可以添加不存在的变量,作为变量的扩展。 示例 { "custom-color": "#新的辅助颜色", "button-padding": "10px 20px", // …其他自定义变量 } 图3 – 5 – 7 – 24 扩展主题变量 查找主题变量 在Oinone平台上,通过DOM调试器查找主题变量是一种有效的方式,允许用户定位并获取相应组件的主题变量。以下是执行这一步骤的详细说明: 步骤: 使用DOM调试器: 在浏览器中打开Oinone平台,进入需要查找主题变量的页面。 使用浏览器的开发者工具或DOM调试器(通常可通过右键点击页面元素并选择“检查”打开)。 选择目标组件: 在DOM调试器中,通过选择器工具或直接点击页面上的组件,选中你想要查找主题变量的目标组件。 查看样式和主题变量: 在选中的组件上,浏览开发者工具中的“样式”或“计算”选项卡。 可以通过查看样式表中的相关样式规则,找到组件所使用的主题变量。 4标识主题变量: 主题变量通常以 –oio 为前缀。标识出你感兴趣的主题变量,记录下变量名和当前的取值。 示例: 假设你想查找某个按钮组件的主题变量,可以通过以下步骤: 在DOM调试器中选中按钮组件。 在“样式”或“计算”选项卡中查看相关样式规则。 找到以 –oio 为前缀的主题变量,如 –oio-button-pirmary-background。 记录该主题变量的取值,例如 #3498db。 图3-5-7-24 DOM调试器查询主题变量

    2024年5月23日
    1.6K00
  • 4.1.24 框架之分库分表

    随着数据库技术的发展如分区设计、分布式数据库等,业务层的分库分表的技术终将成老一辈程序员的回忆,谈笑间扯扯蛋既羡慕又自吹地说到“现在的研发真简单,连分库分表都不需要考虑了”。竟然这样为什么要写这篇文章呢?因为现今的数据库虽能解决大部分场景的数据量问题,但涉及核心业务数据真到过亿数据后性能加速降低,能给的方案都还有一定的局限性,或者说性价比不高。相对性价比比较高的分库分表,也会是现阶段一种不错的补充。言归正传oinone的分库分表方案是基于Sharding-JDBC的整合方案,所以大家得先具备一点Sharding-JDBC的知识。 一、分表(举例) 做分库分表前,大家要有一个明确注意的点就是分表字段的选择,它是非常重要的,与业务场景非常相关。在明确了分库分表字段以后,甚至在功能上都要做一些妥协。比如分库分表字段在查询管理中做为查询条件是必须带上的,不然效率只会更低。 Step1 新建ShardingModel模型 ShardingModel模型是用于分表测试的模型,我们选定userId作为分表字段。分表字段不允许更新,所以这里更新策略设置类永不更新,并在设置了在页面修改的时候为readonly package pro.shushi.pamirs.demo.api.model; import pro.shushi.pamirs.boot.base.ux.annotation.field.UxWidget; import pro.shushi.pamirs.boot.base.ux.annotation.view.UxForm; import pro.shushi.pamirs.meta.annotation.Field; import pro.shushi.pamirs.meta.annotation.Model; import pro.shushi.pamirs.meta.enmu.FieldStrategyEnum; @Model.model(ShardingModel.MODEL_MODEL) @Model(displayName = "分表模型",summary="分表模型",labelFields ={"name"} ) public class ShardingModel extends AbstractDemoIdModel { public static final String MODEL_MODEL="demo.ShardingModel"; @Field(displayName = "名称") private String name; @Field(displayName = "用户id",summary = "分表字段",immutable=true/* 不可修改 **/) @UxForm.FieldWidget(@UxWidget(readonly = "scene == 'redirectUpdatePage'"/* 在编辑页面只读 **/ )) @Field.Advanced(updateStrategy = FieldStrategyEnum.NEVER) private Long userId; } 图4-1-24-1 新建ShardingModel模型 Step2 配置分表策略 配置ShardingModel模型走分库分表的数据源pamirsSharding 为pamirsSharding配置数据源以及sharding规则 a. pamirs.sharding.define用于oinone的数据库表创建用 b. pamirs.sharding.rule用于分表规则配置 pamirs: load: sessionMode: true framework: system: system-ds-key: base system-models: – base.WorkerNode data: default-ds-key: pamirs ds-map: base: base modelDsMap: "[demo.ShardingModel]": pamirsSharding #配置模型对应的库 图4-1-24-2 指定模型对应数据源 pamirs: sharding: define: data-sources: ds: pamirs pamirsSharding: pamirs #申明pamirsSharding库对应的pamirs数据源 models: "[trigger.PamirsSchedule]": tables: 0..13 "[demo.ShardingModel]": tables: 0..7 table-separator: _ rule: pamirsSharding: #配置pamirsSharding库的分库分表规则 actual-ds: – pamirs #申明pamirsSharding库对应的pamirs数据源 sharding-rules: # Configure sharding rule ,以下配置跟sharding-jdbc配置一致 – tables: demo_core_sharding_model: #demo_core_sharding_model表规则配置 actualDataNodes: pamirs.demo_core_sharding_model_${0..7} tableStrategy: standard: shardingColumn: user_id shardingAlgorithmName: table_inline shardingAlgorithms: table_inline: type: INLINE props: algorithm-expression: demo_core_sharding_model_${(Long.valueOf(user_id) % 8)} props: sql.show: true 图4-1-24-3 分库分表规则配置 Step3 配置测试入口 修改DemoMenus类增加一行代码,为测试提供入口 @UxMenu("分表模型")@UxRoute(ShardingModel.MODEL_MODEL) class ShardingModelMenu{} 图4-1-24-4 配置测试入口 Step4 重启看效果 自行尝试增删改查 观察数据库表与数据分布 图4-1-24-5 自行尝试增删改查 图4-1-24-6 观察数据库表与数据分布 二、分库分表(举例) Step1 新建ShardingModel2模型 ShardingModel2模型是用于分库分表测试的模型,我们选定userId作为分表字段。分库分表字段不允许更新,所以这里更新策略设置类永不更新,并在设置了在页面修改的时候为readonly package pro.shushi.pamirs.demo.api.model; import pro.shushi.pamirs.boot.base.ux.annotation.field.UxWidget; import pro.shushi.pamirs.boot.base.ux.annotation.view.UxForm; import…

    2024年5月23日
    1.4K00
  • 开发者

    1.开发者 1.1 Webhook 通过webhook流程节点可以向第三方系统发送请求。 1.1.1 请求方式 支持GET、POST两种请求方式。 1.1.2 URL 在Webhook URL中填写发送请求的HTTP地址。 1.1.3 Headers&Body Headers的value支持通过表达式配置变量 Body的数据类型支持KEY_VALUE和APPLICATION_JSON两种。

    2024年6月20日
    2.0K00
  • 4.5 研发辅助

    这里都是一些提升研发效率的小工具

    Oinone 7天入门到精通 2024年5月23日
    1.5K00
  • 1.1 Oinone的萌芽

    在信息化时代,中国并没有涌现出一家世界知名的软件公司。这是因为像SAP、Oracle、IBM、Salesforce、NetSuite、Odoo等西方巨头所拥有的最佳实践在业务、技术和模式方面,给予了它们在企业信息化建设中高额利润的优势。中国软件业在这个时代的角色是学习和追随者,而最优秀的追随者是金蝶和用友,它们能在国家推行会计电算化的机遇中占据领先地位。但是,追随者始终只是追随者,没有真正的突破。 我自己进入软件行业的经历可以追溯到2015年。当时资本市场非常热门,大家都在创业。我认为这是一个时代的机会,就像国家改革开放一样。于是,我和很多同事一起开始了创业之旅。在数式之前,我加入并创办了三家公司:500mi、数列和端点。整个过程给了我宝贵的经验和启示,帮助我找到了最终想要的方向。 在500mi公司时,我从技术岗位转型为业务经营,起步并不顺利。然而,我从这份经历中获得了一堂重要的课:做自己擅长的事情,有助于渡过创业启动期最艰难的阶段。同时,市场调研为我提供了一个信号:传统企业对于IT的需求正逐渐向互联网靠拢。这个信号像注入了一剂强心剂,激励我继续前行。 2016年,我和三个曾在阿里工作的同事一起创办了一家新公司——数列,我们决定专注于我们最擅长的领域,即软件服务商。在没有任何商务资源的情况下,我们第一年就完成了1000多万的合同,这相较之前是一个非常成功的开端。然而,对于公司未来的发展方向,我们花费了长达大半年的时间进行思考:应该坚持做底层的PaaS还是专注于企业可见的上层应用和业务产品?我倾向于后者。尽管我们持续存在分歧,但凭借着多年的革命友情,最终我们友好地分道扬镳。数列此前的成功让我更加坚信:在数字化时代,软件需求将会有井喷式的增长,数字化软件服务将是未来5-10年的重要方向。而在这个领域,专业的技能将是应对未来不确定性的真正力量。 提到数字化,就不得不提阿里巴巴提出的中台理念。中台理念在15年前被阿里巴巴提出,当时引起了广泛的关注和讨论。企业之所以认同中台理念,是因为他们的核心需求已经从内部转向外部:从关注管理、流程、效率的提升,转向关注外部协同、运营、创新。他们已经不再只担心企业的效率和成本,而是担心自己是否有能力跟上时代的快速变化。现今做生意的渠道已经不再是单一的线下渠道,而是包括淘宝、天猫、京东、拼多多、抖音、快手等多个线上渠道,以及海外市场,这种变化速度非常快。而中台的核心理念是敏捷响应、低成本快速创新,正好解决了企业主的核心焦虑。 企业的视角正在从内部管理向业务在线和生态在线(协同)转变,这种转变带来了一系列新的需求(如下图1-1所示)。这种转变不仅是为了支持现有业务的发展,也为企业未来的业务发展和创新提供了支持,并将变化实时反映到上下游合作伙伴中。 图1-1 企业视角转变带来一系列新的诉求 在2017年下半年,阿里云收购了端点科技,打算重启阿里软件。那个时候,市场上涌现出一批中台厂商,整个行业也比较混乱,很多人对互联网架构本身的理解不够深入,快速学习拿到阿里云认证后就开始做定制化的中台架构开发,但最终的效果无法达到预期。因此,阿里云和端点科技的联姻是为了弥补阿里云没有向外输出上层应用产品能力的缺陷。多年来,软件市场一直被国外厂商掌控,中国一直缺乏一个强大的本土软件公司。阿里收购端点,承载着无数中国人的软件梦想。在这种背景下,我回到了阿里体系,加入了端点科技。后来,我参与了许多中台项目,深刻地认识到搭建中台技术架构和一些基础能力,为上层应用场景落地并不难。但是,当客户接手扩展中台能力和新的上层应用场景时,效果往往不尽如人意,这并不是中台架构理念的问题,而是因为传统企业客户的IT能力大多较弱,这是一个硬伤。许多文章都在讲述中台战略,长篇大论地描述组织中台、技术中台、业务中台、数据中台,我们不去评论这些方法论的对错,从技术角度回到初衷,我们只关注一个问题:技术是为商业服务的,中台如何快速满足企业业务多变的需求? 我们经历了多个行业的中台建设,每次都向客户强调第一阶段是打好基础,因此需要较长的周期,并且每个项目都需要顶级架构师来把控整体项目。如何找到互联网架构与传统软件良好结合点,降低对组织的要求,实现中台架构的标准化输出?这是我回归阿里后致力于解决的问题。然而,随着阿里云对端点战略发展思路的变化,阿里不再提供SaaS服务,而只愿意做平台被其他企业集成。因此,我离开了端点,并决定把自己的技术思考转化为现实,于是数式科技诞生了。 在数字化时代,无论是业务、技术还是商业模式的最佳实践,都源自中国。中国已经从追随者转变为互联网领域的全面引领者。我们有理由相信,中国一定会崛起一家世界级的软件公司,而Oinone将始终以此为愿景。

    2024年5月23日
    1.9K00

Leave a Reply

Please Login to Comment