Jeecg-boot使用心得_jeecgboot

1.前后端代码运行

首先，去到官网将源码下载下来（官网地址：https://jeecg.com/?ref=nav.poetries.top）
后端需要改的地方：
运行后端：执行jeecg-system-start下的JeecgSystemApplication

前端需要改的地方：

前端运行：
pnpm install
pnpm run dev

2.后端新增module

1.首先，右键项目，新建module，新建maven项目到目录下，module可以随便命名

2.接着，修改新建的module的pom.xml文件，如图：

<dependencies>
        <dependency>
            <groupId>org.jeecgframework.boot</groupId>
            <artifactId>jeecg-boot-base-core</artifactId>
        </dependency>
        <dependency>
            <groupId>org.jeecgframework.boot</groupId>
            <artifactId>jeecg-system-biz</artifactId>
        </dependency>
</dependencies>
1
2
3
4
5
6
7
8
9
10

3.在父级pom.xml文件中加入新建的module

4.在jeecg-system-start的pom.xml加入新建的module

5.最后根据源码中swagger2的配置文件包结构是org.jeecg，不想修改就按照源码的包结构去建项目，如下图：（如果想改地址，该此处swagger2的配置就行。）

3.代码生成器的使用，增删改查代码（online表单）

可以引入外部数据表，在navicat中将数据表生成，在online表单开发界面中使用导入数据数据库表

controller、entity、mapper、service为后端代码，vue3Native为前端代码,将前后端代码分别放到对应板块。


接着，操作系统添加路由菜单，把前端组件位置添加至对应的路由，并给角色授权（角色不授权，看不到新建的路由菜单）


重点：增删改查代码引入后端后，jeecg-boot使用的是shiro进行授权和鉴权，需要对角色进行增删改的授权操作。或者删除controller的鉴权注解，如图，将@RequiresPermissions(“department:department:add”)注释掉
下面，介绍如何给角色进行增删改授权：

之后刷新缓存，重新登录即可。
如果业务中有不同的角色可以看到不同的按钮，也可以在前端这样配置

4.前端路由免登录访问

在router=》routers文件下新建一个路由文件，如图mainOut-sl.ts：

/**
The routing of this file will not show the layout.
It is an independent new page.
the contents of the file still need to log in to access
 */
import type { AppRouteModule } from '/@/router/types';

// test
// http:ip:port/main-out
export const mainOutSLRoutes: AppRouteModule[] = [
  {
    path: '/duplex',
    name: 'duplex',
    component: () => import('/@/views/representative/lpx/main-out/DuplexIndex.vue'),
    meta: {
      title: 'duplex',
      ignoreAuth: true,
    },
  },
  {
    path: '/office',
    name: 'Office',
    component: () => import('/@/views/representative/lpx/main-out/OfficeIndex.vue'),
    meta: {
      title: 'Office',
      ignoreAuth: true,
    },
  },
];

export const mainOutRouteNames = mainOutSLRoutes.map((item) => item.name);
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

接着在index.ts文件增加你的路由配置，并将路由配置加入basicRoutes中
这样就可以直接免登录访问，例如：localhost:3100/duplex

5.用户注册

jeecg提供有用户注册接口，如果只是普通注册，需要将短信验证代码注释。密码是随机生成。

6.发送短信验证

在application-dev.yml配置密钥后可直接使用，使用案例可参考下图。有一个发送短信的工具类：DySmsHelper

7.添加弹窗，自定义表单（插槽模式）

效果：表单分类为后端请求返回树形结构

1.首先在data.ts中的formSchema定义插槽名称

2.在Model组件中使用改插槽

8.搜索栏自定义组件（插槽模式）

效果：搜索栏自定义搜索条件

1.在data.ts中的searchFormSchema定义插槽名称

2.在List中使用，插槽名需要加form-做为前缀

9.使用BaseModel传值

子组件在父组件界面声明使用（如图），定义事件：const [registerProcessDesignModal, { openModal: openProcessDesignerModal }] = useModal();

点击事件为preView，传递点击当前列的数据record

子组件取值：