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

    开发知识-Vue篇:使用Vue-CLI开发O2应用

    时间:2022-08-03   

    提示:

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

    O2OA进行前端的二次开发,介绍了创建O2OA component的方式,基于React和Vue的模式





    Vue-CLI是Vue官方提供的CLI工具,用于为应用快速搭建繁杂的脚手架。本章我们介绍使用Vue-CLI工具在Node,js环境下,Vue和O2集成应用开发,并在O2平台的webServer下运行。

    版本要求

    本文适用于如下版本:

    • 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

    在O2平台框架中使用Vue

      如果您希望将应用部署在O2服务器的webServer下,那么就可以参考下面的例子。

    创建一个应用

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

    vue create vue-app

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

    目录.png


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

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

    HTML复制代码

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


    indexhtml.png


    为了方便后续引入,我们在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服务器上创建好数据应用和视图,对应本例中,就是“内容管理数据”应用下的“所有信息”视图。


    编译并运行

      我们完成了上述开发工作,就可以编译并运行我们的应用了。

      由于我们要将Vue应用放到O2的web服务器的目录下,而非根路径下,所以我们需要简单配置以下编译的路径。再vue应用目录下创建vue.config.js文件,输入以下代码:

    module.exports = {
        publicPath: "."
    };

      将编译后的路径引用使用相对路径。

      在当前项目路径下,使用以下任意一条命令编译项目:

    npm build
    # OR
    yarn build

      出现类似下面的信息,表示编译成功:

    编译成功.png


    编译后,将在项目路径下,生成dist目录,

    vue-app.png


    接着将dist目录部署到O2服务器的webServer下,并重命名为“vue-app”。然后通过浏览器访问:http://your-server/vue-app。

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

    信息列表.png


    如果您将您的应用部署到服务器的其他目录,如custom/vue-app下,那么您需要在src/o2.js文件中增加一行代码:o2.base = "../";

    //src/o2.js
    let o2 = window.o2;
    let layout = window.layout;
    o2.base = "../";
    export {o2, layout};

    至此,我们已经可以在O2平台的框架下,使用Vue开发应用了。

    开发模式优化

      虽然我们可以使用React开发O2应用,但上述模式在我们每次修改代码后,需要运行build命令,并手工上传到服务器,在开发比较复杂的应用时,还是比较影响效率的。下面价绍两种方式来应对这种情况。

    本地运行O2服务器

      您可以在本地运行服务器,然后直接在服务器的webServer目录下创建项目。然后您必须修改Vue配置,使其编译到正确的路径。我们要修改项目目录下的vue.config.js文件:

    module.exports = {
        publicPath: ".",
        outputDir: "../vue-app"
    };

      然后每次运行编译后,Vue会将编译后的应用生成在webServer/vue-app/目录下,我们直接通过http://locahost/vue-app就可以查看运行结果。


    通过部署工具自动化部署到远程服务器

      当然,为了节省我们部署远程服务器的时间,我们可以使用javascript打包工具,自动完成这个过程,这里我们使用gulp,通过ftp或sftp来进行自动化部署到远程服务器。


      这种方式不需要您本地运行O2服务器,但您必须有一台远程服务器,并可以通过ftp或sftp连接到服务器的webServer。


      按上述方式创建好应用,然后我们安装gulp环境:

    npm i -g gulp-cli

      安装gulp以及gulp相关插件:

    npm i gulp gulp-ftp gulp-sftp-up4 gulp-run -save-dev

      在项目根目录新建gulpfile.js文件:

    var gulp = require('gulp'),
        ftp = require('gulp-ftp'),
        sftp = require('gulp-sftp-up4'),
        run = require('gulp-run');
    
    //根据您的实际服务器修改
    var options = {
        'build': 'dist',
        'host': 'o2server服务器',
        'user': 'sftp user',
        'pass': 'sftp password',
        "port": 22,
        "remotePath": "/data/o2server/servers/webServer/vue-app"
    };
    
    //sftp任务
    function upload_sftp(){
        var build = "dist/**/*";
        return gulp.src(build)
            .pipe(sftp({
                host: options.host,
                user: options.user || 'anonymous',
                pass: options.pass || null,
                port: options.port || 22,
                remotePath: (options.remotePath || '/')
            }));
    }
    
    //ftp任务
    function upload_ftp(){
        var build = "dist/**/*";
        return gulp.src(build)
            .pipe(ftp({
                host: options.host,
                user: options.user || 'anonymous',
                pass: options.pass || null,
                port: options.port || 21,
                remotePath: (options.remotePath || '/')
            }));
    }
    //运行vue build
    function build_vue() {
        return run('npm build').exec();
    }
    输出gulp任务,如果使用ftp,更换第二个任务为upload_ftp
    exports.build = gulp.series(build_vue, upload_sftp);


      然后,当开发或修改代码完成后,执行以下命令:

    gulp build

      就可以自动编译Vue应用,并上传到O2服务器。通过浏览器访问:http://your-server/vue-app就可以看到结果。


      当然,这只是一个很简单的例子,提供一个思路,您也可以使用其他您熟悉的工具实现相同或类似的功能。对于熟悉前端构建工具的用户,实现更便捷的功能也不是难事,比如可以监控文件改动,实时部署,并刷新浏览器等


    总结

      本章给大家介绍了在O2平台的框架内,使用Vue开发应用,并在O2服务器的webServer中运行了起来。它集成了O2平台的所有功能,您也不需要处理类似登录等一些繁琐的事,而且可以方便的调用O2的后端服务。并提供了一些优化开发模式的思路。