开发知识-Vue篇：在Vue应用中集成O2OA-开发知识及常见问题-O2OA企业应用开发平台-人人都是协同系统开发专家

开发知识-Vue篇：在Vue应用中集成O2OA

时间：2022-08-03

内容导读

本篇介绍自行搭建前端服务时如何在 Vue 应用中集成平台能力：先安装工具并创建项目，接着把平台服务目录下的资源拷入应用静态目录，在页面入口引入平台脚本。随后修改平台配置文件，把中心服务器与应用服务器的地址端口改为实际目标，并抽取全局对象，在脚本载入完成后挂载框架实例。再接续编写根组件与视图组件，嵌入平台数据视图并添加创建信息与打开主页按钮。最后说明开发服务器启动与编译产物部署的方式。

提示：

此文中介绍的方法已过时，建议查看文档：o2oa 开发平台前端源码级二次开发

O2OA 前端二次开发介绍了创建 O2OA component 的方式，支持基于 React 和 Vue 的模式。

如果要完全脱离 O2 的 web 服务器、自行搭建 web 服务器，请阅读本章。

本章仍使用 Vue 的 Vue-CLI 工具创建 Vue 应用，然后将 O2OA 集成到应用中，实现以下功能：嵌入 O2平台数据中心中的一个视图以展现内容管理信息；并创建两个按钮，分别用于创建信息文档和打开主页。

版本要求

本文适用于如下版本：

环境安装

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，就添加一个。集群环境下，可配置应用服务器负载地址；

为方便后续引入，在 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 组件负责渲染，并传入两个参数：app="内容管理数据"和name="所有信息"，用于展现“内容管理数据”应用下的“所有信息”视图。您需要先在 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，即可看到与第五章相同的效果。

如果尚未登录服务器，会先显示登录页面，登录后即可看到结果。

接下来可以继续修改代码，每次保存后 React 会自动编译并刷新浏览器，可及时看到修改效果。

开发完成后，可使用命令：

npm run build
#OR
yarn build

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

总结

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