相关推荐

• 数据可视化

  史, 昂

  Oinone 7天入门到精通 2024年6月20日

  2.8K000
• Oinone 7天入门到精通

  3.5.4 Ux注解详解

  我们默认视图已经基本可以用了，但实际业务中还是会有一些不大不小的自定义需求，写自定义视图又太麻烦，今天我们来学习一种更加轻量的模式即：后端研发可以通过注解来配置视觉交互。该系列注解以Ux开头，例如@UxHomepage、@UxMenu、@UxAction、@UxView、@UxWidget等等。 视图XML的配置优先级大于在代码上的注解，也就是代码上的注解影响的是默认展示逻辑。 一、Ux家族图谱 我们先简单通过家族图谱做个简单了解，脑海里有一个影响当有需要的时候知道能不能做，深入了解还需要大家多多动手去尝试 图3-5-4-1 Ux家族图谱 二、默认视图后端配置举例 在下面的代码片段中UxTable、UxForm、UxDetail、UxTableSearch都有涉及，几个特殊点做些解释其他的留大家自行测试 Group分组的配置逻辑：为了不让一个分组内的字段不断的写Group，所以采取了第一个字段写了Group，到下一个出现的group之间的字段都自动归为一个Group 搜素整体不展示可以用“@UxTable(enableSearch = false)”配置在模型的类上。 字段搜索用“UxTableSearch”配置在模型的字段上，其特殊逻辑是只要你配了一个字段，系统就不自动补充了，例子中表格页的搜索栏只会留下店铺名称和店铺编码 ……其他代码 //@UxTable(enableSearch = false)，整体不支持搜索 public class PetShop extends AbstractDemoIdModel { public static final String MODEL_MODEL="demo.PetShop"; @Field(displayName = "店铺编码") @UxForm.FieldWidget(@UxWidget(group = "Form基础数据"))//Form分组 @UxTableSearch.FieldWidget(@UxWidget())//支持搜索 private String code; @Field(displayName = "店铺编码2") @Field.Sequence(sequence = "DATE_ORDERLY_SEQ",prefix = "C",size=6,step=1,initial = 10000,format = "yyyyMMdd") private String codeTwo; @UxTableSearch.FieldWidget(@UxWidget())//支持搜索 @UxTable.FieldWidget(@UxWidget(invisible = "true"))//表格中不展示支持搜索 @Field(displayName = "店铺名称",required = true,immutable=true) private String shopName; @Field(displayName = "一年内新店") @UxForm.FieldWidget(@UxWidget(widget = "Switch",group = "Form基础数据"))//Switch,Checkbox可以切换着看，字段可选widget参考【字段的配置】一文 private Boolean oneYear; @Field(displayName = "开店时间",required = true) @UxDetail.FieldWidget(@UxWidget(invisible = "true"))//详情不展示 private Time openTime; @Field(displayName = "闭店时间",required = true) @UxDetail.FieldWidget(@UxWidget(invisible = "true"))//详情不展示 private Time closeTime; …… 其他代码 } 图3-5-4-2 默认视图后端配置举例

  史, 昂

  2024年5月23日

  2.1K000
• Oinone 7天入门到精通

  5.6 商业支撑之商品域

  一、基础介绍 当业务在线化后，用于内部管理的产品主数据，叠加一堆销售属性变成了商品被推倒了前台，成为导购链路中最最重要的信息载体。看似最基础和最简单的商品模块也有很多门道。主要集中在以下几个方面： 商品的属性如何管理、呈现、参与导购（类目、搜索的过滤条件） 如何解决固定不变的内部管理需求与基于销售特性长期变化的运营需求之间的矛盾 在多渠道情况渠道商品，如何映射到实际sku进行履约 二、模型介绍 图5-6-1 模型介绍 类目属性，解决“商品的属性如何管理、呈现、参与导购（类目、搜索的过滤条件）” 前后台类目设计，解决“如何解决固定不变的内部管理需求与基于销售特性长期变化的运营需求之间的矛盾” 销售Sku和库存Sku设计，解决“在多渠道情况渠道商品，如何映射到实际sku进行履约” 要把这些问题搞清楚，得先把名词统一下： 领域 名称 oinone的定义 说明 举例 平台运营视角 Spu Product –>Spu2.1.9 –> 3.0.0 SPU(Standard Product Unit)：标准化产品单元。SPU是商品信息聚合的最小单位，是一组可复用、易检索的标准化信息的集合，该集合描述了一个产品的特性 iPhone X可以确定一个产品 后台类目 后台类目(Category) 商品分类分级管理，以及规范该类目下公共属性可以分为普通属性、销售属性 比如类目：3c数码/手机销售属性：内存大小、颜色等普通属性：分辨率 前台类目 前台类目(FrontCategory) 平台导购类目 通过前台类目关联后台类目或后台类目属性，用于满足运营需求 大体上SPU处于最上层、Item属于下一级，而SKU属于最低一层。SPU是平台层面，Item是商家层面，SKU是商家的Item确定销售属性SPU非必须，在平台类交易中，平台方为了规范商家发布商品信息，进行统一运营时需要 商家销售视角 Item 渠道商品(Item) 简单来说是：SPU加上归属商家、以及商家自有的价格与描述 商家A的iPhone X Sku 销售Sku(SaleSku) SKU=Stock Keeping Unit（库存保有单位）。是对每一个产品和服务的唯一标示符，该系统的使用SKU的值根于数据管理，使公司能够跟踪系统，如仓库和零售商店或产品的库存情况。 iPhone X 64G 银色 则是一个SKU。 店铺类目 ShopCategory 商家店铺导购类目 在平台类电商，商家都会有自己独立的店铺主页，商家类目跟前台类目作用类似，只是局限影响范围为商家店铺内 销售SKU中会有一个InvSkuCode来关联InventorySku，比如：品牌上在不同渠道（淘宝、京东、自建电商）中会有不同的销售SKU，在从渠道同步销售SKU会根据外部code 商家管理视角 产品或库存Sku InventorySku 跟销售领域的sku的定义类似，但销售领域是为了规范购买行为，这里规范企业内部管理。 iPhone X 64G 银色 组合Sku InventorySkuComposition 空调有内外机组合而成，这就是一个组合sku 产品分类 ProductKind 企业内部管理划分 商品系列 ItemSeries 指互相关联或相似的产品，是按照一定的分类标准对企业生产经营的全部产品进行划分的结果。一个产品系列内往往包括多个产品项目。产品系列的划分标准有产品功能、消费上的连带性、面向的顾客群、分销渠道、价格范围等 存货类别 StorageKind 为了反映存货的组成内容，正确计算产品的生产成本以及销售成本，会计上必须对存货进行科学地分类，按存货的不同类别进行核算 表5-6-1 各领域名称说明

  史, 昂

  2024年5月23日

  2.5K000
• Oinone 7天入门到精通

  6.4 国际化之多语言

  多语言是国际化中大家最常面对的问题，我们需要对应用的页面结构元素进行翻译，也需要对系统内容进行翻译比如：菜单、数据字典等，甚至还会业务数据进行翻译。但不管什么翻译需求，我们在实现上基本可以归类为前端翻译和后端翻译。前端翻译顾名思义是在前端根据用户选择语言对内容进行翻译，反之就是后端翻译。本文会带着大家了解oinone的前端翻译与后端翻译 准备工作 pamirs-demo-boot的pom文件中引入pamirs-translate包依赖 <dependency> <groupId>pro.shushi.pamirs.core</groupId> <artifactId>pamirs-translate</artifactId> </dependency> pamirs-demo-boot的application-dev.yml文件中增加配置pamirs.boot.modules增加translate，即在启动模块中增加translate模块 pamirs: boot: modules: – translate 后端翻译（使用） 这里通过对菜单的翻译来带大家了解翻译模块 Step1 新增翻译记录 切换应用到translate模块，点击新增翻译。 选择新增翻译生效模块 选择翻译的模型为：菜单模型 源语言选择中文，目标选择English 添加翻译项目： 源术语为：商店 翻译值为：shop 状态为：激活 Step2 查看效果 应用切换到Demo模块，在右上角切换语言至英语 后端翻译（自定义模型的翻译） 在前面菜单的翻译中，似乎我们什么都没做就可以正常通过翻译模块完成多语言的切换了。是不是真如我们想象的一样，当然不是。是因为Menu模型的displayName字段加上@Field(translate = true)注解。 Step1 为PetType模型的name字段增加翻译注解 package pro.shushi.pamirs.demo.api.model; import pro.shushi.pamirs.meta.annotation.Field; import pro.shushi.pamirs.meta.annotation.Model; import pro.shushi.pamirs.meta.base.IdModel; @Model.MultiTable(typeField = "kind") @Model.model(PetType.MODEL_MODEL) @Model(displayName="品种",labelFields = {"name"}) public class PetType extends IdModel { public static final String MODEL_MODEL="demo.PetType"; @Field(displayName = "品种名" , translate = true) private String name; @Field(displayName = "宠物分类") private String kind; } Step2 重启应用查看效果 切换应用到translate模块，点击新增翻译 切换应用到Demo模块，切换中英文，查看效果 前端翻译 还记得我们前端第一个自定义动作吗？会弹出“oinone第一个自定义Action，啥也没干”，我们要对它进行翻译。 Step1 修改前端DoNothingActionWidget.ts import translateValueByKey 提示语用translateValueByKey加上翻译 const confirmRs = executeConfirm(translateValueByKey(\’oinone第一个自定义Action，啥也没干\’)||\’oinone第一个自定义Action，啥也没干\’); 前端更多翻译工具请见前端高级特性-框架之翻译工具 import { Action, ActionContextType, ActionWidget, executeConfirm, IClientAction, SPI, ViewType, Widget, translateValueByKey } from '@kunlun/dependencies'; @SPI.ClassFactory(ActionWidget.Token({ name: 'demo.doNothing' })) export class DoNothingActionWidget extends ActionWidget { @Widget.Method() public async clickAction() { const confirmRs = executeConfirm(translateValueByKey('oinone第一个自定义Action，啥也没干')||'oinone第一个自定义Action，啥也没干'); } } //定义动作元数据 Action.registerAction('*', { displayName: '啥也没干', name: 'demo.doNothing', id: 'demo.doNothing', contextType: ActionContextType.ContextFree, bindingType: [ViewType.Table] } as IClientAction); Step2 新增翻译记录 前端翻译的翻译记录对应的模型可以随意找一个放。但要注意几点： 不要找有字读配置translate = true的模型，因为会影响后端翻译性能。 最好统一到一个模型中，便于后续管理。这里大家可以自定义一个无有业务访问且本身无需要翻译的模型来挂载，避免性能损失 Step3 刷新远程资源生成前端语言文件 Step4 新增或修改.env 前端在项目根目录下新增或修改.env，可以参考.env.example文件。通过.env文件为前端配置oss文件路径，针对I18N_OSS_URL配置项。真实前端访问翻译语言文件的路径规则为：http://bucket.downloadUrl/mainDir/租户/translate/模块/语言文件。 yaml文件中oss配置的文件路径：http://pamirs.oss-cn-hangzhou.aliyuncs.com/upload/demo/ 租户/translate/模块/语言文件 前端会自动根据上下文组织 # 后端api配置 # API_BASE_URL=http://127.0.0.1:8090 # 下面是国际化语言的cdn配置，默认用当前请求链接下的路径: /pamirs/translate/${module}/i18n_${lang}.js I18N_OSS_URL=http://pamirs.oss-cn-hangzhou.aliyuncs.com/upload/demo Step5 重启前端应用看效果 对语言进行中英文切换，进入宠狗达人页面，点击【第一个自定义Action】，查看前端翻译效果

  史, 昂

  2024年5月23日

  2.9K200
• Oinone 7天入门到精通

  4.1.19 框架之网关协议-后端占位符

  在我们日常开发中会有碰到一些特殊场景，需要由前端来传一些如“当前用户Id”、“当前用户code”诸如此类只有后端才知道值的参数，那么后端占位符就是来解决类似问题的。如前端传${currentUserId}，后端会自动替换为当前用户Id。 Step1 后端定义占位符 我们新建一个UserPlaceHolder继承AbstractPlaceHolderParser，用namespace来定义一个“currentUserId”的占位符，其对应值由value()决定为“PamirsSession.getUserId().toString()”，active要为真才有效，priority为优先级 package pro.shushi.pamirs.demo.core.placeholder; import org.springframework.stereotype.Component; import pro.shushi.pamirs.meta.api.session.PamirsSession; import pro.shushi.pamirs.user.api.AbstractPlaceHolderParser; @Component public class UserPlaceHolder extends AbstractPlaceHolderParser { @Override protected String value() { return PamirsSession.getUserId().toString(); } @Override public Integer priority() { return 10; } @Override public Boolean active() { return Boolean.TRUE; } @Override public String namespace() { return "currentUserId"; } } 图4-1-19-1 后端定义占位符 Step2 前端使用后端占位符 我们经常在o2m和m2m中会设置domain来过滤数据，这里案例就是在field中设置来过滤条件，domain="createUid == $#{currentUserId}"，注意这里用的是$#{currentUserId} 而不是${currentUserId}，这是前端为了区分真正变量和后端占位符，提交的时候会把#过滤掉提交。修改宠物达人表格视图的Template中search部分 <template slot="search" cols="4"> <field data="name" label="达人"/> <field data="petTalentSex" multi="true" label="达人性别"/> <field data="creater" /> <!– <field data="petShops" label="宠物商店" domain="createUid == ${activeRecord.creater.id}"/>–> <field data="petShops" label="宠物商店" domain="createUid == $#{currentUserId}"/> <field data="dataStatus" label="数据状态" multi="true"> <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="创建时间"/> <field data="unStore" /> </template> 图4-1-19-2 前端使用后端占位符 Step3 重启看效果 请求上都带上了createUid==${currentUserId} 图4-1-19-3 示例效果

  史, 昂

  2024年5月23日

  2.5K000