學(xué)習(xí)背景

近期項(xiàng)目中，使用到了一個(gè)叫ant-design-vue-jeecg的框架。
就看看這個(gè)名字，也可以看出來三個(gè)框架：

• ant-design 前端UI框架
• VUE 前端框架
• jeecg 這個(gè)框架接觸不多，學(xué)習(xí)一下?

框架簡(jiǎn)介

官網(wǎng)：JEECG官方網(wǎng)站 - 基于BPM的低代碼開發(fā)平臺(tái)JeecgBoot低代碼平臺(tái)，基于SpringBoot+Ant Design的前后端分離架構(gòu),集成完善的工作流平臺(tái)、強(qiáng)大的代碼生成器、流程設(shè)計(jì)器、表單設(shè)計(jì)器,獨(dú)創(chuàng)開發(fā)模式(Online Coding模式->代碼生成器模式->手工MERGE智能開發(fā))，可以應(yīng)用在任何J2EE項(xiàng)目開發(fā)中，尤其適合企業(yè)信息管理系統(tǒng)（MIS）、辦公系統(tǒng)（OA）、企業(yè)資源計(jì)劃系統(tǒng)（ERP）、客戶關(guān)系管理系統(tǒng)（CRM）等，其半智能手工Merge的開發(fā)方式，可以顯著提高開發(fā)效率70%以上，極大降低開發(fā)成本。http://jeecg.com/

進(jìn)官網(wǎng)，看簡(jiǎn)介：

JeecgBoot是一款基于BPM的低代碼平臺(tái)！前后端分離架構(gòu) SpringBoot 2.x，SpringCloud，Ant Design&Vue，Mybatis-plus，Shiro，JWT，支持微服務(wù)。強(qiáng)大的代碼生成器讓前后端代碼一鍵生成，實(shí)現(xiàn)低代碼開發(fā)！ JeecgBoot引領(lǐng)新低代碼開發(fā)模式 OnlineCoding-> 代碼生成器-> 手工MERGE， 幫助Java項(xiàng)目解決70%的重復(fù)工作，讓開發(fā)更多關(guān)注業(yè)務(wù)，既能快速提高效率，節(jié)省研發(fā)成本，同時(shí)又不失靈活性！一系列低代碼能力：Online表單、Online報(bào)表、Online圖表、表單設(shè)計(jì)、流程設(shè)計(jì)、報(bào)表設(shè)計(jì)、大屏設(shè)計(jì) 等等

內(nèi)容著實(shí)不少。簡(jiǎn)單說就是一個(gè)低代碼平臺(tái)，能說自己是平臺(tái)，那就不簡(jiǎn)單。
簡(jiǎn)介里也特別說了下一些有特色的低代碼能力。
說起來低代碼帶來的好處，一定是快速開發(fā)。可帶來的壞處，就是出現(xiàn)問題不好解決。?

再看看官網(wǎng)上說的JEECG 可以做那些事情？

Jeecg-Boot 是一款基于代碼生成器的智能開發(fā)平臺(tái)！采用前后端分離架構(gòu)：SpringBoot，Mybatis，Shiro，JWT，Vue&Ant Design。強(qiáng)大的代碼生成器讓前端和后臺(tái)代碼一鍵生成，不需要寫任何代碼，保持jeecg一貫的強(qiáng)大，絕對(duì)是全棧開發(fā)福音！！ JeecgBoot在提高UI能力的同時(shí)，降低了前后分離的開發(fā)成本，JeecgBoot還獨(dú)創(chuàng)在線開發(fā)模式（No代碼概念），一系列在線智能開發(fā)：在線配置表單、在線配置報(bào)表、在線圖表設(shè)計(jì)、在線設(shè)計(jì)流程等等。

• 平臺(tái)宗旨，簡(jiǎn)單功能由Online Coding配置實(shí)現(xiàn)（在線配置表單、在線配置報(bào)表、在線圖表設(shè)計(jì)、在線設(shè)計(jì)流程、在線設(shè)計(jì)表單），復(fù)雜功能由代碼生成器生成進(jìn)行手工Merge，既保證了智能又兼顧了靈活; 業(yè)務(wù)流程采用工作流來實(shí)現(xiàn)、擴(kuò)展出任務(wù)接口，供開發(fā)編寫業(yè)務(wù)邏輯，表單提供多種解決方案： 表單設(shè)計(jì)器、online配置表單、編碼表單。同時(shí)實(shí)現(xiàn)了流程與表單的分離設(shè)計(jì)（松耦合）、并支持任務(wù)節(jié)點(diǎn)靈活配置，既保證了公司流程的保密性，又減少了開發(fā)人員的工作量。
• 適用項(xiàng)目，可以應(yīng)用在任何J2EE項(xiàng)目的開發(fā)中，尤其適合企業(yè)信息管理系統(tǒng)（MIS）、內(nèi)部辦公系統(tǒng)（OA）、企業(yè)資源計(jì)劃系統(tǒng)（ERP）、客戶關(guān)系管理系統(tǒng)（CRM）等，其半智能手工Merge的開發(fā)方式，可以顯著提高開發(fā)效率70%以上，極大降低開發(fā)成本。

作為平臺(tái)，主打的是低代碼和在線開發(fā)，減員增效，這是要革程序員的小命呀。
趕緊的，跟上步伐，別被甩到天邊了。別人學(xué)會(huì)了，一天開發(fā)一套系統(tǒng)，我們沒學(xué)的，一月開發(fā)一套系統(tǒng)。那不真被革命了么。
不過根據(jù)我的經(jīng)驗(yàn)，一個(gè)項(xiàng)目的成功與否，從來都是不技術(shù)能主導(dǎo)的，更多的是需求，業(yè)務(wù)的明晰與否，甲乙雙方的共同努力才能得到的美好結(jié)果。不過技術(shù)真的能提高效率和利潤(rùn)，這不夸張。

JEECG雖然沒有生態(tài)的概念，但是從發(fā)布出來可能下載的開源項(xiàng)目來看，還是有不少的關(guān)聯(lián)產(chǎn)品。
GITHUB上的JEECG的官方內(nèi)容：
JEECG官方 · GitHub致力于國內(nèi)開源事業(yè)，打造JeecgBoot低代碼平臺(tái)、JimuReport可視化報(bào)表、JeeWx微信管家等產(chǎn)品。 （以往榮譽(yù): 獲得CSDN專家訪談，ITEYE訪談、連續(xù)五年中國最火TOP5、十大優(yōu)秀開源項(xiàng)目等、2014年微信開發(fā)商大會(huì)第一名等等） - JEECG官方https://github.com/jeecgboot可以看到如下主要產(chǎn)品，及其他開源產(chǎn)品
下面的都是主要產(chǎn)品，其他的就直接看Github的官網(wǎng)吧。

• jeecg-boot??企業(yè)級(jí)低代碼平臺(tái)
• jeecgboot-vue3??企業(yè)級(jí)低代碼平臺(tái) vue3jeecgboot-vue3??
• ant-design-vue-jeecg??企業(yè)級(jí)低代碼平臺(tái) vue2 *我們項(xiàng)目用到的就是這個(gè)
• JimuReport??低代碼可視化報(bào)表JimuReport??
• jeecg-uniapp??JEECG BOOT APP 移動(dòng)解決方案jeecg-uniapp??
• jeewx-boot? JAVA版免費(fèi)開源的微信管家平臺(tái)

框架功能

我們用到的ant-design-vue-jeecg實(shí)際上是一個(gè)前端產(chǎn)品，需要結(jié)合jeecg-boot的后端產(chǎn)品來使用。
另外，jeecgboot-vue3是使用vue3的一個(gè)前端產(chǎn)品，也是結(jié)合jeecg-boot的后端產(chǎn)品來使用。
看看官網(wǎng)的功能介紹：

Jeecg Boot 產(chǎn)品功能藍(lán)圖

?

?

功能模塊

├─系統(tǒng)管理 │ ├─用戶管理 │ ├─角色管理 │ ├─菜單管理 │ ├─權(quán)限設(shè)置（支持按鈕權(quán)限、數(shù)據(jù)權(quán)限） │ ├─表單權(quán)限（控制字段禁用、隱藏） │ ├─部門管理 │ ├─我的部門（二級(jí)管理員） │ └─字典管理 │ └─分類字典 │ └─系統(tǒng)公告 │ └─職務(wù)管理 │ └─通訊錄 │ └─多租戶管理 ├─消息中心 │ ├─消息管理 │ ├─模板管理 ├─代碼生成器(低代碼) │ ├─代碼生成器功能（一鍵生成前后端代碼，生成后無需修改直接用，絕對(duì)是后端開發(fā)福音） │ ├─代碼生成器模板（提供4套模板，分別支持單表和一對(duì)多模型，不同風(fēng)格選擇） │ ├─代碼生成器模板（生成代碼，自帶excel導(dǎo)入導(dǎo)出） │ ├─查詢過濾器（查詢邏輯無需編碼，系統(tǒng)根據(jù)頁面配置自動(dòng)生成） │ ├─高級(jí)查詢器（彈窗自動(dòng)組合查詢條件） │ ├─Excel導(dǎo)入導(dǎo)出工具集成（支持單表，一對(duì)多 導(dǎo)入導(dǎo)出） │ ├─平臺(tái)移動(dòng)自適應(yīng)支持 ├─系統(tǒng)監(jiān)控 │ ├─Gateway路由網(wǎng)關(guān) │ ├─性能掃描監(jiān)控 │ │ ├─監(jiān)控 Redis │ │ ├─Tomcat │ │ ├─jvm │ │ ├─服務(wù)器信息 │ │ ├─請(qǐng)求追蹤 │ │ ├─磁盤監(jiān)控 │ ├─定時(shí)任務(wù) │ ├─系統(tǒng)日志 │ ├─消息中心（支持短信、郵件、微信推送等等） │ ├─數(shù)據(jù)日志（記錄數(shù)據(jù)快照，可對(duì)比快照，查看數(shù)據(jù)變更情況） │ ├─系統(tǒng)通知 │ ├─SQL監(jiān)控 │ ├─swagger-ui(在線接口文檔) │─報(bào)表示例 │ ├─曲線圖 │ └─餅狀圖 │ └─柱狀圖 │ └─折線圖 │ └─面積圖 │ └─雷達(dá)圖 │ └─儀表圖 │ └─進(jìn)度條 │ └─排名列表 │ └─等等 │─大屏模板 │ ├─作戰(zhàn)指揮中心大屏 │ └─物流服務(wù)中心大屏 │─常用示例 │ ├─自定義組件 │ ├─對(duì)象存儲(chǔ)(對(duì)接阿里云) │ ├─JVXETable示例（各種復(fù)雜ERP布局示例） │ ├─單表模型例子 │ └─一對(duì)多模型例子 │ └─打印例子 │ └─一對(duì)多TAB例子 │ └─內(nèi)嵌table例子 │ └─常用選擇組件 │ └─異步樹table │ └─接口模擬測(cè)試 │ └─表格合計(jì)示例 │ └─異步樹列表示例 │ └─一對(duì)多JEditable │ └─JEditable組件示例 │ └─圖片拖拽排序 │ └─圖片翻頁 │ └─圖片預(yù)覽 │ └─PDF預(yù)覽 │ └─分屏功能 │─封裝通用組件 │ ├─行編輯表格JEditableTable │ └─省略顯示組件 │ └─時(shí)間控件 │ └─高級(jí)查詢 │ └─用戶選擇組件 │ └─報(bào)表組件封裝 │ └─字典組件 │ └─下拉多選組件 │ └─選人組件 │ └─選部門組件 │ └─通過部門選人組件 │ └─封裝曲線、柱狀圖、餅狀圖、折線圖等等報(bào)表的組件（經(jīng)過封裝，使用簡(jiǎn)單） │ └─在線code編輯器 │ └─上傳文件組件 │ └─驗(yàn)證碼組件 │ └─樹列表組件 │ └─表單禁用組件 │ └─等等 │─更多頁面模板 │ ├─各種高級(jí)表單 │ ├─各種列表效果 │ └─結(jié)果頁面 │ └─異常頁面 │ └─個(gè)人頁面 ├─高級(jí)功能 │ ├─系統(tǒng)編碼規(guī)則 │ ├─提供單點(diǎn)登錄CAS集成方案 │ ├─提供APP發(fā)布方案 │ ├─集成Websocket消息通知機(jī)制 ├─Online在線開發(fā)(低代碼) │ ├─Online在線表單 - 功能已開放 │ ├─Online代碼生成器 - 功能已開放 │ ├─Online在線報(bào)表 - 功能已開放 │ ├─Online在線圖表(未開源) │ ├─Online圖表模板配置(未開源) │ ├─Online布局設(shè)計(jì)(未開源) │ ├─多數(shù)據(jù)源管理 - 功能已開放 ├─積木報(bào)表設(shè)計(jì)器(低代碼) │ ├─打印設(shè)計(jì)器 │ ├─數(shù)據(jù)報(bào)表設(shè)計(jì) │ ├─圖形報(bào)表設(shè)計(jì)（支持echart） │ ├─大屏設(shè)計(jì)器(未開源) │─流程模塊功能 (未開源) │ ├─流程設(shè)計(jì)器 │ ├─表單設(shè)計(jì)器├─大屏設(shè)計(jì)器├─門戶設(shè)計(jì)/儀表盤設(shè)計(jì)器 │ └─我的任務(wù) │ └─歷史流程 │ └─歷史流程 │ └─流程實(shí)例管理 │ └─流程監(jiān)聽管理 │ └─流程表達(dá)式 │ └─我發(fā)起的流程 │ └─我的抄送 │ └─流程委派、抄送、跳轉(zhuǎn) │ └─。。。 │─OA辦公組件 (未開源) │ ├─更多功能 │ └─。。。 └─其他模塊└─更多功能開發(fā)中。。

?

技術(shù)棧

前端技術(shù)棧（Vue2版）

• 基礎(chǔ)框架：ant-design-vue?- Ant Design Of Vue 實(shí)現(xiàn)
• JavaScript框架：Vue
• node
• yarn
• @vue/cli 3.2.1
• vue-cropper?- 頭像裁剪組件
• @antv/g2?- Alipay AntV 數(shù)據(jù)可視化圖表
• Viser-vue?- antv/g2 封裝實(shí)現(xiàn)
• Vue 2.6.10,Vuex,Vue Router
• Axios
• webpack,yarn
• eslint，@vue/cli 3.2.1
• vue-print-nb-jeecg - 打印

前端技術(shù)棧（Vue3版）

官方文檔沒有給提供，但是給了一些必會(huì)的基礎(chǔ)知識(shí)。
權(quán)且參考一下吧。

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

后端技術(shù)棧

后端技術(shù)官網(wǎng)給了技術(shù)架構(gòu)。
那就放到這里多多學(xué)習(xí)吧。

開發(fā)環(huán)境

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

• IDE(JAVA)： IDEA (必須安裝lombok插件 )

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

• 依賴管理：Maven

• 緩存：Redis

• 數(shù)據(jù)庫腳本：MySQL5.7+ & Oracle 11g & Sqlserver2017（其他數(shù)據(jù)庫，需要自己轉(zhuǎn)）

后端

• 基礎(chǔ)框架：Spring Boot 2.6.6

• 微服務(wù)框架： Spring Cloud Alibaba 2021.0.1.0

• 持久層框架：MybatisPlus 3.5.1

• 報(bào)表工具： JimuReport 1.5.2

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

• 微服務(wù)技術(shù)棧：Spring Cloud Alibaba、Nacos、Gateway、Sentinel、Skywalking

• 數(shù)據(jù)庫連接池：阿里巴巴Druid 1.1.22

• 日志打印：logback

• 其他：autopoi, fastjson，poi，Swagger-ui，quartz, lombok（簡(jiǎn)化代碼）等。

前端

• Vue2版本：Vue2.6+@vue/cli+AntDesignVue+Viser-vue+Vuex等?詳細(xì)查看
• Vue3版本：Vue3.0+TypeScript+Vite+AntDesignVue+pinia+echarts等新方案?詳細(xì)查看

支持庫

數(shù)據(jù)庫支持

MySQL	√
Oracle11g	√
Sqlserver2017	√
PostgreSQL	√
MariaDB	√
達(dá)夢(mèng)、人大金倉	√

后端除了技術(shù)架構(gòu)，還給了微服務(wù)解決方案

1、服務(wù)注冊(cè)和發(fā)現(xiàn) Nacos √

2、統(tǒng)一配置中心 Nacos √

3、路由網(wǎng)關(guān) gateway(三種加載方式) √

4、分布式 http feign √

5、熔斷降級(jí)限流 Sentinel √

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

7、統(tǒng)一權(quán)限控制 JWT + Shiro √

8、服務(wù)監(jiān)控 SpringBootAdmin√

9、鏈路跟蹤 Skywalking?參考文檔

10、消息中間件 RabbitMQ √

11、分布式任務(wù) xxl-job √

12、分布式事務(wù) Seata

13、分布式日志 elk + kafka

14、支持 docker-compose、k8s、jenkins

15、CAS 單點(diǎn)登錄 √

16、路由限流 √

微服務(wù)架構(gòu)圖

?

好了，這下子夠?qū)W一陣子了。?

總結(jié)

不愧是平臺(tái)級(jí)的存在，確實(shí)包括了豐富的功能，這下得好好學(xué)習(xí)了。

總結(jié)

以上是生活随笔為你收集整理的JEECG框架的入门学习的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。