acitiviti在前后端分离项目中,如何将acitiviti嵌入到vue等项目中并使用
在vue项目中嵌入acitiviti工作流心得:acitiviti是一款在线流程设计器,但是它一般被使用在前后端分离的项目中,由于当前是vue项目,所以需要就部分前端页面代码嵌入项目当中,如下图结构,我将editor-app文件夹和modeler.html(后端之前做的前后端不分离所用的前端代码,acitiviti源码):步骤:第一步:引入文件到静态目录public下;第二步...
在vue项目中嵌入acitiviti工作流心得:
acitiviti是一款在线流程设计器,但是它一般被使用在前后端分离的项目中,由于当前是vue项目,所以需要就部分前端页面代码嵌入项目当中,如下图结构,我将editor-app文件夹和modeler.html(后端之前做的前后端不分离所用的前端代码,acitiviti源码):
步骤:
第一步:引入文件到静态目录public下;
第二步:在所需页面利用 <iframe>引入;
第三步:前端源码是用angular写的,可以先熟悉源码之后再进行改动从后端调接口获取modelId,全 局查找modelId,我是写在app.js line 185调取
第四步:解决报错问题,可能会有小坑,耐心一点(以下hack是我遇到的问题你可能也会遇到)
遇到的问题:
Hack 1,一定要在public目录下新建static(名字随意)文件夹,不能直接写在public根目录下,不然始终引入不了路径。因为之前在vue-cli2中静态文件是放在static下可以正常引入,但是vue-cli3中必须放在public里新建的static文件夹中这样才能正常显示html文件,src的根路径就是public。
Hack 2,找不到medelId,解决方案参照第三步调接口
Hack 3.控制台报错:
TypeError: Cannot read property 'split' of undefined
at Object.ORYX.Core.StencilSet.stencilSet (oryx.debug.js:8640)
at oryx.debug.js:8619
at prototype-1.5.1.js:446
at Array._each (prototype-1.5.1.js:672)
at Array.each (prototype-1.5.1.js:445)
at Object.ORYX.Core.StencilSet.stencilSets (oryx.debug.js:8618)
at classDef.getStencilSets (oryx.debug.js:11705)
at classDef._createCanvas (oryx.debug.js:11187)
at classDef.construct (oryx.debug.js:10921)
at classDef (oryx.debug.js:1747)
原因是stencilSet接口有问题,看返回报:We're sorry but xx doesn't work properly without JavaScript enabled,一开始以为是后端响应头Content-type的问题,其实不然,原来的前端请求头Accept的值有问题,应该设置为application/json, text/plain, */*才对,因为 new Ajax.Request()类是protype.js的,所以找到路径editor-app/libs/prototype-1.5.1.js 的line 1080 的Accept设置为我们想要的,如图
问题终于解决了,前端菜鸟自白,若有错误还请见谅。上图:
更多推荐
所有评论(0)