RuoYi-Vue-Plus 搭建

一、前置准备

前端代码：front-end
后端代码：back-end
官方文档：RuoYi-Vue-Plus

二、启动后端服务

1. 配置 maven，jdk。

   设置 ⟶ 构建、执行、部署 ⟶ 构建工具 ⟶ Maven ⟶ 配置 用户设置文件 和 本地仓库

   项目结构 ⟶ 项目设置 ⟶ 项目 ⟶ SDK

2. 修改配置文件 ruoyi-admin/src/main/resources/application.yml

   # 多租户配置
   tenant:
     # 是否开启
     enable: false

3. 配置 mysql 和 redis 连接 ruoyi-admin/src/main/resources/application-dev.yml

   （1）配置主库数据源的 数据库名称（默认是ry-vue），账号，密码

   # 主库数据源
   master:
       type: ${spring.datasource.type}
       driverClassName: com.mysql.cj.jdbc.Driver
       # jdbc 所有参数配置参考 https://lionli.blog.csdn.net/article/details/122018562
       # rewriteBatchedStatements=true 批处理优化 大幅提升批量插入更新删除性能(对数据库有性能损耗 使用批量操作应考虑性能问题)
       url: jdbc:mysql://localhost:3306/ry-vue?useUnicode=true&characterEncoding=utf8&zeroDateTimeBehavior=convertToNull&useSSL=true&serverTimezone=GMT%2B8&autoReconnect=true&rewriteBatchedStatements=true&allowPublicKeyRetrieval=true&nullCatalogMeansCurrent=true
       username: root
       password: 123456

   （2）配置redis：若没有密码则注释密码那一行

   --- # redis 单机配置(单机与集群只能开启一个另一个需要注释掉)
   spring.data:
     redis:
       # 地址
       host: localhost
       # 端口，默认为6379
       port: 6379
       # 数据库索引
       database: 0
       # redis 密码必须配置
       # password: ruoyi123
       # 连接超时时间
       timeout: 10s
       # 是否开启ssl
       ssl.enabled: false

4. 创建数据库

   （1）新建数据库

   数据库名：ry-vue
   字符集：utf8mb4
   排序规则：utf8mb4_general_ci

   （2）导入数据库：将 script/sql文件夹中的ry_vue_5.X.sql,ry_workflow.sql,ry_job.sql三个sql文件依次导入数据库。

5. 启动后端项目（确保 mysql 和 redis 在后台运行）

   Maven：选择配置文件为dev ⟶ 重新加载 Maven ⟶ 确保 Maven 的依赖下载完成

   项目启动：将运行配置改为DromaraApplication ⟶ 运行项目 ⟶ RuoYi-Vue-Plus启动成功

三、启动前端服务

npm i # 安装依赖
npm run dev # 运行项目

# (♥◠‿◠)ﾉﾞ  RuoYi-Vue-Plus启动成功   ლ(´ڡ`ლ)ﾞ
# 默认管理员账号：admin
# 默认管理员密码：admin123

四、新增业务

1. 新增目录

   进入网页 ⟶ 侧边栏 ⟶ 系统管理 ⟶ 菜单管理 ⟶ 新增 ⟶ 新增完成请刷新页面

   上级菜单：主类目
   菜单类型：目录
   菜单图标：自定义（可以在前端'front-end/src/assets/icons/svg'文件夹中添加需要的svg图标）
   菜单名称：测试目录（自定义）
   显示排序：1（目录在侧边栏的显示顺序）
   是否外链：否（选择是外链则路由地址需要以'http(s)://'开头）
   路由地址：test（访问的路由地址）
   显示状态：显示（选择隐藏则路由将不会出现在侧边栏，但仍然可以访问）
   菜单状态：正常（选择停用则路由将不会出现在侧边栏，也不能被访问）

2. 新增菜单（若需要使用代码生成则跳过此步）

   进入网页 ⟶ 侧边栏 ⟶ 系统管理 ⟶ 菜单管理 ⟶ 新增 ⟶ 新增完成请刷新页面

   上级菜单：测试目录
   菜单类型：菜单
   菜单图标：自定义
   菜单名称：测试菜单
   显示排序：1
   是否外链：否
   路由地址：testMenu
   组件路径：test/testMenu/index（访问的组件路径，默认在'views'目录下）
   权限字符：选填（控制器中定义的权限字符）
   路由参数：选填（访问路由的默认传递参数）
   是否缓存：缓存（选择是则会被'keep-alive'，需要匹配组件的'name'和地址保持一致）
   显示状态：显示
   菜单状态：正常

3. 创建数据表

   （1）数据库新建表

   ​ 表名（目录_菜单），字段名 按照下划线命名规范，务必填写对应的注释。

   （2）默认字段建议

   ​ 默认字段 建议全部填写上去，若依会通过MybatisPlus帮助其自动填充。

   CREATE TABLE `` (
     `_id` varchar(50) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL COMMENT 'ID',
     `del_flag` int DEFAULT '0' COMMENT '删除标志（0存在，2删除）',
     `create_time` datetime DEFAULT NULL COMMENT '创建时间',
     `create_by` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci DEFAULT NULL COMMENT '创建人',
     `create_dept` bigint DEFAULT NULL COMMENT '创建部门',
     `update_time` datetime DEFAULT NULL COMMENT '更新时间',
     `update_by` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci DEFAULT NULL COMMENT '更新人',
     `tenant_id` varchar(20) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci DEFAULT NULL COMMENT '租户ID',
     PRIMARY KEY (`_id`) USING BTREE
   ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci ROW_FORMAT=DYNAMIC COMMENT='表';

4. 创建模块

   （1）后端 ⟶ ruoyi-modules ⟶ 新建 ⟶ 新模块

   名称：ruoyi-test
   语言：Java
   构建系统：Maven
   JDK：与构建系统时的版本保持一致
   父项：ruoyi-modules
   
   # 高级设置
   组 ID：org.dromara
   工件 ID：ruoyi-test

   （2）引入模块依赖 ruoyi-admin/pom.xml

   <!-- 测试模块 -->
   <dependency>
       <groupId>org.dromara</groupId>
       <artifactId>ruoyi-test</artifactId>
   </dependency>

   （3）引入模块依赖 /pom.xml

   <!-- 测试模块 -->
   <dependency>
       <groupId>org.dromara</groupId>
       <artifactId>ruoyi-test</artifactId>
       <version>${revision}</version>
   </dependency>

   （4）重新加载 Maven

5. 代码生成

   （1）导入数据表

   ​ 进入网页 ⟶ 侧边栏 ⟶ 系统工具 ⟶ 代码生成 ⟶ 导入 ⟶ 勾选数据表

   （2）编辑数据表

   基本信息：

   # 可以保持不变
   表名称：test_testMenu
   实体类名称：TestTestMenu
   表描述：测试菜单
   作者：Marimo_z
   备注：( •̀ ω •́ )y

   字段信息：

   字段描述：生成表单后的字段名
   插入：列表新增数据时显示
   编辑：列表编辑数据时显示
   列表：列表上显示
   查询：允许通过该字段查询
   显示类型：根据需求调整
   字典类型：关联字典值，适用于选择框（例：性别），需要提前在字典管理中创建字典。
   # 字典设置：侧边栏 ⟶ 系统管理 ⟶ 字典管理 ⟶ 新增 ⟶ 字典类型 ⟶ 管理字典

   生成信息：

   生成模板：单表（增删改查）
   生成包路径：org.dromara.test
   生成模块名：test
   生成业务名：testMenu
   生成功能名：测试菜单
   上级菜单：测试目录
   生成代码方式：zip压缩包

   （3）下载对应代码并解压 ⟶ 放入对应的位置

   main               # 后端代码
   
   vue/                # 前端代码
   ├── api/            # API请求代码
   │   ├── test/ 
   ├── views/          # 页面代码
       ├── test/ 
       
   testMenu.sql       # sql文件

   （4）后端新模块配置

   将需要的工具包导入

   <?xml version="1.0" encoding="UTF-8"?>
   <project xmlns="http://maven.apache.org/POM/4.0.0"
            xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
            xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
       <modelVersion>4.0.0</modelVersion>
       <parent>
           <groupId>org.dromara</groupId>
           <artifactId>ruoyi-modules</artifactId>
           <version>${revision}</version>
       </parent>
   
       <artifactId>ruoyi-test</artifactId>
   
       <description>
           test测试菜单模块
       </description>
   
       <properties>
           <maven.compiler.source>17</maven.compiler.source>
           <maven.compiler.target>17</maven.compiler.target>
           <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
       </properties>
   
       <dependencies>
           <!-- 通用工具 核心包-->
           <dependency>
               <groupId>org.dromara</groupId>
               <artifactId>ruoyi-common-core</artifactId>
           </dependency>
           <dependency>
               <groupId>org.dromara</groupId>
               <artifactId>ruoyi-common-doc</artifactId>
           </dependency>
           <!--mybatis orm包-->
           <dependency>
               <groupId>org.dromara</groupId>
               <artifactId>ruoyi-common-mybatis</artifactId>
           </dependency>
           <!--translation-->
           <dependency>
               <groupId>org.dromara</groupId>
               <artifactId>ruoyi-common-translation</artifactId>
           </dependency>
           <!--mvc-->
           <dependency>
               <groupId>org.dromara</groupId>
               <artifactId>ruoyi-common-web</artifactId>
           </dependency>
           <!-- excel-->
           <dependency>
               <groupId>org.dromara</groupId>
               <artifactId>ruoyi-common-excel</artifactId>
           </dependency>
           <!--日志输出-->
           <dependency>
               <groupId>org.dromara</groupId>
               <artifactId>ruoyi-common-log</artifactId>
           </dependency>
           <!--校验认证-->
           <dependency>
               <groupId>org.dromara</groupId>
               <artifactId>ruoyi-common-idempotent</artifactId>
           </dependency>
           <dependency>
               <groupId>org.dromara</groupId>
               <artifactId>ruoyi-common-tenant</artifactId>
           </dependency>
       </dependencies>
   
   </project>

   关闭后端项目 ⟶ 找到刚才导入模块的main中的controller层，将爆红处需要的类导入

   重新加载 Maven ⟶ 重启后端项目

   （5）进入网页 ⟶ 找到刚刚创建的菜单 ⟶ 测试功能（增删改查）