vue 集成 activiti

activiti 前端代码地址：https://github.com/Funnyman-S/spring-boot-with-activiti-modeler/tree/master/src/main/resources/public

下载下来之后，将代码放到public文件夹下面。

步骤：

1.新建Vue文件

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46

<template>   <div class="modeler">     <iframe :src="src" frameborder="0" class="iframe"></iframe>   </div> </template>   <script> import { mapGetters, mapState } from "vuex"; import api from "@/config/api"; export default {   data() {     return {       src: ""     };   },   components: {},   computed: {     ...mapState("perModeler", {       modelId: state => state.modelId     }),     ...mapGetters([       "token"     ]),     // src() {     //   return "/activiti1/modeler.html?modelId=" + this.modelId;// activiti主html路径     // },     apiUrl() {       return process.env.VUE_APP_API;// 后台部署的api服务     },   },   created() {     this.src = "/activiti1/modeler.html?modelId=" + this.modelId;   },   mounted() {     window.getMyVue = this;   },   methods: {} }; </script>   <style lang="scss" scoped> .iframe {   width: 100%;   height: calc(100vh - 154px); } </style>

　　

2.找到activiti前端modeler.html文件，加上：

调接口使用你的系统的token。

?

1 2 3 4 5 6 7 8 9 10

<script>     (       function (open) {         XMLHttpRequest.prototype.open = function (method, url, async, user, pass) {           open.call(this, method, url, async, user, pass);//this指XMLHttpRequest           this.setRequestHeader("token", window.parent.getMyVue.token);//mounted时传入的token         };       }     )(XMLHttpRequest.prototype.open);   </script>

　　

3.找到app-cfg.js文件，修改接口地址（vue使用代理地址）

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

/*  * Activiti Modeler component part of the Activiti project  * Copyright 2005-2014 Alfresco Software, Ltd. All rights reserved.  *  * This library is free software; you can redistribute it and/or  * modify it under the terms of the GNU Lesser General Public  * License as published by the Free Software Foundation; either  * version 2.1 of the License, or (at your option) any later version.  *  * This library is distributed in the hope that it will be useful,  * but WITHOUT ANY WARRANTY; without even the implied warranty of  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU  * Lesser General Public License for more details.    * You should have received a copy of the GNU Lesser General Public  * License along with this library; if not, write to the Free Software  * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301  USA  */ 'use strict';   var ACTIVITI = ACTIVITI || {};   ACTIVITI.CONFIG = {   'contextRoot': window.parent.getMyVue.apiUrl + '/service', // vue文件中自己定义的代理地址，比如vue.config.js中的代理"apis" };

　　vue,config.js:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

devServer: {    host: "127.0.0.1",    hot: true,    port: 8000,    inline: true,    proxy: {      "/apis": {        // target: "http://888888888/",        changeOrigin: true,        pathRewrite: {          "/apis": "",        },      },    },  },

　　

可能出现的问题;

1.打开页面显示不出样式，获取不到资源：检查路径是否正确，modeler.html下面的js、css资源是否可以获取到。

2.json请求文件报错，找到请求位置，检查路径是否正确。

3.渲染不出流程图，modelId是必带的参数，必带必带必带！！ 

最后：2021新年快乐！

 

__EOF__

本文作者：沧澜野兽迈特丶凯
本文链接：https://www.cnblogs.com/sxdjy/p/14384411.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！