基于 SpringBoot + Vue 实现的可视化拖拽编辑的大屏项目
今天给小伙伴们分享一个基于 SpringBoot + Vue 实现的可视化拖拽编辑的大屏项目;
一、简介
这个是一个开源的一个BI平台,酷炫大屏展示,能随时随地掌控业务动态,让每个决策都有数据支撑。
多数据源支持,内置mysql、elasticsearch、kudu驱动,支持自定义数据集省去数据接口开发,支持17种大屏组件,不会开发,照着设计稿也可以制作大屏。
三步轻松完成大屏设计:配置数据源---->写SQL配置数据集---->拖拽配置大屏---->保存发布。欢迎体验。
二、功能概述
2.1 组件介绍
大屏设计是一个可视化拖拽编辑的,直观,酷炫,具有科技感的图表工具全开源项目。内置的基础功能包括数据源,数据集,报表管理,项目部分截图如下。

2.2 # 数据流程图

2.3 # 核心技术
2.3.1 依赖
-
[Mysql] 5.7+
-
[Jdk] 1.8+
2.3.2 后端
-
Spring Boot2.3.5.RELEASE: Spring Boot是一款开箱即用框架,让我们的Spring应用变的更轻量化、更快的入门。在主程序执行main函数就可以运行。你也可以打包你的应用为jar并通过使用java -jar来运行你的Web应用;
-
Mybatis-plus3.3.2: MyBatis-plus(简称 MP)是一个 MyBatis (opens new window) 的增强工具。
-
flyway5.2.1: 主要用于在你的应用版本不断升级的同时,升级你的数据库结构和里面的数据
2.3.3 前端
-
npm:node.js的包管理工具,用于统一管理我们前端项目中需要用到的包、插件、工具、命令等,便于开发和维护。
-
webpack:用于现代 JavaScript 应用程序的_静态模块打包工具
-
ES6:Javascript的新版本,ECMAScript6的简称。利用ES6我们可以简化我们的JS代码,同时利用其提供的强大功能来快速实现JS逻辑。
-
vue-cli:Vue的脚手架工具,用于自动生成Vue项目的目录及文件。
-
vue-router:Vue提供的前端路由工具,利用其我们实现页面的路由控制,局部刷新及按需加载,构建单页应用,实现前后端分离。
-
element-ui:基于MVVM框架Vue开源出来的一套前端ui组件。
-
avue: 用该组件包裹后可以变成拖拽组件,采用相对于父类绝对定位;用键盘的上下左右也可以控制移动
-
vue-echarts: vue-echarts是封装后的vue插件,基于 ECharts v4.0.1+ 开发
-
vue-superslide: Vue-SuperSlide(Github) 是 SuperSlide 的 Vue 封装版本
-
vuedraggable: 是一款基于Sortable.js实现的vue拖拽插件。
2.4 # 截图






项目开源地址http://开源地址:https://gitee.com/anji-plus/report
动动你发财的小手,点赞加关注,别白嫖,你的支持是我持续创作的动力
相关文章:
基于 SpringBoot + Vue 实现的可视化拖拽编辑的大屏项目
今天给小伙伴们分享一个基于 SpringBoot Vue 实现的可视化拖拽编辑的大屏项目; 一、简介 这个是一个开源的一个BI平台,酷炫大屏展示,能随时随地掌控业务动态,让每个决策都有数据支撑。 多数据源支持,内置mysql、el…...
我们为什么要写作?
为什么要写书是一个很难回答的问题,因为从不同的角度,会有不同的答案。 最近ChatGPT很火!诸事不决,先问问ChatGPT,看看它是怎么回答的。 ChatGPT给出的答案还是比较全,虽然没有“一本正经的胡说八道”&…...
设计模式:创建者模式 - 建造者模式
文章目录 1.概述2.结构3.实例4.优缺点5.使用场景6.模式扩展 1.概述 将一个复杂对象的构建与表示分离,使得同样的构建过程可以创建不同的表示。 分离了部件的构造(由Builder来负责)和装配(由Director负责)。 从而可以构造出复杂的对象。这个模式适用于:某…...
String a = new String(“abc“); 创建了几个对象?String a = “abc“; 呢?
String a new String(“abc”); 创建了几个对象?String a “abc”; 呢? 答案:String a new String(“abc”); 创建了1个或2个对象;String a “abc”; 创建了0个或1个都对象 String a new String(“abc”); 创建过程 首先在…...
keepalived+nginx安装
欢迎使用ShowDoc! 1、安装基础包: yum -y install libnl libnl-devel 2、上传包: tar -zxvf keepalived-2.0.20.tar.gz -C /data/imas/base_soft mkdir -p /data/imas/base_soft/keepalived cd /data/imas/base_soft/keepalived-2.0.20 .…...
硬盘格式化工具,强烈推荐这个!
案例:硬盘格式化工具推荐 【我的电脑已经用了好几年了,硬盘存储容量严重不够了,最近想把它格式化,但却不知道怎么操作,大家有什么比较好的硬盘格式化工具可以推荐吗?】 硬盘作为存储设备,我们…...
Python的异常捕获和处理
程序在运行过程当中,不可避免的会出现一些错误,比如:使用了没有赋值过的变量,使用了不存在的索引,一个数字除以0 …… 这些错误在程序中,我们称其为异常。 程序运行过程中,一旦出现异常将会导致…...
oracle学习之rownum和rowid
rownum先百度一波https://www.cnblogs.com/xfeiyun/p/16355165.html rownum是oracle特有的一个关键字。 对于基表,在insert记录时,oracle就按照insert的顺序,将rownum分配给每一行记录,因此在select一个基表的时候,r…...
为什么说过早优化是万恶之源?
Donald Knuth(高德纳)是一位计算机科学界的著名学者和计算机程序设计的先驱之一。他被誉为计算机科学的“圣经”《计算机程序设计艺术》的作者,提出了著名的“大O符号”来描述算法的时间复杂度和空间复杂度,开发了TeX系统用于排版…...
如何用 ModelScope 实现 “AI 换脸” 视频
前言 当下,视频内容火爆,带有争议性或反差大的换脸视频总能吸引人视线。虽然 AI 换脸在市面上已经流行了许久,相关制作工具或移动应用也是数不胜数。但是多数制作工具多数情况下不是会员就是收费,而且替换模板有限。以下在实战的角…...
怎么样成为一名Python工程师?到底要会哪些东西?你会了多少?
目录 重点:爬虫部分项目、源码展示python数据分析可视化大屏看板python爬虫爬取淘宝卤鸭货商品数据python游戏开发python自动化办公 重点: 1、做一名程序员,绝对要耐得住寂寞,并且要一直有点兴趣促进你学习。如果你完全没兴趣&am…...
项目前期1.0
今天是项目的第二天 昨天一顿迷茫,可恶 今天啥也不关先来点基本的构架 #include<queue>//队列 #define FALSE 0 #define TRUE 1 #define ERROR 0 #define OK 1 #define nocnect 999999//未链接的距离 #define maxplace 31//景区的观景点的最大个30数不要0下标的 #defi…...
MySQL语句执行耗时分析
MySQL语句执行耗时分析 MySQL Profile查看SQL执行各阶段耗时Performance Schema查看SQL执行各阶段耗时配置收集哪些用户的SQL执行信息开启SQL执行信息收集的相关特性执行目标SQL获取SQL执行的EVENT_ID获取SQL执行各阶段耗时 MySQL Profile查看SQL执行各阶段耗时 --开启SQL Pro…...
FVM链的Themis Pro(0x,f4) 5日IDO超百万美元,领Filecoin重回高点
交易一直是 DeFi 乃至web3领域最经久不衰的话题,也因此催生了众多优秀的去中心化协议,如 Uniswap 和 Curve。这些协议逐渐成为了整个系统的基石。 在永续合约方面,DYDX 的出现将 WEB2 时代的订单簿带回了web3。其链下交易的设计,仿…...
【PMP】优秀的项目经理如何做好范围管理?
范围管理是项目管理中的一个专用词汇,它的主要任务是界定项目包含且只包含所有需要完成的工作,并对项目其他管理工作起到指导作用,以保证顺利完成项目的所有过程。确定了项目范围,也就确定了项目的工作边界,明确了项目…...
【Linux】 密码相关。pwconv
密码相关。pwconv 在linux中,早期的用户密码(经过加密)存放在/etc/passwd文件之中,但是大多数的应用程序通常都需要读取这个文件,所以会造成一定的安全隐患 因此后来的linux(centos)系统将这个…...
揭秘阿里新大招:大模型只是前菜
技术的代际变革往往对商业格局产生深远影响。眼下,随着产业各界对大模型的投入布局加深,一个业界共识逐渐诞生:大模型正在改变云生态,将为云计算行业带来新的奇点。 在过去的一段时间里,市场研究机构IDC在2022年底的预…...
【U8+】win10/11系统注册用友U8硬加密
【问题需求】 由于用友U813.0及之前版本都是硬加密, 并且注册的时候严格要求使用IE浏览器。 但是随着系统的升级,绝大多数的都开始使用win10/11系统。 并且IE浏览器已经不支持win10/11系统, 取而代之的是Edge浏览器。 【经验分享】 以下分享…...
SQL Server 服务器安装配置和使用
目录 一、SQL Server概述 1、SQL Server 环境需求 2、SQL Server的特点和组成 (1)SQL Server 特点 (2)SQL Server 基本组成 3、SQL Server 安装需注意 (1)数据文件的存储位置 (2…...
Spring常见面试题汇总
文章目录 在Spring中,Bean的作用域有哪几个?SpringMVC的执行流程你知道吗?谈谈你对Spring IOC的理解?DI又是什么?谈谈你对Spring AOP的理解?Spring Bean的生命周期你能说出多少?Spring如何解决循…...
【力扣数据库知识手册笔记】索引
索引 索引的优缺点 优点1. 通过创建唯一性索引,可以保证数据库表中每一行数据的唯一性。2. 可以加快数据的检索速度(创建索引的主要原因)。3. 可以加速表和表之间的连接,实现数据的参考完整性。4. 可以在查询过程中,…...
相机Camera日志实例分析之二:相机Camx【专业模式开启直方图拍照】单帧流程日志详解
【关注我,后续持续新增专题博文,谢谢!!!】 上一篇我们讲了: 这一篇我们开始讲: 目录 一、场景操作步骤 二、日志基础关键字分级如下 三、场景日志如下: 一、场景操作步骤 操作步…...
深入浅出:JavaScript 中的 `window.crypto.getRandomValues()` 方法
深入浅出:JavaScript 中的 window.crypto.getRandomValues() 方法 在现代 Web 开发中,随机数的生成看似简单,却隐藏着许多玄机。无论是生成密码、加密密钥,还是创建安全令牌,随机数的质量直接关系到系统的安全性。Jav…...
Caliper 配置文件解析:config.yaml
Caliper 是一个区块链性能基准测试工具,用于评估不同区块链平台的性能。下面我将详细解释你提供的 fisco-bcos.json 文件结构,并说明它与 config.yaml 文件的关系。 fisco-bcos.json 文件解析 这个文件是针对 FISCO-BCOS 区块链网络的 Caliper 配置文件,主要包含以下几个部…...
[Java恶补day16] 238.除自身以外数组的乘积
给你一个整数数组 nums,返回 数组 answer ,其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法,且在 O(n) 时间复杂度…...
【C++从零实现Json-Rpc框架】第六弹 —— 服务端模块划分
一、项目背景回顾 前五弹完成了Json-Rpc协议解析、请求处理、客户端调用等基础模块搭建。 本弹重点聚焦于服务端的模块划分与架构设计,提升代码结构的可维护性与扩展性。 二、服务端模块设计目标 高内聚低耦合:各模块职责清晰,便于独立开发…...
Java线上CPU飙高问题排查全指南
一、引言 在Java应用的线上运行环境中,CPU飙高是一个常见且棘手的性能问题。当系统出现CPU飙高时,通常会导致应用响应缓慢,甚至服务不可用,严重影响用户体验和业务运行。因此,掌握一套科学有效的CPU飙高问题排查方法&…...
处理vxe-table 表尾数据是单独一个接口,表格tableData数据更新后,需要点击两下,表尾才是正确的
修改bug思路: 分别把 tabledata 和 表尾相关数据 console.log() 发现 更新数据先后顺序不对 settimeout延迟查询表格接口 ——测试可行 升级↑:async await 等接口返回后再开始下一个接口查询 ________________________________________________________…...
tauri项目,如何在rust端读取电脑环境变量
如果想在前端通过调用来获取环境变量的值,可以通过标准的依赖: std::env::var(name).ok() 想在前端通过调用来获取,可以写一个command函数: #[tauri::command] pub fn get_env_var(name: String) -> Result<String, Stri…...
uniapp 实现腾讯云IM群文件上传下载功能
UniApp 集成腾讯云IM实现群文件上传下载功能全攻略 一、功能背景与技术选型 在团队协作场景中,群文件共享是核心需求之一。本文将介绍如何基于腾讯云IMCOS,在uniapp中实现: 群内文件上传/下载文件元数据管理下载进度追踪跨平台文件预览 二…...
