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

goodrain

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创建组件

Image description

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

Image description

3.2 部署Redis

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

Image description

创建组件后。进入组件 > 端口：

打开对内服务
修改端口别名为 REDIS
以上都是用于后端连接时使用。

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项目

填写仓库地址：https://gitee.com/zhangbigqi/RuoYi-Vue.git 9
确认创建，进入多模块构建，勾选 ruoyi-admin 模块，此模块是可运行的，其他模块都是依赖。具体模块功能参考若依官方文档
确认创建，等待构建完成。
进入组件 > 端口删除掉默认5000端口，添加 8080 http 端口，打开对内服务。
进入拓扑图视图，切换编辑模式，添加依赖：
ruoyi-admin 连接 mysql
ruoyi-admin 连接 redis
需要注意：

平台默认使用openjdk ，此项目需要使用oraclejdk来生成前端验证码。
需要在组件 > 构建源中修改 JDK类型为自定义JDK，填写自定义JDK下载路径。
自定义JDK下载地址：https://buildpack.oss-cn-shanghai.aliyuncs.com/jdk/jdk1.8.0.tgz 1
需要打开禁用缓存按钮，防止包不一样出现奇奇怪怪的问题。构建成功后再把禁用缓存关闭，下次构建就缓存正确的包了。
修改后保存修改。

构建组件，等待构建完成，修改端口为 8080 。

Image description

3.4 部署Vue前端

部署Vue这里不多说了，具体可参考文档部署Vue、React前端项目

填写仓库地址：https://gitee.com/zhangbigqi/RuoYi-Vue.git
填写子目录：ruoyi-ui
检测完成后，进入高级设置修改打包命令，使用若依官方提供的打包命令 npm run build:prod 。平台默认 npm run build
确认构建，等待构建完成。
进入拓扑图视图，切换到编辑模式，添加依赖：
ruoyi-ui 连接 ruoyi-admin
这里说明下默认端口时 5000 ，此项目中 nginx中监听的端口也是5000，所以不用修改。如果监听的不是5000，需要修改默认端口。
至此完成。

Rianbond效果展示

Image description

页面效果展示

Image description