O2OA使用手册
第一章 服务器部署及管理
  • 1.1 O2OA基于nginx的SSL跳转、转发配置
  • 1.2 平台服务器下载及安装部署 For WindowsServer(适用于V7.2之后的版本)
  • 1.3 平台服务器下载及安装部署 For Linux Server(适用于V7.2之后的版本)
  • 1.4 平台服务器主机架构配置推荐
  • 1.5 平台服务器下载及安装部署 For WindowsServer(适用于V7.2之前的版本)
  • 1.6 平台服务器下载及安装部署 For Linux Server(适用于O2OA V7.2之前的版本)
  • 1.7 华为云服务器部署O2OA-麒麟操作系统
  • 1.8 密码管理-超级管理员密码修改
  • 1.9 密码管理-普通用户初始化密码设置
  • 1.10 密码管理-用户重置密码操作
  • 1.11 系统配置-如何访问和操作内置数据库-H2
  • 1.12 系统配置-第三方数据库配置-MySQL
  • 1.13 日志管理-访问日志相关配置
  • 1.14 日志管理-审计日志相关配置@日志管理
  • 1.15 日志管理-平台日志文件说明
  • 1.16 系统配置-主要配置文件说明
  • 1.17 系统配置-配置服务器连接O2云
  • 1.18 系统配置-流程催办提醒配置
  • 1.19 系统配置-自定义消息提醒
  • 1.20 系统配置-消息提醒配置说明
  • 1.21 系统配置-文件存储服务器配置
  • 1.22 系统配置-工作日节假日配置
  • 1.23 系统配置-开机自动启动O2Server
  • 1.24 系统架构-集群部署配置及操作说明
  • 1.25 系统架构-基于nginx快速集群部署-上下文分发
  • 1.26 系统架构-基于nginx快速集群部署-端口分发
  • 1.27 平台维护-流转中工作数据的查询、操作和管理
  • 1.28 平台维护-待办待阅数据的查询操作和管理
  • 1.29 平台维护-自动执行平台数据的备份与恢复
  • 1.30 平台维护-备份和恢复平台数据操作
  • 1.31 平台服务器版本升级操作说明
  • 1.32 o2server无法正常显示验证码解决办法
  • 1.33 在宝塔面板中安装O2OA(For Linux)
  • 1.34 系统安全-启用HTTPS(百度云版)
  • 1.35 系统安全-启用HTTPS(腾讯云版)
  • 1.36 系统安全-自签名SSL证书验证HTTPS功能
  • 1.37 系统安全-加密登录-登录密码RSA加密
  • 1.38 功能部署-为平台增加全文检索功能
  • 1.39 平台维护-在线部署自定义应用的WAR包和JAR包
  • 1.40 平台维护-使用Web端运行服务器管理命令
  • 第十五章 开发知识及常见问题
  • 15.1 常见问题-7.2及以上版本开启web代理后请求中没有正确使用web端口问题解决方式
  • 15.2 linux环境libreoffice安装及使用
  • 15.3 在O2OA中使用网络会议(二):Openmeetings与O2OA认证配置
  • 15.4 在O2OA中使用网络会议(一):Openmeetings-5.1.0亲手安装整理 Step-By-Step
  • 15.5 藕粉社区问答系列1
  • 15.6 藕粉社区问答系列2
  • 15.7 藕粉社区问答系列3
  • 15.8 快速入门-平台相关资料汇总
  • 15.9 快速入门-服务器总体介绍汇总
  • 15.10 快速入门-流程表单载入基础数据
  • 15.11 快速入门-常用表单脚本样例汇总
  • 15.12 快速入门-自定义表数据分页样例
  • 15.13 OEM白标-如何修改平台中的Logo图标和文字
  • 15.14 云服务器-阿里云ECS服务器的端口启用
  • 15.15 开发知识-React篇:在O2OA平台框架中使用React
  • 15.16 开发知识-React篇:在O2OA门户页面中使用React
  • 15.17 开发知识-Vue篇:在Vue应用中集成O2OA
  • 15.18 开发知识-Vue篇:使用Vue-CLI开发O2应用
  • 15.19 开发知识-Vue篇:在O2门户页面中使用Vue
  • 15.20 平台中使用Druid数据库连接及监控
  • 15.21 开发知识-在PAAS平台上部署O2OA开发平台
  • 15.22 开发知识-如何使用Tomcat架设webdav服务器
  • 15.23 开发知识-单个端口模式的Nginx和系统配置
  • 15.24 开发知识-Linux非root用户如何使用80端口启动O2OA
  • 15.25 开发知识-O2OA平台启用Eruda进行移动端调试
  • 15.26 开发知识-神通数据库安装
  • 15.27 开发知识-人大金仓数据安装
  • 15.28 开发知识-中标麒麟安装达梦数据库(DM8)
  • 15.29 开发知识-中标麒麟安装人大金仓详细步骤
  • 15.30 开发知识-使用VNC连接中标麒麟V7操作系统
  • 15.31 开发知识-鲲鹏(ARM)麒麟操作系统如何替换yum源?
  • 15.32 开发知识-数据优化知识点
  • 15.33 水印安全-附件水印|加密|文档格式转换图片|PDF
  • 15.34 消息队列-配置activeMQ、kafka消息队列
  • 15.35 常见问题-数据导出或者导入时发生OOM异常
  • 15.36 常见问题-如何让用户在首次登录时,必须对初始密码进行修改
  • 15.37 常见问题-如何在模块部署中控制模块的访问权限
  • 15.38 常见问题-如何在平台中开发Ftp文件上传文件的服务?
  • 15.39 常见问题-如何使用服务管理调用WebService
  • 15.40 常见问题-如何使用脚本调用外部服务
  • 15.41 常见问题-如何使用脚本控制流程自动流转
  • 15.42 常见问题-如何通过脚本调用系统内服务
  • 15.43 常见问题-接口代码疑惑解答汇总
  • 15.44 常见问题:Maven编译o2server错误: Java Heap Space
  • 15.45 常见问题-集群配置后启动报错:NullPointerException
  • 15.46 常见问题-服务器错误:can not decrypt token
  • 15.47 常见问题-IOS移动办公无法收到验证码
  • 15.48 常见问题-服务器和日志时间相差12小时的问题
  • 15.49 常见问题-为什么127.0.0.1可以访问但其他IP无法访问
  • 15.50 藕粉社区问答系列4
  • 15.51 开发知识-React篇:在React应用中集成O2OA

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

    时间:2022-08-03   

    提示:

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

    O2OA进行前端的二次开发,介绍了创建O2OA component的方式,基于React和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

    welcome.png

    创建一个应用

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

    vue create vue-app

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

    目录结构.png


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

    添加O2脚本引入

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


    public目录.png


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

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


    bundleJS.png

    修改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组件负责渲染,给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,就可以看到和第五章一样的效果了。

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


    信息中心.png


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


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

    npm run build
    #OR
    yarn build

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

    总结

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