基于若依框架的 SpringBoot+Vue3 前后端分离项目搭建与代码生成教程

下载成功后自动打开项目，首次打开需导入依赖。

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 目录下。