SpringBoot整合数据可视化大屏使用

吴名氏.

已于 2024-05-20 17:56:28 修改

阅读量10w+

点赞数 4

分类专栏： Java收费专栏文章标签：信息可视化 springboot 后端 java

于 2023-03-23 16:16:43 首次发布

本文链接：https://blog.csdn.net/qq_37284798/article/details/129687808

版权

本文介绍了如何将DataV数据可视化与SpringBoot结合，创建一个数据展示应用。详细讲解了从项目创建、引入依赖、配置YML文件、设计数据库表结构，到添加静态资源和Java代码的全过程，涵盖了控制器、服务、Mapper等组件的编写。

摘要由CSDN通过智能技术生成

1 前言

DataV数据可视化是使用可视化应用的方式来分析并展示庞杂数据的产品。DataV旨让更多的人看到数据可视化的魅力，帮助非专业的工程师通过图形化的界面轻松搭建专业水准的可视化应用，满足您会议展览、业务监控、风险预警、地理信息分析等多种业务的展示需求，

部分效果图如下所示:

2 版本要求

工具	版本	备注
JDK	1.8	强制要求
Maven	3.5+
MySQL	5.7.8 +	强制要求
Redis	3.2 +

3 实现步骤

3.1 创建Springboot项目

这个就不仔细介绍了,需要的可以去百度

3.2 引入依赖

pom.xml文件如图:

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.7.0</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.wkf</groupId>
    <artifactId>datav</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>datav</name>
    <description>datav</description>
    <properties>
        <java.version>8</java.version>
        <mybatisplus.version>3.5.3</mybatisplus.version>
        <magic.version>2.0.1</magic.version>
    </properties>
    <dependencies>
        <!-- springboot 依赖 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

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

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-configuration-processor</artifactId>
            <optional>true</optional>
        </dependency>

        <dependency>
            <groupId>io.springfox</groupId>
            <artifactId>springfox-boot-starter</artifactId>
            <version>3.0.0</version>
        </dependency>

        <!-- license -->
        <dependency>
            <groupId>org.smartboot.license</groupId>
            <artifactId>license-client</artifactId>
            <version>1.0.4</version>
        </dependency>

        <!-- html页面 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>

        <!-- hutool工具类 -->
        <dependency>
            <groupId>cn.hutool</groupId>
            <artifactId>hutool-all</artifactId>
            <version>5.8.12</version>
        </dependency>

        <!-- mybatis start -->
        <!-- mysql驱动 -->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>${mysql.version}</version>
        </dependency>
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>${mybatisplus.version}</version>
        </dependency>
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-extension</artifactId>
            <version>${mybatisplus.version}</version>
        </dependency>
        <!-- 多数据源 -->
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>dynamic-datasource-spring-boot-starter</artifactId>
            <version>3.5.1</version>
        </dependency>
        <!-- mysql驱动 -->
        <!-- mybatis end -->

        <!-- lombok -->
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <version>RELEASE</version>
            <scope>compile</scope>
        </dependency>

        <!-- Valid校验 -->
        <dependency>
            <groupId>org.hibernate.validator</groupId>
            <artifactId>hibernate-validator</artifactId>
            <version>6.0.16.Final</version>
            <scope>compile</scope>
        </dependency>
        <dependency>
            <groupId>javax.validation</groupId>
            <artifactId>validation-api</artifactId>
            <version>2.0.1.Final</version>
        </dependency>

        <!-- 低代码 -->
        <dependency>
            <groupId>org.ssssssss</groupId>
            <artifactId>magic-api-spring-boot-starter</artifactId>
            <version>${magic.version}</version>
            <exclusions>
                <exclusion>
                    <artifactId>magic-editor</artifactId>
                    <groupId>org.ssssssss</groupId>
                </exclusion>
            </exclusions>
        </dependency>

    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

</project>

3.3 修改yml文件

yml文件如图:

server:
  port: 8090
spring:
  datasource:
    driverClassName: com.mysql.cj.jdbc.Driver
    dynamic:
      primary: localhost80
      datasource:
        localhost80:
          url: jdbc:mysql://127.0.0.1:3304/datav?allowMultiQueries=true&useUnicode=true&characterEncoding=UTF-8&useSSL=false&serverTimezone=GMT%2B8
          username: root
          password: 123456
    hikari:
      minimum-idle: 20
      maximum-pool-size: 300

#大屏可视化
datav:
  img-path: /img/

mybatis-plus:
  mapper-locations: classpath*:mapper/**/*.xml
  typeAliasesPackage: com.wkf.datav.entity.**
  configuration:
    call-setters-on-nulls: true
    log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
  # 关闭 mybatis-plus banner
  global-config:
    banner: false

3.4 数据库表结构

数据库表结构如图所示:


CREATE TABLE `data_visual` (
  `id` bigint NOT NULL,
  `background_url` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci DEFAULT NULL,
  `category` bigint DEFAULT NULL,
  `password` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci DEFAULT NULL,
  `status` bigint DEFAULT NULL,
  `title` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci DEFAULT NULL,
  PRIMARY KEY (`id`) USING BTREE
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci ROW_FORMAT=DYNAMIC;

CREATE TABLE `data_visual_category` (
  `id` bigint NOT NULL,
  `category_key` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci DEFAULT NULL,
  `category_value` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci DEFAULT NULL,
  PRIMARY KEY (`id`) USING BTREE
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci ROW_FORMAT=DYNAMIC;

CREATE TABLE `data_visual_config` (
  `id` bigint NOT NULL,
  `component` longtext CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci,
  `detail` longtext CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci,
  `visual_id` bigint DEFAULT NULL,
  PRIMARY KEY (`id`) USING BTREE
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci ROW_FORMAT=DYNAMIC;

CREATE TABLE `data_visual_map` (
  `id` bigint NOT NULL,
  `data` longtext CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci,
  `name` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci DEFAULT NULL,
  PRIMARY KEY (`id`) USING BTREE
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci ROW_FORMAT=DYNAMIC;

3.5 添加静态文件(html,js,css等)

3.5.1 在resource下的templates文件夹添加index.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta http-equiv="DataV-Build-Version" content="2023-03-16 12:27:52">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <link rel="stylesheet" href="/cdn/iconfont/iconfont.css">
    <link rel="stylesheet" href="