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

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

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

相关文章

LWIP源码认识记录

LWIP源码认识记录

1、内核：\src\core的各源文件含义 2、demo例程与移植：lwip\lwip-contrib
阅读更多...
地级市ZF工作报告文本分析-ZF数字关注度（2005-2023）

地级市ZF工作报告文本分析-ZF数字关注度（2005-2023）

数据简介： 数据来源：各政府工作报告时间跨度：2005-2023年数据范围：安康、安庆、安顺、安阳、鞍山、巴彦淖尔、巴中、白城、白山、白银、蚌埠、包头、保山、北京、本溪、滨州、亳州、常德、常州、朝阳、潮州、郴州、成都、池州、赤…
阅读更多...
ChatGPT如何做科研？？

ChatGPT如何做科研？？

2023年我们进入了AI2.0时代。微软创始人比尔盖茨称ChatGPT的出现有着重大历史意义，不亚于互联网和个人电脑的问世。360创始人周鸿祎认为未来各行各业如果不能搭上这班车，就有可能被淘汰在这个数字化时代，如何能高效地处理文本、文献查阅、PPT…
阅读更多...
酒精壁炉，现代取暖的便携选择

酒精壁炉，现代取暖的便携选择

酒精壁炉作为现代室内取暖的一种选择，具有独特的特点和工作原理。酒精壁炉采用酒精作为燃料，为家庭提供舒适的温暖，同时具备一定的安全性和便携性。 酒精壁炉通常由金属或陶瓷制成，内部设有专门的燃烧器，用于燃烧酒精燃…
阅读更多...
Discord Midjourney 安装使⽤教程（AI绘画）

Discord Midjourney 安装使⽤教程（AI绘画）

安装步骤: 1.注册Discord账号 2.进⼊Midjourney社区创作 3.创建⾃⼰服务器 安装教程: 1.注册Discord账号 账号注册的方式： 注册地址: //账号注册地址https://discord.com/ 2.进⼊Midjourney社区创作 // 邀请链接: 官方的midjourneyhttps://discord.gg/midjo…
阅读更多...
【AI基础设施】智算场景的资源管理系统与未来展望

【AI基础设施】智算场景的资源管理系统与未来展望

高性能计算与智算场景 首先澄清两个概念，高性能计算与智算场景，高性能计算主要是面向天气预测、生物计算、材料计算等场景，而最近几年很火的智算主要是面向AI场景的计算，如语音识别、图像识别、自动驾驶等场景，我们可…
阅读更多...
Qt实现的聊天画面消息气泡

Qt实现的聊天画面消息气泡

Qt实现的聊天画面消息气泡 采用基于QWidgetMingw实现的原生的消息气泡 通过覆写QWidget::paintEvent(QPaintEvent *event)方法，每当窗口尺寸变化时都会触发paintEvent事件，在覆写QWidget::paintEvent(QPaintEvent *event)方法中重新绘制聊天气泡在QListW…
阅读更多...
社交网络分析5：社交网络信息传播动力学。信息传播 、传染病模型、博弈模型和物理系统模型 、传播动力学分析 、 未来发展趋势与展望

社交网络分析5：社交网络信息传播动力学。信息传播 、传染病模型、博弈模型和物理系统模型 、传播动力学分析 、 未来发展趋势与展望

社交网络分析5： 写在最前面信息传播动力学研究概述信息传播信息接收信息发布信息反馈信息传播的预测与控制 信息传播动力学研究的目标 社交网络信息传播模型传播模型的基本要素传播模型的数学表达传染病模型博弈模型物理系统模型 提出新的物理学模型三类模型的比较提…
阅读更多...
ESP32 连接阿里云 MQTT 报错MQTT Connect err:2

ESP32 连接阿里云 MQTT 报错MQTT Connect err:2

解决方法 跳转到 这个头文件<PubSubClient.h>里 MQTT_MAX_PACKET_SIZE 把这个的大小从原来的256 改为1024 MQTT_KEEPALIVE 把这个大小从原来的15 改为65 修改后再次连接即可成功 如下图&#xff1a;
阅读更多...
字体包引入以及使用

字体包引入以及使用

将UI给的字体包下载到assets文件夹下 app.vue全局定义 <style> * {margin: 0;padding: 0; }font-face {font-family: PangMenZhengDao-3;src: url(/assets/fonts/庞门正道标题体3.0.TTF) format(truetype);font-weight: bold;font-style: normal; } </style>页面使…
阅读更多...
python如何发送企业微信群消息

python如何发送企业微信群消息

一、创建机器人&#xff0c;并获取webhook 1.1 进入企业微信中&#xff0c;添加群机器人&#xff0c;添加完成后可以获取到一个webhook的地址 1.2 群机器人企业微信接口的调用可以参考这个文件 https://developer.work.weixin.qq.com/document/path/99110#%E5%A6%82%E4%BD%…
阅读更多...
【图神经网络 · 科研思考4】动态图数据集相关 wikipedia.csv；跨域节点表示学习；跨域自监督；动态时空图跨域；无监督领域适应方法？

【图神经网络 · 科研思考4】动态图数据集相关 wikipedia.csv；跨域节点表示学习；跨域自监督；动态时空图跨域；无监督领域适应方法？

这是2023年11月份的部分科研思考（四），主体内容围绕【图神经网络】展开，科研疑问解答 & 科研基础概念了解 & 科研方向，仅学习使用。 🎯作者主页： 追光者♂🔥 🌸个人简介： 📝[1] CSDN 博客专家📝 🏆[2] 人工智能领域优质创作者🏆 �…
阅读更多...
Vue3知识点总结

Vue3知识点总结

目录 一.创建Vue2工程 1.使用 vue-cli 创建 2.使用 vite 创建 二.常用 Composition API setup ref函数 reactive函数 计算属性与监视 1.computed函数 2.watch函数 3.watchEffect函数 一.创建Vue2工程 1.使用 vue-cli 创建 查看vue/cli版本&#xff0c;确保vue/cli版本…
阅读更多...
QT自带打包问题：无法定位程序输入点?metaobject@qsound

QT自带打包问题：无法定位程序输入点?metaobject@qsound

文章目录 无法定位程序输入点?metaobjectqsound……检查系统环境变量的配置&#xff1a;打包无须安装qt的文件 无法定位程序输入点?metaobjectqsound…… 在执行release打包程序后&#xff0c;相应的release文件夹下的exe文件&#xff0c;无法打开 如有错误欢迎指出 检查系…
阅读更多...
合并 K 个排序链表——Java解答

合并 K 个排序链表——Java解答

题目&#xff1a;合并 K 个排序链表 题目描述&#xff1a; 给你一个链表数组&#xff0c;每个链表都已经按升序排列。请你将所有链表合并到一个升序链表中&#xff0c;返回合并后的链表。 示例&#xff1a; 假设有以下三个链表&#xff1a; 1->4->5, 1->3->4,…
阅读更多...
AIGC实战——条件生成对抗网络(Conditional Generative Adversarial Net, CGAN)

AIGC实战——条件生成对抗网络(Conditional Generative Adversarial Net, CGAN)

AIGC实战——条件生成对抗网络 0. 前言1. CGAN架构2. 模型训练3. CGAN 分析小结系列链接 0. 前言 我们已经学习了如何构建生成对抗网络 (Generative Adversarial Net, GAN) 以从给定的训练集中生成逼真图像。但是&#xff0c;我们无法控制想要生成的图像类型&#xff0c;例如控…
阅读更多...
如何使用JavaScript 将数据网格绑定到 GraphQL 服务

如何使用JavaScript 将数据网格绑定到 GraphQL 服务

前言 作为一名前端开发人员&#xff0c;GraphQL对于我们来说是令人难以置信的好用。它可以用来简化数据访问&#xff0c;这让我们的工作变得更加容易。 什么是 GraphQL&#xff1f;它是一个抽象层&#xff0c;位于任意数量的数据源之上&#xff0c;并为您提供一个简单的 API …
阅读更多...
日期计算 C语言xdoj68

日期计算 C语言xdoj68

问题描述 给定一个年份y和一个整数d&#xff0c;问这一年的第d天是几月几日&#xff1f; 注意闰年的2月有29天&#xff0c;且满足下面条件之一的是闰年&#xff1a; 1&#xff09; 年份是4的整数倍&#xff0c;而且不是100的整数倍&#xff1b; 2&#xff09; 年份是…
阅读更多...
激光雷达LIDAR

激光雷达LIDAR

1. 历史 公元前440年&#xff0c;古希腊哲学家、预言家、科学家、江湖术士恩培多克勒提出月亮是由反射发光&#xff1b;提出光有速度。1638年&#xff0c;伽利略提着一盏灯站在山头上&#xff0c;默默的把灯盖了起来… 远处的另一个山头上&#xff0c;他的助手在看到灯灭的一瞬…
阅读更多...
传统FC存储向NoF发展进化

传统FC存储向NoF发展进化

全闪存时代背景下&#xff0c;传统的FC&#xff08;Fibre Channel&#xff0c;网状通道&#xff09;存储网络已经无法满足全闪存数据中心的要求&#xff0c;NVMe&#xff08;Non-Volatile Memory express&#xff0c;非易失性内存主机控制器接口规范&#xff09;存储协议的出现…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023