agilebpm脑图_设计开发平台前端框架介绍 | AgileBPM 敏捷工作流开发平台—开源免费-基于 Activiti 工作流引擎、Flowable...
目前設計平臺前端是獨立部署的,引入了 Angular 和 Vue,您可以根據自己技術強項 選擇使用 Angular 或者 Vue,他們引入的成本都很小。
比如我們團隊使用 Angular 很多年了,依賴注入,模塊化概念很舒服,使用它構建復雜應用非常得心應手,自然會傾向 Angular
但是更多人喜歡使用更高效更簡單的 Vue,他的入門成本很低,性能很好 當然也是很不錯的選擇,我們也推薦您使用 Vue 。
前端引入模塊
我們使用 webpack 把某類引入打包成了一個文件,這樣可以減少 js 體積以及請求數量,加快加載速度,而且模塊化可以減少對全局作用域的污染。
目前前端含一下模塊:
base 模塊 :平臺公共必備組件的引入,一般為jQuery組件,均以注冊到 jQuery 的形式暴露給全局作用域
ng-edit 模塊 : Angular js 相關的 公共服務,并將 angular 暴露到全局作用域
vue-edit 模塊 :Vue js 相關的 公共組件,將 Vue 暴露給全局作用域
grid 模塊 :用于列表頁面 公共js的引入,只有BootstrapTable.js 一個引用
列表頁面默認不需要 雙向綁定組件,列表數據中監控數據變化存在頁面性能問題,所以默認列表頁面不提供 Angular引入,如有需要可以單獨引入
前端開發介紹
配置后端服務地址配置 assets/app-conf.js
webpack 打包配置: /agilebpm-ui/webpack.config.js
webpack 相關打包的引入文件配置 /agilebpm-ui/assets/entry
開發
AgileBPM 僅對基礎模塊進行了打包,如果您這邊不是對基礎模塊進行的修改則無需打包安裝的
初次開發需要執行 node命令安裝依賴 npm install
開發時執行 npm run source 監控前端文件變化并實時打包,您可以開啟npm run source 模式下去調試開發基礎模塊的源碼
完成開發后執行打包命令 npm run build ,最后提交打包后的文件
注意:angular js 不支持混淆模式的打包,所以默認打包命令屏蔽了相關引入,具體請查看 /agilebpm-ui/webpack.config.js 引入描述,設置非混淆時才能打包相關引入。
前端分離開發時可以使用 npm run dev 使用 webpack server 單獨跑前端項目(如果是agilebpm-ui 以 jar 形式時運行前端,則可以忽略該方式)
JS 引入情況
前端 目錄├─assets資源目錄
│ ├─cssCSS
│ ├─entrywebpage打包入口
│ │ ├─common公共JS打包引入
│ │ └─home
│ ├─fonts字體圖標
│ ├─img圖標LOG等資源
│ ├─jsJS
│ │ ├─common公共js
│ │ ├─platform平臺模塊js
│ │ │ └─util
│ │ └─plugins
│ └─vueVUE表單相關js引入
├─bpm流程模塊HTML源代碼
├─bpmplugin流程插件HTML源代碼
├─buildwebpack 打包后的壓縮文件
│ ├─commonwebpack 打包的公共JS引入
│ ├─font
│ ├─form
│ ├─home
│ └─images
├─bus業務對象模塊HTML源代碼
├─demo案例模塊HTML源代碼
├─flow-editor流程設計器源代碼
├─form表單模塊HTML源代碼
├─org組織模塊HTML源代碼
└─sys系統模塊HTML源代碼
創作挑戰賽新人創作獎勵來咯,堅持創作打卡瓜分現金大獎總結
以上是生活随笔為你收集整理的agilebpm脑图_设计开发平台前端框架介绍 | AgileBPM 敏捷工作流开发平台—开源免费-基于 Activiti 工作流引擎、Flowable...的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 计算机语言中tc是什么,新人必须了解的几
- 下一篇: (二分搜索法尺取法)subsequenc