ARTICLE DETAIL

资讯详情

深耕网站建设与运营推广的一线实战洞察。

从零搭建datart二开环境:前后端联调、Spring Boot与React配置实战

从零搭建datart二开环境:前后端联调、Spring Boot与React配置实战 datart二开的坑我在两年前刚接触时就踩了个遍。当时接到一个数据可视化平台改造的需求技术选型看了好几个开源BI项目最后锁定datart理由很简单图表组件可定制、数据源能SPI扩展、前后端结构清晰而且它对中小规模的二开团队非常友好。但真正动手才发现GitHub上的README只告诉你怎么跑起来没人告诉你怎么跑顺尤其是本地前后端联调、配置文件、数据库初始化、Redis依赖那些细节文档一字没提。这篇就把我从零搭起datart二开环境的完整过程写下来包括目录结构、配置修改、启动顺序、以及每个环节容易让人卡住的异常按实际执行顺序讲你能直接照着抄。1. 先划定二开边界每个子模块被改到什么程度才划算datart二开环境搭建之所以让很多人犯难根源在于它不是一个单JAR跑天下的项目而是前后端分离、多模块依赖的东西。动手之前你得明确自己要在哪一层做改动否则容易陷入无目的地改代码的状态。1.1 datart的项目分层与二开切入点datart的仓库结构大致分成这么几块server是Spring Boot后端负责鉴权、数据源管理、SQL解析、看板元数据、导入导出frontend是React前端负责数据图表渲染、看板编排、管理界面bin和config是部署辅助脚本和配置文件目录此外还有db目录放数据库初始化脚本。二开人员的改动基本集中在两块后端扩展数据源或鉴权前端做图表组件或主题定制。我推荐第一次接触的人先不要一上来就动源码而是用官方release包把生产模式跑通一遍再看源码结构。这样你对最终产物长什么样有直观认知再回到二开环境里改心中会有一条完整链路不至于改了前端却不知道如何和后端对齐接口或者改了后端却不知道该怎么让前端拿到新字段。1.2 二开环境需要哪些基础设施除了JDK和Mavendatart后端还有两个硬依赖一个是Redis另一个是数据库官方适配最好的是PostgreSQLMySQL也能用。很多人搭环境第一步就卡在这里本地没有Redis实例或者装了Redis但没改Config后端启动后一脸蒙。我这里给出一个基础的依赖清单结合我个人常用的版本组合依赖项推荐版本说明JDK1.8或11如果后端代码依赖较新语法建议用11Maven3.6用于后端多模块编译Node.js14 LTS或16 LTS前端编译需要版本过高可能有node-sass等原生模块问题Yarn1.x前端依赖管理npm也能凑合但lockfile建议用yarnPostgreSQL12存储datart的元数据、定时任务信息Redis5存放会话、验证码、缓存注意datart官方在不同release版本中对Node版本和Java版本的要求可能有微调。下面所有操作我都以较稳定的release分支为前提具体版本以你clone下来的pom.xml和frontend/package.json标注为准。前面说清楚了边界和依赖下面进入正题先从后端开始。2. 后端环境搭建不只要能编译还要顺利起服务后端是datart的中枢一切请求先过它。二开环境里我们的目标是能在IDE里直接启动后端改完代码能热加载并且数据库、Redis、文件存储都指向本地。这比打一个部署包再跑要舒服得多。2.1 克隆源码与初始化目录结构先用Git把官方仓库拉下来并切换到你要基于的release分支git clone https://github.com/running-elephant/datart.git cd datart git checkout release-1.0.0-beta.4 # 示例分支实际以官方维护分支为准拉完代码后重点看三个目录server后端Maven模块、frontend前端React工程、config样例配置文件。config目录下的文件在打包时会被复制到分发目录里但二开时我一般直接改项目里的dev配置模板而不是每次打包后去改分发目录里的文件。有一点容易被忽略datart是一个多模块Maven项目server依赖core和>CREATE USER datart WITH PASSWORD datart123; CREATE DATABASE datart OWNER datart; GRANT ALL PRIVILEGES ON DATABASE datart TO datart;需要注意的是datart启动时可能会自动执行结构初始化或由运维执行db目录下的初始化脚本具体取决于你下载的版本。db/目录下可能会有sql文件如果存在提前执行初始化脚本会比让后端启动时自动建表更稳妥因为在某些版本里自动建表和后续版本升级脚本的兼容性并不完美。我通常的操作顺序是先建空库然后启动一次后端让它自动建基础表结构如果启动日志报表不存在之类的错误再手动执行db目录中的初始化SQL。2.3 配置文件调整数据源和Redis是主要改动点datart的配置文件采用了外部化配置的方式主要改config/application-config.yml和config/application-datasource.yml不同版本文件名可能略有差异。在二开环境中我习惯复制一份为application-local.yml然后指定Spring的profile加载它。这种做法的好处是git提交代码时不会把本机密码带上去同事拉代码后各自维护自己的local配置。数据源的关键配置项大致长这样spring: datasource: driver-class-name: org.postgresql.Driver url: jdbc:postgresql://localhost:5432/datart username: datart password: datart123Redis配置类似spring: redis: host: localhost port: 6379 database: 0还有一个容易遗漏的地方如果后端和前端在不同端口上运行需要确认Redis的序列化方式。不同版本的datart可能默认使用JDK序列化或JSON序列化如果你是自己装的全新Redis实例一般不需要额外配置但如果是复用公司已有的Redis且key有前缀或序列化冲突就需要注意这个点。2.4 在IDE中启动后端用IDEA打开项目后找到server模块下的主类类名通常类似datart.Application或DatartServerApplication。右键运行前需要确认两件事启动类的Working directory是哪个目录如果配置文件不在项目根目录下Spring可能找不到。我一般固定设为server模块根目录并在启动参数里通过--spring.config.additional-locationfile:../config/指向外部配置。启动参数里是否指定了profile例如--spring.profiles.activelocal否则会加载默认配置。如果启动过程中遇到端口占用可以在application-config.yml里修改server.port。datart后端默认端口一般是8080你在前面启动其他项目占用了也不用慌改掉即可前端代理那边也得同步改。2.5 后端起不来时的快速定位链我遇到过好几次后端起不来的情况总结下来高频原因就三类Redis没启动或连接失败日志里会报Unable to connect to Redis。确认Redis进程存在、端口正确即可。数据库连接失败或账号权限不足检查PostgreSQL的pg_hba.conf是否允许本地密码登录。MySQL驱动不匹配如果你非要用MySQL记得确认pom里的驱动版本与本地MySQL版本兼容8.x驱动连接5.7数据库一般没问题反过来则容易报认证插件错误。后端跑起来后访问http://localhost:8080如果返回404或类似响应不用慌——datart前端没有内置在后端静态资源里时根路径返回404是正常的真正的接口文档一般在/swagger-ui.html或/api/v1/docs下可视化页面要看前端是否启动。3. 前端环境搭建联调之前先打通代理链路datart前端是一个相对复杂的React应用图表库、状态管理、路由都有。搭建二开环境时前端的核心目标有两个一是能在本地以开发模式运行hot reload实时生效二是能通过代理把/api等路径转发到后端实现前后端联调。3.1 安装依赖并解决node-sass之类的问题进入frontend目录后先看package.json里定义的包管理器。官方推荐Yarn那我建议你也用Yarn避免npm生成的lock文件导致依赖版本漂移。cd frontend yarn install在执行这一步时最常见的坑是原生模块编译失败例如node-sass在Node 16以上版本经常报Error: Node Sass does not yet support your current environment。解法很简单升级sass到sass或dart-sass实现或使用项目支持的Node版本。我在本机用Node 14 LTS时基本没遇到过编译问题。3.2 前端开发服务器与代理配置datart前端通常会在frontend/.env或frontend/config目录下定义接口地址。如果没有现成的环境变量文件就手动创建.env.developmentREACT_APP_API_HOSThttp://localhost:8080然后在React的代理配置里把/api路径转发到后端// 示例代理配置内容 proxy: { /api: { target: http://localhost:8080, changeOrigin: true } }这个代理的作用很关键。如果你直接在前端代码里写死后端地址会导致跨域问题走代理后浏览器只需要访问前端地址默认http://localhost:3000代理在服务端转发到8080天然规避了浏览器的CORS限制。3.3 启动前端并验证前后端联通执行启动命令yarn start启动完成后打开浏览器访问http://localhost:3000。如果能看到登录页说明前端构建成功输入账号密码前先打开浏览器开发者工具的Network面板看登录请求是否发到了http://localhost:3000/api/...并被正确转发。若请求落在8080且返回正常JSON说明整个链路是通的。如果登录时报401一般有两种可能一是后端没有初始化管理员账号需要用初始化用户登录默认可能是admin/123456二是我在下一节要说的Redis序列化问题。4. 二开时最常动手的几个位置从数据源到图表前端环境跑通只是第一步。既然叫二开环境搭建那必然得知道开完环境之后改什么。这一节讲datart二开中最常改的几个代码位置也是我当时评估这个项目时重点看的几个扩展点。4.1 扩展数据源走SPI还是直接改providerdatart后端的>dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-devtools/artifactId optionaltrue/optional /dependency注意把optional设为true避免影响生产打包。同时IDEA里要开启Build project automatically并在Advanced Settings中勾选Allow auto-make to start even if developed application is currently running。这套配置完成后后端重启速度会明显加快。6.2 用脚本一键启动依赖服务本地每次开机后要手动启动PostgreSQL和Redis还要再启动后端和前端操作特别繁琐。我写了一个简单的shell脚本放到项目目录外#!/bin/bash echo 启动 Redis redis-server /usr/local/etc/redis.conf --daemonize yes echo 启动 PostgreSQL brew services start postgresql14 echo 等待3秒确保数据库就绪 sleep 3 echo 启动后端 cd /path/to/datart/server mvn spring-boot:run -Dspring-boot.run.profileslocal /tmp/datart-backend.log 21 echo 后端启动日志tail -f /tmp/datart-backend.log前端单独开一个终端窗口跑yarn start因为它的日志需要实时查看。6.3 版本管理把dev配置与代码分离二开团队最怕的是上次还能跑这次拉完代码跑不起来了往往是因为有人把本机配置提交到了公共分支。我的做法是把本机外部配置放到项目根目录之外的~/datart-local-config/。通过Spring的spring.config.additional-location指定该目录。团队共享一个模板配置放在仓库的config/下里面只留占位符和官方默认值。这样即使同事拉取了你的代码也不会覆盖他的本地配置。就算有人提交了错误配置因为Spring的加载优先级是追加目录高于默认目录也不会影响本地启动。6.4 前端构建缓慢时的加速方案datart前端的依赖体积不小首次构建可能需要好几分钟后面增量编译虽然快但每次切换Git分支时也会因为依赖版本不同而重新安装。我的经验是给yarn配置离线镜像或者在内网搭建一个npm私有仓库。如果只是在本地单人开发最简单的方式是把node_modules目录放到全局缓存位置切换分支时尽量复用而不是频繁执行yarn install。但要注意不要提交node_modules到git这是红线。文章写到这里技术链条已经完整了。最后聊一点我在datart二开环境搭建上的个人体会很多人以为搭环境是个一次性工作其实它更像一个持续维护的过程——你每切换一个版本、每增加一个新模块都可能要回来调整依赖或配置。建议在搭建过程中随时记录一份自己的README把本次环境中改过的配置项、启动命令、踩过的坑都写下来等三个月后再看第二个项目你会发现这份记录比任何官方文档都趁手。
返回列表