刘三哥的自留地

本文以典型的 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项目

包含增、删、改、查功能的待办事模块已全部完成。

刘三哥的自留地

谈谈技术、谈谈创业、发点感悟

ruoyi-vue-pro 框架上手指南半小时完成一个模块

1.搭建环境

1.1 下载源码

1.2 初始化数据库

1.3 修改数据库连接

1.4 运行项目

1.5 运行前端界面

2. 表结构设计 todo

2.1 表的通用字段

2.2 tools_todo 表的完整结构

3. 新增模块

3.1 yudao-module-tools 模块 pom.xml

3.2 yudao-module-tools-api 的pom.xml

3.3 yudao-module-tools-biz 的pom.xml

3.4 youdao-server中引入新增的 biz模块

4. 使用代码生成工具

4.1 新建菜单

4.2 代码生成

1）导入数据表

2）编辑基本信息

3）编辑字段信息

4）预览并下载代码

5. 效果测试

5.1 接口文档

5.2 运行vue3 admin项目

恰人生过半

1.搭建环境

1.1 下载源码

1.2 初始化数据库

1.3 修改数据库连接

1.4 运行项目

1.5 运行前端界面

2. 表结构设计 todo

2.1 表的通用字段

2.2 tools_todo 表的完整结构

3. 新增模块

3.1 yudao-module-tools 模块 pom.xml

3.2 yudao-module-tools-api 的pom.xml

3.3 yudao-module-tools-biz 的pom.xml

3.4 youdao-server中引入 新增的 biz模块

4. 使用代码生成工具

4.1 新建菜单

4.2 代码生成

1）导入数据表

2）编辑基本信息

3）编辑字段信息

4）预览并下载代码

5. 效果测试

5.1 接口文档

5.2 运行vue3 admin项目

3.4 youdao-server中引入新增的 biz模块