基于若依框架的 SpringBoot+Vue3 前后端分离项目搭建与代码生成教程
本文将介绍如何借助若依框架快速搭建基于 SpringBoot 的 Java 管理后台，后台网页使用 Vue3 和 Element Plus。利用若依自动生成 Java 和 Vue3 代码的功能，可快速开发前后端程序。
技术点
后端技术点
- Java17
- 数据库：MySQL8
- MyBatis：作为持久层框架，实现数据库 CRUD 操作
- Redis5：作为缓存中间件，提高系统性能
- Spring Boot：核心框架，提供数据访问、任务调度等功能
- Spring Security：安全认证和授权功能
- JWT：权限认证，支持多终端认证系统
前端技术点
- Vue3
- Element Plus
- Vite
软件和开发环境
建议尽量与课程版本保持一致，避免版本不对应导致错误。
| 官方推荐 | 课程版本 |
|---|---|
| JDK>=1.8 | JDK17 |
| MySQL>=5.7 | MySQL8 |
| Redis>=3 | Redis5 |
| Maven>=3 | Maven3 |
| Node>=12 | Node20.15 |
Java 后端使用 IDEA 开发，Vue3 前端网站使用 VS Code 软件开发。
一、启动若依的 SpringBoot 项目
1-1、下载前后端项目
从若依官网下载官方提供的 SpringBoot 项目，选择前后端分离版本。
获取下载地址后，在 IDEA 中使用 Get from VCS 导入项目。
粘贴地址并指定源码路径，安装 Git 后等待下载完成。
下载成功后自动打开项目，首次打开需导入依赖。
1-2、MySQL 数据库配置和导入
在项目 sql 目录下找到数据库配置文件。
使用 IDEA 自带的 MySQL 管理工具连接数据库，创建名为 ry-vue 的数据库（后续运行项目时代码中默认使用该名称）。
执行 sql 目录下的文件，先执行 quartz.sql。选中 SQL 内容点击绿色箭头执行。
执行完成后刷新查看数据表。
同样方式执行另一个 sql 文件。
导入成功后可见相关数据表。
修改 application.yml 中的 MySQL 账号和密码。
1-3、配置 Redis
确保本地已安装并启动 Redis。如果未设置密码，无需额外配置；若设置了密码，需在配置文件中修改。
1-4、启动项目
找到 RuoYiApplication 类，点击运行。
启动成功会有相应标识。
访问 http://localhost:8080 确认项目运行正常。
二、启动前端 Vue3 项目
原 ruoyi-ui 为 Vue2 版本，需使用官方提供的 Vue3 版本代码。
2-1、源码下载
从官方文档获取 Vue3 版本的 GitHub 仓库地址。
下载 zip 压缩包并解压。
解压后为标准 Vue3 项目结构。
2-2、运行项目
使用 VS Code 打开项目文件夹。
安装依赖前确保已安装 Node.js，执行 npm i 自动安装。
安装完成后执行 npm run dev 运行项目。
运行成功后可查看管理后台登录界面。
使用默认账号登录查看效果。
三、自动生成 Java 和 Vue3 代码
3-1、创建用户表
在若依后台创建数据表。建表语句如下：
create table qcl_user ( id int(11) auto_increment comment '编号', name varchar(20) null comment '姓名', education varchar(20) null comment '学历', age int null comment '年龄', primary key (id) ) comment '用户表';
点击系统工具 -> 代码生成 -> 新建，复制 SQL 语句。
注意事项： SQL 语句必须设置主键。
创建成功后数据库中出现 qcl_user 表。
点击编辑生成增删改查代码。
3-2、生成 Java 和 Vue3 代码
进入编辑页面，保持默认设置，点击生成信息。
修改生成信息，上级菜单不做选择。模块名建议使用 qcluser，避免与自带用户管理冲突。
提交后预览代码。
下载代码并解压。
3-3、把自动生成的代码插入项目
解压后的代码结构如下。
3-3-1、执行 SQL 文件
若依后台菜单栏动态注入，需先执行 SQL。
执行生成的 sql 文件。
执行成功有打印提示。
3-3-2、复制 Java 代码到 IDEA
在 main 目录下找到 qcluser 文件夹，复制到 ruoyi-admin 项目的 com.ruoyi 目录下。
3-3-3、复制 Mapper 文件到 IDEA
在 resources 目录下复制 mapper 文件夹，粘贴到 ruoyi-admin 的 resources 目录。
MyBatis 配置文件已就绪。
3-3-4、粘贴 Vue3 代码到 VS Code
进入 api 目录，复制 qcluser 文件夹，粘贴到 vue3 项目 src 下的 api 目录。
前端接口请求代码已添加。
进入 views 文件夹，复制 qcluser 文件夹，粘贴到 vue3 项目对应的 views 目录下。
然后粘贴到 vue3 项目对应的 views 目录下。
