深度分页问题优化方案

相关推荐

• 组件

  前端自定义组件之单页面步骤条

  本文将讲解如何通过自定义，实现单页面的步骤条组件。其中每个步骤的元素里都是界面设计器拖出来的。 实现路径 整体的实现思路是界面设计器拖个选项卡组件，自定义这个选项卡，里面的每个选项页都当成一步渲染出来，每一步的名称是选项页的标题。 1. 界面设计器拖出页面 我们界面设计器拖个选项卡组件，然后在每个选项页里拖拽任意元素。完成后点击右上角九宫格，选中选项卡，填入组件 api 名称，作用是把选项卡切换成我们自定义的步骤条组件，这里的 api 名称和自定义组件的 widget 对应。最后发布页面，并绑定菜单。 2. 组件实现 widget 组件重写了选项卡，核心函数 renderStep，通过 DslRender.render 方法渲染界面设计器拖拽的元素，每一步的 step 又是解析选卡页得到的。 import { SPI, Widget, DefaultTabsWidget, BasePackWidget, DslDefinition, DslRender, DslDefinitionType, CallChaining, customMutation } from '@oinone/kunlun-dependencies'; import { VNode } from 'vue'; import NextStepSinglePage from './NextStepSinglePage.vue'; @SPI.ClassFactory(BasePackWidget.Token({ widget: 'NextStepSinglePage' })) export class NextStepSinglePageWidget extends DefaultTabsWidget { public initialize(props) { super.initialize(props); this.setComponent(NextStepSinglePage); return this; } @Widget.Reactive() public get invisible() { return false; } // 配置的每一步名称，解析选项页的标题 @Widget.Reactive() public get titles() { return this.template?.widgets?.map((item) => item.title) || []; } // region 上一步下一步配置 // 步骤数组，数组里的元素即步骤要渲染的内容 @Widget.Reactive() public get steps(): DslDefinition[] { // 每个 tab 是一个步骤，这里会有多个步骤 // 每个步骤里有多个元素，又是数组 // 所以这里是二维数组 const tabDsls: DslDefinition[][] = this.template?.widgets.map((item) => item.widgets) || []; // 对每个步骤的子元素们，外侧包一层 row 布局，所以变回了一维数组 return tabDsls.map((tabDsl) => { return { …(this.template || {}), dslNodeType: DslDefinitionType.PACK, widgets: tabDsl, widget: 'row', resolveOptions: { mode: 1 } }; }); } // 渲染步骤，每个步骤有多个子元素 @Widget.Method() public renderStep(step: DslDefinition): VNode | undefined { return DslRender.render(step); } // region 校验相关 // 校验的钩子 @Widget.Reactive() @Widget.Inject('validatorCallChaining') protected parentValidatorCallChaining: CallChaining<boolean> | undefined; // 校验步骤表单 @Widget.Method() public async onValidator(): Promise<boolean> { const res = await this.parentValidatorCallChaining?.syncCall(); return res…

  银时

  2025年7月8日

  625000
• Oinone FAQ

  Oinone 是什么

  1.Oinone能做什么？ Oinone 是一款专注解决复杂业务场景的开源低代码应用平台，旨在提供所见即所得的快速可视化搭建应用功能，并打造企业专属的低代码平台。 提升交付效率，缩短交付周期； 减少人力投入，解决技术人才招聘难的难题； 减少接联调，减少重复建设，解决质量管控难题； 一键轻松安装，应用全生命周期管理，解决应用管理难题； 2.为什么要用Oinone？ 用Oinone低代码平台可以帮助企业应对竞争变化、适应业务变化、满足技术需求、提高研发效率，并且低代码平台已经成为企业数字化转型的核心工具之一。 企业竞争变化，从单一企业变相兼职链的网络竞争; 业务变化，从信息化时代，内部/管理/流程、结果，变向数字时代，外部/商业，运营; 技术更替，从主球稳定，安全，功能丰富可配置到系统性能极限承载能力与弹性扩容/随需而变，需求响应速度、智能;化、实时分析，数据与业务的联动，用户体验，B端的业务需求C端的体验; 对研发人员的需求越来越大，同时要求越来越高。低代码平台是提升研发效率，降低研发成本核心手段; 低代码的地位已经从辅助走向核心; 3.Oinone 和其他的无代码平台相比优势是什么 既支持无代码的拖拉拽，还能通过研发框架支持自主工程研发; 低代码和无代码在贯彻了整个软件的生命周期，在不同场景发挥不同价值; 可基于软件工程理论，进行科学管理； 不改变研发习惯，主流开源技术栈，无抵触心理 4.我是软件公司，用不用Oinone？ 软件公司非常适合使用 Oinone,不管你是做标品还是定制项目，都非常适合使用Oinone 低代码：构建软件快速开发标准，让研发专注在业务创新本身 快速实施个性化需求、或开发简单和应急应用 5.我们公司产品迭代很快，用不用Oinone？ 无代码：使用Oinone 可以快速的响应需求，以及后续迭代需求； 集成平台：快速的是实施集成方案，一次配置，终身受用； 低代码：降低技术复杂度，提升研发效率，让研发专注于业务本身； 6.我们公司产品bug很多，用不用Oinone？ 很多公司都有这样的痛点，一直有BUG ，反复修反复出现，重构成本非常大，比如项目预算有限，无法支撑重新构建，技术栈老旧，研发人员比较少，Oinone 提供以下解决方案： 同步原系统数据回流处理后数据； 原系统数据扩展处理新业务逻辑； 7..我用的是JAVA 技术栈，我还需要用Oinone么？ 在探讨低代码平台的合作时，首先需要确认的是，如果您之前使用的是Java技术栈，那么低代码平台是否能够生成相应的Java代码，包括常用的增删改查等方法。这种代码生成器与低代码平台的第一种方式——代码生成器相似，它提供了基础逻辑的生成。 针对这一层面，Oinone平台具有几个显著优势。首先，后端定义的模型或写法不仅决定了后端的数据处理，同时也影响了前端的UI展示层。其次，当前端开发时加入特定的注解，这些注解的本质是为了收集原始数据。一旦数据源被定义，编写的代码在最终运行时实际上已经转变为数据。这是与传统代码编写方式的第二个不同点。第三，尽管我们提供了代码编写的方式，但这样做的核心目的在于解决标准化产品与个性化需求之间的矛盾。在进行功能扩展时，对于工程架构和代码编写的冲击较大。 oinone的核心优势在于减少代码生成量，内置代码规范，并实现前后端无需联调。此外，无代码设计器能够理解用代码构建的模型或函数，并与之结合。 在前端方面，低代码平台也提供了相应的工程结构，允许通过添加平台依赖来引入平台功能。前端的自定义能力包括自定义模板、布局和页面，以及完全自定义视图的能力。此外，平台支持前端与后端的交互自定义，以及自定义字段的引入。 总结来说，后端定义的模型不仅决定了数据存储结构和扩展方式，还决定了前端的UI展示，并能与无代码平台结合。引入TypeScript（TS）的概念，可以帮助团队最大化逻辑复用，解决了业务组件难以沉淀的问题。通过这种方式，前后端的结合更为紧密，减少了联调的需求，提高了开发效率。

  shao

  2022年3月14日

  1.1K000
• 集成设计器

  集成开放-开放接口如何鉴权加密

  使用前提 已经阅读过文档【oinone 7天从入门到精通】的6.2章节-集成平台 已经依赖了内置模块集成平台eip和集成设计器eip_designer 一、为调用方创建应用 方式一: 通过集成设计器创建 可以选择开发接口列表中哪些接口授权该应用开放使用 方式二: 通过手动请求创建 curl –location 'http://127.0.0.1:8190/pamirs/eip' \ –header 'Content-Type: application/json' \ –header 'Cookie: pamirs_uc_session_id=3b3ed2fcade84fc49f2d94146a7694a0' \ –data '{"query":"mutation {\n eipApplicationProxyProxyMutation {\n create(data: {name: \"testOpen\", encryptType: RSA, description: \"test\"}) {\n name\n encryptType\n description\n openInterfaceList {\n name\n interfaceName\n id\n }\n appKey\n }\n }\n}\n","variables":{}}' 应用创建完成后，可以在表格页面开启使用，再通过查看密钥拿到appKey和appSecret 创建成功后可以获取到应用的appKey和appSecret 二、根据appKey和appSecret获取accessToken curl –location 'http://127.0.0.1:8094/openapi/get/access-token' \ –header 'Content-Type: application/x-www-form-urlencoded' \ –data-urlencode 'appKey=c65a8d76a93f4427b3702c55903ddda2' \ –data-urlencode 'appSecret=W2cMGZ0X6Av0kQOoKT4TWTaBalXkGsignr1M0Yi7+JJWJHVniiTz2mb9THGA7W5F' 三、验证请求 header中的signature签名参数在使用代码调用的时候需要使用教程中的SignUtil.signTopRequest()工具方法生成 curl –location 'http://127.0.0.1:8094/openapi/pamirs/queryById4Open' \ –header 'accessToken: T1SSd8aiJCFhsTyQepLCzRqcVsDH3wTjg9srXEZTp/QwsXdMnjf5OE1Nq/UYfEDp' \ –header 'signature: A1A958E1843E26BA002901058B2964C3' \ –header 'Content-Type: application/json' \ –data '{ "id": "111" }' 示例代码 eip开放接口md5加密参数示例代码此为md5加密方式的示例，解压后，将里面api目录下的文件复制到自有主工程的api子工程下，core目录下的文件复制到自有主工程的core子工程下

  nation

  2024年5月31日

  849000
• 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.1K000
• 后端部署

  如何配置文件存储地址为相对路径

  介绍 大部分情况下，文件存储的配置都会配置uploadUrl和downloadUrl的值，这样图片和文件类型的业务字段会存储带域名的全路径文件地址，但是有些场景需要用户在专有内网的时候访问内网的文件存储地址，用户在公网的时候通过公网访问（一般情况下这个公网ip内部最后还是会转发到内网）文件存储地址，这个时候就要求存在数据库字段里的不能是全路径的地址，只能是想相对路径，这个时候可以通过前端访问的域名用nginx转发当前域名下的文件请求到所匹配环境的ip内的文件存储服务。 配置参考 cdn: oss: name: 本地文件NG系统 type: LOCAL bucket: pamirs # 此处可以不配置值，也可以配置相对路径前缀方便做转发 uploadUrl: downloadUrl: validTime: 3600000 timeout: 600000 active: true referer: localFolderUrl: /test/static 文件上传的路径同步配置nginx转发 location ~ /file/upload { // 此处配置为后端服务的ip+端口 proxy_pass http://127.0.0.1:8190; proxy_set_header X-Real-IP $remote_addr; proxy_set_header REMOTE-HOST $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } excel导入场景相对路径在后端代码内无法保存导入的文件 在导入任务的前置hook处理相对文件路径的前缀 package pro.shushi.pamirs.demo.core.hook; import org.apache.commons.lang.StringUtils; import org.springframework.stereotype.Component; import pro.shushi.pamirs.file.api.FileModule; import pro.shushi.pamirs.file.api.model.ExcelImportTask; import pro.shushi.pamirs.meta.annotation.Hook; import pro.shushi.pamirs.meta.api.core.faas.HookBefore; import pro.shushi.pamirs.meta.api.dto.fun.Function; @Component public class DemoExcelImportTaskActionHookBefore implements HookBefore { // 内网访问文件的地址 public static final String INNER_HOST = "http://127.0.0.1:6800"; @Override @Hook(module = {FileModule.MODULE_MODULE}, model = {ExcelImportTask.MODEL_MODEL}, fun = {"createImportTask"}) public Object run(Function function, Object… args) { if (args.length > 0) { ExcelImportTask excelImportTask = (ExcelImportTask) args[0]; if (excelImportTask != null && excelImportTask.getFile() != null && StringUtils.isNotBlank(excelImportTask.getFile().getUrl())) { excelImportTask.getFile().setUrl(INNER_HOST + excelImportTask.getFile().getUrl()); } } return null; } } 注意事项 上面的例子为本地文件NG系统的，如果是阿里云oss、7牛云等第三方文件存储服务，downloadUrl可以按上面方案直接配置，uploadUrl还是要按正常配置

  nation

  2024年6月21日

  1.6K000