深度分页问题优化方案

相关推荐

• 前端

  前端自定义字段与视图最佳方案

  自定义视图获取数据 在某些情况下，oinone 提供的默认视图无法满足需求，这时我们就需要自定义视图。通常，虽然视图的 UI 不足以满足要求，但数据结构是不变的。此时，重点是修改页面 UI，数据的请求与回填可以利用平台默认的能力。 如何实现？ 界面设计器的使用 你可以通过界面设计器先配置页面，平台在运行时会根据设计器生成对应的 GraphQL 请求，并自动回填数据。 视图的数据结构 视图的数据类型分为可以分为 Object 跟 List Object 代表当前视图的数据结构是对象 List 代表当前视图的数据结构是数组。 如果我们将 Object 跟 List 分的更细一点就变成了这样： 1: Object: 对象，代表当前视图的数据结构是单个对象，例如：表单视图、详情视图1: List: 对象数组，代表当前视图的数据结构数组，例如：表格视图、卡片视图、画廊视图 视图类型 平台组件 数据属性 表格视图 TableWidget dataSource 画廊视图 GalleryWidget dataSource 表单视图 FormWidget formData 详情视图 DetailWidget formData 自定义视图时，需要先确认当前视图的类型，再通过界面设计器进行页面配置。前端部分只需继承相应的组件，平台底层会自动处理接口数据的获取与回填。 表单视图示例： import Form from './Form.vue'; // 自定义表单视图 @SPI.ClassFactory( BaseElementWidget.Token({ widget: 'custom-form' }) ) export class CustomForm extends FormWidget { public initialize(props: Props) { super.initialize(props); this.setComponent(Form); return this; } } Vue 组件： <template></template> <script lang="ts"> export default defineComponent({ props: { formData: { // 当前表单的数据 type: Object, default: () => ({}) } } }); </script> 自定义layout // 原始的layout模版 <view type="FORM"> <element widget="actionBar" slot="actionBar" slotSupport="action"> <xslot name="actions" slotSupport="action" /> </element> <element widget="form" slot="form"> <xslot name="fields" slotSupport="pack,field" /> </element> </view> //自定义的layout模版 <view type="FORM"> <element widget="actionBar" slot="actionBar" slotSupport="action"> <xslot name="actions" slotSupport="action" /> </element> <element widget="custom-form" slot="form"> <xslot name="fields" slotSupport="pack,field" /> </element> </view> 其实就是把 widget="form" 改成 widget="custom-form" 表格视图示例： import Table from './Table.vue'; // 自定义表格视图 @SPI.ClassFactory( BaseElementWidget.Token({ widget: 'custom-table' }) ) export class CustomTable extends TableWidget { public initialize(props: Props) { super.initialize(props); this.setComponent(Table); return this; } } Vue 组件： <template></template> <script…

  汤乾华

  2024年10月17日

  1.5K002
• 后端

  【DM】后端部署使用Dameng数据库（达梦）

  达梦数据库配置 驱动配置 达梦数据库的服务端版本和驱动版本需要匹配，建议使用服务端安装时提供的jdbc驱动，不要使用官方maven仓库中的驱动。 报错 表 xx 中不能同时包含聚集 KEY 和大字段，建表的时候就指定非聚集主键。SELECT * FROM V$DM_INI WHERE PARA_NAME = ‘PK_WITH_CLUSTER’;SP_SET_PARA_VALUE(1,’PK_WITH_CLUSTER’,0) Maven配置 DM8（目前maven仓库最新版本） <dm.version>8.1.2.192</dm.version> <dependency> <groupId>com.dameng</groupId> <artifactId>DmJdbcDriver18</artifactId> <version>${dm.version}</version> </dependency> PS: 8.1.3.12版本驱动需要手动上传到nexus仓库使用，本文包含该版本相关内容。 Maven配置 DM7 <dm7.version>7.6.1.120</dm7.version> <dependency> <groupId>com.dameng</groupId> <artifactId>Dm7JdbcDriver18</artifactId> <version>${dm7.version}</version> </dependency> PS: 7.6.1.120版本驱动需要手动上传到nexus仓库使用，本文包含该版本相关内容。 离线驱动下载 Dm7JdbcDriver18-7.6.1.120.jarDmJdbcDriver18-8.1.3.12.jar JDBC连接配置 pamirs: datasource: base: type: com.alibaba.druid.pool.DruidDataSource driverClassName: dm.jdbc.driver.DmDriver # url: jdbc:dm://127.0.0.1:5236/BASE?clobAsString=true&useUnicode=true&characterEncoding=utf8&compatibleMode=mysql url: jdbc:dm://127.0.0.1:5236?schema=BASE&clobAsString=true&columnNameUpperCase=false&useUnicode=true&characterEncoding=utf8&compatibleMode=mysql username: xxxxxx password: xxxxxx initialSize: 5 maxActive: 200 minIdle: 5 maxWait: 60000 timeBetweenEvictionRunsMillis: 60000 testWhileIdle: true testOnBorrow: false testOnReturn: false poolPreparedStatements: true asyncInit: true validConnectionCheckerClassName: com.alibaba.druid.pool.vendor.OracleValidConnectionChecker validationQuery: SELECT 1 FROM DUAL 连接url配置 点击查看官方文档：DM JDBC 编程指南 连接串1 jdbc:dm://127.0.0.1:5236?schema=BASE&clobAsString=true&columnNameUpperCase=false&useUnicode=true&characterEncoding=utf8&compatibleMode=mysql PS：schema参数在低版本驱动区分大小写，高版本驱动不再区分大小写，为了避免错误，统一使用全大写。columnNameUpperCase参数与官方介绍不一致，为了避免错误，需要显式指定。 连接串2 jdbc:dm://127.0.0.1:5236/BASE?clobAsString=true&useUnicode=true&characterEncoding=utf8&compatibleMode=mysql PS：可能是未来更高版本中使用的连接串形式。 达梦数据库在不同驱动版本下需要使用不同的连接串进行处理，具体可参考下表：（使用错误的连接串将无法正常启动） Dm7JdbcDriver18版本 Build-Time 使用的连接串类型 是否支持指定schema schema是否区分大小写 是否可用 不可用原因 7.6.0.165 2019.06.04 1 否 是 否 不支持LocalDateTime类型 7.6.1.120（建议） 2022.09.14 1 是 是 是 – DmJdbcDriver18版本 Build-Time 使用的连接串类型 是否支持指定schema schema是否区分大小写 是否可用 不可用原因 8.1.2.192 2023.01.12 1 是 否 是 – 8.1.3.12（建议） 2023.04.17 2 是 否 是 – 方言配置 pamirs方言配置 pamirs: dialect: ds: base: type: DM version: 8 majorVersion: 8 pamirs: type: DM version: 8 majorVersion: 8 数据库版本 type version majorVersion 7-20220916 DM 7 20220916 8-20230418 DM 8 8 schedule方言配置 pamirs: event: schedule: dialect: type: DM version: 8 majorVersion: 8 type version majorVersion…

  nation

  2023年11月1日

  12.8K000
• 产品使用手册

  菜单的配置

  应用中的菜单可以在界面设计器中进入“菜单”页面进行配置。

  萧炎

  2024年9月20日

  928000
• Oinone 7天入门到精通

  3.5.7.7 自定义主题

  主题是什么 Oinone框架提供了强大的主题定制功能，使得平台可以轻松适应和遵循公司的品牌和UI规范。通过自定义主题，你可以调整颜色、间距、圆角等视觉元素，从而使Oinone更好地融入到特定行业的需求和公司标准中。以下是关于如何定制主题的关键点和步骤： 关键点 使用CSS变量： Oinone使用CSS变量 (Css Var) 来实现主题定制。 CSS变量提供了一种高效且灵活的方式来定义和使用样式。 全面定制： 可以定制的范围广泛，包括颜色、字体、间距、边框、圆角等。 通过调整这些元素，可以确保UI符合公司的视觉标准。 定制步骤 了解CSS变量： 首先，了解如何在CSS中使用变量。 查看Oinone现有的CSS变量列表，以了解哪些样式可以被定制。 定义公司的UI规范： 根据公司的品牌指南，定义一套UI规范。 包括颜色方案、字体样式、元素尺寸等。 应用自定义样式： 在Oinone的样式表中，使用定义的CSS变量来覆盖默认样式。 确保在适当的地方应用这些自定义样式。 作用场景 Oinone平台提供了灵活的主题定制选项，包括内置的六套主题样式，涵盖深色和浅色模式以及不同的尺寸选项（大、中、小）。这些主题可以适应不同的业务需求和项目特性，同时提供了定制工具，方便用户根据公司的UI规范进行调整。下面是主题作用场景的详细说明： 主题选项 内置主题： 六套主题：包括深色和浅色模式，以及大、中、小尺寸。 用户可以通过系统设置功能轻松切换不同的主题。 可定制性： 提供CSS变量的JSON文件，方便用户下载和修改。 允许用户根据具体需求定制颜色、字体、间距等样式变量。 应用场景 公司UI规范对齐： 首先根据公司的UI规范调整一份基础主题。 这有助于确保平台的外观与公司品牌一致。 项目和业务适应性： 在不同项目或业务场景中，可以基于公司UI规范进行微调。 这提供了项目特定的灵活性，同时保持整体的品牌一致性。 实施建议 初始设置： 初始时，选择一个接近公司标准的内置主题作为起点。 通过系统设置功能体验不同的主题效果。 定制和微调： 下载并修改CSS变量的JSON文件，以符合公司的UI标准。 对于特定项目或业务场景，根据需要进行进一步的微调。 自定义主题 自定义主题功能允许在Oinone平台上创建和应用独特的视觉风格，以适应特定的业务需求和品牌标准。以下是自定义主题的步骤和示例，用于指导如何在Oinone平台上实现这一功能。 示例工程目录 以下是需关注的工程目录示例，main.ts更新导入./theme： 图3-5-7-24 自定义主题目录示例 步骤 1: 创建主题 定义主题变量： 创建一个包含主题样式变量的JavaScript文件。例如，可以定义一个名为OinoneTheme的新主题，并设置相应的CSS变量。 图3-5-7-24 自定义主题代码示例 注册主题： 使用registerTheme函数注册自定义主题。这个函数将新主题添加到可用主题列表中。 步骤 2: 应用主题 在主入口文件中引用： 在main.ts文件中引入自定义主题，并在VueOioProvider配置中指定。 图3-5-7-24 自定义主题应用配置示例 效果 图3-5-7-24 自定义黑色主题效果示例 主题叠加： Oinone支持多个主题变量同时存在，后导入的主题变量会覆盖前面导入的。 内置主题 Oinone平台内置了以下六个主题变量，你可以在自定义主题时参考或扩展它们： ‘default – large’ ‘default – medium’ ‘default – small’ ‘dark – large’ ‘dark – medium’ ‘dark – small’ 扩展变量 在定义主题变量时，根据业务需求可以添加不存在的变量，作为变量的扩展。 示例 { "custom-color": "#新的辅助颜色", "button-padding": "10px 20px", // …其他自定义变量 } 图3 – 5 – 7 – 24 扩展主题变量 查找主题变量 在Oinone平台上，通过DOM调试器查找主题变量是一种有效的方式，允许用户定位并获取相应组件的主题变量。以下是执行这一步骤的详细说明： 步骤： 使用DOM调试器： 在浏览器中打开Oinone平台，进入需要查找主题变量的页面。 使用浏览器的开发者工具或DOM调试器（通常可通过右键点击页面元素并选择“检查”打开）。 选择目标组件： 在DOM调试器中，通过选择器工具或直接点击页面上的组件，选中你想要查找主题变量的目标组件。 查看样式和主题变量： 在选中的组件上，浏览开发者工具中的“样式”或“计算”选项卡。 可以通过查看样式表中的相关样式规则，找到组件所使用的主题变量。 4标识主题变量： 主题变量通常以 –oio 为前缀。标识出你感兴趣的主题变量，记录下变量名和当前的取值。 示例： 假设你想查找某个按钮组件的主题变量，可以通过以下步骤： 在DOM调试器中选中按钮组件。 在“样式”或“计算”选项卡中查看相关样式规则。 找到以 –oio 为前缀的主题变量，如 –oio-button-pirmary-background。 记录该主题变量的取值，例如 #3498db。 图3-5-7-24 DOM调试器查询主题变量

  史, 昂

  2024年5月23日

  811000
• 4.x

  4.7.x版本升级说明-20240315

  版本号： 4.7.10.10版本发布日期：2024.03.15更新要点：前端性能优化；设计器内嵌表格支持设置高度；列表查询支持设置不进行排序。请及时更新。 4.7.10.10版本 升级内容 前端升级内容：1、修复字段类型的表格搜索内容不匹配的问题2、FORM视图中，校验失败的字段会自动定位到当前视图区域3、优化了一些性能问题 后端升级内容：1、设计器内嵌表格支持设置高度2、列表查询支持设置不进行排序 版本包信息 4.7.0 4.7.3.4 4.7.7.6 4.7.5.4 4.7.7.6 4.7.4.1 4.7.3 4.7.0 4.7.2.1 4.7.6.8 4.7.3.1 4.7.0 4.7.2 4.7.1 4.7.1.1 4.7.4.2 4.7.0 4.7.1 4.7.1 设计器镜像版本 harbor.oinone.top/oinone/designer:4.7.10.10-allinone-mini 仅包含前后端工程harbor.oinone.top/oinone/designer:4.7.10.10-allinone-full 包含中间件及前后端工程harbor.oinone.top/oinone/designer-backend:latest 仅包含后端工程 查询设置不排序 查询的page和Wrapper可设置setSortable(Boolean.FALSE)，来实现查询不需要排序的场景 示例1：page中设置不排序 page.setSortable(Boolean.FALSE); page = new PetShop().queryPage(page, queryWrapper); 示例2：Wrapper中设置不排序 IWrapper wrapper = Pops.lambdaQuery() .from(PetShop.MODEL_MODEL).setBatchSize(-1).setSortable(Boolean.FALSE); List petShops4 = new PetShop().queryList(wrapper); 其他参考 更多4.7.x的版本说明，参考：https://doc.oinone.top/version/4782.html 如果您有任何问题、建议或反馈，请随时联系我们。为了获得最佳体验，请及时更新至最新版本。我们将继续努力改进产品，提供更好的服务。谢谢！

  望闲

  2024年3月15日

  1.1K000