【DataRoom】- 基于VUE的开源的大屏可视化设计器_Java

【dataroom】- 基于vue的开源的大屏可视化设计器

详细文档参见
1、【 gcpaas大屏设计器 - 官方文档】
2、【 gcpaas大屏设计器 - gitee源码地址】

一、环境准备

序号	软件	版本	备注
1	node	14.xx	必要
2	npm	6.xx	必要
3	mysql	8.0	必要
4	jdk	1.8	必要

二、下载源码

1、用idea下载源码

在这里插入图片描述

2、用idea打开后端代码

三、后端服务

1、新建数据库配置文件

spring:
  servlet:
    multipart:
      # 配置上传下载文件的最大值
      max-file-size: 500mb
      max-request-size: 500mb
  datasource:
    type: com.alibaba.druid.pool.druiddatasource
    driverclassname: com.p6spy.engine.spy.p6spydriver
    url: jdbc:p6spy:mysql://127.0.0.1:3306/dataroom?allowmultiqueries=true&useunicode=true&characterencoding=utf-8&usessl=false&servertimezone=asia/shanghai&rewritebatchedstatements=true&nullcatalogmeanscurrent=true
    username: root
    password: pwd
gc:
  starter:
    file:
      # 一个存储文件的绝对路径，需要有写入权限
      basepath: /root/data
      # 文件资源访问前缀，一般修改ip即可
      urlprefix: http://127.0.0.1:${server.port}${server.servlet.context-path}/static

在这里插入图片描述

2、新建数据库

在这里插入图片描述

3、初始化数据库数据

在这里插入图片描述

4、启动后端服务

在这里插入图片描述

四、前端启动

1、进入data-room-ui目录安装依赖

npm install --registry=http://registry.npmmirror.com

在这里插入图片描述

2、启动前端服务

npm run serve

在这里插入图片描述

五、体验大屏设计器

1、访问http://localhost:7521

在这里插入图片描述

2、导入地图数据

3、添加数据集

[
    {
        "type": "家具家电",
        "sales": 19
    },
    {
        "type": "粮油副食",
        "sales": 29
    },
    {
        "type": "生鲜水果",
        "sales": 50
    },
    {
        "type": "美容洗护",
        "sales": 30
    },
    {
        "type": "母婴用品",
        "sales": 60
    },
    {
        "type": "进口食品",
        "sales": 28
    },
    {
        "type": "食品饮料",
        "sales": 70
    },
    {
        "type": "家庭清洁",
        "sales": 60
    }
]