项目源码｜DataRoom 大屏设计器｜Spring Boot 3 + Vue 3 · 拖拽做数据可视化大屏

课设、毕设答辩，老师常要一块「数据可视化大屏」。DataRoom 就是专门拖大屏的工具：建数据集、拖图表、绑字段、发布，全在浏览器里完成。后端是 Spring Boot 3，前端是 Vue 3 + ECharts。默认用内置的 H2 数据库，不装 MySQL 也能跑。本机已完整跑通：自建数据集 → 拖柱状图和折线图 → 绑定数据 → 发布后全屏查看，图表都真出了数。本帖 80 积分，下载区是完整前后端源码和中文部署说明。

4 步上手

1. 装环境：JDK 17、Maven 3.9+、Node 20.19+。官方 Docker 镜像只有 arm64，普通 x86 电脑要从源码构建。
2. 构建：前端 npm install 后用 npx vite build；后端 mvn clean package -Dmaven.test.skip=true。
3. 启动：java -jar dataRoomServer.jar，打开 http://127.0.0.1:8081/dataRoom/static/front/index.html。
4. 做一块大屏：先建一个 JSON 数据集，再新建大屏、拖一个柱状图、绑定字段，发布后点「访问」。

能做什么

• 大屏设计器：拖拽摆放组件，带标尺、图层、撤销/恢复、保存和发布
• 组件库：折线、柱状、饼图、仪表盘、指标卡、表格、文本、地图等十几类
• 数据集：本篇实测了 JSON 数据集；HTTP、SQL、Excel/CSV、ES、WebSocket 数据集支持但本篇未实测
• 素材库：上传自己的图片、视频、3D 模型，也带一套内置系统素材
• 控制台：用户与角色管理、访问日志
• 还支持 PC 端栅格看板、地图管理、页面分享、MySQL/PG 数据源、接大模型对话生成大屏。这几项支持但本篇未实测。

数据集：给图表喂数据的「数据表」。可以是一段 JSON，也可以是一条 SQL 或一个接口。

H2：嵌在程序里的文件数据库。数据存在本地一个文件里，不用单独装数据库服务。

技术栈（压缩）

• 后端：Spring Boot 3.5 + MyBatis-Plus，JDK 17
• 前端：Vue 3 + Vite + Element Plus，图表用 ECharts
• 数据库：默认 H2；可换 MySQL / PostgreSQL

本机部署（已跑通）

1. 构建前端

cd dataRoomFront
npm install
npm install --no-save zod@^4
npx vite build

第二行是补依赖。不装的话，打包会报 "z" is not exported by zod/v4。直接 npm run build 会先做类型检查，当前版本有 23 个 TS 报错，会中断。用 npx vite build 跳过检查即可，页面功能不受影响。

2. 构建后端

mvn clean package -Dmaven.test.skip=true

产物是 dataRoomServer/target/dataRoomServer.jar。本机约 24 秒。

3. 组装并启动

把 jar、config/（几个 yml 配置）和前端产物 dataRoomFront/front/ 放进同一个目录，然后：

java -jar dataRoomServer.jar

首次启动会自动建表，并写入内置账号，不用导 SQL。

验收：登录 → 数据集 → 大屏 → 发布

登录

首次启动内置本地默认账号，登录后立刻改密。改密入口在「控制台 → 用户管理 → 编辑」。密码连续输错 3 次，账号会锁 10 分钟。

建数据集

进「数据集 → 新增 → JSON 数据集」。粘贴或上传一段 JSON，点「仅测试」看预览，没问题再点「测试并保存」。

pv / uv：pv 是页面被打开的次数，uv 是来访的人数。

新建大屏

「页面设计 → 新增」先建一个目录，再在目录里新建「大屏」。

拖组件、绑数据

点「设计」进设计器，再点顶部「组件」。

组件插进来会叠在左上角。在右侧「样式」页填位置和尺寸，摆开就好。新组件默认显示假数据。选了数据集、绑好字段，才会换成你的数据。

发布和全屏查看

点右上「发布」，确认「保存并发布」。回到页面管理，鼠标移到卡片上点「访问」，就是开头那张全屏效果。

素材库

用户和访问日志

实测踩坑

1. x86 别拉官方镜像：它只有 arm64 版本，要自己从源码构建。
2. 前端打包缺 zod：先 npm install --no-save zod@^4。
3. 类型检查过不去：用 npx vite build，别用 npm run build。官方打包脚本 release.sh 也会卡在这一步，我是手工组装的。
4. 入口地址要写全：直接开 8081/dataRoom 只会返回一段 401 的 JSON。页面在 /dataRoom/static/front/index.html。
5. 组件插入后先是假数据：绑完数据集和字段才出真数。
6. 改密码时等编辑框加载完再输入：我用脚本操作时太快，密码被拼重复了，后来是重设才登上的。手动点不会碰到。

安全与合规

• 上线前换密钥：RSA 密钥对和 JWT 密钥默认写在公开源码里，人人都一样。
  • 后端在 application-base.yml，前端在 .env.production，两边都要改，改完重新打包前端。
  • 用户密码是用这对密钥加密存的，能解密，不是哈希。换密钥前要用新公钥重新加密 admin 密码，不然会登不上。具体命令写在 DEPLOY.txt。
• H2 控制台别对外：/dataRoom/h2-console 默认开着。上线请关掉，或换 MySQL。接口文档 /dataRoom/doc.html 也按需关闭。
• Groovy 脚本保持禁用：默认是关的，别打开。
• 内置素材仅供学习：项目说明写明系统素材源自网络、版权归原作者，只能学习研究。本篇截图用的都是我自己做的图表和图片。
• AI 对话生成大屏：需要自己配 OpenAI 兼容接口的 Key（用环境变量注入）。支持但本篇未实测。
• 协议为 Apache-2.0：再分发请保留 LICENSE。
• 源码包在本帖下载区：完整前后端源码 + 中文 DEPLOY.txt。已去掉来源不明的内置系统素材图片（需要可自行从项目官方渠道获取），以及 node_modules、target、.git 和本地数据库，里面没有我改过的任何密码。

装 JDK 17 → 打包前后端 → 启动 → 建数据集拖图表，一块能出真数的数据大屏就做好了。