一、后端,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>

mysql>

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

注:若使用若依原生系统,则应该是:

cmd命令行(MySQL Server的路径\bin):

>

mysql>

mysql>

> 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种,可参考帖子:

       先试了修改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/没错啊!

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

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