相关推荐

• 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日

  2.2K000
• 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.3K000
• Oinone 7天入门到精通

  3.5.7.9 自定义多Tab

  在业务中，可能会遇到需要对多tab的交互或UI做全新设计的需求，这个时候可以自定义多tab组件支持。 首先继承平台的MultiTabsWidget组件，将自己vue文件设置到component处 import { MultiTabsWidget, SPI, ViewWidget } from '@kunlun/dependencies'; import Component from './CustomMultiTabs.vue'; @SPI.ClassFactory( ViewWidget.Token({ // 这里的tagName跟平台的组件一样，这样才能覆盖平台的组件 tagName: ['multi-tabs', 'MultiTabs'] }) ) export class CustomMultiTabsWidget extends MultiTabsWidget{ public initialize(props) { super.initialize(props); // 设置自定义的vue组件 this.setComponent(Component); return this; } } vue文件中继承平台的props，编写自定义页面代码 export const MultiTabsProps = { /** * 组件是否可见 */ invisible: { type: Boolean }, /** * tab列表数据 */ tabs: { type: Array as PropType<MultiTab[]> }, /** * 当前激活的tab */ activeTab: { type: Object as PropType<MultiTab> }, /** * 鼠标悬浮所在的tab */ hoverTab: { type: Object as PropType<MultiTab> }, /** * 鼠标经过tab事件回调 */ onMouseenterTab: { type: Function as PropType<(tab: MultiTab) => void> }, /** * 鼠标离开tab事件回调 */ onMouseleaveTab: { type: Function as PropType<(tab: MultiTab) => void> }, /** * 点击tab */ onClickTab: { type: Function as PropType<(tab: MultiTab) => void> }, /** * 刷新当前tab */ onRefreshCurrentTab: { type: Function as PropType<(tab: MultiTab) => void> }, /** * 关闭当前tab */ onCloseCurrentTab: { type: Function as PropType<(tab: MultiTab) => void> }, /** * 关闭除当前tab外的其他所有tab */ onCloseOtherTabs: { type: Function as PropType<(tab: MultiTab) => void> }, /** * 关闭当前tab左侧的所有tab */ onCloseLeftTabs: { type: Function as…

  史, 昂

  2024年5月23日

  1.4K000
• 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.2K000
• Oinone 7天入门到精通

  6.2 集成平台（改）

  企业在数字化转型过程中内外部集成是一个必然需求、也是趋势 集成的诉求主要来自两个方面：1.企业的数字化改造是由外而内逐步进行的（内部异构集成）、2.企业数字化方向是朝越来越开放的方向发展（外部平台、工具集成）。总的来说企业在数字化转型过程中内外部集成是一个必然需求、也是趋势。所以我们不能简单地去理解做个API对接就结束了，而是要统一规划构建成企业的集成门户对API定义，安全、控制、记录等做全方位管理。oinone在下个版本规则中也纳入了基于集成平台之上做产品化配置的需求 概述 pamirs-eip为平台提供企业集成门户的相关功能，如请求外部接口使用的【集成接口】和对外开放被其他系统请求调用的【开放接口】功能。在请求外部接口时，还支持了多个接口调用（路由定义）、分页控制（paging）、增量控制（incremental）等功能。 准备工作 Step1 POM与模块依赖 pamirs-demo-api 和 pamirs-second-api 的pom文件中引入pamirs-eip2-api包依赖 <dependency> <groupId>pro.shushi.pamirs.core</groupId> <artifactId>pamirs-eip2-api</artifactId> </dependency> DemoModule和SecondModule 增加对EipModule的依赖 @Module(dependencies = {EipModule.MODULE_MODULE}) pamirs-demo-boot和pamirs-second-boot工程的pom文件中引入pamirs-eip2-core包依赖 <dependency> <groupId>pro.shushi.pamirs.core</groupId> <artifactId>pamirs-eip2-core</artifactId> </dependency> Step2 yaml配置文件参考 pamirs-demo-boot和pamirs-second-boot工程的application-dev.yml文件中增加配置pamirs.boot.modules增加eip，即在启动模块中增加eip模块 pamirs: boot: modules: – eip pamirs-demo-boot和pamirs-second-boot工程的application-dev.yml文件中增加eip模块的数据源与路由配置 pamirs: framework: data: ds-map: eip: eip datasource: eip: driverClassName: com.mysql.cj.jdbc.Driver type: com.alibaba.druid.pool.DruidDataSource url: jdbc:mysql://127.0.0.1:3306/eip_v3?useSSL=false&allowPublicKeyRetrieval=true&useServerPrepStmts=true&cachePrepStmts=true&useUnicode=true&characterEncoding=utf8&serverTimezone=Asia/Shanghai&autoReconnect=true&allowMultiQueries=true username: root password: oinone initialSize: 5 maxActive: 200 minIdle: 5 maxWait: 60000 timeBetweenEvictionRunsMillis: 60000 testWhileIdle: true testOnBorrow: false testOnReturn: false poolPreparedStatements: true asyncInit: true pamirs-demo-boot工程的application-dev.yml文件中修改eip的配置 pamirs: eip: open-api: enabled: false pamirs-second-boot工程的application-dev.yml文件中修改eip的配置 pamirs: eip: enabled: true open-api: enabled: true route: host: 127.0.0.1 port: 8094 aes-key: Nj5Thnxz4rV8Yy1FLGA2hUym3RepB8MKgafEaYC4GKo= 注： hosts配置在远程调用时不能使用127.0.0.1，可配置为0.0.0.0进行自动识别。若自动识别仍无法访问，请准确配置其他已知的可访问IP地址。 aes-key：用下面代码生成 附录：AES Key生成 pro.shushi.pamirs.core.common.EncryptHelper加解密帮助类，默认支持AES、RSA类型的数据加解密方法，也可自定义其他类型的加解密方法。 System.out.println(EncryptHelper.getKey(EncryptHelper.getAESKey())); Step3 在pamirs-second-api新建一个SessionTenantApi实现类 只要在我们公共的jar包中构建类似DemoSessionTenant类就可以了，之所以要构建SessionTenantApi实现类是因为EIP是以租户信息做路由的。所以这里我们写死返回一个“pamirs”租户就好了。 记得要重新mvn install second工程，再刷新demo工程 package pro.shushi.pamirs.second.api.tenant; import org.springframework.core.annotation.Order; import org.springframework.stereotype.Component; import pro.shushi.pamirs.framework.session.tenant.api.SessionTenantApi; import pro.shushi.pamirs.meta.api.core.session.SessionClearApi; import pro.shushi.pamirs.meta.common.spi.SPI; @Order(99) @Component @SPI.Service public class DemoSessionTenant implements SessionTenantApi, SessionClearApi { public String getTenant() { return "pamirs"; } public void setTenant(String tenant) { } public void clear() { } } 开放接口（举例） Step1 用于演示的模型定义 package pro.shushi.pamirs.second.api.model; import pro.shushi.pamirs.meta.annotation.Field; import pro.shushi.pamirs.meta.annotation.Model; import pro.shushi.pamirs.meta.base.IdModel; @Model.model(TestOpenApiModel.MODEL_MODEL) @Model(displayName = "演示开放接口模型") public class TestOpenApiModel extends IdModel { public static final String MODEL_MODEL = "demo.second.TestOpenApiModel"; @Field.String @Field(displayName = "名称") private…

  史, 昂

  2024年5月23日

  1.9K000