Ruoyi 快速开发平台

一、官网

  链接: 前后端分离版本

回到目录

二、准备工作

2.1 环境要求

2.2 必要配置

1. 源码下载：
     前往Gitee下载页面( https://gitee.com/y_project/RuoYi-Vue (opens new window))下载解压到工作目录
2. 开发环境：idea(2023以上版本)、maven(3.0以上版本)、jdk(1.8版本)
3. 导入：将源码导入idea
4. 创建数据库ry-vue（库名可自定义）并导入数据脚本：ry_2021xxxx.sql，quartz.sql
5. 修改数据库连接，编辑resources目录下的application-druid.yml

# 数据源配置
spring:
    datasource:
        type: com.alibaba.druid.pool.DruidDataSource
        driverClassName: com.mysql.cj.jdbc.Driver
        druid:
            # 主库数据源
            master:
                url: 数据库地址
                username: 数据库账号
                password: 数据库密码

  这里根据需要可以配置多个数据源，master和slave用于将业务数据库和系统数据库分开。

示例如下：

6. 修改服务器配置，编辑resources目录下的application.yml

# 开发环境配置
server:
  # 服务器的HTTP端口，默认为80
  port: 端口
  servlet:
    # 应用的访问路径
    context-path: /应用路径

示例如下：

回到目录

三、运行系统

提示：
  因为本项目是前后端完全分离的，所以需要前后端都单独启动好，才能进行访问。前端安装完node后，最好设置下淘宝的镜像源，不建议使用cnpm（可能会出现奇怪的问题）

3.1 后端运行

启动后端项目，通过debug启动，配置参数：RuoYiApplication.java

点击运行，初次运行可能报错，需要重新加载一下maven信息：

出现如下图表示启动成功：

回到目录

3.2 前端安装及运行

1. 前端项目第一次运行需要安装依赖包，执行命令：npm install

强烈建议不要用直接使用 cnpm 安装，会有各种诡异的 bug，可以通过重新指定 registry 来解决 npm 安装速度慢的问题。

npm install --registry=https://registry.npmmirror.com

2. 前端项目本地运行命令：npm run dev
   

3. 运行成功后，登录网页，默认用户名\密码：admin\admin123
   

具体运行命令看package.json中scripts属性，详细如下：
  scripts配置是在一个基于Vue.js项目的package.json文件中定义的，它使用npm或yarn作为包管理工具来执行各种命令。每个命令都对应一个开发或部署过程中的不同任务。下面是对这些命令的简要说明：

• dev
  命令: “vue-cli-service serve”
  说明: 这个命令用于启动开发服务器。它会监听源代码的更改，并自动重新加载页面以反映这些更改。这是开发过程中最常用的命令之一，因为它提供了一个实时的开发环境。
• build:prod
  命令: “vue-cli-service build”
  说明: 这个命令用于构建生产环境的项目。它会将Vue组件、JavaScript、CSS等文件打包成一个或多个文件，通常包括一个或多个.js文件、.css文件，以及一个或多个资源文件（如图片、字体等）。这些文件被优化以减少加载时间，并准备好部署到生产服务器上。
• build:stage
  命令: “vue-cli-service build --mode staging”
  说明: 类似于build:prod，但这个命令通过–mode staging参数指定了一个不同的环境模式（在这个例子中是“staging”或“测试环境”）。这允许你根据不同的环境（如开发、测试、生产）来定制构建过程，比如通过环境变量来启用或禁用某些功能或特性。
• preview
  命令: “node build/index.js --preview”
  说明: 这个命令看起来是项目特定的，不是Vue CLI直接提供的。它可能是一个自定义脚本，用于在本地或远程服务器上预览构建后的项目。通过–preview参数，这个脚本可能执行了一些特定的预览设置或操作。
• lint
  命令: “eslint --ext .js,.vue src”
  说明: 这个命令使用ESLint来检查src目录下的.js和.vue文件的代码质量。ESLint是一个静态代码分析工具，用于识别JavaScript代码中的模式，并帮助你按照预定的编码标准

回到目录

四、自定义开发

4.1 新增业务模块

1. 新建模块
   
2. 在pom.xml文件中添加模块
   
   回到目录

4.2 代码生成

1. 建表，在mysql slave(从库-业务库)数据库中创建表
2. 在页面上选择 系统工具->代码生成 -> 导入
   
3. 选择 创建的表 ，进行导入
   
4. 选择 刚刚导入的表，点击“生成代码”，下载待本地

5. 解压缩下载的zip文件

其中：

• main是后端java代码
• vue是前端代码
• xx.sql是创建菜单的sql语句

回到目录

4.2.1 创建菜单

1. 打开xxxMenu.sql文件
   
2. 在mysql的主数据库中执行sql语句
   
   执行完后，在数据库的sys_menu中将看到刚刚新增的菜单，如果有自定义菜单，也可以在这边按照规定格式新增或编辑修改。
   
   对于系统对字段赋值有特殊要求的，参考其他菜单进行赋值，如：
   > 这里的模块名称（perms）也可以根据实际情况进行修改，但是更改后，代码中要与更改的内容保持一致。

回到目录

4.2.2 后端代码

1. 将后端代码，根据目录提示，放入对应的文件夹中，如果没有该文件夹则手动创建，包含如下domain\mapper\service
   

• 对于domain/xxx.java，进去导入关联包，并删除get/set函数，在文件头新增如下注解，适应springboot编程：

@AllArgsConstructor
@NoArgsConstructor
@Data

• 对于/service/impl/xxImpl.java，需要在文件头增加注解，指定数据源。

@DataSource(DataSourceType.SLAVE)

• 对于其他文件，可根据实际情况，调整文件内容。

2. 对于目录下的controller文件，需要放置到xx-admin/src/main/com.xx/web/controller/模块名称 下面

注意：如果4.2.1节创建菜单时修改了模块名称（perms），这边controller文件中的RequestMapping也要同步进行修改.

回到目录

4.2.3 前端代码

1. 将下载的文件夹vue/api/模块名/xx.js文件复制到前端代码：src/api/模块名下面

注意：如果4.2.1节创建菜单时修改了模块名称（perms），这边js文件中的所有的url也要同步进行修改.

2. 将下载的文件夹vue/views/模块名/xx.vue文件复制到前端代码：src/views/模块名/菜单名/下面
   

这是前端页面，可更改这里的代码对前端进行页面的优化

回到目录