O2OA使用手册
第1章 功能简介及概述
第6章 平台部署与配置
  • 6.1 安装部署-在Windows系统中部署O2OA开发平台
  • 6.2 安装部署-在Linux系统中部署O2OA开发平台
  • 6.3 安装部署-在宝塔/PHPStudy中部署O2OA开发平台
  • 6.4 安装部署-O2OA开发平台之HTTP端口规划
  • 6.5 安装部署-平台服务器版本升级操作说明
  • 6.6 安装部署-私有化部署服务器架构推荐
  • 6.7 安装部署-O2OA开发平台集群部署配置及操作说明
  • 6.8 安装部署-在线部署自定义应用的WAR包和JAR包
  • 6.9 服务器配置与管理-​O2OA主要配置文件说明
  • 6.10 服务器配置与管理-服务器端口冲突和端口修改
  • 6.11 服务器配置与管理-如何修改服务器内存占用率?
  • 6.12 服务器配置与管理-如何访问和操作H2内置数据库
  • 6.13 服务器配置与管理-​如何在O2OA中使用MySQL数据库?
  • 6.14 服务器配置与管理-如何修改平台支持的数据库驱动包
  • 6.15 服务器配置与管理-O2OA使用openGauss(华为高斯数据库)配置
  • 6.16 服务器配置与管理-O2OA开发平台平台数据库配置信息样例
  • 6.17 服务器配置与管理-配置O2OA服务器连接O2云
  • 6.18 服务器配置与管理-O2OA实现服务器随操作系统自动启动
  • 6.19 服务器配置与管理-文件存储服务器配置
  • 6.20 服务器配置与管理-工作日节假日配置
  • 6.21 服务器配置与管理-为平台增加全文检索功能
  • 6.22 服务器配置与管理-消息提醒配置说明
  • 6.23 服务器配置与管理-自定义消息提醒
  • 6.24 服务器配置与管理-定制消息通知的内容
  • 6.25 服务器配置与管理-消息通知过滤
  • 6.26 服务器配置与管理-为待办创建配置邮件通知
  • 6.27 服务器配置与管理-待办待阅数据的查询操作和管理
  • 6.28 服务器配置与管理-​自动执行平台数据的备份与恢复
  • 6.29 服务器配置与管理-数据导出导入与系统数据备份
  • 6.30 ​服务器配置与管理-定期自动执行数据备份与恢复
  • 6.31 系统安全-O2OA作为认证中心实现基于OAUTH2单点认证
  • 6.32 系统安全-O2OA基于Nginx的SSL跳转、转发配置
  • 6.33 系统安全-访问日志相关配置
  • 6.34 系统安全-审计日志相关配置
  • 6.35 系统安全-平台日志文件说明
  • 6.36 系统安全-O2OA日志输出设置log4j2.xml
  • 6.37 系统安全-用户密码初始化规则的设定
  • 6.38 系统安全-启用HTTPS(百度云版)
  • 6.39 系统安全-启用HTTPS(腾讯云版)
  • 6.40 系统安全-自签名SSL证书验证HTTPS功能
  • 6.41 系统安全-登录密码RSA加密
  • 6.42 系统安全-用户登录IP限制
  • 6.43 系统安全-在用户登录过程中启用图形验证码
  • 6.44 系统安全-平台部署之使用非root用户运行服务
  • 6.45 系统安全-O2Server启用国密加密设置
  • 6.46 系统安全-日志应用使用说明
  • 6.47 系统安全-用户重置密码操作
  • 6.48 系统安全-超级管理员(xadmin)密码修改
  • 6.49 系统安全-使用Web端运行服务器管理命令
  • 6.50 系统安全-o2server无法正常显示验证码解决办法
  • 第16章 开发知识及常见问题
  • 16.1 如何替换登录页面二维码中默认的logo图标
  • 16.2 O2OA(翱途)流程引擎中如何修改,定制流程的流转记录
  • 16.3 mysql数据库备份
  • 16.4 domain不正确的时候如何强制设置成正确的
  • 16.5 配置文件中使用密文存储密码
  • 16.6 常见问题-连接MySQL出现 Public Key Retrieval is not allowed 的错误
  • 16.7 常见问题-查看表结构
  • 16.8 常见问题-7.2及以上版本开启web代理后请求中没有正确使用web端口问题解决方式
  • 16.9 linux环境libreoffice安装及使用
  • 16.10 在O2OA中使用网络会议(二):Openmeetings与O2OA认证配置
  • 16.11 在O2OA中使用网络会议(一):Openmeetings-5.1.0亲手安装整理 Step-By-Step
  • 16.12 藕粉社区问答系列1
  • 16.13 藕粉社区问答系列2
  • 16.14 藕粉社区问答系列3
  • 16.15 快速入门-平台相关资料汇总
  • 16.16 快速入门-服务器总体介绍汇总
  • 16.17 快速入门-流程表单载入基础数据
  • 16.18 快速入门-常用表单脚本样例汇总
  • 16.19 快速入门-自定义表数据分页样例
  • 16.20 OEM白标-如何修改平台中的Logo图标和文字
  • 16.21 云服务器-阿里云ECS服务器的端口启用
  • 16.22 开发知识-React篇:在O2OA平台框架中使用React
  • 16.23 开发知识-React篇:在O2OA门户页面中使用React
  • 16.24 开发知识-Vue篇:在Vue应用中集成O2OA
  • 16.25 开发知识-Vue篇:使用Vue-CLI开发O2应用
  • 16.26 开发知识-Vue篇:在O2门户页面中使用Vue
  • 16.27 平台中使用Druid数据库连接及监控
  • 16.28 开发知识-在PAAS平台上部署O2OA开发平台
  • 16.29 开发知识-如何使用Tomcat架设webdav服务器
  • 16.30 开发知识-单个端口模式的Nginx和系统配置
  • 16.31 开发知识-Linux非root用户如何使用80端口启动O2OA
  • 16.32 开发知识-O2OA平台启用Eruda进行移动端调试
  • 16.33 开发知识-神通数据库安装
  • 16.34 开发知识-人大金仓数据安装
  • 16.35 开发知识-中标麒麟安装达梦数据库(DM8)
  • 16.36 开发知识-中标麒麟安装人大金仓详细步骤
  • 16.37 开发知识-使用VNC连接中标麒麟V7操作系统
  • 16.38 开发知识-鲲鹏(ARM)麒麟操作系统如何替换yum源?
  • 16.39 开发知识-数据优化知识点
  • 16.40 水印安全-附件水印|加密|文档格式转换图片|PDF
  • 16.41 消息队列-配置activeMQ、kafka消息队列
  • 16.42 常见问题-数据导出或者导入时发生OOM异常
  • 16.43 常见问题-如何让用户在首次登录时,必须对初始密码进行修改
  • 16.44 常见问题-如何在模块部署中控制模块的访问权限
  • 16.45 常见问题-如何在平台中开发Ftp文件上传文件的服务?
  • 16.46 常见问题-如何使用服务管理调用WebService
  • 16.47 常见问题-如何使用脚本调用外部服务
  • 16.48 常见问题-如何使用脚本控制流程自动流转
  • 16.49 常见问题-如何通过脚本调用系统内服务
  • 16.50 常见问题-接口代码疑惑解答汇总
  • 16.51 常见问题:Maven编译o2server错误: Java Heap Space
  • 16.52 常见问题-集群配置后启动报错:NullPointerException
  • 16.53 常见问题-服务器错误:can not decrypt token
  • 16.54 常见问题-IOS移动办公无法收到验证码
  • 16.55 常见问题-服务器和日志时间相差12小时的问题
  • 16.56 常见问题-为什么127.0.0.1可以访问但其他IP无法访问
  • 16.57 藕粉社区问答系列4
  • 16.58 开发知识-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官网教程。