【RuoYi-Vue生成代码使用】

最新推荐文章于 2025-03-04 15:50:24 发布

是杉杉吖~

最新推荐文章于 2025-03-04 15:50:24 发布

阅读量4.4k

点赞数 38

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_65702315/article/details/143710080

版权

文章目录

前言
一、代码生成器概述介绍
二、使用代码生成器
三、测试功能
总结

前言

随着互联网技术的快速发展，Web 应用的开发效率和质量要求越来越高。为了满足这些需求，许多开发团队采用了前后端分离的架构模式。在这种背景下，RuoYi-Vue 作为一个基于 Spring Boot 和 Vue.js 的前后端分离快速开发框架，应运而生。

RuoYi-Vue 不仅提供了强大的后端管理功能，还集成了前端页面的快速生成能力。通过内置的代码生成器，开发者可以快速生成符合业务需求的 CRUD（创建、读取、更新、删除）操作代码，极大地提高了开发效率，缩短了项目周期。

本文档旨在详细介绍 RuoYi-Vue 项目的代码生成器功能，帮助开发者了解如何高效地使用该工具。无论您是初次接触 RuoYi-Vue 的新手，还是已经熟悉该框架的老手，本文档都将为您提供有价值的指导和参考。

一、代码生成器概述介绍

1.代码生成器功能介绍

RuoYi-Vue 代码生成器是一个强大的工具，旨在帮助开发者快速生成符合业务需求的 CRUD（创建、读取、更新、删除）操作代码。它不仅支持生成后端接口代码，还可以生成前端页面代码，极大地提高了开发效率。以下是代码生成器的主要功能：

自动生成后端代码： 包括控制器（Controller）、服务层（Service）、数据访问层（DAO）等。
自动生成前端代码： 包括 Vue 组件、API 请求封装等。
支持多种数据库： 如 MySQL、Oracle、SQL Server 等。
灵活的模板定制： 允许用户根据项目需求自定义代码生成模板。
丰富的配置选项： 提供多种生成选项，如是否生成菜单、按钮权限控制等。
代码注释生成： 自动生成详细的代码注释，方便后续维护。

2.代码生成器的工作原理

RuoYi-Vue 代码生成器的工作原理主要包括以下几个步骤：

读取数据库表结构：
代码生成器首先连接到数据库，读取指定表的结构信息，包括字段名、数据类型、长度等。
这一步骤确保生成的代码与数据库表结构完全匹配。
解析生成规则：
根据用户在生成器界面中配置的规则，解析生成哪些类型的文件（如 Controller、Service、Mapper 等）。
配置规则还包括生成路径、包名、作者信息等。
生成代码模板：
使用预定义的代码模板或用户自定义的模板，生成相应的代码文件。
模板引擎会将数据库表结构信息和配置规则填充到模板中，生成最终的代码文件。
保存生成的代码：
将生成的代码文件保存到指定的目录中。
生成的文件可以直接用于项目开发，无需手动编写大量重复代码。
生成前端代码：
对于前端代码生成，代码生成器会根据后端接口定义，生成对应的 Vue 组件和 API 请求封装。
前端代码生成同样支持模板定制，确保生成的代码符合项目风格。

3.代码生成器的主要特性

高效性：
代码生成器能够快速生成大量的 CRUD 代码，显著减少手动编码的时间和工作量。
特别适合快速原型开发和中小型项目的快速迭代。
灵活性：
支持多种生成选项和配置，用户可以根据项目需求灵活调整生成规则。
提供自定义模板功能，允许用户扩展和修改生成的代码样式。
易用性：
用户界面友好，操作简单直观。
提供详细的文档和示例，帮助用户快速上手。
可扩展性：
代码生成器具有良好的扩展性，可以通过插件或自定义脚本扩展其功能。
支持多种数据库和框架，适应不同的开发环境。
安全性：
生成的代码经过严格的校验和优化，确保代码质量和安全性。
提供代码审查和测试工具，帮助用户发现潜在的问题。

二、使用代码生成器

1.启动代码生成器

在 RuoYi-Vue 项目中，启动代码生成器的步骤如下：

启动项目：
确保您的开发环境已经配置好，包括 JDK、MySQL、Maven 等。
使用 IDE（如 IntelliJ IDEA 或 Eclipse）打开 RuoYi-Vue 项目。
启动项目，确保项目能够正常运行。

在这里插入图片描述
选择terminal，运行前端页面

在这里插入图片描述

访问代码生成器：
打开浏览器，访问 RuoYi-Vue 项目的后台管理系统，通常地址为 http://localhost:80/。
登录系统，进入系统工具模块，找到“代码生成”选项。

2.配置生成自己的功能模块

2.1 准备数据源

做一个“学生信息”功能，首先得先有一张学生信息表，直接在ry数据库中创建my_student，记得添加注释，后面功能会用上。（这里犯了一个小错误，在后面运行的时候会讲到）
在这里插入图片描述
往数据表中添加几条数据。

2.2 使用RuoYi代码生成器生成菜单及接口还有页面

选择数据源：
在代码生成器界面中，选择要生成代码的数据源。RuoYi-Vue 默认配置了两个个数据源，可以选择导入自己的数据源。

在这里插入图片描述

选择表：
从数据源中选择要生成代码的表。可以选择单个表或多表生成。
选择表后，代码生成器会自动读取表结构信息，包括字段名、数据类型等。

在这里插入图片描述

配置生成选项：
包名：设置生成代码的包名，如 com.ruoyi.system。
作者：设置代码生成的作者信息。
模块名：设置生成代码的模块名，如 system。
表前缀：如果表名有前缀，可以在这里设置前缀，生成代码时会自动去除前缀。
生成策略：选择生成策略，如覆盖已有文件、追加到现有文件等。
生成内容：选择要生成的文件类型，如 Controller、Service、Mapper、Entity、Vue 组件等。

在这里插入图片描述

ps：自定义菜单
选择系统管理–>菜单管理–>新增，自己给自己菜单定一个名字，路由地址。

在这里插入图片描述
这时候就创建了一个自定义菜单

我们就可以回到代码生成页面，修改my_student的生成信息，改为刚刚创建的自定义菜单。

2.3 生成代码实例

填写表单：
在代码生成器界面中，填写上述配置项，确保所有信息准确无误。
预览生成代码：
点击“预览”按钮，查看生成的代码内容。预览功能可以帮助您确认生成的代码是否符合预期。
生成代码：
确认无误后，点击“生成”按钮，代码生成器会根据配置生成相应的代码文件。

2.4 后端添加代码模块

新建一个子模块
在这里插入图片描述
选择new module，name: ruoyi-student，java，maven，jdk17。

创建了一个新的子模块

修改ruoyi-student模块下pom文件，添加依赖

因为要借用“通用模块”里面的功能，所以要把它添加到依赖中。

<dependencies>
        <dependency>
            <groupId>com.ruoyi</groupId>
            <artifactId>ruoyi-common</artifactId>
        </dependency>
</dependencies>

修改ruoyi-admin模块的pom文件，把我们添加的学生信息模块添加进来。
在这里插入图片描述

<!--        学生信息管理-->
        <dependency>
            <groupId>com.ruoyi</groupId>
            <artifactId>ruoyi-student</artifactId>
            <version>${ruoyi.version}</version>
        </dependency>