Jeecg-boot使用心得

本文介绍了在Vue3环境下使用Jeecg框架进行后端模块开发、代码生成器的使用、前端路由免登录功能、用户注册及短信验证的过程,包括Maven项目管理、Swagger配置和Shiro授权机制。
摘要由CSDN通过智能技术生成

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>

在这里插入图片描述

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);

接着在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
在这里插入图片描述
子组件取值:
在这里插入图片描述

  • 6
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值