本文以典型的 Todo list项目为例,基于 ruoyi-vue-pro 框架实现一个代办事清单的增删改查(CURD)
1.搭建环境
1.1 下载源码
从 https://gitee.com/zhijiantianya/ruoyi-vue-pro clone 源码。
推荐:由于后续要提交代码,建议先fork为自己的代码库后,再 clone:
git clone git@gitee.com:liuguixue/ruoyi-vue-pro.git
1.2 初始化数据库
- 新建数据库名称为 ruoyi-vue-pro
- 导入 ruoyi-vue-pro/sql/mysql/ruoyi-vue-pro.sql
- 导入 ruoyi-vue-pro/sql/mysql//optional/vue3-menu.sql
1.3 修改数据库连接
yudao-server/src/main/resources/application-local.yaml
- 修改 数据源的MySQL连接账号
- 修改 redis 的账号密码
1.4 运行项目
跳过 测试。
修改并行编译可节省时间
访问 http://127.0.0.1:48080/doc.html 可以查看项目接口文档。
1.5 运行前端界面
cd yudao-ui-admin-vue3/
npm install
npm run dev
参考项目: ruoyi-vue-pro 开发指南 快速启动
2. 表结构设计 todo
由于todo功能在 tools 模块下,表的命名应该为 tools_todo
2.1 表的通用字段
每个表都包含通用字段:
-
id
自增编号 -
creator
创建者 create_time
创建时间updater
更新者update_time
更新时间deleted
是否删除tenant_id
租户编号
简单的方法,复制已有的表(system_user_role)结构,删除不用字段后新增需要的字段。
CREATE TABLE `tools_todo` (
`id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '自增编号',
`creator` varchar(64) COLLATE utf8mb4_unicode_ci DEFAULT '' COMMENT '创建者',
`create_time` datetime DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
`updater` varchar(64) COLLATE utf8mb4_unicode_ci DEFAULT '' COMMENT '更新者',
`update_time` datetime DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新时间',
`deleted` bit(1) DEFAULT b'0' COMMENT '是否删除',
`tenant_id` bigint(20) NOT NULL DEFAULT '0' COMMENT '租户编号',
PRIMARY KEY (`id`) USING BTREE
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci COMMENT='待办事';
2.2 tools_todo 表的完整结构
DROP TABLE IF EXISTS `tools_todo`;
CREATE TABLE `tools_todo` (
`id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '自增编号',
`title` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '标题',
`status` tinyint(1) DEFAULT NULL COMMENT '完成状态',
`priority` tinyint(1) DEFAULT NULL COMMENT '优先级',
`plan_time` datetime DEFAULT NULL COMMENT '预计完成时间',
`user_id` bigint(20) DEFAULT NULL COMMENT '所属用户',
`creator` varchar(64) COLLATE utf8mb4_unicode_ci DEFAULT '' COMMENT '创建者',
`create_time` datetime DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
`updater` varchar(64) COLLATE utf8mb4_unicode_ci DEFAULT '' COMMENT '更新者',
`update_time` datetime DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新时间',
`deleted` bit(1) DEFAULT b'0' COMMENT '是否删除',
`tenant_id` bigint(20) NOT NULL DEFAULT '0' COMMENT '租户编号',
PRIMARY KEY (`id`) USING BTREE,
KEY `status` (`status`),
KEY `priority` (`priority`),
KEY `userId` (`user_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci COMMENT='待办事';
其中 status 与 priority 有字典项,在 系统管理 -> 字段管理 页面新增字典项:
3. 新增模块
新增一个 tools 模块,包含两个子模块 api 和 biz:
- 暴露给外部模块的内容放 api中
- 实际业务逻辑实现放在 biz 中
yudao-module-tools
├── yudao-module-tools-api
└── yudao-module-tools-biz
详细的逻辑: 参考框架文档 开发指南 - 新建模块
3.1 yudao-module-tools 模块 pom.xml
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<parent>
<artifactId>yudao</artifactId>
<groupId>cn.iocoder.boot</groupId>
<version>${revision}</version> <!-- 1. 修改 version 为 ${revision} -->
</parent>
<modelVersion>4.0.0</modelVersion>
<artifactId>yudao-module-tools</artifactId>
<packaging>pom</packaging> <!-- 2. 新增 packaging 为 pom -->
<name>${project.artifactId}</name> <!-- 3. 新增 name 为 ${project.artifactId} -->
<description> <!-- 4. 新增 description 为该模块的描述 -->
tools 模块,主要实现 XXX、YYY、ZZZ 等功能。
</description>
<modules>
<module>yudao-module-tools-api</module>
<module>yudao-module-tools-biz</module>
</modules>
</project>
3.2 yudao-module-tools-api 的pom.xml
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<parent>
<artifactId>yudao-module-tools</artifactId>
<groupId>cn.iocoder.boot</groupId>
<version>${revision}</version> <!-- 1. 修改 version 为 ${revision} -->
</parent>
<modelVersion>4.0.0</modelVersion>
<artifactId>yudao-module-tools-api</artifactId>
<packaging>jar</packaging> <!-- 2. 新增 packaging 为 jar -->
<name>${project.artifactId}</name> <!-- 3. 新增 name 为 ${project.artifactId} -->
<description> <!-- 4. 新增 description 为该模块的描述 -->
tools 模块 API,暴露给其它模块调用
</description>
<dependencies> <!-- 5. 新增 yudao-common 依赖 -->
<dependency>
<groupId>cn.iocoder.boot</groupId>
<artifactId>yudao-common</artifactId>
</dependency>
</dependencies>
</project>
3.3 yudao-module-tools-biz 的pom.xml
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<parent>
<artifactId>yudao-module-tools</artifactId>
<groupId>cn.iocoder.boot</groupId>
<version>${revision}</version> <!-- 1. 修改 version 为 ${revision} -->
</parent>
<modelVersion>4.0.0</modelVersion>
<artifactId>yudao-module-tools-biz</artifactId>
<packaging>jar</packaging> <!-- 2. 新增 packaging 为 jar -->
<name>${project.artifactId}</name> <!-- 3. 新增 name 为 ${project.artifactId} -->
<description> <!-- 4. 新增 description 为该模块的描述 -->
tools-biz 模块,主要实现 XXX、YYY、ZZZ 等功能。
</description>
<build>
<plugins>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-compiler-plugin</artifactId>
<configuration>
<source>16</source>
<target>16</target>
</configuration>
</plugin>
</plugins>
</build>
<dependencies> <!-- 5. 新增依赖,这里引入的都是比较常用的业务组件、技术组件 -->
<dependency>
<groupId>cn.iocoder.boot</groupId>
<artifactId>yudao-module-tools-api</artifactId>
<version>${revision}</version>
</dependency>
<!-- 业务组件 -->
<dependency>
<groupId>cn.iocoder.boot</groupId>
<artifactId>yudao-spring-boot-starter-biz-operatelog</artifactId>
</dependency>
<!-- Web 相关 -->
<dependency>
<groupId>cn.iocoder.boot</groupId>
<artifactId>yudao-spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>cn.iocoder.boot</groupId>
<artifactId>yudao-spring-boot-starter-security</artifactId>
</dependency>
<!-- DB 相关 -->
<dependency>
<groupId>cn.iocoder.boot</groupId>
<artifactId>yudao-spring-boot-starter-mybatis</artifactId>
</dependency>
<!-- Test 测试相关 -->
<dependency>
<groupId>cn.iocoder.boot</groupId>
<artifactId>yudao-spring-boot-starter-test</artifactId>
</dependency>
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>easyexcel-core</artifactId>
<version>3.2.0</version>
<scope>compile</scope>
</dependency>
<dependency>
<groupId>cn.iocoder.boot</groupId>
<artifactId>yudao-spring-boot-starter-excel</artifactId>
</dependency>
</dependencies>
</project>
3.4 youdao-server中引入 新增的 biz模块
在 dependencies 里加入
<dependency>
<groupId>cn.iocoder.boot</groupId>
<artifactId>yudao-module-tools-biz</artifactId>
<version>${revision}</version>
</dependency>
4. 使用代码生成工具
4.1 新建菜单
待办事的菜单要挂在一个模块下,取名工具合集。
【系统管理】 -> 【菜单管理】 -> 【新增】, 内容如下:
刷新或重新登录后,可以看到新增的菜单
4.2 代码生成
【基础设施】-> 【代码生成】
1)导入数据表
点击导入按钮,选择数据表:
2)编辑基本信息
3)编辑字段信息
4)预览并下载代码
下载代码解压后,复制到对应的代码文件夹中, 需要注意
- sql/sql.sql 先在mysql客户端中执行。
- ErrorCodeConstants 要手动改为:
package cn.iocoder.yudao.module.tools.enums;
import cn.iocoder.yudao.framework.common.exception.ErrorCode;
/**
* tools 错误码 枚举类
*
* tools 系统,使用 1-009-000-000 段
*/
public interface ErrorCodeConstants {
ErrorCode TODO_NOT_EXISTS = new ErrorCode(1009001000, "待办事不存在");
}
放入 api 模块的 enums 目录下:
5. 效果测试
5.1 接口文档
运行java代码后,打开接口文档: http://localhost:48080/doc.html
5.2 运行vue3 admin项目
包含 增、删、改、查功能的待办事模块已全部完成。