vue门户设计器实现技术方案

news2024/11/25 3:05:35

一、什么是门户设计器

门户设计器是一种用于创建和设计门户网站或者应用系统首页的工具。它通常是一个软件应用程序，可以帮助用户快速、轻松地设计和构建自己的门户网站或者应用系统的首页。门户设计器通常提供在线拖拉拽设计器，以及各种模板、主题和组件，使用户能够自定义外观、功能和布局，设计出来满足业务需要的门户界面，授权给对应角色使用，达到千人千面的效果。

门户设计器也是低代码开发平台的主要功能之一。低代码可视化门户提供直观的可视化界面，使用户能够轻松地设计和构建应用程序。用户可以通过拖拽组件、选择预定义模板等方式来快速构建应用程序，而无需编写大量的代码。低代码可视化门户通常具有强大的集成能力，可以与其他系统、服务或设备进行集成。例如，用户可以将应用程序与数据库、云服务或其他系统进行集成，实现数据的共享和交换。

二、门户设计器功能设计

门户设计器要实现的核心功能，一是可视化拖拉拽画布，二是开箱即用的门户组件。门户端组件可按照基础组件、业务组件、系统组件划分，分别提供常用的组件功能。

基础组件：表格、图片显示、排名表、播放器、数据面板、常用功能、最新动态。

业务组件：可以选择当前系统中应用开发中已经设计的页面。按照业务分类导航，选择某个应用，然后把选择该应用的页面或者报表，放到门户中展示。

系统组件：我的待办、通讯录、通知公告、常用流程，自定义注册（复杂的需要开发代码的那种）。

三、门户设计器技术方案

门户设计器的实现方案可以包括以下几个步骤：

1. 确定设计需求：首先需要明确门户设计器的设计需求，包括需要支持的组件、数据展示方式、交互方式等。

2. 设计界面：根据设计需求，设计门户设计器的界面，包括各个组件的位置、大小、样式等。

3. 开发组件库：开发一套可复用的组件库，包括图表组件、布局组件、地图组件、表单组件等。这些组件需要支持动态数据绑定和交互设置。

4. 实现数据绑定：通过数据绑定机制，将组件与数据源进行绑定。数据源可以是静态数据或动态数据，动态数据可以通过数据集进行获取。

5. 实现交互功能：通过设置交互事件，如点击、鼠标悬停等，实现组件之间的跳转、查询和钻取等功能。

6. 测试与优化：对门户设计器进行测试，确保其功能正常，性能良好。根据测试结果进行优化，提高用户体验。

7. 部署与发布：将门户设计器部署到服务器上，提供在线设计功能。同时，提供导出功能，将设计好的门户导出为可部署的代码。

在实现过程中，可以采用前端框架（如React、Vue等）进行开发，利用其组件化和数据驱动的特性，提高开发效率和代码复用性。同时，为了保证性能和用户体验，需要注意代码优化和响应式设计。

3.1、门户设计器前端vue实现方案

 设计门户设计器的用户界面，你可以使用Vue的组件库（如Element UI或Vuetify）来快速构建用户界面。为了实现拖拽功能，你可以使用Vue的指令或第三方库（如vuedraggable或vue-draggable或vue-grid-layout）。这些库提供了拖拽功能的组件，可以方便地将组件拖拽到门户设计中。其中门户页面(portal)里小页面（portlet）的自由布局是技术关键点，可以使用vue-grid-layout来实现。

参考：https://jbaysolutions.github.io/vue-grid-layout/guide/01-basic.html

3.2、门户设计器后端Java实现方案

门户设计器后端可采用springboot+mysql的实现技术，首先需要建一张表保存门户设计器设计的模型。

重点是门户模型的配置，即config字段，保存门户设计器设计出来的JSON数据，JSON数据的格式（schema）可以根据项目的需求进行设计，前后端都需要解析该模型，以下是门户模型的schema示例。

{
	"id": "4",
	"name": "仪表盘测试",
	"code": "dashboard_f7xyjMvHx1",
	"orderNum": 2,
	"remark": "",
	"portletList": [{
		"className": "com.xxxxxx.component.MultiNumberModel",
		"code": "PMJFmHmY",
		"dataSetConfig": {
			"dataSetId": "6",
			"dataSetType": "1",
			"params": {},
			"fieldList": [],
			"serverPage": false,
			"pageSize": 10
		},
		"showTitle": true,
		"title": "数据面板",
		"type": "multiNumber",
		"w": 14,
		"h": 9,
		"x": 10,
		"y": 0,
		"i": "PMJFmHmY1",
		"linkage": {
			"action": {
				"type": "js",
				"script": ""
			},
			"components": []
		},
		"inParams": [],
		"customize": {
			"customizeList": [{
				"metric": "position_order",
				"title": "排序",
				"icon": "",
				"iconColor": "",
				"openType": "tab"
			}, {
				"metric": "position_code",
				"title": "岗位编码",
				"icon": "",
				"iconColor": "",
				"openType": "tab"
			}]
		}
	}, {
		"className": "com.xxxxxx.component.CommonLinkModel",
		"code": "HHnPedwX",
		"dataSetConfig": {
			"dataSetId": "",
			"dataSetType": "1",
			"params": {},
			"fieldList": [],
			"serverPage": false,
			"pageSize": 10
		},
		"showTitle": true,
		"title": "常用功能",
		"type": "commonLink",
		"w": 10,
		"h": 10,
		"x": 0,
		"y": 8,
		"i": "HHnPedwX2",
		"linkage": {
			"action": {
				"type": "js",
				"script": ""
			},
			"components": []
		},
		"inParams": [{
			"name": "",
			"code": ""
		}],
		"customize": {
			"linkList": [{
				"linkType": "1",
				"name": "模块1",
				"url": "",
				"openType": "_blank",
				"icon": "17A发送",
				"iconColor": "#007aff"
			}, {
				"linkType": "1",
				"name": "模块2",
				"url": "http://www.xxxxxx.com",
				"openType": "_blank",
				"icon": "17A发送",
				"iconColor": "#007aff"
			}, {
				"linkType": "1",
				"name": "模块3",
				"url": "http://www.xxxxxx.com",
				"openType": "_blank",
				"icon": "17A发送",
				"iconColor": "#007aff"
			}, {
				"linkType": "2",
				"name": "模块4",
				"url": "http://www.xxxxxx.com",
				"openType": "_blank",
				"icon": "17A发送",
				"iconColor": "#007aff"
			}]
		}
	}, {
		"className": "com.xxxxxx.component.MultiPictureModel",
		"code": "iBwQRDHf",
		"dataSetConfig": {
			"dataSetId": "",
			"dataSetType": "1",
			"params": {},
			"fieldList": [],
			"serverPage": false,
			"pageSize": 10
		},
		"showTitle": true,
		"title": "轮播图",
		"type": "multiPicture",
		"w": 14,
		"h": 10,
		"x": 10,
		"y": 9,
		"i": "iBwQRDHf3",
		"linkage": {
			"action": {
				"type": "js",
				"script": ""
			},
			"components": []
		},
		"inParams": [{
			"name": "",
			"code": ""
		}],
		"customize": {
			"autoPlay": "1",
			"interval": 5,
			"picConfigList": [{
				"description": "图片1",
				"url": "2020061823441728.png",
				"openType": "_blank",
				"opacity": 1,
				"radius": 0
			}, {
				"description": "图片2",
				"url": "2020061823441728.png",
				"openType": "_blank",
				"opacity": 1,
				"radius": 0
			}, {
				"description": "图片3",
				"url": "2020061823441728.png",
				"openType": "_blank",
				"opacity": 1,
				"radius": 0
			}]
		}
	}, {
		"className": "com.xxxxxx.component.IframePageModel",
		"code": "kxpmNknK",
		"dataSetConfig": {
			"dataSetId": "",
			"dataSetType": "1",
			"params": {},
			"fieldList": [],
			"serverPage": false,
			"pageSize": 10
		},
		"showTitle": true,
		"title": "外链",
		"type": "iframePage",
		"w": 10,
		"h": 10,
		"x": 0,
		"y": 18,
		"i": "kxpmNknK4",
		"linkage": {
			"action": {
				"type": "js",
				"script": ""
			},
			"components": []
		},
		"inParams": [{
			"name": "",
			"code": ""
		}],
		"customize": {
			"url": "http://www.xxxxxx.com/"
		}
	}, {
		"className": "com.xxxxxx.component.TableModel",
		"code": "GCFMASfD",
		"dataSetConfig": {
			"dataSetId": "1",
			"dataSetType": "1",
			"params": {
				"name": "111",
				"token": ""
			},
			"fieldList": ["name", "age", "address"],
			"serverPage": false,
			"pageSize": 10
		},
		"showTitle": true,
		"title": "表格",
		"type": "table",
		"w": 14,
		"h": 10,
		"x": 10,
		"y": 19,
		"i": "GCFMASfD5",
		"linkage": {
			"action": {
				"type": "js",
				"script": ""
			},
			"components": []
		},
		"inParams": [{
			"name": "",
			"code": "token"
		}, {
			"name": "名称",
			"code": "name"
		}],
		"customize": {
			"frontPage": "0",
			"pageSize": null,
			"headerBgColor": "#fafafa",
			"headerFontColor": "#909399",
			"headerFontSize": 14,
			"bodyBgColor": "",
			"bodyFontColor": "#606266",
			"bodyFontSize": 14,
			"isStripe": "0"
		}
	}, {
		"className": "com.xxxxxx.component.VideoModel",
		"code": "YfXiPCDa",
		"dataSetConfig": {
			"dataSetId": "",
			"dataSetType": "1",
			"params": {},
			"fieldList": [],
			"serverPage": false,
			"pageSize": 10
		},
		"showTitle": true,
		"title": "播放器",
		"type": "video",
		"w": 12,
		"h": 10,
		"x": 0,
		"y": 29,
		"i": "YfXiPCDa6",
		"linkage": {
			"action": {
				"type": "js",
				"script": ""
			},
			"components": []
		},
		"inParams": [{
			"name": "",
			"code": ""
		}],
		"customize": {
			"videoType": "application/x-mpegURL",
			"videoUrl": "playlist.m3u8",
			"posterUrl": ""
		}
	}, {
		"className": "com.xxxxxx.component.BizCompModel",
		"code": "YfXiPCDv",
		"dataSetConfig": {
			"dataSetId": "",
			"dataSetType": "1",
			"params": {},
			"fieldList": [],
			"serverPage": false,
			"pageSize": 10
		},
		"showTitle": true,
		"title": "业务组件",
		"type": "bizComp",
		"w": 12,
		"h": 10,
		"x": 0,
		"y": 29,
		"i": "YfXiPCDv7",
		"linkage": {
			"action": {
				"type": "js",
				"script": ""
			},
			"components": []
		},
		"inParams": [{
			"name": "",
			"code": ""
		}],
		"customize": {
			"compType": "report",
			"compCode": "test1_73myuk",
			"compName": "测试报表1",
			"groupId": ""
		}
	}, {
		"className": "com.xxxxxx.component.SysCompModel",
		"code": "YfXiPCDl",
		"dataSetConfig": {
			"dataSetId": "",
			"dataSetType": "1",
			"params": {},
			"fieldList": [],
			"serverPage": false,
			"pageSize": 10
		},
		"showTitle": true,
		"title": "系统组件",
		"type": "sysComp",
		"w": 12,
		"h": 10,
		"x": 0,
		"y": 29,
		"i": "YfXiPCDl8",
		"linkage": {
			"action": {
				"type": "js",
				"script": ""
			},
			"components": []
		},
		"inParams": [{
			"name": "",
			"code": ""
		}],
		"customize": {
			"compType": "todoPortlet",
			"compCode": "g1fk3f",
			"compName": "我的待办",
			"groupId": ""
		}
	}, {
		"className": "com.xxxxxx.component.CustomCompModel",
		"code": "YfXiPCDj",
		"dataSetConfig": {
			"dataSetId": "",
			"dataSetType": "1",
			"params": {},
			"fieldList": [],
			"serverPage": false,
			"pageSize": 10
		},
		"showTitle": true,
		"title": "自定义组件",
		"type": "customComp",
		"w": 12,
		"h": 10,
		"x": 0,
		"y": 29,
		"i": "YfXiPCDj9",
		"linkage": {
			"action": {
				"type": "js",
				"script": ""
			},
			"components": []
		},
		"inParams": [{
			"name": "",
			"code": ""
		}],
		"customize": {
			"compType": "CustomComp",
			"compCode": "test1_73myu1",
			"compName": "自定义组件1",
			"compPath": "/aa/bb/cc",
			"groupId": ""
		}
	}]
}

最后实现的效果如下：

在线免费体验环境：http://www.yunchengxc.com

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1321441.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

多项目同时跑多个node版本-比nvm好用的volta

多项目同时跑多个node版本-比nvm好用的volta

开发环境中多个项目需要node版本不同，且同时不止是一个项目在开发中，用了nvm进行node版本管理和切换，但是太麻烦了。新的解决方案volta可以比较好的处理这种情况 Volta 官网先挂出来：https://volta.sh/ 1、volta是什么&#xff…
阅读更多...
Paging-5G 寻呼

Paging-5G 寻呼

处于RRC_IDLE态的UE与网络之间是不存在RRC连接的，处于RRC_INACTIVE态的UE虽然与网络建立了RRC连接，但该连接是挂起的。当网络有下行数据需要发往处于RRC_IDLE或RRC_INACTIVE态的UE时，网络需要先通过Paging流程来寻呼UE，以通知该UE…
阅读更多...
瑞芯微 rk3568的npu使用，部署unet网络

瑞芯微 rk3568的npu使用，部署unet网络

文章目录 rk3568-1.6.01.在任一个ubuntu系统上安装RKNN-Toolkit21.1 下载1.2 安装 2.在机器端（板端）查看 RKNPU2的驱动3.RKNN使用说明3.1 模型转换a. RHKNN初始化和释放b. RKNN configc. 加载模型d. 构建模型e. 导出模型f.转换工具 3.2 python 代码示例导…
阅读更多...
VS Code配置Go语言开发环境

VS Code配置Go语言开发环境

提示：首先这是一个新型语言，最好把vscode更新到最新版。 1：去官网下载Go语言编译器，之后配置到系统环境中，能看到版本就行。 2：创建一个文件夹，存放go的工具文件，我的在D:\GoFile\G…
阅读更多...
引领半导体划片机行业，实现钛酸锶基片切割的卓越效能

引领半导体划片机行业，实现钛酸锶基片切割的卓越效能

在当今快速发展的半导体行业中，博捷芯以其卓越的技术实力和精准的行业应用，脱颖而出，再次引领行业潮流。这次，他们将先进的BJX3356划片机技术应用于钛酸锶基片的切割，为半导体制造行业的进一步发展提供了强大的技术支持…
阅读更多...
Python爬虫全解析

Python爬虫全解析

一.爬虫--requests 1.常见的爬虫 -通用爬虫: 抓取系统重要组成部分。抓取的是一整张页面数据。 -聚焦爬虫: 是建立在通用爬虫的基础之上。抓取的是页面中特定的局部内容。 -增量式爬虫: 检测网站中数据更新的情况。只会抓取网站中最新更新出来的数据。 2.requests模块 re…
阅读更多...
「数据结构」二叉树1

「数据结构」二叉树1

🎇个人主页：Ice_Sugar_7 🎇所属专栏：C启航 🎇欢迎点赞收藏加关注哦！ 文章目录 🍉树🍉二叉树🍌特殊二叉树🍌二叉树的性质🍌存储结构 🍉…
阅读更多...
通过层进行高效学习：探索深度神经网络中的层次稀疏表示

通过层进行高效学习：探索深度神经网络中的层次稀疏表示

一、介绍 深度学习中的层次稀疏表示是人工智能领域日益重要的研究领域。本文将探讨分层稀疏表示的概念、它们在深度学习中的意义、应用、挑战和未来方向。 最大限度地提高人工智能的效率和性能：深度学习系统中分层稀疏表示的力量。 二、理解层次稀疏表示 分层稀疏表…
阅读更多...
【Unity】运行时创建曲线（贝塞尔的运用）

【Unity】运行时创建曲线（贝塞尔的运用）

[Unity]运行时创建线（贝塞尔的运用） 1. 实现的目标 在运行状态下创建一条可以使用贝塞尔方法实时编辑的网格曲线。 2. 原理介绍 2.1 曲线的创建 unity建立网格曲线可以参考Unity程序化网格体的实现方法。主要分为顶点，三角面&#xff0c…
阅读更多...
22.JSP技术

22.JSP技术

JSP起源 在很多动态网页中，绝大部分内容都是固定不变的，只有局部内容需要动态产生和改变。如果使用Servlet程序来输出只有局部内容需要动态改变的网页，其中所有的静态内容也需要程序员用Java程序代码产生，整个Servlet程序的代码将…
阅读更多...
智能优化算法应用：基于阿基米德优化算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用：基于阿基米德优化算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用：基于阿基米德优化算法3D无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用：基于阿基米德优化算法3D无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.阿基米德优化算法4.实验参数设定…
阅读更多...
智能 GPT 图书馆又重生了

智能 GPT 图书馆又重生了

智能 GPT 图书馆又重生了 作者：程序员小白条 1）概述 自从大二寒假准备开始筹备这个项目，到现在已经一年了，这个项目能维护一年，不愧是我.jpg。本来这个项目只是想练练手，因为那时候刚学完 Spring Boot2 V…
阅读更多...
构建强大应用的引擎：深度解析Spring Boot Starter机制

构建强大应用的引擎：深度解析Spring Boot Starter机制

目录 引言1. Spring Boot Starter机制1.1 什么是Spring Boot Starter1.2 为什么要使用Spring Boot Starter1.3.应用场景1.4.自动加载核心注解说明 2. 综合案例配置类制作控制功能实现 总结 引言 在当今互联网时代，构建高性能、可维护的应用已成为开发者的首要任务。…
阅读更多...
Ansible自动化运维以及模块使用

Ansible自动化运维以及模块使用

ansible的作用： 远程操作主机功能 自动化运维(playbook剧本基于yaml格式书写) ansible是基于python开发的配置管理和应用部署工具。在自动化运维中，现在是异军突起 ansible能够批量配置、部署、管理上千台主机。类似于Xshell的一键输入工具。不需要每…
阅读更多...
vscode如何开发微信小程序？（保姆级教学）

vscode如何开发微信小程序？（保姆级教学）

1.安装“微信小程序开发工具”扩展 2.安装“vscode weapp api”扩展 3.安装“vscode wxml”扩展 4.安装“vscode-wechat”扩展 5.在终端执行命令： vue create -p dcloudio/uni-preset-vue uniapp-test uniapp-test就是我这里的项目名称了 6.如果遇到了这个错误&a…
阅读更多...
【C盘清理】Jetbrains全家桶（PyCharm、Clion……）更改 IDE 特定文件（配置、缓存、插件、日志等）存储位置

【C盘清理】Jetbrains全家桶（PyCharm、Clion……）更改 IDE 特定文件（配置、缓存、插件、日志等）存储位置

文章目录 一、官网说明二、更改 IDE 目录的位置1. 转到“帮助”|“编辑自定义属性”2. 各文件位置3. 以PyCharm系统目录为例4. 修改idea.properties 三、清理旧的 IDE 目录 一、官网说明 IDE 使用的目录官网说明 二、更改 IDE 目录的位置 默认情况下，PyCharm 将每…
阅读更多...
c语言：输出26个英文字母｜练习题

c语言：输出26个英文字母｜练习题

一、题目 分两排&#xff0c;输出26个英文字母 如图&#xff1a; 二、思路分析 1、从第13个字母分行显示 2、从A开始&#xff0c;在A的ASC码后面&#xff0c;按顺序加1~26 三、代码图片【带注释】 四、源代码【带注释】 #include <stdio.h> //题目:输入26个字母&#x…
阅读更多...
企业电子招标采购系统源码Spring Cloud + Spring Boot + 前后端分离 + 二次开发

企业电子招标采购系统源码Spring Cloud + Spring Boot + 前后端分离 + 二次开发

项目说明 随着公司的快速发展&#xff0c;企业人员和经营规模不断壮大&#xff0c;公司对内部招采管理的提升提出了更高的要求。在企业里建立一个公平、公开、公正的采购环境&#xff0c;最大限度控制采购成本至关重要。符合国家电子招投标法律法规及相关规范&#xff0c;以及审…
阅读更多...
各种不同语言分别整理的拿来开箱即用的8个开源免费单点登录（SSO）系统

各种不同语言分别整理的拿来开箱即用的8个开源免费单点登录（SSO）系统

各种不同语言分别整理的拿来开箱即用的8个开源免费单点登录&#xff08;SSO&#xff09;系统。 单点登录&#xff08;SSO&#xff09;是一个登录服务层&#xff0c;通过一次登录访问多个应用。使用SSO服务可以提高多系统使用的用户体验和安全性&#xff0c;用户不必记忆多个密…
阅读更多...
2023_Spark_实验二十九：Flume配置KafkaSink

2023_Spark_实验二十九：Flume配置KafkaSink

实验目的&#xff1a;掌握Flume采集数据发送到Kafka的方法 实验方法&#xff1a;通过配置Flume的KafkaSink采集数据到Kafka中 实验步骤&#xff1a; 一、明确日志采集方式 一般Flume采集日志source有两种方式&#xff1a; 1.Exec类型的Source 可以将命令产生的输出作为源&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023