【首通记录】带flowable工作流的若依（前后端分离版）项目在Windows11上部署（代码编辑使用vscode）_若依 flowable

一、后端，vscode配置

1、安装vscode和扩展

       vscode扩展：

        （1）Java扩展：

       Language Support for Java™ by Red Hat

       Debugger for Java

       Test Runner for Java

       （2）Maven扩展：

       Maven for Java

       （3）Spring扩展

       Spring Initializr Java Support

       （4）MySQL扩展（方便看数据库，非必须）

       MySQL（Jun Han）

       MySQL Syntax（Jake Bathman）

       （5）Vue扩展（用于前端）

       Vue Language Features(Volar)

2、安装JDK（JDK >= 1.8 (推荐1.8版本)，此处使用jdk1.8.0_11）

电脑上已经安装，过程略。

3、安装Mysql（Mysql >= 5.7.0 (推荐5.7版本)，此处使用community-8.0.33.0）

Windows版本：MySQL :: Download MySQL Installer (Archived Versions)

使用msi文件安装。

4、安装Maven（Maven >= 3.0，此处使用3.9.5）

Windows版本：Maven – Download Apache Maven

（1）解压到一个目录

（2）配置环境变量：新建系统变量MAVEN_HOME，值为所在路径；编辑系统变量path，新建%MAVEN_HOME%\bin。可检查配置是否成功，cmd命令行输入mvn -version，成功显示maven版本信息。

（3）vscode配置

扩展Language Support for Java中（或ctrl+,搜索java.configuration.maven），Java>Configuration中，Maven: Global Settings配置为：安装路径\conf\settings.xml

扩展Maven for Java中（或ctrl+,搜索maven.executable.path），Executable: Path配置为：安装路径\bin\mvn

5、安装redis：（Redis >= 3.0，此处使用5.0.14.1）

Windows版本：Releases · tporadowski/redis (github.com)

官网只有Linux版本，没有Windows版本。

Github上较早的仓库microsoftarchive/redis只支持到2016年3.x版本。

看说另一个仓库一些自愿者继续更新这个Releases · tporadowski/redis (github.com)，到2022年5.0.14.1版本。

使用msi文件安装，可以方便配置path环境变量（需要勾选），比zip压缩版方便。

Windows安装向导：

勾选“Add the Redis installation folder to the PATH environment variable.”

使用默认端口6379

勾选“Add an exception to the Windows Firewall.”

未勾选“Set the Max Memory limit”

安装后cmd命令redis-server启动redis服务（不知道是否安装后不需要命令就可以自动启动。输入命令后，最后出现一条错误信息“Could not create server TCP listening socket *:6379: bind: 在一个非套接字上尝试了一个操作。”，查询说启动时需要指定配置文件redis-server redis.windows.conf，但我并未指定，若依系统依旧成功启动。另外还有说遇到“Could not create server TCP listening socket 127.0.0.1:6379: bind: 操作成功完成。”的问题，需要重启电脑。但我没有遇到。）

还有一种Redis可视化工具RedisDesktopManager：Release 0.9.3 · RedisInsight/RedisDesktopManager (github.com)，暂未安装使用。

Linux版本：Download | Redis（英文官网）

6、下载若依系统

         此处选用带flowable工作流的扩展版本：https://gitee.com/tony2y/RuoYi-flowable

       可以使用git clone直接下载到本地，然后用vscode打开目录即可。

       版本选择分析：

       若依官网：www.ruoyi.vip

       若依原生版本展示网站：若依管理系统 (ruoyi.vip)

       可以从若依官网选择不同版本的代码下载。

      

       若依还有很多扩展了不同功能的集成扩展项目，可以通过“在线文档”页面选择不同若依版本，然后在“项目扩展”中查看描述和代码地址。（注：不同若依版本的“项目扩展”页面的内容不一样，可以挨个都看看）

       这里想要一个集成了工作流引擎的项目，现有扩展项目中主要有集成了activiti、flowable和jflow三种。

       activiti基本是5.x，6.x的版本，但这两个开源版本已经不再维护，而且看说activiti相对来说功能是最简单的，稍复杂的工作流可能需要自己来实现，难度较大。此外最后更新时间大多隔的比较久，基于的若依版本可能也旧些，因此最终没有选择。（看到一个用activiti 7.x的，但7.x说是主要目标在微服务、云方面，其他功能相对于6.x并没有太大改进）

       不过activiti有个优势，说是相对可以比较容易地替换为Camunda引擎。开源版上，Camunda功能比activiti和flowable都要强。问题是暂时未发现有集成了Camunda引擎的若依扩展项目，想要实现得自己做集成。

       flowable功能说是强于activiti，不过对开源版的支持似乎也在减弱。

        （flowable和Camunda其实都是从activiti分支而来，具体发展可以自行搜索）

       jflow看是个国产引擎，功能看起来很不错。不过一来不清楚其使用是否广泛，如果有问题是否大多要联系其开发方去咨询；二来是GPL开源，同样在国内若考虑直接商用或许会不太合适。因此没有选择。

       众多扩展项目中，也有比较近期、更新频繁的，还有及时更新若依最新系统的。不过有的是GPL协议，有的对他人使用前的主动联系和商议有严格要求。

 综上，选定了集成了flowable的项目https://gitee.com/tony2y/RuoYi-flowable，以及一个备选RuoYi-flowable: 基于Flowable6.x

7、导入MySQL数据库

cmd命令行（MySQL Server的路径\bin，因为没去修改系统环境变量）：

> mysql -u root -p（登录，输入密码）

mysql> create database `tony-flowable`;（创建flowable数据库，具体名称按集成项目定义，此项目为tony-flowable。包含“-”符号的名字，需要用``（1键左边的那个，不是单引号）括起来，否则会报错ERROR 1064 (42000): You have an error in your SQL syntax;另外，mysql的命令最后要带分号）

mysql> quit;（退出MySQL，回到cmd命令行）

> mysql -u root -p tony-flowable < 项目目录\sql\tony-flowable.sql（向flowable数据库导入flowable表，具体目录位置和表名称按集成项目定义，此项目为tony-flowable.sql）

注：若使用若依原生系统，则应该是：

cmd命令行（MySQL Server的路径\bin）：

> mysql -u root -p（登录，输入密码）

mysql> create database `ry-vue`;（创建ry-vue数据库，包含“-”符号的名字，需要用``（1键左边的那个，不是单引号）括起来，否则会报错ERROR 1064 (42000): You have an error in your SQL syntax; 另外，mysql的命令最后要带分号）

mysql> quit;（退出MySQL，回到cmd命令行）

> mysql -u root -p ry-vue < 项目目录\sql\ry_20230706.sql（向ry-vue数据库导入ry_2021xxxx.sql表）

> mysql -u root -p ry-vue < 项目目录\sql\quartz.sql（向ry-vue数据库导入quartz.sql表）

可以选择在vscode中配置MySQL：

点击MySQL扩展的“+”，按顺序填入host名（比如127.0.0.1），用户名（root），密码（安装MySQL时的root密码），端口号（安装时默认的3306），SSL certificate path直接回车跳过

这样查看MySQL数据库内容时比较方便。

另外，vscode的terminal终端使用mysql命令感觉不是很方便，还是用cmd比较好。

至此，后端部署完成，可以vscode直接在RuoYiApplication.java按F5运行。

若后端启动成功，vscode终端会显示“若依启动成功”。本机访问http://localhost:8080/会显示“欢迎使用RuoYi后台管理框架，当前版本：v3.8.6，请通过前端地址访问。”

二、前端

1、安装node.js（Node >= 12，此处使用v18.18.2）

Windows版本：Node.js (nodejs.org)（英文官网）

使用msi文件安装。

cmd命令行可以node -v验证是否安装成功。

运行前端：

cmd命令行进入：项目路径\ruoyi-ui

npm install（安装依赖）

npm install --registry=https://registry.npmmirror.com（若依文档注释：强烈建议不要用直接使用 cnpm 安装，会有各种诡异的 bug，可以通过重新指定 registry 来解决 npm 安装速度慢的问题。）（我想说这条是不是应该放在npm install之前？看到这个建议时，它上条命令已经开始装了啊！！下载速度倒没感觉慢，仅只耗费1个苹果+2个桔子，相比配置stable diffusion时不值一提）

npm run dev（本地开发 启动项目）

浏览器访问http://localhost:80， 默认账户/密码 admin/admin123，若能正确展示登录页面，并能成功登录，菜单及页面展示正常，则表明环境搭建成功。

三、初次部署问题

1、Log目录问题

        直接vscode右键点RuoYiApplication.java，“Run Java”运行，会报错：Failed to create parent directories for [C:\Users\2y\zhj\logs\sys-info.log]

    修改Log文件：项目目录/ruoyi-admin/target/classes/logback.xml中的<property name="log.path" value="正确路径" />。其中正确路径为一个存在的路径。（vscode需要在修改后ctrl+s保存一下）

       发现修改并没有生效，不明原因。

       若直接在RuoYiApplication.java按F5运行，修改会生效。且log路径会自动创建，不必修改为一个已存在的路径。

   后来发现，target目录是maven自动创建的，应该修改的是/ruoyi-admin/src/main/resources/logback.xml，则target目录的对应文件也会自动更新。但之前先修改了target目录的文件，resources中的文件却不会同时更新，就造成target和resources中的文件不一致，而实际起作用的是target中的文件。然后就又出现问题，再修改resources中的文件时，target中的文件却没有自动实时更新，从而导致resources中的文件改动无效，设置还是按照target中的文件（不知道是不是一个maven的bug？）。最终，通过在maven扩展点击“Reload All Maven Projects”重新刷新了target目录解决了问题（用maven clean命令应该也可以），之后再修改resources中的文件，target中也会实时更新。

2、MySQL数据库导入失败及comment显示乱码

        导入若依MySQL数据库时，ry_2021xxxx.sql报错导入失败：ERROR 1406 (22001) at line 27: Data too long for column 'dept_name' at row 1 。quartz.sql可导入。另外导入后表的comment注释项显示为乱码。

       乱码问题：

        查询原因说是可能导入的数据库和MySQL的默认编码格式不一致。

    使用“show full columns from sys_dept”命令查询发现字符串格式的编码都是“utf8mb4_0900_ai_ci”（也查询了quartz.sql的表格），而MySQL默认是latin字符集，显示中文字符集会有问题。

        又查询说可以修改MySQL的默认配置来解决。

      MySQL 的配置文件一般位于 /etc/my.cnf 或 C:\ProgramData\MySQL\MySQL Server X.X\my.ini

        需要更改配置内容为（有的帖子只提到增加红色的两条即可）：

[client]

default-character-set = utf8mb4

[mysql]

default-character-set = utf8mb4

[mysqld]

character-set-client-handshake = FALSE

character-set-server = utf8mb4

collation-server = utf8mb4_general_ci

init_connect = ‘SET NAMES utf8mb4’

        然后重启MySQL服务，如果相关表和字段的注释字符集不正确，也修改为utf8mb4相应的字符集。

        然而，发现安装的MySQL（windows）默认并没有my.ini

        搜索有教如何自己创建一个my.ini，过程稍复杂，没有尝试。

        最终在导入flowable数据库后，发现此数据库已经包含了若依的数据库的内容，无需额外导入若依的数据库。并且flowable数据库导入没有问题，comment显示中文也正常。

        猜测应该是此集成项目的若依版本非最新，附带的若依数据库可能有些问题？

3、找不到MySQL数据库

        RuoYiApplication.java按F5运行，报错：

2023-10-21 16:28:05.511 ERROR 14636 --- [  restartedMain] com.alibaba.druid.pool.DruidDataSource   : init datasource error, url: jdbc:mysql://localhost:3306/tony-flowable?useUnicode=true&characterEncoding=utf8&zeroDateTimeBehavior=convertToNull&useSSL=true&serverTimezone=GMT%2B8&nullCatalogMeansCurrent=true

java.sql.SQLSyntaxErrorException: Unknown database 'tony-flowable'

        记得之前安装MySQL时选的不用SSL，怀疑会不会是useSSL=true引起的问题。

        于是在项目中搜索useSSL，找到在ruoyi-admin\src\main\resources\application-druid.yml文件中，确认数据库名、登录用户名密码等等都无误之后，修改useSSL=false。问题解决。

4、Redis连接失败

        报错：

2023-10-21 23:20:49.644  WARN 2816 --- [  restartedMain] ConfigServletWebServerApplicationContext : Exception encountered during context initialization - cancelling refresh attempt: org.springframework.beans.factory.UnsatisfiedDependencyException: Error creating bean with name 'captchaController': Unsatisfied dependency expressed through field 'configService'; nested exception is org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'sysConfigServiceImpl': Invocation of init method failed; nested exception is org.springframework.data.redis.RedisConnectionFailureException: Unable to connect to Redis; nested exception is org.springframework.data.redis.connection.PoolException: Could not get a resource from the pool; nested exception is io.lettuce.core.RedisConnectionException: Unable to connect to localhost:6379

2023-10-21 23:20:49.644  INFO 2816 --- [  restartedMain] com.alibaba.druid.pool.DruidDataSource   : {dataSource-1} closing ...

2023-10-21 23:20:49.653  INFO 2816 --- [  restartedMain] com.alibaba.druid.pool.DruidDataSource   : {dataSource-1} closed

2023-10-21 23:20:49.830  INFO 2816 --- [  restartedMain] o.apache.catalina.core.StandardService   : Stopping service [Tomcat]

2023-10-21 23:20:49.846 ERROR 2816 --- [  restartedMain] o.s.boot.SpringApplication               : Application run failed

org.springframework.beans.factory.UnsatisfiedDependencyException: Error creating bean with name 'captchaController': Unsatisfied dependency expressed through field 'configService'; nested exception is org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'sysConfigServiceImpl': Invocation of init method failed; nested exception is org.springframework.data.redis.RedisConnectionFailureException: Unable to connect to Redis; nested exception is org.springframework.data.redis.connection.PoolException: Could not get a resource from the pool; nested exception is io.lettuce.core.RedisConnectionException: Unable to connect to localhost:6379

      

        问题原因很尖端，没装Redis。

        纯新手，之前不知道Redis是啥，更不知道Redis也得单独安装，哈哈哈，百度了我俩小时，笑死。

        又想起，之前看的若依文档环境部署似乎是前后端不分离版的，写的要准备内容的就没有包含Redis。（摔显示器）

5、前端启动报错0308010C

INFO  Starting development server...

95% emitting CompressionPlugin ERROR  Error: error:0308010C:digital envelope routines::unsupported

Error: error:0308010C:digital envelope routines::unsupported

    at new Hash (node:internal/crypto/hash:68:19)

    at Object.createHash (node:crypto:138:10)

       查询说是因为node.js V17版本中最近发布的OpenSSL3.0，而OpenSSL3.0对允许算法和密钥大小增加了严格的限制，可能会对生态系统造成一定影响。

      

        这里最初安装的版本是node v21.0.0，可能存在此问题。

       解决方案主要有3种，可参考帖子：

       Vue 报错error:0308010C:digital envelope routines::unsupported 解决方案（三种）_小羊驼33的博客-CSDN博客

       Vue 报错error:0308010C:digital envelope routines::unsupported-CSDN博客

       先试了修改nodejs\node_modules\npm\package.json的办法，添加：

 "scripts": {

    "serve": "set NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve",

    "build": "set NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build"

},

       问题没有解决。（猜测不是改这个目录下的package.json？不过后面set命令执行完之后，问题没了，暂时没搞清楚到底去改哪个package.json）

       再尝试cmd命令行直接set NODE_OPTIONS=--openssl-legacy-provider，问题解决。但又出现新问题6。

-------------

2023/10/26

package.json确认并非修改node的，而是修改若依项目的：项目路径\ruoyi-ui\package.json，将scripts中原有的项目"dev": "vue-cli-service serve"变成"set NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve"即可。

6、报错：Syntax Error: Error: PostCSS received undefined instead of CSS string

INFO  Starting development server...

98% after emitting CopyPlugin

 ERROR  Failed to compile with 2 errors                                                                         17:40:00

 error  in ./src/assets/styles/element-variables.scss

Syntax Error: Error: PostCSS received undefined instead of CSS string

 @ ./src/assets/styles/element-variables.scss 4:14-246 15:3-20:5 16:22-254

 @ ./src/main.js

@ multi (webpack)-dev-server/client?http://192.168.1.4:80&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

error  in ./src/components/FileUpload/index.vue?vue&type=style&index=0&id=211f81e0&scoped=true&lang=scss

Syntax Error: Error: PostCSS received undefined instead of CSS string

 @ ./node_modules/vue-style-loader??ref--8-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/FileUpload/index.vue?vue&type=style&index=0&id=211f81e0&scoped=true&lang=scss 4:14-477 15:3-20:5 16:22-485

@ ./src/components/FileUpload/index.vue?vue&type=style&index=0&id=211f81e0&scoped=true&lang=scss

 @ ./src/components/FileUpload/index.vue

 @ ./src/main.js

@ multi (webpack)-dev-server/client?http://192.168.1.4:80&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

       查询了下，依旧可能是node版本兼容性问题，首次安装的node v21.0.0显然过于超前，又或者其非LTS版本，还存在一些问题。

       问题5中的两个帖子都提到可以安装一款nvm管理软件，可以同时安装多个node版本，自由切换。

        觉得麻烦，直接卸载重新安装了v18.18.2，问题解决。（按问题5，超过17的版本应该会有问题5，但重新安装v18.18.2后并没有出现问题5，卸载应该是仅仅卸载了node的主体，其已经下载好的扩展内容仍然存在并未重新下载，可能那个set配置命令也并没有被清除）

7、登录界面验证码图片不显示

        成功运行node v18.18.2，浏览器访问前端web页面可以显示，但会弹出异常提示“系统接口500异常”，并且验证码图片不显示。

        同时cmd命令行报错：

Proxy error: Could not proxy request /captchaImage from localhost to http://localhost:8080/.

See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ECONNREFUSED).

        查了下说是在vue.config.js的proxy:{}中配置的目标服务器（后端）地址要正确。

        本机作为后端是http://localhost:8080/没错啊！

        难道是验证码功能有问题？还是前后端兼容性问题？还是图片传输、识别问题？脑中迅速闪过很多可能性。

        问题原因很尖端，原来忘了启动后端，哈哈哈，笑死两次。