400-888-0545
首页 > 关于我们 > 技术文摘
开源办公OA系统:如何在Vue应用中集成O2OA
发布时间:

  在前面的章节中,我们介绍了两种在O2OA中使用Vue开发应用的方式,已经可以满足绝大多数的情况了。如果您考虑完全脱离O2的web服务器,自己搭建web服务器,那就请阅读本章。

  我们还是使用Vue的Vue-CLI工具,创建Vue应用,然后将O2OA集成到应用中,并实现以下功能:嵌入一个O2平台数据中心中的视图,展现内容管理信息;并创建两个按钮,用于创建信息文档和打开主页

版本要求

本文适用于如下版本:

  • O2OA版本要求:5.1及以上版本;
  • Vue版本:本文撰写时,Vue版本是2.6.11。(更低的版本未经验证)
  • Vue-CLI版本:本文撰写时,Vue-CLI版本是4.4.4。


环境安装

  Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。在正确安装号Node.js和npm或yarn后,可以使用下列任一命令全局安装Vue-CLI:

npm install -g @vue/cli
# OR
yarn global add @vue/cli

  安装之后,你就可以在命令行中访问 vue 命令。你可以通过简单运行 vue,看看是否展示出了一份所有可用命令的帮助信息,来验证它是否安装成功。

  你还可以用这个命令来检查其版本是否正确:

vue --version

  Vue-CLI还有一个UI工具,可以通过vue ui命令来启动:

vue ui

创建一个应用

  运行以下命令来创建一个新项目,名为vue-app:

vue create vue-app

  根据提示来选取所需要的特性,本例中使用默认选项。安装完成后,Vue会自定创建好整个目录结构:

     

  本例中,我们将嵌入一个O2平台数据中心中的视图,展现内容管理信息;并创建两个按钮,用于创建信息文档和打开主页。

添加O2脚本引入

将O2服务器的webServer下的所有文件夹拷贝到public目录:

在public/index.html的head中添加O2脚本引入:

<script src="../o2_core/bundle.js"></script>

修改public/x_desktop/res/config/config.json文件:

{
	"center": [
    {
      "port": "20030",		//O2服务器中心服务器端口
      "host": "develop.o2oa.net"	//O2服务器中心服务器Host
    }
  ],
  "applicationServer": {
    "host": "develop.o2oa.net"	//O2应用服务器Host
  },
  "sessionStorageEnable": true,
  "initManagerChanged": true,
  "initManagerName": "",
	...
}

此文件主要修改两部分内容:

1、center部分,修改为要访问的O2中心服务器地址和端口;

2、applicationServer部分,修改为要访问的O2应用服务器地址,如果没有applicationServer,就添加一个。集群环境下,可配置应用服务器负载地址

3、sessionStorageEnable设置为true,启用通过sessionStorage传递登陆后的token,解决跨域cookies传递问题。(生产环境出于安全性考虑,一般情况下不要设置此项)


  为了方便后续引入,我们在src下创建一个o2.js,添加以下代码:

let o2 = window.o2;
let layout = window.layout;
export {o2, layout};

  修改src/main.js文件如下:

import Vue from 'vue'
import App from './App.vue'
//引入o2的layout对象
import {layout} from "./o2";

Vue.config.productionTip = false;

//当o2载入完成后创建Vue根组件
layout.addReady(function(){
  new Vue({
    render: h => h(App),
  }).$mount('#app')
});

修改App组件

  修改src/App.vue文件如下:

<template>
  <div id="app">
    <div class="title">信息中心</div>
    <o2-view app="内容管理数据" name="所有信息"/>
    <button @click="createDocument">创建新信息</button>
    <button @click="openHomepage">打开主页</button>

  </div>
</template>

<script>
//引用o2-view组件
import o2View from './components/o2-view.vue'
//引入o2的全局对象o2
import {o2} from "./o2";

export default {
  name: 'App',
  components: {
    o2View
  },
  methods: {
    "createDocument": function(){
      //通过o2.env对象新建内容管理文档
      //o2.env对象即是在O2门户页面的脚本中的this指向,可以使用其方法。
      //createDocument方法创建内容管理文档,可传入栏目和分类参数,请参考API文档
      o2.env.page.createDocument();
    },
    "openHomepage": function(){
      //通过o2.env对象打开主页应用
      o2.env.page.openApplication("Homepage");
    }
  }
}
</script>

<style>
  #app {
    width: 80%;
    margin: 30px auto;
  }
  .title {
    padding: 10px;
    background: #0f81cc;
    font-size: 18px;
    color: #ffffff;
  }
  button {
    padding: 10px 20px;
    text-align: center;
    background: #0f81cc;
    margin-top: 10px;
    color: #ffffff;
    font-size: 18px;
    float: left;
    margin-right: 20px;
    cursor: pointer;
    border: 0;
  }
</style>

  App.vue是一个Vue组件,文件分为三部分:其中<template>部分定义了组件的模板;<style>部分定义组件样式;<script>部分实现组件的逻辑。

模板中,我们使用了<o2-view>标签,将由o2-view组件负责渲染,给o2-view传入了两个参数:app="内容管理数据"和name="所有信息",我们将在o2-view组件中使用这两个参数,用于展现“内容管理数据”这个数据应用下的“所有信息”视图。您需要现在O2平台里创建好对应的视图,如果需要展现其他数据应用的其他视图,需要修改这两个值。

我们创建了两个button,通过@click分别绑定了createDocument和openHomepage两个方法,分别用于新建内容管理文档和打开主页应用

  我们在components部分引用了o2View组件,下面我们就要创建这个组件。


创建o2-view组件

  删除src/components/目录下的原有.vue文件,然后新建o2-view.vue文件,输入以下代码:

<template>
  <div class="view"></div>
</template>

<script>
//引入o2对象
import {o2} from "../o2";
export default {
  name: 'o2-view',
  props: {
    app: String,	//传入的参数,本例中获取到“内容管理数据”
    name: String  //传入的参数,本例中获取到“所有信息”
  },
  //在vue组件挂载后执行
  mounted: function(){
    //引入o2平台的Viewer对象
    o2.xDesktop.requireApp("query.Query", "Viewer", function(){
      //新建一个Viewer对象,用于展现指定的视图
      //将Viewer展现挂载到this.$el上,就是template中的:<div class="view"></div>对象
      new o2.xApplication.query.Query.Viewer(this.$el, {
        "application": this.app,
        "viewName": this.name,
      });
    }.bind(this));
  }
}
</script>

<style scoped>
div {
  height: 600px;
}
</style>

  在o2-view组件中,我们主要做的事是,在vue组件挂载后,将o2的视图组件,再挂载到o2-view组件的根Dom对象。

  当然,这里我们要在我们的O2服务器上创建好数据应用和视图,对应本例中,就是“内容管理数据”应用下的“所有信息”视图。


编译并运行

  我们完成了上述开发工作,就可以编译并运行我们的应用了。使用以下任一命令来运行开发服务器:

npm run serve
#OR
yarn serve

  运行后,会启动一个web服务器,默认端口8080,打开浏览器,访问http://locahost:8080,就可以看到和第五章一样的效果了。

  如果您未登录到服务器,会出现登录页面,登录后就可以看到结果了。

  登录后:

您可以接着修改代码,每次修改保存后,Vue会自动编译,并刷新浏览器,及时看到修改效果。


开发完成后,可使用命令:

npm run build
#OR
yarn build

Vue会在将所有的代码编译到dist目录下,你就可以将dist中的内容部署到任意的web服务器了。

总结

  O2OA和Vue的集成还是非常方便的,对于熟悉Vue的用户,可以通过更多更灵活的工具来进行集成开发,更多有关Vue的内容请参考Vue官网教程。

  下一章我们介绍Angular和O2OA的集成开发。