目录
- 前言
- 1. 在IDEA中搭建后端项目
- 1.1 使用Git克隆并初始化后端项目
- 1.2 配置MySQL数据库
- 1.3 启动Redis服务
- 1.4 运行后端项目
- 2. 在VSCode中搭建前端项目
- 2.1 使用Git克隆前端项目
- 2.2 安装前端依赖
- 2.3 运行前端项目
- 3. 配置前后端通信
- 4. 测试和调试
- 结语
前言
在开发企业级应用时，RuoYi是一款非常受欢迎的后台管理系统框架，它基于Spring Boot、Spring Cloud等技术栈，前后端分离，采用Vue3作为前端框架，具有高效、可定制化、模块化等特点。在本文中，我们将详细介绍如何在IDEA中搭建RuoYi的后端项目，并在VSCode中搭建前端项目，确保你能够顺利搭建一个完整的RuoYi系统。
1. 在IDEA中搭建后端项目
1.1 使用Git克隆并初始化后端项目
首先，确保你的开发环境中已经安装了Git以及IntelliJ IDEA（IDEA）。在搭建项目之前，打开IDEA，进入主界面。
-
在IDEA中选择
File -> New -> Project from Version Control，这将允许你通过Git从远程仓库克隆项目代码。 -
在弹出的窗口中，选择
Git，然后在URL输入框中填入RuoYi后端项目的Git仓库地址，通常是以下地址：https://gitee.com/ys-gitee/RuoYi.git -
选择一个本地路径来存储克隆下来的项目，然后点击
Clone。
此时，IDEA会开始从Git仓库中克隆项目的所有文件。克隆完成后，你将能在IDEA中打开并查看后端代码。
1.2 配置MySQL数据库
RuoYi后端项目需要一个MySQL数据库来存储数据。我们需要导入SQL文件，并配置数据库连接。
-
打开RuoYi项目文件夹中的
sql目录。该目录下包含了数据库的初始化脚本文件，如ruoyi.sql。 -
将
ruoyi.sql导入到MySQL中。你可以使用Navicat、DBeaver等工具，或者通过MySQL命令行进行导入。命令行导入命令如下：mysql -u root -p source /path/to/ruoyi.sql; -
数据库导入完成后，接下来是配置MySQL连接。打开
application-druid.yml配置文件，配置数据库的连接信息：spring:datasource:url: jdbc:mysql://localhost:3306/ruoyiusername: rootpassword: yourpassworddriver-class-name: com.mysql.cj.jdbc.Driverhikari:maximum-pool-size: 20
确保替换为你自己的数据库信息，包括数据库名称、用户名、密码等。
1.3 启动Redis服务
RuoYi后端使用Redis作为缓存系统，因此你需要启动Redis服务器。你可以选择下载并安装Redis，也可以通过Docker运行Redis。以下是使用Docker启动Redis的命令：
docker run --name redis -p 6379:6379 -d redis
确保Redis服务已启动，并且可以正常访问。
1.4 运行后端项目
最后，返回到IDEA，右键点击RuoYiApplication.java文件，选择Run来启动后端项目。项目启动后，后端服务会自动监听在指定的端口上，默认是8080。
通过浏览器访问http://localhost:8080，你应该能够看到RuoYi系统的登录界面。
2. 在VSCode中搭建前端项目
2.1 使用Git克隆前端项目
与后端项目类似，首先确保你的开发环境中已经安装了Git和VSCode。打开VSCode，使用Ctrl+Shift+P调出命令面板，选择Git: Clone，在输入框中输入RuoYi前端项目的Git地址：
https://gitee.com/ys-gitee/RuoYi-Vue3.git
选择一个本地路径来保存项目，VSCode会自动克隆项目文件到本地。
2.2 安装前端依赖
前端项目依赖于Node.js和npm来管理包。在克隆完项目后，打开终端（Terminal），进入前端项目的文件夹，执行以下命令来安装所需的依赖：
npm install
npm会根据package.json文件自动安装项目所需的所有依赖。
2.3 运行前端项目
依赖安装完成后，执行以下命令启动前端项目：
npm run dev
此命令会启动前端开发服务器，通常默认监听在http://localhost:80，你可以通过浏览器访问该地址来查看前端页面。
3. 配置前后端通信
在完成了后端和前端的搭建后，确保后端服务与前端能够正常进行数据交互。一般来说，RuoYi项目的前后端已经实现了API接口对接，但你可能需要根据实际情况调整接口地址。
-
打开前端项目中的
.env文件，确认API的基础URL配置。通常情况下，API请求会指向后端的地址，例如：VUE_APP_BASE_API=http://localhost:8080 -
确保后端服务已经启动，且前端能够正确访问到后端接口。
4. 测试和调试
完成前端和后端项目的搭建后，你可以进行基本的功能测试。登录RuoYi后台，尝试添加用户、权限等操作，确保系统能够正常运行。
如果遇到问题，可以通过查看浏览器控制台或后端日志来排查错误。在IDEA中，你可以通过查看后端日志来获取详细的错误信息；在前端中，你可以使用开发者工具检查网络请求、调试代码。
结语
通过本文的详细步骤，你应该能够顺利在IDEA中搭建RuoYi的后端项目，并在VSCode中搭建前端项目。RuoYi作为一款开源的后台管理系统框架，功能强大且易于扩展，非常适合用于企业级应用的开发。希望你在实践中能够深入了解其架构，快速搭建并定制出符合业务需求的管理系统。
