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

1.简介

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

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

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

2.快速安装

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

3. 应用制作过程

3.1 部署Mysql

3.2 部署Redis

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

  • 创建组件后。进入 组件 > 端口:

    1. 打开对内服务

    2. 修改端口别名为 REDIS

    3. 以上都是用于后端连接时使用。

3.3 部署SpringBoot后端

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

    1. 修改application.yml中的redis字段

      redis:
          # 地址
          host: ${REDIS_HOST}
      
    2. 修改 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下载路径。

      • 需要打开 禁用缓存按钮,防止包不一样出现奇奇怪怪的问题。构建成功后再把禁用缓存关闭,下次构建就缓存正确的包了。

      • 修改后 保存修改

      • 构建组件,等待构建完成,修改端口为 8080

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效果展示

页面效果展示