使用IDEA和VSCode中搭建若依的前后端项目

前言

在开发企业级应用时，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/ruoyi
    username: root
    password: yourpassword
    driver-class-name: com.mysql.cj.jdbc.Driver
    hikari:
      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作为一款开源的后台管理系统框架，功能强大且易于扩展，非常适合用于企业级应用的开发。希望你在实践中能够深入了解其架构，快速搭建并定制出符合业务需求的管理系统。