Java-若依-自定义模块二次开发（不使用代码生成器gen）_若依前后端分离二次开发

在此之前先保证若依项目版本为分离版，并且已经可以正常运行访问若依项目的前后端了
1、该博客旨在使用若依的同时，新建一个自定义模块，但不使用若依自带的代码生成器，而是单纯的新建前后端模块，快速的入门并进行基于若依的二次开发

1、前端-新建目录菜单

1-1、新建目录与菜单，通过前端页面点击生成菜单

a、系统管理-菜单管理-左上角新增
b、如果想要一个完全自定义的一级目录，那么上级菜单就为 主类目
c、想要实现类似系统管理模块下有多个功能的情况，那么菜单类型就为 目录
d、菜单名称，这边推荐先命名xx测试xx，保证区分度，同时排序数字越小，菜单/目录越往上
e、路由地址，这边推荐先以 test，后续熟悉操作后再进行自定义模块开发。
f、点击确定后，刷新一下，会在左边菜单/目录栏看到我们新增的

1-2、新建目录下的菜单
a、接下来在xx测试xx目录下新建功能、譬如系统管理-用户管理

b、通过图片示意的新增测试模块下的菜单，这是命名为测试菜单1
c、路由地址一般为该菜单的对应单词，例如用户管理是user、角色管理是role，这里我么就设置为example1
d、组件路径，这是应该是对应在前端代码中，对应vue代码的路径，但是我们这里还没创建、所以可以提前预设一下，例如用户管理-system/user/index；角色管理-system/role/index，这是我就设置为test/example1/index
e、对于这个目前还不是很清楚。不过基于其他模块的进行类比菜单的权限字符都是目录：菜单：list，这里我设置为test:example1:list
f、剩下的默认即可，然后点击确定，刷新页面。可以在菜单栏看到新增的子菜单-测试菜单1（example1)
g、额外：可以通过数据库观察到新增目录与菜单信息 sys_menu

2、前端-文件||代码

a、此时点击测试菜单1是没办法跳转过去的
b、打开若依项目的前端代码：ruoyi-ui

c、根据图示在对应的路径下新建文件夹和文件
d、example1.js这个文件是后续用来存放请求后端API函数的
e、views下新建的test/example1/index对应设置菜单时的组件路径
f、js文件暂时先不管，我们先给index.vue加个<div>测试</div>

g、回到浏览器前端页面，刷新页面，点击测试模块/测试菜单1；出现测试字样即可。

3、后端-新建模块

a、在若依原先项目正常运行的前提下进行
b、这里新建模块名为my-test，有需要的自行更改名字即可

c、这里要注意Parent为ruoyi，GroupId组id根据自己的需要判断是否需要更改，默认是com.ruoyi；这里我先更改为com.my；模块名设置为my-test；version不用管一般默认即可

d、点击Finsh完成后，生成对应的my-test模块；然后对my-test模块的pom.xml文件进行编辑，新增以下代码

 <dependencies>
        <dependency>
            <groupId>com.ruoyi</groupId>
            <artifactId>ruoyi-common</artifactId>
        </dependency>
    </dependencies>`
1
2
3
4
5
6

e、接下来修改的是Parent的pom.xml文件，即最外层的pom.xml，如果怕改错了，可以将其他的全部收起来，方便观看；找到结束标签前，新增my-test项目

            <!--自己新增的自定义my-test模块-->
            <dependency>
                <groupId>com.my</groupId>
                <artifactId>my-test</artifactId>
                <version>${ruoyi.version}</version>
            </dependency>
1
2
3
4
5
6

f、修改了上面两个pom.xml文件后，还需要更改第三个pom.xml文件，即模块ruoyi-admin的pom.xml文件，这个是项目核心模块(module)；在pom.xml文件中新增；更改后刷新一下Maven

        <!--自己新增的自定义my-test模块-->
        <dependency>
            <groupId>com.my</groupId>
            <artifactId>my-test</artifactId>
        </dependency>
1
2
3
4
5

4、后端-测试controller

a、进行测试，检查是否正常；在my-test模块中新建自己的文件路径；新建com.my.test，然后在controller包下新建MyTestController进行测试（PS：不能命名为TestController，若依项目中已经存在该类名了）；这里我的Java目录没有沿用com.ruoyi，所以后续要对application相关的文件中新增包路径扫描。

@RestController
@RequestMapping("/my-test/test")
public class MyTestController {
    @GetMapping("/getTestData")
    public String getTestData() {
        return "Hello World!";
    }
}`
1
2
3
4
5
6
7
8

b、如果一直都是和以ruoyi作为包名的可以忽略下面的更改；ruoyi-admin模块的application.yml文件中的mybatis

c、同样是ruoyi-admin模块，在如图所示的位置，更改启动类的注解

@MapperScan(value = {"com.ruoyi.*.mapper","com.my.*.mapper"})
@ComponentScan(value = {"com.ruoyi", "com.my"})
1
2

d、第三个地方是在ruoyi-framework的ApplicationConfig，新增com.my相关的路径扫描；这里要注意多个改为花括号。

e、改完上述的内容后，可以将刷新一下Maven，然后启动项目，保证正常启动后，先运行着不要关闭。

5、前端-测试API

a、剩下的将前端完善，通过后端API获取数据即可；在api下的test/example1.js下编写

import request  from "@/utils/request";

//调用测试接口
export function test() {
  return request({
    url:"/my-test/test/getTestData",
    method:"get"
  })
}
1
2
3
4
5
6
7
8
9

b、稍微更改index.vue代码，保证数据能够正常从后端获取；下面是完整的index.vue代码；实现了点击获取后端数据，然后更改文字

<template>
  <div>
    <!-- 添加一个span标签用于显示初始文本，当数据获取后替换这部分内容 -->
    <div><span v-if="!testData">测试</span><span v-else>{{ testData }}</span></div>
    <button @click="fetchData">点击获取测试数据</button>
  </div>
</template>

<script>
import {test} from "@/api/test/example1";
export default {
  name: "my-test-example1",
  data() {
    return {
      testData: null, // 初始化数据为null
    };
  },
  methods: {
    async fetchData() {
      try {
        const response = await test();
        this.testData = response;
        console.log(response)
      } catch (error) {
        console.error("获取测试数据时出错:", error);
      }
    },
  },
}
</script>

<style scoped>

</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

e、最终的实现效果

6、总结

本次记录主要是不想使用代码生成工具，如上述内容存在错误、不恰当的地方欢迎指出。