深度分页问题优化方案

相关推荐

• Oinone 7天入门到精通

  5.8 商业支撑之执行域

  一、基础介绍 执行域包括两个核心一是订单的产生，二是订单的履约。往往品牌商既有自营渠道（包括2c、2b）、又有第三方渠道。那么有两种设计思路： 把第三方渠道的订单当作自有渠道的订单产生一种特殊方式，开放订单创建接口，并统一履约。 好处：简单，在3方渠道不多、且自有渠道单一，并且逻辑相识时系统结构会简单 坏处： 当3方渠道的履约方式、库存分配方式、逆向逻辑等有差异时，会让自有渠道参杂很多不相干的逻辑引入不必要的复杂度 自有渠道不够独立和纯粹，自有渠道多样化时难以支撑 把商家自营渠道假设为特殊的第三方渠道，再建立统一的订单管理系统来对接渠道订单，并完成履约 好处：交易与履约逻辑分离，对未来发展有扩展性 坏处：引入一定复杂度 我们采用的是第二套方案，整体结构简易图如下 图5-8-1 方案整体结构简易图 二、模型介绍 图5-8-2 模型介绍 核心设计逻辑 首先我们看到上图交易域和履约域有很多相同父模型的子模型，交易域和履约域的父模型在CDM的在himalaya-trade里。履约域看oms（libra）对himalaya-trade扩展，交易域看b2c（leo）和b2b（aries）对对himalaya-trade扩展。libra、leo、aries是我们对上层业务产品的命名，取自黄道十二星座 交易域是多商家平台视角设计，有自身渠道必要的履约相关信息，完成自闭环。 履约域是从单一商家对接多渠道视角设计，有渠道交易订单同步后完成履约发货相关设计，完成自闭环。 履约域的合单拆单发货设计，渠道订单只能合单为履约单不可拆，履约单可以拆单发货不可合。用m2o和o2m的组合设计来降低难度，而非采用两个m2m的设计。

  史, 昂

  2024年5月23日

  1.4K000
• 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.8K000
• 前后端标准研发流程及工程合理

  后端工程合理注意事项

  相关知识点文档： https://doc.oinone.top/jia-gou-kai-fa/15943.html

  shao

  2024年10月5日

  1.2K000
• 界面设计器

  【界面设计器】左树右表

  阅读之前 你应该： 熟悉模型的增删改查相关内容。【界面设计器】模型增删改查基础 名词解释 主体：在视图中提供数据源的主要组件，并且所有动作都围绕着该主体展开。 一级搜索：在表格视图中，上方直观可见的搜索区，为表格提供筛选功能。 二级搜索：与一级搜索不同的是，其搜索条件是通过某些组件的行为追加到一级搜索条件之上的筛选功能。 概述 平台中对于左树右表提供了两种类型的展示形式。 在表格视图中的左树右表，是以表格为主体，树组件为表格提供了二级搜索功能。选中树节点时将对表格追加节点的搜索条件，并重新执行查询。 在树视图中，是以树为主体，其展开的视图可以是表格、表单、详情等其他视图。 PS：不论是树、级联这些视图组件，还是树选择、级联这些字段组件，其配置数据结构的方式是不尽相同的。唯一的区别在于最终到达的目标模型来源不同。 场景1 为了方便接下来的描述，我们需要先构建一个基本的业务场景，这个场景中包含【商品】和【商品类目】两个模型。 在【商品】的表格左侧添加【商品类目】树，选择某个商品类目后，可以根据商品类目进行筛选，查询所属类目下的全部商品。 其中【商品类目】使用【卡片级联】的展示方式进行管理。 其模型定义如下： 商品（Item） 名称 API名称 业务类型 是否多值 长度(单值长度) 关联模型 关联字段 ID id 整数 否 – – – – 编码 code 文本 否 128 – – – 名称 name 文本 否 128 – – 所属类目 category 多对一 否 – 商品类目（ItemCategory） categoryId – id 所属类目ID categoryId 整数 否 – – – 商品类目（ItemCategory） 名称 API名称 业务类型 是否多值 长度(单值长度) 关联模型 关联字段 ID id 整数 否 128 – – 编码 code 文本 否 128 – – – 名称 name 文本 否 128 – – 上级类目 parent 多对一 是 – 商品类目（ItemCategory） parentId – id 上级类目ID parentId 整数 否 – – – PS：实际业务场景中，【商品类目】通常使用编码进行关联，即parentCode – code；不仅如此，通常还会添加treeCode字段，以此来实现高效查询当前节点的所有子节点的能力。在演示模型中，我们不必关注这些内容。 创建【商品】视图 设置联动关系 这里我们需要配置的是【商品类目】的树结构，因此，在【第1级关联】中的模型选择【商品类目】。 在【商品类目】中是通过【上级类目】进行的自关联，因此，在【第1级关联】中的【自关联关系字段】选择【上级类目】。 在选中【商品类目】节点后，需要对右侧表格发起查询。其筛选条件是通过【商品】中的【所属类目】进行筛选的。因此，在【第1级关联】中的【表格关联关系字段】选择【所属类目】。那么，在表格发起查询前，会根据【所属类目】字段的关联关系配置自动添加筛选条件。 配置如下图所示： 创建【商品类目】视图 设置联动关系 这里我们需要配置的是【商品类目】的树结构（级联只是树结构的另一种表现形式） 细心的同学可能发现这里没有【表格关联关系字段】，因此，我们仅需配置【自关联关系字段】即可。 配置如下图所示： 为【商品类目】添加增删改查基础功能 与表格视图不同的是，行内动作区被放在了第一个卡片中的动作区，其他配置方式完全一致。 在这里需要理解的是，一个树节点对应的是表格中的一行。 【商品类目】使用展开视图进行编辑（可选） 打开【支持展开视图】开关，并设置展开视图。这里我们用表单视图进行编辑操作。 和其他表单一样，我们将必要的字段和动作拖入对应区域即可。 由于展开视图只会在选中节点时出现，因此我们仅需提供更新功能即可。 这里需要注意： 提交动作默认打开了【返回上一页】的功能，在当前场景中，更新动作提交数据后，没有上一页需要返回，因此需要关闭【返回上一页】的开关。 提交动作默认打开了【刷新当前视图】的功能，在当前场景中，更新按钮处于【展开视图】中，仅刷新当前视图是不够的，当数据发生变更时，我们需要将级联组件一并刷新，因此需要打开【刷新主视图】的开关。 PS：【编辑】动作和【展开视图编辑】功能是重复的，在使用时应该只选择其中一种。 【商品类目】限制仅支持四级，并为每一个卡片添加标题（可选） 移除【第1级关联】中的【自关联关系字段】，依次添加2、3、4级关联，选择【商品类目】模型，将自动选中【层级关联关系字段】为【上级类目】，并输入每一级关联的标题即可。 这里需要注意的是，在【第1级关联】中需要添加筛选条件，使其只能查询到根节点。 PS：这里的限制仅为交互上的限制，在创建/更新时，如果可以在服务端限制上级类目的选择，以及数据提交时的校验，效果更佳。 【商品类目】的【创建/编辑】使用弹窗打开（可选） 有时我们希望用户在页面中的操作尽可能的流畅，在表单规模较小的情况下，我们也可以使用【弹窗/抽屉】这类交互来优化用户体验。 小贴士： 弹窗打开的方式提供三种页面设计模式，绑定已有页面、使用新页面、复制已有页面。 使用新页面和复制已有页面的方式只能进行一次性的视图设计，无法进行复用。 使用绑定已有页面的方式可以使得视图进行复用，但复用的视图也只能同步弹窗的内容部分，弹窗底部的动作仅会在创建动作时复制一次。 跳转动作的打开方式以及页面设计模式等属于元数据信息，无法通过属性面板进行修改，因此只能通过重新创建新动作的方式进行修改。 鉴于业务的复杂和多变，通常情况下我们只采用【绑定已有页面】的方式为弹窗设计内容部分。这样在交互发生变更时，可以更好的适应变化。 场景2 为了方便接下来的描述，我们需要再构建一个基本的业务场景，这个场景中包含【公司】和【部门】两个模型。 【公司】模型的管理能力使用标准的【增删改查】视图。（此处不进行演示） 在【部门】的表格左侧添加【公司】-【部门】树，在选择某个公司后，可以根据所属公司进行筛选，查询所属公司下的全部部门。在选择某个部门后，可以根据上级部门进行筛选，查询该部门下的子部门（不包含子部门的子部门）。 PS：如这里要求查询该部门下的全部子部门，需要服务端配合。 其模型定义如下： 公司（Company） 名称 API名称 业务类型 是否多值 长度(单值长度) 关联模型 关联字段 ID id 整数 否 – – – – 编码 code 文本 否 128 – – – 名称 name 文本…

  nation

  2023年11月1日

  5.1K002
• 部署

  流程设计器部署注意事项

  准备部署环境所需数据 导出开发/测试环境用到的设计器的的元数据json、设计器业务数据json、自定义组件json在业务工程中准备安装代码 安装元数据json 安装设计器业务数据json 安装自定义组件json 【重要】上线后业务工程中安装工作流元数据和流程设计器数据的代码注释掉，防止已经设置过的流程被重写覆盖 参考文档 流程设计器的导入导出 界面设计器的导入导出 数据可视化的导入导出 确认生产的项目证书和设计器证书已经获取到并配置正确 证书配置方式 通过yml配置 logging: level: # schedule日志过滤，减少不必要的日志 com.taobao.pamirs.schedule.taskmanager.TBScheduleManagerStatic: error pamirs: license: #改成平台提供证书的路径以及subject subject: xxxx path: – licence/xxxx_boot.lic java -jar通过启动参数配置-Dsubject=xxx -Dlicense=/aaa/bb/c.lic 参考文档 pamirs-license 许可证使用常见问题 yml配置 【重要】流程设计器和项目基础环境必须一致， 包括(redis、数据库)。其中数据库的配置要求，相同模块指向的数据源必须相同，通过ds-map指定。 【重要】zk的rootPath 、mq的topic-prefix、schdule的ownSign 配置跟业务工程保持不一致【影响流程发布后重复触发】 【重要】流程设计器若和项目部署在同一台机器上，则 工作流和项目的sql_record的配置(pamirs.record.sql.store)必须分开，否则可能导致工作流任务重复。 spring: rocketmq: name-server: 127.0.0.1:9876 #ACL配置 #accesskey: xxxx #secretkey: xxx pamirs: zookeeper: zkConnectString: 127.0.0.1:2181 zkSessionTimeout: 60000 rootPath: /my_zk event: notify-map: system: ROCKETMQ biz: ROCKETMQ logger: ROCKETMQ enabled: true schedule: enabled: true ownSign: my_own_sign ds-map确认，设计器内公共业务模块和业务工程的业务模块的ds-key需要一致，实际的数据源也需要一致 确认业务工程和设计器的配置项pamirs:record:sql:store的值，2个配置文件里的值需要是不一样的 pamirs: record: sql: store: /aaa/bbb 部署方式确认 Jar包部署方式 前端引入相关依赖 业务工程的前端需要依赖流程设计器 前端package.json新增依赖"@kunlun/workflow-designer": "~4.7.0" 在main.ts的VueOioProvider()方法执行前导入依赖 import '@kunlun/workflow-designer/dist/kunlun-workflow-designer.css'; import '@kunlun/workflow-designer'; VueOioProvider( { dependencies: { vue: import('vue'), lodashEs: import('lodash-es'), antDesignVue: import('ant-design-vue'), antDesignIconsVue: import('@ant-design/icons-vue'), elementPlusIconsVue: import('@element-plus/icons-vue'), elementPlus: import('element-plus'), kunlunDependencies: import('@kunlun/dependencies'), kunlunVueUiAntd: import('@kunlun/vue-ui-antd'), kunlunVueUiEl: import('@kunlun/vue-ui-el'), antvDataSet: import('@antv/data-set'), antvG2: import('@antv/g2'), echarts: import('echarts') } } ); 后端工作流设计器Jar包方式启动，后端无代码设计器Jar包启动方法 docker镜像部署方式 线上允许部署流程设计器镜像，直接通过镜像运行后容器的id+端口访问设计器 部署完成后，已设计的流程需要重新选择的地方 触发字段 所有自定义函数 审批人/转交人，模型相关选的字段 检查工作流触发是否正常

  nation

  2024年5月28日

  2.5K000