python activiti bpmn_Nginx+Django-Python+BPMN-JS的整合工作流實戰項目

前言

找一個好用的畫圖工具真心不容易，Activiti 工作流自帶的 Web 版畫圖工具，外表挺華麗，其實使用起來各種擰巴；Eclipse 的 Activiti 畫圖插件，對于相對複雜的流程也是很不友好。

環境搭建

網上有許多詳細的安裝配置步驟，這裡就不一一贅述，隻列出相關版本。

軟體

版本

功能

位址

Python

3.7.1

腳本語言

https://www.python.org/

Django

2.1.3

Web架構

https://www.djangoproject.com/

PyCharm

2018.2.4

可視化開發工具

http://www.jetbrains.com/pycharm/

BPMN-JS

3.2.2

BPMN前端插件

https://github.com/bpmn-io/bpmn-js

項目截圖

項目開發

功能子產品

這是一個Python版本，Java版本功能已經基本開發完畢，需要進行功能遷移。

使用者登入

流程清單(CURD)

使用者注冊(待實作)

遊客通路線上作圖，可實作線上導入導出，本地緩存

建立項目

切換到工作空間，執行以下指令：

django-admin.py startproject bpmn

最終目錄結構，省略部分代碼：

├─bpmn

│ │ settings.py

│ │ urls.py

│ │ wsgi.py

│ │ __init__.py

├─script

│ uwsgi.ini

├─static

├─templates

│ bpmn.html

└─view

│ index.py

核心代碼

var bpmnModeler = new BpmnJS({

container: '#canvas',

keyboard: {

bindTo: window

}

});

function openDiagram() {

bpmnXML='<?xml version="1.0" encoding="UTF-8"?>\n' +

'\n' +

' \n' +

' \n' +

' \n' +

' \n' +

' \n' +

' \n' +

' \n' +

' \n' +

' \n' +

' \n' +

''; //BPMN 2.0 xml

}

// import diagram

bpmnModeler.importXML(bpmnXML, function(err) {

if (err) {

return console.error('could not import BPMN 2.0 diagram', err);

}

});

}

巴拉巴拉，代碼還有一噸，這裡就不貼了，後面會放源碼位址。

部署

伺服器還是選擇Linux，部署前需要做以下操作。

Django

由于之前外網沒有安裝 Django，需要先安裝：

pip install Django

sqlite

為了測試友善，這裡我們選擇 Django 預設自帶的 sqlite 資料庫：

yum install sqlite*

安裝成功以後需要重新配置并編譯安裝 Python3：

# 配置編譯

./configure

# 編譯安裝

make && make install

uwsgi

安裝伺服器 uwsgi，你可以把它想象成Java界的Tomcat

pip3 install uwsgi

這裡你可以直接使用項目中script檔案夾中的uwsgi.ini配置，隻需修改項目路徑即可。

然後使用以下指令啟動：

uwsgi --ini uwsgi.ini

執行指令，檢視是否啟動成功：

[[email protected] script]# ps -ef|grep uwsgi

root 3040 1 0 Nov21 ? 00:00:03 uwsgi --ini uwsgi.ini

root 3041 3040 0 Nov21 ? 00:00:00 uwsgi --ini uwsgi.ini

root 3042 3040 0 Nov21 ? 00:00:00 uwsgi --ini uwsgi.ini

root 3043 3040 0 Nov21 ? 00:00:00 uwsgi --ini uwsgi.ini

root 3044 3040 0 Nov21 ? 00:00:00 uwsgi --ini uwsgi.ini

root 3045 3040 0 Nov21 ? 00:00:00 uwsgi --ini uwsgi.ini

root 3046 3040 0 Nov21 ? 00:00:00 uwsgi --ini uwsgi.ini

root 6606 6580 0 18:13 pts/0 00:00:00 grep --color=auto uwsgi

重新開機：

uwsgi --reload uwsgi.pid

停止：

uwsgi --stop uwsgi.pid

Nginx

最後一步，配置Nginx 轉發，具體安裝這裡不再說明，直接上配置(HTTPS安全證書請自行申請)：

server {

listen 80;

listen 443 ssl;

server_name bpmn.52itstyle.vip;

index index.php;

#ssl on;

#證書路徑

ssl_certificate /usr/local/openresty/nginx/cert/1961848_bpmn.52itstyle.vip.pem;

#私鑰路徑

ssl_certificate_key /usr/local/openresty/nginx/cert/1961848_bpmn.52itstyle.vip.key;

#緩存有效期

ssl_session_timeout 5m;

#可選的加密算法,順序很重要,越靠前的優先級越高.

ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;

#安全連結可選的加密協定

ssl_protocols TLSv1 TLSv1.1 TLSv1.2;

ssl_prefer_server_ciphers on;

location / {

include uwsgi_params; # 導入一個Nginx子產品他是用來和uWSGI進行通訊的

uwsgi_connect_timeout 30; # 設定連接配接uWSGI逾時時間

uwsgi_pass unix:/www/bpmn/script/uwsgi.sock; # 指定uwsgi的sock檔案所有動态請求就會直接丢給他

}

# 動靜分離 Nginx 處理靜态請求

location /static {

root /www/bpmn/;

}

}

示範

以下是基于 bpmn-js 開發的一個 Activiti 工作流作圖管理系統，可以增删查改流程圖，系統還在優化中。

遊客通路：https://bpmn.52itstyle.vip/

源碼

https://gitee.com/52itstyle/BPMN