深度分页问题优化方案

相关推荐

• 前端

  Oinone平台之Router扩展

  问题描述 在Oinone平台内置路由中，默认了三种路由 /login //默认登录页 /page //默认主逻辑页 / //根页面，会自动发起查询优先级最高的应用，并跳转 在实际的业务迭代中，我们通常有以下三种需求： 我要覆盖默认的登录页，页面我不喜欢，登录逻辑满足不了； 我要在平台上加个帮助中心； 这个路径不符合我司规范，我要自定义加前缀 接下来，我将在Oinone平台中满足以上场景 覆盖默认路径 以登录页为例 在项目目录src/main.ts下，添加自定义router import 'ant-design-vue/dist/antd.css'; import 'element-plus/dist/index.css'; import '@kunlun/vue-ui-antd/dist/kunlun-vue-ui-antd.css'; import '@kunlun/vue-ui-el/dist/kunlun-vue-ui-el.css'; import 'reflect-metadata'; import { VueOioProvider } from '@kunlun/dependencies'; import interceptor from './middleware/network-interceptor'; import './field'; import './view'; import './actions'; VueOioProvider( { http: { url: location.origin, callback: interceptor }, browser: { title: 'Oinone – 构你想象!', favicon: 'https://pamirs.oss-cn-hangzhou.aliyuncs.com/pamirs/image/default_favicon.ico' }, router: [{ path: '/login', widget: 'CustomLogin'}] // 用CustomLogin覆盖默认登录页 }, [] ); 定义CustomLogin, 定义方式同书籍中的自定义表单和自定义表格类似，精简版的代码为： import { RouterWidget, SPI } from "@kunlun/dependencies"; @SPI.ClassFactory(RouterWidget.Token({ widget: 'CustomLogin' })) // SPI注册，router得widget和此处的widgetshi对应的 export class CustomLogin extends RouterWidget { public initialize(props) { super.initialize(props); this.setComponent('定义的vue文件'); return this; } } 增加新的访问路径 同覆盖登录页 在router中增加路由 router: [{ path: '/login', widget: 'CustomLogin'}, { path: '/help', widget: 'Help'}] 定义Help，同覆盖登录页 定义个性化路径 需要再所有访问路径前统一加标识，比如添加Oinone;在项目目录下新建.env文件(若存在，可以复用)，在env文件中添加： BASE_PATH=/Oinone 修改后重启工程即可，访问/Oinone/login即可 结语 以上就是Oinone平台路由的扩展能力，在Oinone平台中，通过自定义Router达到扩展路由的能力，并通过采用env等通用配置的能力，解决批量修改路由的目的。

  oinone

  2023年11月1日

  60.4K000
• API&SDK 文档

  自定义视图内部渲染动态视图

  效果图 当前图片中，上方是自定义的视图，下方是动态的表单视图 代码 步骤拆分：1: 通过注册 layout 的方式先自定义视图，把自己的业务逻辑写完2: 在对应的 vue 文件里面定义一个插槽，用来放置动态的表单视图3: 在组件挂在的时候，创建动态视图 1: 注册 layout // registry.ts import { registerLayout, ViewType } from '@kunlun/dependencies'; registerLayout( `<view type="FORM"> <element widget="actionBar" slot="actionBar" slotSupport="action"> <xslot name="actions" slotSupport="action" /> </element> <element widget="CustomViewWidget"></element> </view>`, { model: '模型编码', actionName: '动作名称', viewType: ViewType.Form } ); 2: vue 里面定义 slot <!–CustomView.vue –> <template> <div> <h1>这是自定义的视图</h1> <img src="https://pamirs.oss-cn-hangzhou.aliyuncs.com/oinone/static/images/login_bg_left.jpg" height="400" width="2600" alt="" /> <h1>下面设计器配置的动态视图</h1> <slot name="dynamicView"></slot> </div> </template> <script lang="ts"> import { defineComponent } from 'vue'; export default defineComponent({ }); </script> 3: 组件挂载的时候，创建动态视图 // CustomViewWidget.ts import { SPI, BaseElementWidget, ViewType, ViewCache, Widget, MetadataViewWidget, BaseView, TableView, FormView, FormWidget, registerLayout, DetailView, DetailWidget, isRelation2MField, customQuery, FormFieldWidget } from '@kunlun/dependencies'; import CustomView from './CustomView.vue'; import { delay } from 'lodash-es'; @SPI.ClassFactory( BaseElementWidget.Token({ viewType: ViewType.Form, widget: 'CustomViewWidget' }) ) export class CustomViewWidgetWidget extends BaseElementWidget { public initialize(props) { super.initialize(props); this.setComponent(CustomView); return this; } /** * 定义一个属性，用来存储动态视图 */ private metadataViewWidget: MetadataViewWidget | undefined; /** * 获取动态视图的数据 */ @Widget.Method() private getWidgetData() { const children = this.metadataViewWidget?.getChildrenInstance() as BaseView[]; const child = children[0]; if (child) { return child instanceof TableView ? child.getCurrentDataSource() : child.getCurrentActiveRecords(); } return null; } /**…

  汤乾华

  2025年3月24日

  994000
• 后端部署

  分部式缓存配置优化

  介绍 分布式缓存是为了解决以下2个场景 开发时，设计器和开发者本地业务工程同步元数据用的 多模块分部式部署架构 单机版的生产环境是不需要这个特性的，所以默认的启动配置不建议加分布式缓存的依赖包，只在开发环境开启即可 boot启动工程的pom.xml文件配置示例 <project> <profiles> <profile> <!– 下面配置的值根据 spring.profiles.active 识别 –> <id>dev</id> <!– 开发环境增加分布式依赖，支持设计器可以正确访问业务工程 –> <dependencies> <dependency> <groupId>pro.shushi.pamirs.distribution</groupId> <artifactId>pamirs-distribution-faas</artifactId> </dependency> <dependency> <groupId>pro.shushi.pamirs.distribution</groupId> <artifactId>pamirs-distribution-session</artifactId> </dependency> <dependency> <groupId>pro.shushi.pamirs.distribution</groupId> <artifactId>pamirs-distribution-gateway</artifactId> </dependency> </dependencies> </profile> </profiles> </project>

  nation

  2024年7月10日

  1.5K000
• 前端

  前端打包文件上传到oss

  打包dist文件上传到oss教程 1: 确保boot工程里面安装了「webpack-aliyun-oss」依赖, 如果没有安装，可以手动安装下 2: package.json -> devDependencies -> {"webpack-aliyun-oss": "0.5.2"} 3: 在vue.config.js文件中添加对应的plugin // vue.config.js文件 // 新增代码 let BASE_URL = '/'; const { DEPLOY, OSS_REGION, OSS_DIST, OSS_URL, OSS_ACCESS_KEY_ID, OSS_ACCESS_KEY_SECRET, OSS_BUCKET } = process.env; const UNIQUE_KEY = Math.random(); switch (DEPLOY) { case 'online': BASE_URL = `${OSS_URL}${UNIQUE_KEY}/`; break; default: BASE_URL = '/'; } module.exports = { …原先的代码, publicPath: BASE_URL, plugins: [ …原先的插件, DEPLOY === 'online' ? new WebpackAliyunOss({ from: ['./dist/**/**', '!./dist/**/*.html'], // build目录下除html之外的所有文件 dist: `${OSS_DIST}/${UNIQUE_KEY}`, // oss上传目录 region: OSS_REGION, // 地区, 比如 oss-cn-hangzhou accessKeyId: OSS_ACCESS_KEY_ID, accessKeySecret: OSS_ACCESS_KEY_SECRET, bucket: OSS_BUCKET, timeout: 1200000, deleteOrigin: true, deleteEmptyDir: true, overwrite: true }) : () => {} ] } 4: 在vue.config.js同级目录下面新增「.env」文件, 写入对应的配置, 配置对应的值按照自己的oss配置来 DEPLOY=online OSS_BUCKET=xxx OSS_DIST=/oinone/product OSS_URL=https://xxxxxx/oinone/product/ OSS_REGION=oss-cn-hangzhou OSS_ACCESS_KEY_ID=xxxx OSS_ACCESS_KEY_SECRET=xxxx

  oinone

  2023年11月1日

  1.4K000
• 4.x

  前端更新日志（v4）【最后更新于20230713】

  版本号：v4.5.0发布日期：2023.07.13更新要点：表格列宽拖动后会默认存储/可以自定义路由设置和导航功能/可以自定义遮罩效果和显示内容，请及时更新 v4.5.0 新特性 table列宽拖动后会默认存储 自定义路由新增了RouterWidget 自定义Mask新增了MaskWidget v4.3.0 新特性 支持多tabs选项卡 MessageHub改造 统一母版父类，将LayoutWidget改为MaskWidget。提供reloadMaskProcess/reloadMainViewProcess方法进行母版组件刷新，母版组件不再使用流相关功能。 不兼容升级内容 MessageHub改造：原使用useMessageHub方法的返回类型改为IMessageHub，IMessage#publish方法入参类型改为IMessage。 原AppSwitcher.ts改为AppSwitcherWidget.ts，新增AppSwitcher的Vue Component导出。 原代码 import { AppSwitcher, … } from ‘@kunlun/dependencies’; @SPI.ClassFactory(ViewWidget.Token({ widget: ‘app-switcher’ })) export class CustomAppSwitcherWidget extends AppSwitcher {} 新代码 import { AppSwitcherWidget, … } from ‘@kunlun/dependencies’; @SPI.ClassFactory(ViewWidget.Token({ widget: ‘app-switcher’ })) export class CustomAppSwitcherWidget extends AppSwitcherWidget {} 修改VueOioProvider的http相关参数，将原有network-interceptor内置到平台，如无修改，可直接移除。具体修改事项联系开发人员提供技术支持。参考文档 发布日志 20230713 表格中的，整数、浮点数、长整数的表头文字默认靠左对齐 20230620 优化表格的富文本预览 表单、详情页面的基础字段默认colSpan=1 修复多对一关联关系字段无法清除的问题 修复登出时浏览器标题异常的问题 20230617 修复菜单未正确排序的问题 隐藏搜索字段的必填标识 支持http中对queryWrapper的rsql字段base64编码 修复「编辑页面」的「枚举字段」「清空」后，没有提交 20230608 新增列宽主题配置 表格数字组件全部使用右对齐，包括表头右对齐；（原仅有金额右对齐，新增整数、浮点数等右对齐） 修复树下拉组件搜索异常的问题 修复vxe-table版本异常问题（从v4.3.9 -> v4.3.6） 修复模型设计器「图模式」多次点击「编辑字段」不生效 修复图模型「列模型」，全部选择table后，删除字段action不出现的问题 20230602 修复根视图的name属性无法正确获取的问题 修复树下拉组件在多选的情况下，超出展示范围的样式问题 修复树下拉组件在设置了提交函数时，节点异常收起的问题 修复搜索表单默认值在某些情况下无法正确回填的问题 优化工作台搜索区悬停样式的问题 修复界面设计器子菜单排序在多次排序后失灵的问题 修复流程设计器表达式无法正确获取数据类型的问题 20230531 修复表格日期范围字段无法通过用户偏好隐藏的问题 修复树下拉在获取数据未返回进行搜索时，导致最终结果错误的问题 修复界面设计器子菜单拖放到首个的情况下，排序异常的问题 修复tabs超出高度没有滚动条的问题 20230529 请求头添加module参数，传递url上的module参数 修复表单自动填充的问题 修复表格seq序号列不显示的问题 20230524 修复network-interceptor在某些情况下出现npe的问题 修复模板解析时出现报错问题 修复列表排序字段重复的问题 移除关联关系字段排序功能 20230519 修复oio-input、oio-passwod、oio-input-search自动填充的问题 修复项目中修改主题不生效 修复表格关联字段排序，使用关联模型的labelFields作为排序条件。 修复在某些情况下，related字段npe问题。 变更【树表】选中左侧树节点时，重置表格当前分页。 如果您有任何问题、建议或反馈，请随时联系我们。为了获得最佳体验，建议请升级至最新版本。我们将继续努力改进产品，提供更好的服务。谢谢！

  oinone

  2023年11月1日

  1.0K000