阅读量:0
Ruoyi 快速开发平台
一、官网
链接: 前后端分离版本
二、准备工作
2.1 环境要求
2.2 必要配置
- 源码下载：
前往Gitee下载页面( https://gitee.com/y_project/RuoYi-Vue (opens new window))下载解压到工作目录 - 开发环境：idea(2023以上版本)、maven(3.0以上版本)、jdk(1.8版本)
- 导入：将源码导入idea
- 创建数据库ry-vue（库名可自定义）并导入数据脚本：ry_2021xxxx.sql，quartz.sql
- 修改数据库连接，编辑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 前端安装及运行
- 前端项目第一次运行需要安装依赖包，执行命令：
npm install
强烈建议不要用直接使用 cnpm 安装，会有各种诡异的 bug，可以通过重新指定 registry 来解决 npm 安装速度慢的问题。
npm install --registry=https://registry.npmmirror.com 
前端项目本地运行命令：
npm run dev
运行成功后，登录网页，默认用户名\密码：
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 新增业务模块
- 新建模块
- 在
pom.xml文件中添加模块
回到目录
4.2 代码生成
- 建表，在mysql slave(从库-业务库)数据库中创建表
- 在页面上选择 系统工具->代码生成 -> 导入
- 选择 创建的表 ，进行导入
- 选择 刚刚导入的表，点击“生成代码”，下载待本地
5. 解压缩下载的zip文件
其中：
- main是后端java代码
- vue是前端代码
- xx.sql是创建菜单的sql语句
4.2.1 创建菜单
- 打开xxxMenu.sql文件
- 在mysql的主数据库中执行sql语句
执行完后，在数据库的sys_menu中将看到刚刚新增的菜单，如果有自定义菜单，也可以在这边按照规定格式新增或编辑修改。
对于系统对字段赋值有特殊要求的，参考其他菜单进行赋值，如：
> 这里的模块名称（perms）也可以根据实际情况进行修改，但是更改后，代码中要与更改的内容保持一致。
4.2.2 后端代码
- 将后端代码，根据目录提示，放入对应的文件夹中，如果没有该文件夹则手动创建，包含如下domain\mapper\service
- 对于domain/xxx.java，进去导入关联包，并删除get/set函数，在文件头新增如下注解，适应springboot编程：
@AllArgsConstructor @NoArgsConstructor @Data 
- 对于/service/impl/xxImpl.java，需要在文件头增加注解，指定数据源。
@DataSource(DataSourceType.SLAVE) 
- 对于其他文件，可根据实际情况，调整文件内容。
- 对于目录下的controller文件，需要放置到xx-admin/src/main/com.xx/web/controller/模块名称 下面
注意：如果4.2.1节创建菜单时修改了模块名称（perms），这边controller文件中的RequestMapping也要同步进行修改.
4.2.3 前端代码
- 将下载的文件夹vue/api/模块名/xx.js文件复制到前端代码：src/api/模块名下面
注意：如果4.2.1节创建菜单时修改了模块名称（perms），这边js文件中的所有的url也要同步进行修改.
- 将下载的文件夹vue/views/模块名/xx.vue文件复制到前端代码：src/views/模块名/菜单名/下面
这是前端页面，可更改这里的代码对前端进行页面的优化
