相关推荐

• Oinone 7天入门到精通

  4.2.6 框架之网络请求-拦截器

  在整个http的链路中，异常错误对前端来说尤为重要，他作用在很多不同的场景，通用的比如500, 502等; 一个好的软件通常需要在不同的错误场景中做不同的事情。当用户cookie失效时，希望能自动跳转到登录页；当用户权限发生变更时，希望能跳转到一个友好的提示页；那么如何满足这些个性化的诉求呢？接下来让我们一起了解oinone前端网络请求-拦截器。 一、入口 在src目录下main.ts中可以看到VueOioProvider，这是系统功能提供者的注册入口 图4-2-6-1 VueOioProvider import interceptor from './middleware/network-interceptor'; VueOioProvider( { http: { callback: interceptor } }, [] ); 图4-2-6-2 拦截器的申明入口 二、middleware 在项目初始化时使用CLI构建初始化前端工程，在src/middleware有拦截器的默认实现： 图4-2-6-3 在src/middleware有拦截器的默认实现 三、interceptor interceptor在请求返回后触发，interceptor有两个回调函数，error和next error参数 graphQLErrors 处理业务异常 networkError 处理网络异常 next extensions 后端返回扩展参数 const interceptor: RequestHandler = (operation, forward) => { return forward(operation).subscribe({ error: ({ graphQLErrors, networkError }) => { console.log(graphQLErrors, networkError); // 默认实现 => interceptor error }, next: ({ extensions }) => { console.log(extensions); // 默认实现 => interceptor next }, }); }; 图4-2-6-4 后端返回扩展参数 四、interceptor error // 定义错误提示等级 const DEFAULT_MESSAGE_LEVEL = ILevel.ERROR; // 错误提示等级 对应提示的报错 const MESSAGE_LEVEL_MAP = { [ILevel.ERROR]: [ILevel.ERROR], [ILevel.WARN]: [ILevel.ERROR, ILevel.WARN], [ILevel.INFO]: [ILevel.ERROR, ILevel.WARN, ILevel.INFO], [ILevel.SUCCESS]: [ILevel.ERROR, ILevel.WARN, ILevel.INFO, ILevel.SUCCESS], [ILevel.DEBUG]: [ILevel.ERROR, ILevel.WARN, ILevel.INFO, ILevel.SUCCESS, ILevel.DEBUG] }; // 错误提示通用函数 const notificationMsg = (type: string = 'error', tip: string = '错误', desc: string = '') => { notification[type]({ message: tip, description: desc }); }; // 根据错误等级 返回错误提示和类型 const getMsgInfoByLevel = (level: ILevel) => { let notificationType = 'info'; let notificationText = translate('kunlun.common.info'); switch (level) { case ILevel.DEBUG: notificationType = 'info'; notificationText = translate('kunlun.common.debug'); break; case ILevel.INFO: notificationType = 'info'; notificationText = translate('kunlun.common.info'); break;…

  史, 昂

  2024年5月23日

  1.3K000
• Oinone 7天入门到精通

  4.2.2 框架之MessageHub

  一、MessageHub 请求出现异常时，提供”点对点“的通讯能力 二、何时使用 错误提示是用户体验中特别重要的组成部分，大部分的错误体现在整页级别，字段级别，按钮级别。友好的错误提示应该是怎么样的呢？我们假设他是这样的 与用户操作精密契合 当字段输入异常时，错误展示在错误框底部 按钮触发服务时异常，错误展示在按钮底部 区分不同的类型 错误 成功 警告 提示 调试 简洁易懂的错误信息 在oinone平台中，我们怎么做到友好的错误提示呢？接下来介绍我们的MessageHub，它为自定义错误提示提供无限的可能。 三、如何使用 订阅 import { useMessageHub, ILevel } from "@kunlun/dependencies" const messageHub = useMessageHub('当前视图的唯一标识'); /* 订阅错误信息 */ messageHub.subscribe((errorResult) => { console.log(errorResult) }) /* 订阅成功信息 */ messageHub.subscribe((errorResult) => { console.log(errorResult) }, ILevel.SUCCESS) 图4-2-2-1 订阅的示例代码 销毁 /** * 在适当的时机销毁它 * 如果页面逻辑运行时都不需要销毁，在页面destroyed是一定要销毁，重要！！！ */ messageHub.unsubscribe() 图4-2-2-2 销毁的示例代码 四、实战 让我们把3.5.7.5【自定义视图-表单】一文中的自定义表单进行改造，加入我们的messageHub，模拟在表单提交时，后端报错信息在字段下方给予提示。 Step1 （后端）重写PetType的创建函数 重写PetType的创建函数，在创建逻辑中通过MessageHub返回错误信息，返回错误信息的同时要设置paths信息方便前端处理 @Action.Advanced(name = FunctionConstants.create, managed = true) @Action(displayName = "确定", summary = "创建", bindingType = ViewTypeEnum.FORM) @Function(name = FunctionConstants.create) @Function.fun(FunctionConstants.create) public PetType create(PetType data){ List<Object> paths = new ArrayList<>(); paths.add("demo.PetType"); paths.add("kind"); PamirsSession.getMessageHub().msg(new Message().msg("kind error").setPath(paths).setLevel(InformationLevelEnum.ERROR).setErrorType(ErrorTypeEnum.BIZ_ERROR)); List<Object> paths2 = new ArrayList<>(); paths2.add("demo.PetType"); paths2.add("name"); PamirsSession.getMessageHub().msg(new Message().msg("name error").setPath(paths2).setLevel(InformationLevelEnum.ERROR).setErrorType(ErrorTypeEnum.BIZ_ERROR)); // data.create(); return data; } 图4-2-2-3 （后端）重写PetType的创建函数 Step 2 修改PetForm.vue <template> <div class="petFormWrapper"> <form :model="formState" @finish="onFinish"> <a-form-item label="品种种类" id="name" name="kind" :rules="[{ required: true, message: '请输入品种种类!', trigger: 'focus' }]"> <a-input v-model:value="formState.kind" @input="(e) => onNameChange(e, 'kind')" /> <span style="color: red">{{ getServiceError('kind') }}</span> </a-form-item> <a-form-item label="品种名" id="name" name="name" :rules="[{ required: true, message: '请输入品种名!', trigger: 'focus' }]"> <a-input v-model:value="formState.name" @input="(e) => onNameChange(e, 'name')" /> <span style="color: red">{{ getServiceError('name') }}</span> </a-form-item> </form> </div> </template>- <script lang="ts"> import { defineComponent, reactive…

  史, 昂

  2024年5月23日

  1.4K000

• 4.1.15 框架之网关协议

  一、多端协议 协议内容格式 请求头 头信息 headerMap "sec-fetch-mode" -> "cors" "content-length" -> "482" "sec-fetch-site" -> "none" "accept-language" -> "zh-CN,zh;q=0.9" "cookie" -> "pamirs_uc_session_id=241af6a1dbba41a4b35afc96ddf15915" "origin" -> "chrome-extension://flnheeellpciglgpaodhkhmapeljopja" "accept" -> "application/json" "host" -> "127.0.0.1:8090" "connection" -> "keep-alive" "content-type" -> "application/json" "accept-encoding" -> "gzip, deflate, br" "user-agent" -> "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.192 Safari/537.36" "sec-fetch-dest" -> "empty" 图4-1-15-1 头信息 headerMap 请求地址 requestUrl 例如 http://127.0.0.1:8090/pamirs/DemoCore?scene=redirectListPage HTTP参数键值对 parameterMap url中queryString在服务端最终会转化为参数键值对。 请求体格式 请求体格式采用GraphQL协议。请求体格式分为API请求和上下文变量。以商品的test接口为例，请求格式如下。 API请求格式 query{ petShopProxyQuery { queryPage(page: {currentPage: 1, size: 1}, queryWrapper: {rsql: "(1==1)"}) { content { income id code creater { id nickname } relatedShopName shopName petTalents { id name } items { id itemName } } size totalPages totalElements } } } 图4-1-15-2 API请求格式 上下文变量 variables 请求策略requestStrategy 名称 类型 说明 checkStrategy CheckStrategyEnum 校验策略：RETURN_WHEN_COMPLETED -?全部校验完成再返回结果RETURN_WHEN_ERROR -?校验错误即返回结果 msgLevel InformationLevelEnum 消息级别：DEBUG("debug", "调试", "调试"),INFO("info", "信息", "信息"),WARN("warn", "警告", "警告"),SUCCESS("success", "成功", "成功"),ERROR("error", "错误", "错误")不设置，则只返回错误消息；上方消息级别清单，越往下级别越高。只有消息的级别高于或等于该设定级别才返回，否则会被过滤。 onlyValidate Boolean 只校验不提交数据 表4-1-15-1 请求策略requestStrategy 上下文变量式例如下。 { "requestStrategy": { "checkStrategy": "RETURN_WHEN_COMPLETED", "msgLevel":"INFO" } } 图4-1-15-3 上下文变量式例 响应体格式 协议响应内容包括data、extensions和errors三部分，extensions和errors是可缺省的。data部分为业务数据返回值。应用业务层可以在extensions中添加API返回值之外的扩展信息。extensions中包含success、messages和extra三部分，success标识请求是否成功。如果业务正确处理并返回，则errors部分为空；如果业务处理返回失败，则将错误信息添加到errors中。 正确响应格式示例如下。 { "data": { "petShopProxyQuery": { "queryPage": { "content": [ { "id": "246675081504233477", "creater": { "id": "10001" }, "relatedShopName": "oinone宠物店铺001", "shopName": "oinone宠物店铺001", "petTalents": […

  史, 昂

  Oinone 7天入门到精通 2024年5月23日

  1.1K000
• Oinone 7天入门到精通

  3.3.7 字段之序列化方式

  本文核心是带大家全面了解oinone的序列方式，包括支持的序列化类型、注意点、如果新增客户化序列化方式以及字段默认值的反序列化。 一、数据存储的序列化 (举例) 使用@Field注解的serialize属性来配置非字符串类型属性的序列化与反序列化方式，最终会以序列化后的字符串持久化到存储中。 ### Step1 新建PetItemDetail模型、并为PetItem添加两个字段 PetItemDetail继承TransientModel，增加两个字段，分别为备注和备注人 package pro.shushi.pamirs.demo.api.tmodel; import pro.shushi.pamirs.meta.annotation.Field; import pro.shushi.pamirs.meta.annotation.Model; import pro.shushi.pamirs.meta.base.TransientModel; import pro.shushi.pamirs.user.api.model.PamirsUser; @Model.model(PetItemDetail.MODEL_MODEL) @Model(displayName = "商品详情",summary = "商品详情",labelFields = {"remark"}) public class PetItemDetail extends TransientModel { public static final String MODEL_MODEL="demo.PetItemDetail"; @Field.String(min = "2",max = "20") @Field(displayName = "备注",required = true) private String remark; @Field(displayName = "备注人",required = true) private PamirsUser user; } 图3-3-7-1 PetItemDetail继承TransientModel 修改PetItem，增加两个字段petItemDetails类型为List和tags类型为List，并设置为不同的序列化方式，petItemDetails为JSON（缺省就是JSON，可不配），tags为COMMA。同时设置 @Field.Advanced(columnDefinition = varchar(1024))，防止序列化后存储过长 package pro.shushi.pamirs.demo.api.model; import pro.shushi.pamirs.demo.api.tmodel.PetItemDetail; import pro.shushi.pamirs.meta.annotation.Field; import pro.shushi.pamirs.meta.annotation.Model; import pro.shushi.pamirs.meta.enmu.NullableBoolEnum; import java.math.BigDecimal; import java.util.List; @Model.model(PetItem.MODEL_MODEL) @Model(displayName = "宠物商品",summary="宠物商品",labelFields = {"itemName"}) public class PetItem extends AbstractDemoCodeModel{ public static final String MODEL_MODEL="demo.PetItem"; @Field(displayName = "商品名称",required = true) private String itemName; @Field(displayName = "商品价格",required = true) private BigDecimal price; @Field(displayName = "店铺",required = true) @Field.Relation(relationFields = {"shopId"},referenceFields = {"id"}) private PetShop shop; @Field(displayName = "店铺Id",invisible = true) private Long shopId; @Field(displayName = "品种") @Field.many2one @Field.Relation(relationFields = {"typeId"},referenceFields = {"id"}) private PetType type; @Field(displayName = "品种类型",invisible = true) private Long typeId; @Field(displayName = "详情", serialize = Field.serialize.JSON, store = NullableBoolEnum.TRUE) @Field.Advanced(columnDefinition = "varchar(1024)") private List<PetItemDetail> petItemDetails; @Field(displayName = "商品标签",serialize = Field.serialize.COMMA,store = NullableBoolEnum.TRUE,multi = true) @Field.Advanced(columnDefinition = "varchar(1024)") private…

  史, 昂

  2024年5月23日

  1.3K000
• Oinone 7天入门到精通

  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.6K000