码云若依SpringBoot + Vue前后端分离应用分享以及应用制作

SmallQi

1.简介

RuoYi是一款基于SpringBoot+Bootstrap的极速后台开发框架。

RuoYi 是一个 Java EE 企业级快速开发平台，基于经典技术组合（Spring Boot、Apache Shiro、MyBatis、Thymeleaf、Bootstrap），内置模块如：部门管理、角色用户、菜单及按钮授权、数据权限、系统参数、日志管理、通知公告等。在线定时任务配置；支持集群，支持多数据源。

码云地址:https://gitee.com/y_project/RuoYi

2.快速安装

若依SpringBoot项目已发布在开源商店中，可直接从开源商店一键部署。

Image description

3. 应用制作过程

本次的架构是 Vue + SpringBoot + Mysql + Redis
本文中的 Gitee ： https://gitee.com/zhangbigqi/RuoYi-Vue.git Fork 若依进行了一些连接方式的修改。
若依Gitee：https://gitee.com/y_project/RuoYi-Vue.git

3.1 部署Mysql

这里的 Sql 文件是若依官方提供的，在这基础上加了个Dockerfile，把Sql文件放进官方Mysql镜像的 /docker-entrypoint-initdb.d 目录下来进行启动自动初始化。
上面有了 Dockerfile ，在Rainbond中可根据源代码仓库有Dockerfile来构建组件，详情见文档：Dockerfile创建组件
1. 基于源代码创建组件
2. 填写仓库地址：https://gitee.com/zhangbigqi/RuoYi-Vue.git
3. 填写子目录， sql
4. 确认创建。

Image description

创建组件后。进入组件 > 端口：
打开对内服务
修改端口别名为 MYSQL
以上都是用于后端连接时使用。

Image description

3.2 部署Redis

通过基于镜像创建组件，直接选择官方 Redis 镜像

Image description

创建组件后。进入组件 > 端口：
1. 打开对内服务
2. 修改端口别名为 REDIS
3. 以上都是用于后端连接时使用。

Image description

3.3 部署SpringBoot后端

这里需要修改配置文件中的 Mysql连接地址以及Redis连接地址。修改目录ruoyi-admin/src/main/resources/ 下的 application.yml 、 application-druid.yml

修改application.yml中的redis字段

     redis:
         # 地址
         host: ${REDIS_HOST}

修改 application-druid.yml 中的 mysql 字段

     druid:
                 # 主库数据源
                 master:
                     url: jdbc:mysql://${MYSQL_HOST}:${MYSQL_PORT}/ry-vue?
                     username: root
                     password: root

基于源码部署组件，Rainbond会根据项目根目录的Pom文件识别maven项目
1. 填写仓库地址：https://gitee.com/zhangbigqi/RuoYi-Vue.git
2. 确认创建，进入多模块构建，勾选ruoyi-admin模块，此模块是可运行的，其他模块都是依赖。具体模块功能参考若依官方文档
3. 确认创建，等待构建完成。
4. 进入组件 > 端口删除掉默认5000端口，添加 8080 http 端口，打开对内服务。
5. 进入拓扑图视图，切换编辑模式，添加依赖：
  1. ruoyi-admin 连接 mysql
  2. ruoyi-admin 连接 redis
6. 需要注意：
  - 平台默认使用openjdk ，此项目需要使用oraclejdk来生成前端验证码。
  - 需要在组件 > 构建源中修改 JDK类型为自定义JDK，填写自定义JDK下载路径。
  - 自定义JDK下载地址：https://buildpack.oss-cn-shanghai.aliyuncs.com/jdk/jdk1.8.0.tgz
  - 需要打开 禁用缓存按钮，防止包不一样出现奇奇怪怪的问题。构建成功后再把禁用缓存关闭，下次构建就缓存正确的包了。
  - 修改后 保存修改。
  - 构建组件，等待构建完成，修改端口为 8080 。

Image description

3.4 部署Vue前端

部署Vue这里不多说了，具体可参考文档部署Vue、React前端项目
1. 填写仓库地址：https://gitee.com/zhangbigqi/RuoYi-Vue.git
2. 填写子目录：ruoyi-ui
3. 检测完成后，进入高级设置修改打包命令，使用若依官方提供的打包命令 npm run build:prod 。平台默认 npm run build
4. 确认构建，等待构建完成。
5. 进入拓扑图视图，切换到编辑模式，添加依赖：
  1. ruoyi-ui 连接 ruoyi-admin

这里说明下默认端口时 5000 ，此项目中 nginx中监听的端口也是5000，所以不用修改。如果监听的不是5000，需要修改默认端口。

至此完成。

Rianbond效果展示

Image description

页面效果展示

Image description