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

一、什么是门户设计器

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

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

二、门户设计器功能设计

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

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

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

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

三、门户设计器技术方案

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

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

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Ubuntu系统入门指南：基础操作和使用教程

Ubuntu系统入门指南：基础操作和使用教程

学习目标： 解Ubuntu系统的基本概念和特点，包括其开源性、稳定性和安全性，以及如何获取和安装Ubuntu系统。 掌握Ubuntu系统的用户界面和桌面环境，包括如何使用桌面面板、启动器和工作区，以及如何自定义和个性化你的桌面…
阅读更多...
终于知道灵活自助分析的BI报表是怎么做的了

终于知道灵活自助分析的BI报表是怎么做的了

不知道是不是临近年底要做年终分析报告的原因，最近很多小伙伴都来咨询BI报表怎么做的问题。其实BI报表还真的只需点击、拖拉拽就能完成。接下来就来简单地说几个做BI报表都需要注意的事项。 BI报表制作流程： 1、连接数据源，奥威BI大数据分析…
阅读更多...
pytorch——支持向量机

pytorch——支持向量机

1、任务要求 针对已知类别的5张卧室照片(标签为1)和5张森林照片(标签为-1)所对应的矩阵数据进行分类训练,得到训练集模型;再利用支持向量机对另外未知类别的5张卧室照片和5张森林照片数据进行测试分类(二分类)，得到分类结果及其准确率。 2、先导入查看基本数据 3、…
阅读更多...
SGPIO介紹

SGPIO介紹

什么是SGPIO？ Serial General Purpose Input Output (SGPIO) is a method to serialize general purpose IO signals. SGPIO defines the communication between an initiator (e.g. a host bus adapter) and a target (e.g. a backplaneholding disk drives). The …
阅读更多...
Java代码世界的神奇技巧与魔法艺术

Java代码世界的神奇技巧与魔法艺术

目录 前言1 Java的独特优势1.1 跨平台性1.2 面向对象1.3 强大的生态系统 2 Java的应用场景2.1 企业级应用开发2.2 移动应用开发2.3 大数据处理2.4 云计算 3 代码技巧分享4 案例分享结语 前言 当谈到优雅而又强大的编程语言时，Java无疑是一个绝佳的选择。Java作为一…
阅读更多...
wsl kafka的简单应用

wsl kafka的简单应用

安装并配置单机版kafka所需环境 wsl2 环境可用性较高，如下介绍在该环境中安装单机版本kafka的详细过程。 启动命令行工具启动wsl：wsl --user root --cd ~，（以root用户启动，进入wsl后当前路径为~“用户主目录”&#…
阅读更多...
全城直饮及小区管道直饮水工程，应采用什么工艺

全城直饮及小区管道直饮水工程，应采用什么工艺

“中空纤维纳滤级分离膜”----是当今世界最顶级的纳米产品，被国家科技部评为:国内领先、世界先进。中空纳滤是饮用水矿化度关键技术的重大提升! 中空纤维纳滤膜国家863攻关项目,获得多项国家发明专利 中空纤维纳滤级分离膜特性 中空纤维纳滤膜,每根中空膜的膜壁为…
阅读更多...
CRM客户管理系统的功能有哪些？一文全解

CRM客户管理系统的功能有哪些？一文全解

我们常说，CRM系统是企业管理的神器。很多企业的需求比较独特，标准化的CRM系统无法满足企业的需求，可能就会涉及到系统开发。那么，CRM客户管理系统要具备哪些功能？首先，一个完整的CRM客户管理系统应该具备以…
阅读更多...
千亿级工业大数据的最优方案！智光电气的时序数据库应用

千亿级工业大数据的最优方案！智光电气的时序数据库应用

小T导读： 此前，智光电气（股票代码：002169）子公司智光研究院在工业项目中使用基于 Apache Hadoop 的 CDH 集群来做时序业务数据的处理，但由于数据量级太大，处理占用了大量资源，导致集…
阅读更多...
如何实现订单自动取消

如何实现订单自动取消

由于Redis具有过期监听的功能，于是就有人拿它来实现订单超时自动关闭的功能，但是这个方案并不完美。今天来聊聊11种实现订单超时自动关闭的方案，总有一种适合你！这些方案并没有绝对的好坏之分，只是适用场景的不大相同。…
阅读更多...
亚马逊云科技 re:Invent 大会 - ElastiCache Serverless模式来袭

亚马逊云科技 re:Invent 大会 - ElastiCache Serverless模式来袭

亚马逊云科技 re:Invent 大会 - ElastiCache Serverless模式来袭 本篇文章授权活动官方亚马逊云科技文章转发、改写权，包括不限于在 亚马逊云科技开发者社区, 知乎，自媒体平台，第三方开发者媒体等亚马逊云科技官方渠道。 文章目录 亚马逊云…
阅读更多...
Apache SeaTunne简介

Apache SeaTunne简介

Apache SeaTunne简介 文章目录 1.Apache SeaTunne是什么？1.1[官网](https://seatunnel.apache.org/)1.2 项目地址 2.架构3.特性3.1 丰富且可扩展的连接器和插件机制3.2 支持分布式快照算法以确保数据一致性3.3 支持流、批数据处理，支持全量、增量和实时数…
阅读更多...
30. 深度学习进阶 - 池化

30. 深度学习进阶 - 池化

Hi，你好。我是茶桁。 上一节课，我们详细的学习了卷积的原理，在这个过程中给大家讲了一个比较重要的概念，叫做input channel，和output channel。 当然现在不需要直接去实现, 卷积的原理PyTorch、或者TensorFlow什么的…
阅读更多...
YOLOv5改进 | 卷积篇 | SPD-Conv空间深度转换卷积（高效空间编码技术）

YOLOv5改进 | 卷积篇 | SPD-Conv空间深度转换卷积（高效空间编码技术）

一、本文介绍 本文给大家带来的改进内容是SPD-Conv（空间深度转换卷积）技术。SPD-Conv是一种创新的空间编码技术，它通过更有效地处理图像数据来改善深度学习模型的表现。SPD-Conv的基本概念：它是一种将图像空间信息转换为深度信息…
阅读更多...
叙永县微公益协会举办“对不适触碰说‘NO’”预防性侵教育活动

叙永县微公益协会举办“对不适触碰说‘NO’”预防性侵教育活动

（梁平 赵维维）12月16日，一场主题为“对不适触碰说‘NO’”的预防性侵教育活动在叙永县摩尼社工站成功举行。此次活动由叙永县微公益协会主办，得到了叙永县民政局和摩尼镇人民政府的大力支持和指导。本次活动旨在加强儿童性教育&am…
阅读更多...
字节跳动回应被 OpenAI 封禁账户：正与 OpenAI 联系沟通

字节跳动回应被 OpenAI 封禁账户：正与 OpenAI 联系沟通

据 The Verge 报道，字节跳动一直在秘密使用 OpenAI 的技术开发自己的具有竞争性的大语言模型，这违反了 OpenAI 的服务条款。目前，字节跳动的账户已被 OpenAI 暂停。 OpenAI 的服务条款规定，公司所输出的模型不能被用于「开发任何…
阅读更多...
a*算法代码 python,python isalpha方法

a*算法代码 python,python isalpha方法

大家好，小编来为大家解答以下问题，a*算法代码 python，python isalpha方法，今天让我们一起来看看吧！ 更新： GitHub - pierrepaleo/sift_pyocl: An implementation of SIFT on GPU with OpenCL python-siftgp…
阅读更多...
回收站数据恢复，分享3个可行方法！

回收站数据恢复，分享3个可行方法！

“我真的太粗心啦！本来想删除一些电脑里不重要的文件，但是不小心把一些很重要的文件一起删除了，这可怎么办呢？我应该通过什么方法找回这些文件呢？” 在使用电脑的过程中，误删文件是很多用户都无法避免的一件…
阅读更多...
【Swiss-Model 同源建模】

【Swiss-Model 同源建模】

Swiss-Model是一种同源建模方法，其基本原理是利用序列的同源性来推断蛋白质的三维结构。具体来说，就是通过找到与目标蛋白质序列同源且结构已知的模板蛋白质，来预测目标蛋白质的结构。 同源建模的主要步骤包括： 模板的确定&…
阅读更多...
【网络协议】网络运维管理神经-SNMP协议

【网络协议】网络运维管理神经-SNMP协议

文章目录 什么是SNMP？SNMP的组件SNMP的历史版本SNMP端口SNMP配置案例SNMP工作原理SNMP的基本工作原理SNMP的操作类型SNMP TrapsSNMP Inform SNMP的应用场景推荐阅读 什么是SNMP？ SNMP（Simple Network Management Protocol，简单网…
阅读更多...
最新文章

Copyright @ 2022~2023