开源工程

开源简介

橙单提供开箱即用的前后端开源工程源码，现介绍如下。

技术栈 Spring Boot3 + Flowable7 + Mybatis-Flex + Mybatis-Plus + Sa-Token + Vue3 + 自研表单引擎。
两个后台工程分别支持 Mybatis-Flex 和 Mybatis-Plus，其他功能完全一致。
权限系统集成业内知名的权限框架 Sa-Token。
前端是基于 Element Plus 的 Vue3 工程，提供极高颜值的在线表单和流程编辑器，以及最新版本的前端页面样式。

基础要求

JDK = 17
Maven >= 3.6
MySQL >= 8.0
NodeJs = 18.16.1
NPM = 9.5.1
Docker >= 19.x「非必选」

开发环境

前端推荐使用 VSCode 作为开发环境，重点，前端 NodeJs 和 NPM 的版本，请务必参考上面的基础要求。
后台推荐使用 IntelliJ IDEA 作为开发环境，Maven 为打包工具。
后台必须安装的 IDE 插件包括 Lombok Plugin 和 Maven Helper。

工程导入

当前文档仅给出 IntelliJ IDEA 和 VSCode 的工程导入说明。

后端工程

OrangeFormsOpen-MybatisFlex 是基于 MybatisFlex 的，而 OrangeFormsOpen-MybatisPlus 是基于 MybatisPlus，其他功能完全一致。
打开 IntelliJ IDEA，依次选择菜单 File -> Open 导入工程，第一次导入时会相对较慢，需要将项目依赖的 jar 包，通过 Maven 拉取并下载到本地仓库。
工程目录结构说明，请参考开发文档开发部署章节的目录结构小节。

前端工程

OrangeFormsOpen-VUE3 是基于 Element Plus 组件库的前端工程。
打开 VSCode，依次选择菜单「文件 -> 打开文件夹」，选中解压后的前端工程目录。

数据库初始化

创建 zzdemo-online-open 数据库。
执行 zz-resource/db-scripts/zzdemo-online-open.sql 数据库初始化脚本。
修改 zz_online_dblink 表 configuration 字段中的数据，改为本地数据库的主机名和密码。
管理员用户 admin 的初始化登录密码 123456。

环境准备

在搭建本地开发调试环境之前，请先阅读后端工程目录下的 README.md 文件，这里我们强烈推荐 docker-compose 的一键启停方式。

# 在生成后工程目录下，进入 docker-compose 脚本所在的子目录。
cd zz-resource/docker-files/
# 执行以下命令即可启动全部第三方依赖组件
docker-compose up -d
# 彻底终止容器
docker-compose down
# 在第一次启动之后，可以考虑每次执行下面的命令启动和停止容器。
docker-compose start
docker-compose stop

服务配置

开源工程配置仅需修改数据库链接信息，具体见下图。

系统启动

当前文档仅给出 IntelliJ IDEA 和 VSCode 的工程启动说明。

JDK17 注意事项

使用 JDK17+ 版本时，需要为服务启动项 VM Options 添加选项 --add-opens java.base/java.lang.reflect=ALL-UNNAMED。

敲黑板重点！对于 IDEA 启动项配置，一定一定一定配置 VM 选项，而不是命令行参数。

后端服务

在开发环境中配置启动项，下图为 IntelliJ IDEA 中的配置截图，配置完成后点击 Debug/Run 按钮即可启动。

前端工程

工程导入成功后，设置工程的基本配置，在工程根目录下找 .env.development 和 .env.production 文件。其中 .env.development 是开发环境的配置，.env.production 是生产环境的配置。

# 后台地址
VUE_APP_SERVER_HOST='http://127.0.0.1:8082/'
# 工程名称
VUE_APP_PROJECT_NAME='橙单演示工程'

修改项目配置后，可在导入的文件夹上点击右键，然后在弹出的菜单中点击「在终端中打开」。

在打开的终端中执行以下命令，安装工程所需依赖。npm 较慢时，可以使用淘宝的镜像，cnpm 或者 yarn 等来安装。

npm install --legacy-peer-deps

由于在代码生成过程中，很难对每一行代码的长度进行精确的控制，因此需要执行以下命令，对刚刚生成的代码进行格式化处理，以便消除无谓的警告信息。

npm run lint

安装完成后，执行以下命令运行工程。

npm run dev

正常启动后，可点击链接 (http://localhost:8085/) 访问前端工程的登录页面，如下图所示，管理员 admin 用户的初始化密码是 123456。

若依集成

橙单开源版本目前已支持第三方接入功能，这里我们以知名开源框架「若依」为例，为开发者们提供一份完整可用的第三方应用接入橙单的示例。

重要！需要启动四个工程，分别是橙单前端和后台，以及若依的前端和后台。默认下载的工程配置中，这四个前后端工程需要在同一主机启动，因为本小节后面所述的内容中会显示，所有的地址配置我们都使用的是 localhost，如需分开部署，请自行手动修改。

橙单后台

橙单后台工程的启动方式，请参考本章前面的内容，这里只介绍与若依接入相关的内容。

在开源仓库中 https://gitee.com/orangeform/orange-admin，可以根据技术栈选择不同的后端开源工程。

在后台工程应的用配置文件中 (application-dev.yml)，均已提供与若依进行第三方接入的相关配置。在下面的配置中，我们将若依服务的地址配置为 localhost，端口号为 8083。推荐大家在第一次搭建环境时尽量使用默认配置，以保证可以快速搭建成功，如需修改若依后台服务的配置，请同步修改下图所示的配置信息。