深度分页问题优化方案

相关推荐

• 低无一体

  前端-如何修改指定页面的内组件的css样式

  为组件加自定义class，用该class作为父选择器写特定的css样式 以form为例，自定义了以下class <view/>标签的表单视图(FormView)组件 <element/>标签的form(FormWidget)组件 <element/>标签的actionBar(ActionBarWidget)组件 import { registerLayout, ViewType } from '@kunlun/dependencies'; export const install = () => { registerLayout( ` <view type="FORM" class="my-form-view"> <element widget="form" slot="form" class="my-form-widget"> <xslot name="fields" slotSupport="pack,field" /> </element> <element widget="actionBar" slot="actionBar" class="my-action-bar" slotSupport="action" > <xslot name="actions" slotSupport="action" /> </element> </view> `, { viewType: ViewType.Form, model: 'resource.k2.Model0000000109', actionName: 'uiViewb2de116be1754ff781e1ffa8065477fa' } ); }; install(); 查看修改后的页面html结构 编写样式的css .my-form-view .oio-form { /** TODO **/ } .my-form-widget .oio-row { /** TODO **/ } .my-action-bar .oio-col { /** TODO **/ }

  nation

  2024年6月17日

  1.9K000
• 前端

  表格主题配置（v4）

  TableThemeConfig /** * 表格主题配置 */ export interface TableThemeConfig { border: boolean | string; stripe: boolean; isCurrent: boolean; isHover: boolean; /** * 表格列主题配置 */ column: Partial<TableColumnThemeConfig>; } /** * 表格列主题配置 */ export interface TableColumnThemeConfig { /** * <h3>最小宽度</h3> * <ul> * <li>boolean: enabled column width auto compute</li> * <li>number: using css width (default: px)</li> * <li>string: using css width</li> * <li> * object: auto compute width for label by default function * <ul> * <li>min: min min width (default: 120)</li> * <li>max: max min width (default: 432)</li> * <li>chineseWidth: chinese width (default: 14 -> fontSize: 14px)</li> * <li>otherWidth: non chinese width (default: 9 -> fontSize: 14px)</li> * <li>sortableFixWidth: sortable handle width (default: 40)</li> * <li>nonSortableFixWidth: non sortable fix width (default: 22)</li> * </ul> * </li> * <li>function: auto compute width for label by function</li> * </ul> */ minWidth: boolean | number | string | Partial<TableColumnMinWidthComputeConfig> | TableColumnMinWidthComputeFunction; /** * 操作列 */ operation: { /** * 宽度 (default: 165) */ width?: number | string; /** * 最小宽度 (default: 120) */ minWidth?: number | string; }; } export interface TableColumnMinWidthComputeConfig { min: number;…

  汤乾华

  2023年11月6日

  1.8K000
• 部署

  离线无代码docker启动说明（5.1.0）

  1. 安装docker 1.1 Linux内核系统 1.1.1 检查防火墙（以CentOS7为例） 查看防火墙是否开启 systemctl status firewalld 如防火墙处于开启状态，有2种处理方式，选择其中一种，开发环境如内网环境建议选择处理方案1 处理方案1:停止防火墙 systemctl stop firewalld 处理方案2:开放docker镜像内置中间件透出的端口 88：web访问端口 8099：后端Java服务端口 19876：rocketmq的namesrv端口： 6378：缓存redis的端口 3307：数据库mysql的端口 2182：zookeeper的端口 20880：dubbo的通信端口 15555：预留Java的debug端口 10991：rocketmq的broker端口 9999：Nginx文件系统的端口 查看防火墙已经开放的端口 firewall-cmd –list-ports # 防火墙新增开放端口示例： firewall-cmd –permanent –zone=public –add-port=88/tcp #新增以后生效需要重新加载防火墙 systemctl reload firewalld #查看端口是否开放成功 firewall-cmd –list-ports 也可以从外部使用telnet命令检查端口是否开放成功，如telnet 192.168.0.121 3307 1.1.2 官方安装地址(已安装请忽略)：https://docs.docker.com/engine/install/centos/ yum install -y yum-utils yum-config-manager –add-repo https://download.docker.com/linux/centos/docker-ce.repo 如果docker这个源异常可以用阿里云的源 #yum-config-manager –add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo yum install docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin #启动docker systemctl start docker #查看是否安装成功 docker -v 如果无法访问官网，参考阿里云 https://developer.aliyun.com/mirror/docker-ce?spm=a2c6h.13651102.0.0.57e31b11lhSNtT 1.1.3 可使用一键安装脚本 wget https://pamirs.oss-cn-hangzhou.aliyuncs.com/docker/quick-install.sh sh quick-install.sh 1.2 无公网环境Linux系统 需要根据指定的版本以及内核架构来生成对应docker以及镜像包 在已经安装docker环境下 下载离线镜像包：https://pamirs.oss-cn-hangzhou.aliyuncs.com/docker/oinone-designer-full-v5.1.5.4.tar 执行导入镜像：docker load -i oinone-designer-full-v5.1.5.4.tar 2. 解压提供的部署.zip 部署.zip包含： settings-3.6.3.xml：拉取平台jar的maven仓库settings，对应maven版本3.6.x settings-3.8.x.xml：拉取平台jar的maven仓库settings，对应maven版本3.8.x pamirs-demo：后端示例工程 oinone-op-ds-all-full：包含所有中间件及前后端工程，用于启动docker脚本 license：平台证书 docker和mvn账号信息.md 4. 修改startup.sh中的路径 4.1 linux环境修改参数 在文件中找到如下configDir=$(pwd)version=5.1.5.4IP=192.168.0.121 configDir的路径（下载oinone-op-ds-xx.zip解压后的路径） 修改对应的镜像版本号 修改对应的IP为docker宿主机IP 4.2 window环境修改参数 在文件中找到如下set configDir=/d/shushi/docker/oinone-op-ds-all-fullset version=5.1.5.4set IP=192.168.0.121 修改configDir的路径（（下载oinone-op-ds-xx.zip解压后的路径） 修改对应的镜像版本号 修改对应的IP为docker宿主机IP 5. (用oinone-op-ds-all-full版本可跳过)修改conf/application.yml 对应中间件的配置：指定对应IP和端口或密码，把其中192.168.0.121改为宿主机IP zookeeper mysql rocket-mq redis 【推荐】推荐把数据库外置到容器外面，确保容器升级和重启后数据能够保留。 6.修改conf/application.yml中OSS的配置 cdn: oss: name: 本地文件NG系统 type: LOCAL bucket: # uploadUrl 这个是Oinone后端服务地址和端口。 把其中192.168.0.121改为宿主机IP uploadUrl: http://192.168.0.121:8099 # downloadUrl前端地址，即直接映射在nginx的静态资源的路径和端口。 把其中192.168.0.121改为宿主机IP downloadUrl: http://192.168.0.121:9999 validTime: 3600000 timeout: 600000 active: true referer: # 本地Nginx静态资源目录 localFolderUrl: /opt/pamirs/static # 使用客户自己的CDN的图片，否则系统默认的从数式的CDN中获取 appLogoUseCdn: true 7. 修改mq/broker.conf（**注意：使用allinone-full包含中间件版本） 修改其中brokerIP1的IP从192.168.0.121改成宿主机IP brokerClusterName = DefaultCluster namesrvAddr=127.0.0.1:9876 brokerIP1=192.168.0.121 brokerName = broker-a brokerId = 0 deleteWhen = 04 fileReservedTime = 48 brokerRole = ASYNC_MASTER…

  望闲

  2024年8月21日

  1.7K000
• 运维实践

  Oinone平台部署及依赖说明（v5.1）

  概述 名词解释 业务工程包：指平台提供的内置基础包和内置功能包。 设计器工程包：指模型设计器、界面设计器、流程设计器等相关依赖包。 父POM：仅声明依赖包版本的pom文件 启动工程POM：仅声明具体依赖包的pom文件，一般不用于指定版本。 业务工程部署 Oinone平台向合作伙伴提供前后端业务工程所需的全部依赖，依赖项的具体说明下面会分别介绍。 设计器部署 Oinone平台向合作伙伴提供了两种设计器部署方式： Docker镜像：支持amd64和arm64两种架构的操作系统。（推荐） JAR包：与Docker镜像中的内容完全一致。 使用JAR包直接启动需要使用Oinone专属启动器，Docker镜像已内置Oinone专属启动器。 PS：如遇到以上部署方式或提供的镜像无法满足部署需求时，请联系Oinone平台售后获取技术支持。 Docker镜像 体验镜像 包括所有设计器。 内置所有所需中间件，包括Mysql、Redis、Zookeeper、RocketMQ。 适用场景：用于快速体验Oinone平台全部功能 docker pull harbor.oinone.top/oinone/oinone-designer-full-v5.1:TAG 前后端一体部署镜像 包括所有设计器。 无内置中间件。 适用场景：用于便捷部署Oinone平台的前后端服务 docker pull harbor.oinone.top/oinone/oinone-designer-mini-v5.1:TAG 前后端一体部署镜像 – 流程设计器 仅包括流程设计器。 无内置中间件。 适用场景：用于便捷部署仅需流程设计器的Oinone平台的前后端服务。 docker pull harbor.oinone.top/oinone/workflow-designer-v5.1:TAG 后端部署镜像 用于前后端分别部署，包括所有设计器。 仅包含后端服务 无内置中间件 适用场景：Kubenetes部署；支持健康检查，前后端分离部署； docker pull harbor.oinone.top/oinone/designer-backend-v5.1:TAG 前端部署镜像 用于前后端分别部署，包括所有设计器。 仅包含前端服务 无内置中间件 适用场景：Kubenetes部署；支持健康检查，前后端分离部署； docker pull harbor.oinone.top/oinone/designer-frontend-v5.1:TAG 镜像拉取 以体验镜像为例，Oinone平台提供多种拉取镜像的方式。 # 获取混合架构镜像，支持amd64和arm64架构的操作系统 docker pull harbor.oinone.top/oinone/oinone-designer-full-v5.1:5.1.13 # 仅获取amd64架构镜像 docker pull harbor.oinone.top/oinone/oinone-designer-full-v5.1:5.1.13-amd64 # 仅获取arm64架构镜像 docker pull harbor.oinone.top/oinone/oinone-designer-full-v5.1:5.1.13-arm64 # 获取最新版镜像（每次拉取自动更新） docker pull harbor.oinone.top/oinone/oinone-designer-full-v5.1 PS：如镜像拉取过慢，可在确定操作系统架构的情况下获取amd64或arm64架构镜像。 JAR包获取 $VERSION：对应镜像版本号 包含所有设计器的后端JAR包下载路径示例 https://oinone-jar.oss-cn-zhangjiakou.aliyuncs.com/install/oinone-designer/pamirs-designer-boot-v5.1-$VERSION.jar 仅包含流程设计器的后端JAR包下载路径示例 https://oinone-jar.oss-cn-zhangjiakou.aliyuncs.com/install/workflow-designer/pamirs-workflow-designer-boot-v5.1-$VERSION.jar Kubernetes后端部署健康检查 准备健康检查脚本 将以下脚本放置在镜像中。/opt/pamirs/bin/healthCheck.sh为以下示例中所用脚本路径。（平台提供的设计器镜像有内置该脚本，并与示例路径一致） #!/usr/bin/env bash function sendDingTalkMessage() { url=$DING_TALK_ROBOT_URL if [ -z $url ]; then return -1 fi message=$DING_TALK_ROBOT_MESSAGE if [ -z $message ]; then return -1 fi message="$message\\nby kubernetes" isAtAll=$DING_TALK_ROBOT_IS_AT_ALL if [ $isAtAll ]; then isAtAll="true" message="$message\\n" else isAtAll="false" fi message="{\"msgtype\": \"text\",\"text\": {\"content\":\"$message\"}, \"isAtAll\": \"${isAtAll}\"}" curl "${url}" -H 'Content-Type: application/json' -d "${message}" } port=$1 callback=$2 OK=$(curl -s http://127.0.0.1:${port}/ruok) if [ "$OK" == "imok" ]; then if [ -n $callback ]; then $callback fi exit 0 else exit 1 fi 配置Kubernetes健康检查 kind: Deployment apiVersion: apps/v1 spec: template: spec: containers: – name: designer-backend env: – name: DING_TALK_ROBOT_URL #…

  张博昊

  2024年9月18日

  1.6K000
• Oinone 7天入门到精通

  4.1.19 框架之网关协议-后端占位符

  在我们日常开发中会有碰到一些特殊场景，需要由前端来传一些如“当前用户Id”、“当前用户code”诸如此类只有后端才知道值的参数，那么后端占位符就是来解决类似问题的。如前端传${currentUserId}，后端会自动替换为当前用户Id。 Step1 后端定义占位符 我们新建一个UserPlaceHolder继承AbstractPlaceHolderParser，用namespace来定义一个“currentUserId”的占位符，其对应值由value()决定为“PamirsSession.getUserId().toString()”，active要为真才有效，priority为优先级 package pro.shushi.pamirs.demo.core.placeholder; import org.springframework.stereotype.Component; import pro.shushi.pamirs.meta.api.session.PamirsSession; import pro.shushi.pamirs.user.api.AbstractPlaceHolderParser; @Component public class UserPlaceHolder extends AbstractPlaceHolderParser { @Override protected String value() { return PamirsSession.getUserId().toString(); } @Override public Integer priority() { return 10; } @Override public Boolean active() { return Boolean.TRUE; } @Override public String namespace() { return "currentUserId"; } } 图4-1-19-1 后端定义占位符 Step2 前端使用后端占位符 我们经常在o2m和m2m中会设置domain来过滤数据，这里案例就是在field中设置来过滤条件，domain="createUid == $#{currentUserId}"，注意这里用的是$#{currentUserId} 而不是${currentUserId}，这是前端为了区分真正变量和后端占位符，提交的时候会把#过滤掉提交。修改宠物达人表格视图的Template中search部分 <template slot="search" cols="4"> <field data="name" label="达人"/> <field data="petTalentSex" multi="true" label="达人性别"/> <field data="creater" /> <!– <field data="petShops" label="宠物商店" domain="createUid == ${activeRecord.creater.id}"/>–> <field data="petShops" label="宠物商店" domain="createUid == $#{currentUserId}"/> <field data="dataStatus" label="数据状态" multi="true"> <options> <option name="DRAFT" displayName="草稿" value="DRAFT" state="ACTIVE"/> <option name="NOT_ENABLED" displayName="未启用" value="NOT_ENABLED" state="ACTIVE"/> <option name="ENABLED" displayName="已启用" value="ENABLED" state="ACTIVE"/> <option name="DISABLED" displayName="已禁用" value="DISABLED" state="ACTIVE"/> </options> </field> <field data="createDate" label="创建时间"/> <field data="unStore" /> </template> 图4-1-19-2 前端使用后端占位符 Step3 重启看效果 请求上都带上了createUid==${currentUserId} 图4-1-19-3 示例效果

  史, 昂

  2024年5月23日

  2.2K000