JEECG框架的入门学习

学习背景

近期项目中，使用到了一个叫ant-design-vue-jeecg的框架。
就看看这个名字，也可以看出来三个框架：

• ant-design 前端UI框架
• VUE 前端框架
• jeecg 这个框架接触不多，学习一下 

框架简介

官网：JEECG官方网站 - 基于BPM的低代码开发平台JeecgBoot低代码平台，基于SpringBoot+Ant Design的前后端分离架构,集成完善的工作流平台、强大的代码生成器、流程设计器、表单设计器,独创开发模式(Online Coding模式->代码生成器模式->手工MERGE智能开发)，可以应用在任何J2EE项目开发中，尤其适合企业信息管理系统（MIS）、办公系统（OA）、企业资源计划系统（ERP）、客户关系管理系统（CRM）等，其半智能手工Merge的开发方式，可以显著提高开发效率70%以上，极大降低开发成本。http://jeecg.com/

进官网，看简介：

JeecgBoot是一款基于BPM的低代码平台！前后端分离架构 SpringBoot 2.x，SpringCloud，Ant Design&Vue，Mybatis-plus，Shiro，JWT，支持微服务。强大的代码生成器让前后端代码一键生成，实现低代码开发！ JeecgBoot引领新低代码开发模式 OnlineCoding-> 代码生成器-> 手工MERGE， 帮助Java项目解决70%的重复工作，让开发更多关注业务，既能快速提高效率，节省研发成本，同时又不失灵活性！一系列低代码能力：Online表单、Online报表、Online图表、表单设计、流程设计、报表设计、大屏设计 等等

内容着实不少。简单说就是一个低代码平台，能说自己是平台，那就不简单。
简介里也特别说了下一些有特色的低代码能力。
说起来低代码带来的好处，一定是快速开发。可带来的坏处，就是出现问题不好解决。 

再看看官网上说的JEECG 可以做那些事情？

Jeecg-Boot 是一款基于代码生成器的智能开发平台！采用前后端分离架构：SpringBoot，Mybatis，Shiro，JWT，Vue&Ant Design。强大的代码生成器让前端和后台代码一键生成，不需要写任何代码，保持jeecg一贯的强大，绝对是全栈开发福音！！ JeecgBoot在提高UI能力的同时，降低了前后分离的开发成本，JeecgBoot还独创在线开发模式（No代码概念），一系列在线智能开发：在线配置表单、在线配置报表、在线图表设计、在线设计流程等等。

• 平台宗旨，简单功能由Online Coding配置实现（在线配置表单、在线配置报表、在线图表设计、在线设计流程、在线设计表单），复杂功能由代码生成器生成进行手工Merge，既保证了智能又兼顾了灵活; 业务流程采用工作流来实现、扩展出任务接口，供开发编写业务逻辑，表单提供多种解决方案： 表单设计器、online配置表单、编码表单。同时实现了流程与表单的分离设计（松耦合）、并支持任务节点灵活配置，既保证了公司流程的保密性，又减少了开发人员的工作量。
• 适用项目，可以应用在任何J2EE项目的开发中，尤其适合企业信息管理系统（MIS）、内部办公系统（OA）、企业资源计划系统（ERP）、客户关系管理系统（CRM）等，其半智能手工Merge的开发方式，可以显著提高开发效率70%以上，极大降低开发成本。

作为平台，主打的是低代码和在线开发，减员增效，这是要革程序员的小命呀。
赶紧的，跟上步伐，别被甩到天边了。别人学会了，一天开发一套系统，我们没学的，一月开发一套系统。那不真被革命了么。
不过根据我的经验，一个项目的成功与否，从来都是不技术能主导的，更多的是需求，业务的明晰与否，甲乙双方的共同努力才能得到的美好结果。不过技术真的能提高效率和利润，这不夸张。

JEECG虽然没有生态的概念，但是从发布出来可能下载的开源项目来看，还是有不少的关联产品。
GITHUB上的JEECG的官方内容：
JEECG官方 · GitHub致力于国内开源事业，打造JeecgBoot低代码平台、JimuReport可视化报表、JeeWx微信管家等产品。 （以往荣誉: 获得优快云专家访谈，ITEYE访谈、连续五年中国最火TOP5、十大优秀开源项目等、2014年微信开发商大会第一名等等） - JEECG官方https://github.com/jeecgboot可以看到如下主要产品，及其他开源产品
下面的都是主要产品，其他的就直接看Github的官网吧。

• jeecg-boot  企业级低代码平台
• jeecgboot-vue3  企业级低代码平台 vue3jeecgboot-vue3  
• ant-design-vue-jeecg  企业级低代码平台 vue2 *我们项目用到的就是这个
• JimuReport  低代码可视化报表JimuReport  
• jeecg-uniapp  JEECG BOOT APP 移动解决方案jeecg-uniapp  
• jeewx-boot  JAVA版免费开源的微信管家平台

框架功能

我们用到的ant-design-vue-jeecg实际上是一个前端产品，需要结合jeecg-boot的后端产品来使用。
另外，jeecgboot-vue3是使用vue3的一个前端产品，也是结合jeecg-boot的后端产品来使用。
看看官网的功能介绍：

Jeecg Boot 产品功能蓝图

 

 

功能模块

├─系统管理
│  ├─用户管理
│  ├─角色管理
│  ├─菜单管理
│  ├─权限设置（支持按钮权限、数据权限）
│  ├─表单权限（控制字段禁用、隐藏）
│  ├─部门管理
│  ├─我的部门（二级管理员）
│  └─字典管理
│  └─分类字典
│  └─系统公告
│  └─职务管理
│  └─通讯录
│  └─多租户管理
├─消息中心
│  ├─消息管理
│  ├─模板管理
├─代码生成器(低代码)
│  ├─代码生成器功能（一键生成前后端代码，生成后无需修改直接用，绝对是后端开发福音）
│  ├─代码生成器模板（提供4套模板，分别支持单表和一对多模型，不同风格选择）
│  ├─代码生成器模板（生成代码，自带excel导入导出）
│  ├─查询过滤器（查询逻辑无需编码，系统根据页面配置自动生成）
│  ├─高级查询器（弹窗自动组合查询条件）
│  ├─Excel导入导出工具集成（支持单表，一对多 导入导出）
│  ├─平台移动自适应支持
├─系统监控
│  ├─Gateway路由网关
│  ├─性能扫描监控
│  │  ├─监控 Redis
│  │  ├─Tomcat
│  │  ├─jvm
│  │  ├─服务器信息
│  │  ├─请求追踪
│  │  ├─磁盘监控
│  ├─定时任务
│  ├─系统日志
│  ├─消息中心（支持短信、邮件、微信推送等等）
│  ├─数据日志（记录数据快照，可对比快照，查看数据变更情况）
│  ├─系统通知
│  ├─SQL监控
│  ├─swagger-ui(在线接口文档)
│─报表示例
│  ├─曲线图
│  └─饼状图
│  └─柱状图
│  └─折线图
│  └─面积图
│  └─雷达图
│  └─仪表图
│  └─进度条
│  └─排名列表
│  └─等等
│─大屏模板
│  ├─作战指挥中心大屏
│  └─物流服务中心大屏
│─常用示例
│  ├─自定义组件
│  ├─对象存储(对接阿里云)
│  ├─JVXETable示例（各种复杂ERP布局示例）
│  ├─单表模型例子
│  └─一对多模型例子
│  └─打印例子
│  └─一对多TAB例子
│  └─内嵌table例子
│  └─常用选择组件
│  └─异步树table
│  └─接口模拟测试
│  └─表格合计示例
│  └─异步树列表示例
│  └─一对多JEditable
│  └─JEditable组件示例
│  └─图片拖拽排序
│  └─图片翻页
│  └─图片预览
│  └─PDF预览
│  └─分屏功能
│─封装通用组件	
│  ├─行编辑表格JEditableTable
│  └─省略显示组件
│  └─时间控件
│  └─高级查询
│  └─用户选择组件
│  └─报表组件封装
│  └─字典组件
│  └─下拉多选组件
│  └─选人组件
│  └─选部门组件
│  └─通过部门选人组件
│  └─封装曲线、柱状图、饼状图、折线图等等报表的组件（经过封装，使用简单）
│  └─在线code编辑器
│  └─上传文件组件
│  └─验证码组件
│  └─树列表组件
│  └─表单禁用组件
│  └─等等
│─更多页面模板
│  ├─各种高级表单
│  ├─各种列表效果
│  └─结果页面
│  └─异常页面
│  └─个人页面
├─高级功能
│  ├─系统编码规则
│  ├─提供单点登录CAS集成方案
│  ├─提供APP发布方案
│  ├─集成Websocket消息通知机制
├─Online在线开发(低代码)
│  ├─Online在线表单 - 功能已开放
│  ├─Online代码生成器 - 功能已开放
│  ├─Online在线报表 - 功能已开放
│  ├─Online在线图表(未开源)
│  ├─Online图表模板配置(未开源)
│  ├─Online布局设计(未开源)
│  ├─多数据源管理 - 功能已开放
├─积木报表设计器(低代码)
│  ├─打印设计器
│  ├─数据报表设计
│  ├─图形报表设计（支持echart）
│  ├─大屏设计器(未开源)
│─流程模块功能 (未开源)
│  ├─流程设计器
│  ├─表单设计器
   ├─大屏设计器
   ├─门户设计/仪表盘设计器
│  └─我的任务
│  └─历史流程
│  └─历史流程
│  └─流程实例管理
│  └─流程监听管理
│  └─流程表达式
│  └─我发起的流程
│  └─我的抄送
│  └─流程委派、抄送、跳转
│  └─。。。
│─OA办公组件 (未开源)
│  ├─更多功能
│  └─。。。
└─其他模块
   └─更多功能开发中。。

 

技术栈

前端技术栈（Vue2版）

• 基础框架：ant-design-vue - Ant Design Of Vue 实现
• JavaScript框架：Vue
• node
• yarn
• @vue/cli 3.2.1
• vue-cropper - 头像裁剪组件
• @antv/g2 - Alipay AntV 数据可视化图表
• Viser-vue - antv/g2 封装实现
• Vue 2.6.10,Vuex,Vue Router
• Axios
• webpack,yarn
• eslint，@vue/cli 3.2.1
• vue-print-nb-jeecg - 打印

前端技术栈（Vue3版）

官方文档没有给提供，但是给了一些必会的基础知识。
权且参考一下吧。

 Vue3 文档
TypeScript
Vue-router
Ant-Design-Vue
Vben文档
Es6
Vitejs
Pinia(vuex替代方案)
Vue-RFCS

后端技术栈

后端技术官网给了技术架构。
那就放到这里多多学习吧。

开发环境

• 语言：Java 8+ (小于17)

• IDE(JAVA)： IDEA (必须安装lombok插件 )

• IDE(前端)： Vscode、WebStorm、IDEA

• 依赖管理：Maven

• 缓存：Redis

• 数据库脚本：MySQL5.7+ & Oracle 11g & Sqlserver2017（其他数据库，需要自己转）

后端

• 基础框架：Spring Boot 2.6.6

• 微服务框架： Spring Cloud Alibaba 2021.0.1.0

• 持久层框架：MybatisPlus 3.5.1

• 报表工具： JimuReport 1.5.2

• 安全框架：Apache Shiro 1.8.0，Jwt 3.11.0

• 微服务技术栈：Spring Cloud Alibaba、Nacos、Gateway、Sentinel、Skywalking

• 数据库连接池：阿里巴巴Druid 1.1.22

• 日志打印：logback

• 其他：autopoi, fastjson，poi，Swagger-ui，quartz, lombok（简化代码）等。

前端

• Vue2版本：Vue2.6+@vue/cli+AntDesignVue+Viser-vue+Vuex等 详细查看
• Vue3版本：Vue3.0+TypeScript+Vite+AntDesignVue+pinia+echarts等新方案 详细查看

支持库

数据库	支持
MySQL	√
Oracle11g	√
Sqlserver2017	√
PostgreSQL	√
MariaDB	√
达梦、人大金仓	√

后端除了技术架构，还给了微服务解决方案

1、服务注册和发现 Nacos √

2、统一配置中心 Nacos √

3、路由网关 gateway(三种加载方式) √

4、分布式 http feign √

5、熔断降级限流 Sentinel √

6、分布式文件 Minio、阿里OSS √

7、统一权限控制 JWT + Shiro √

8、服务监控 SpringBootAdmin√

9、链路跟踪 Skywalking 参考文档

10、消息中间件 RabbitMQ √

11、分布式任务 xxl-job √

12、分布式事务 Seata

13、分布式日志 elk + kafka

14、支持 docker-compose、k8s、jenkins

15、CAS 单点登录 √

16、路由限流 √

微服务架构图

 

好了，这下子够学一阵子了。 

总结

不愧是平台级的存在，确实包括了丰富的功能，这下得好好学习了。