您现在的位置是:首页 > 正文

SpringBoot + Vue 实现的可视化拖拽编辑的大屏项目

2024-04-01 00:56:35阅读 2

点击关注公众号,利用碎片时间学习

来源:爪哇笔记

简介

大屏设计(AJ-Report)是一个可视化拖拽编辑的全开源项目,直观,酷炫,具有科技感的图表工具。内置的基础功能包括数据源,数据集,报表管理。

多数据源支持,内置mysql、elasticsearch、kudu驱动,支持自定义数据集省去数据接口开发,支持17种大屏组件,不会开发,照着设计稿也可以制作大屏。

三步轻松完成大屏设计:配置数据源—->写SQL配置数据集—->拖拽配置大屏—->保存发布。欢迎体验。

数据流程图

65416b12c085c5914e0858f8ca326f41.png
图片

核心技术

后端
  • 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: 主要用于在你的应用版本不断升级的同时,升级你的数据库结构和里面的数据

前端
  • 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拖拽插件。

截图

bbdb10dc4e3c100db5a795b25b36c47d.png
图片
59c1b720cd9fa4d038262ca2ecd88ce5.png
图片
d5933ff621b58c6ebe024c358d0f7994.png
图片
1fc6179c70c3b38f49feeb132f7bcdc5.png
图片
d5617f5c58409f857cfa4927b623cf92.png
图片
  • 源码:gitee.com/anji-plus/report

  • 模板:gitee.com/52itstyle/visual-large-screen

推荐:

主流Java进阶技术(学习资料分享)

d4b556f0a9bbc78e5d2e5f916709901e.png

PS:因为公众号平台更改了推送规则,如果不想错过内容,记得读完点一下“在看”,加个“星标”,这样每次新文章推送才会第一时间出现在你的订阅列表里。点“在看”支持我们吧!

网站文章

  • elementUI表格滚动条修改(完整版)

    elementUI表格滚动条修改(完整版)

    element-ui中的表格el-table滚动条样式修改(完整版)

    2024-04-01 00:56:29
  • SpringSecurity实现Oauth2.0

    SpringSecurity实现Oauth2.0。

    2024-04-01 00:56:23
  • JS之去除数组中的数据(0, 空,undefined, null, false)

    1.Array.filter() arr.filter(Boolean) 2.通过遍历判断数组 空字符,undefined, null, false , 0转化为布尔类型都是 false; let a...

    2024-04-01 00:55:59
  • IDEA的 Debug窗口消失不见了的问题解决

    IDEA的 Debug窗口消失不见了的问题解决

    对于老用户来说,用起来不是很习惯,如何调出窗口呢?

    2024-04-01 00:55:52
  • bzoj4184 shallot(线段树时间分治+线性基)

    我们按时间建线段树,把所有数的存在时间求出来,一定是一个连续的区间,插到线段树对应区间上。线段树每个节点挂一个vector来存数。这样就把删除操作避免掉了。然后从上到下dfs一遍线段树,把每个叶子的线性基合并出来即可,复杂度O(nlognlogw)O(nlognlogw)O(nlognlogw) 空间O(nlogn+nlogw)O(nlogn+nlogw)O(nlogn+nlogw)#inc...

    2024-04-01 00:55:46
  • html5 学习之路 一(视频、音频、拖放)

    html5 基本概念:

    2024-04-01 00:55:21
  • python面向对象

    面向对象属性查找1.先从对象的名称空间找2.再从对象类的类变量找3.在找父类的类变量先对象本身-->类-->父类-->父类的父类-->object-->自己定制的元类-->typeclass people(): v_id=0 def __init__(self,name): self.name=namec...

    2024-04-01 00:55:15
  • easyheap

    easyheap

    首先,检查一下程序的保护机制,发现没开PIE,且got表可写然后,我们用IDA分析一下,发现没有show功能出现了很多sub_4008F1()函数我们一个个点开看一下,发现最后一个是创建,为了便于分析我们可以改成add(n)可以看出创建节点功能里,存在ptr[i]堆内容未初始化的漏洞经过分析,节点的结构体如下struct Obj{ char *Data; int Size...

    2024-04-01 00:55:06
  • 障碍物决策横纵向标签

    决策

    2024-04-01 00:55:00
  • SFP光纤笼子 别称 作用 性能要点 工程要素

    SFP光纤笼子 别称 作用 性能要点 工程要素

    2023年,Hqst盈盛电子于下属五金部开发生产SFP光纤连接器笼子等系列产品,所有产品生产及性标准都将参照连接器产品常用测试标准EIA-364-C等标准,以下为我司常规SFP光纤连接器基本性能要求。...

    2024-04-01 00:54:35