这个牛逼了，基于（SpringBoot+VUE）实现的自定义拖拽式智能大屏

IT大咖说

发布于 2022-09-20 16:12:07

2.7K0

发布于 2022-09-20 16:12:07

文章被收录于专栏：IT大咖说IT大咖说

◆ 简介

这个是一个开源的一个BI平台，酷炫大屏展示，能随时随地掌控业务动态，让每个决策都有数据支撑。

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

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

◆ 功能概述

◆ 组件介绍

大屏设计是一个可视化拖拽编辑的，直观，酷炫，具有科技感的图表工具全开源项目。内置的基础功能包括数据源，数据集，报表管理，项目部分截图如下。

◆ 数据流程图

核心技术

依赖

[Mysql] 5.7+

[Jdk] 1.8+

后端

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

截图

源码及开发文档

◆ 前言

相信从事Java开发的朋友都听说过 SSM 框架，这还算年轻的，老点的甚至经历过 SSH ，说起来有点恐怖，哈哈。比如我就是经历过 SSH 那个时代末流，没办法，很无奈。当然无论是SSM还是SSH都不是今天的重点，今天要说的是 Spring Boot ，一个令人眼前一亮的框架，从大的说，Spring Boot取代了 SSM 中的 SS 的角色。今天这篇文章就来谈谈Spring Boot，这个我第一次使用直呼爽的框架。

◆ 什么是Spring Boot？

Spring Boot 是由 Pivotal 团队提供的全新框架。Spring Boot 是所有基于 Spring Framework 5.0 开发的项目的起点。Spring Boot 的设计是为了让你尽可能快地跑起来 Spring 应用程序并且尽可能减少你的配置文件。 Spring Boot 的设计目的简单一句话：简化Spring应用的初始搭建以及开发过程。从最根本上来讲，Spring Boot 就是一些库的集合，它能够被任意项目的构建系统所使用。它使用 “约定大于配置” （项目中存在大量的配置，此外还内置一个习惯性的配置）的理念让你的项目快速运行起来。约定大于配置这个如何理解？其实简单的来说就是Spring Boot在搭建之初就内置了许多实际开发中的常用配置，只有少部分的配置需要开发人员自己去配置。

◆ 如何搭建一个Spring Boot项目？

其实搭建一个SpringBoot项目有很多种方式，最常见的两种方式如下：

创建Maven项目，自己引入依赖，创建启动类和配置文件。
直接IDEA中的 Spring Initializr 创建项目。第一种方式不适合入门的朋友玩，今天演示第二种方式搭建一个Spring Boot项目。第一步在IDEA中选择 File-->NEW-->Project ，选择 Spring Initializr ，指定 JDK 版本 1.8 ，然后Next 。如下图：
第二步指定Maven坐标、包名、JDK版等信息，然后 Next ，如下图：
第三步选择自己所需要的依赖、Spring Boot的版本，Spring Boot与各个框架适配都是以 starter 方式，这里我们选择WEB开发的所需的 starter 即可，如下图第四步指定项目的名称，路径即可完成，点击 Finish 等待创建成功，如下图：
创建成功的项目如下图：
其中的 DemoApplication 是项目的启动类，里面有一个 main() 方法就是用来启动Spring Boot。application.properties 是Spring Boot的配置文件。此时可以启动项目，在 DemoApplication 运行 main 方法即可启动，启动成功如下图：由于SpringBoot默认内置了Tomcat，因此启动的默认端口就是 8080 。

◆ 第一个程序 Hello World

学习任何一种技术总是要问候一下世界，哈哈.......... 既然是WEB开发，就写个接口吧，前面创建的时候已经引用了 WEB 的 starter ，如果没有引用，则可以在 pom.xml 引入以下依赖：

<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>

下面写一个 HelloWorldController 如下：

package com.example.demo.controller;
@RestController
public class HelloWorldController {
@RequestMapping("/hello")
public String helloWorld(){
return "Hello World";
}
}

@RestController ：标记这是一个 controller ，是 @Controller 和 @ResponseBody 这两个注解的集合。 @RequestMapping ：指定一个映射以上两个注解都是Spring中的，这里就不再细说了。由于内置的Tomcat默认端口是 8080 ，所以启动项目，访问 http://127.0.0.1:8080/hello 即可。