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

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

    时间:2022-02-22   

    提示:

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

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






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

    我们还是使用React的Create React App工具,创建React应用,然后将O2OA集成到应用中,并实现以下功能:列示当前用户的前20条待办,点击标题打开待办;通过点击按钮启动流程和打开主页。

    版本要求

    本文适用于如下版本:

    • O2OA版本要求:5.1及以上版本;

    • React版本:本文撰写时,react版本是16.13.1。(更低的版本未经验证)

    前提

    • 开发端安装了Node.js,Node >= 8.10, npm >= 5.6

    • 有一台O2服务器(并不需要启动webServer,但其他服务需要正常启动)

    • 使用合适的开发工具:WebStorm、VSCode、Atom等(本例使用WebStorm)


    创建React应用

    您可以使用WebStorm创建一个新的React App,如下图:

    reactApp.png


    或者创建一个空项目,然后使用以下命令创建React应用:

    npx create-react-app my-app
    cd my-app


    创建后目录结构如下:

    目录结构.png

    添加O2平台web脚本

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


    public目录.png

    在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
      },
      "initManagerChanged": true,
      "initManagerName": "",
    	...
    }

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

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

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


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

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


    自此以后,所有的过程都和第二章基本一样了。


    修改inde.js

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

    import React from 'react';
    import ReactDOM from 'react-dom';
    import './index.css';
    import App from './App';
    //获取O2全局对象
    import {o2, layout} from './o2';
    
    //在O2平台脚本载入完成后执行
    layout.addReady(function(){
        layout.app = true;
      	//通过平台服务,获取当前用户的前20条待办(可通过http://your-server:20030/x_program_center/jest/list.html查询平台接口服务)
        o2.Actions.load("x_processplatform_assemble_surface").TaskAction.V2ListPaging(1,20, {}, function(json){
            //React渲染App组件
          	ReactDOM.render(
                <React.StrictMode>
                    <App value={json.count} data={json.data}></App>
                </React.StrictMode>,
                document.getElementById('root')
            );
        });
    });

    layout.addReady 方法会在O2载入完成后执行回调方法。

    o2.Actions.load 方法可以调用平台的Restful服务。


    修改App组件

    先修改src/App.css样式文件,拷贝以下代码:

    .App {
      padding: 20px;
      margin: 20px;
    }
    .App-header {
      padding: 5px 10px;
      background: #0f81cc;
      font-size: 18px;
      color: #ffffff;
    }
    
    .o2-tasklist {
      padding: 10px;
      background: #f3f3f3;
      font-size: 18px;
    }
    .o2-task {
      line-height: 30px;
      height: 30px;
      cursor: pointer;
    }
    .o2-button {
      padding: 10px 20px;
      text-align: center;
      background: #0f81cc;
      margin-top: 10px;
      color: #ffffff;
      font-size: 18px;
      float: left;
      margin-right: 20px;
      cursor: pointer;
    }

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

    import React from 'react';
    import './App.css';
    //获取O2全局对象
    import {o2, layout} from './o2';
    
    function App(props) {
        function openHomepage(){
        		//通过O2全局对象layout的openApplication方法打开主页"Homepage"
            layout.openApplication(null,"Homepage")
        }
        function openTask(id){
          	//通过O2全局对象layout的openApplication方法打开待办
            layout.openApplication(null,"process.Work", {"workId": id});
        }
        function startProcess(){
          	//通过o2.env对象启动流程
          	//o2.env对象即是在O2门户页面的脚本中的this指向,可以使用其方法。
          	//请将“application-name”和“process-name”修改为您的流程应用名称和流程名
            o2.env.page.startProcess("application-name", "process-name");
        }
    
        function listTask(){
            let list = [];
            props.data.each(function(d){
                list.push(<div className="o2-task" onClick={()=>{openTask(d.work)}}>{d.title || "无标题"}</div>);
            });
            return list;
        }
    
        return (
            <div className="App">
                <header className="App-header">
                    <p>
                        您有{props.value}个待办
                    </p>
                </header>
                <div className="o2-tasklist">
                    {listTask()}
                </div>
                <div className="o2-button" onClick={startProcess}>点击此处启动流程</div>
                <div className="o2-button" onClick={openHomepage}>点击此处打开O2首页</div>
            </div>
        );
    }
    
    export default App;

      上述代码创建了一个React组件,列示了待办列表,并创建两个div,点击后分别启动指定的流程,打开主页。


      App.js中,我们使用了o2.env对象,这个对象和在门户页面脚本中的this指向一致,可以调用除了与门户页面组件相关方法以外的各种方法,如:o2.env.page.openWork、o2.env.inculde、o2.env.confirm、o2.env.page.startProcess等,详细内容可以参考API文档。


    编译并运行

      我们完成了上述开发工作,就可以编译并运行我们的应用了。使用以下命令来查看结果:

    npm run start

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

      如果您未登录到服务器,会出现登录页面,登录后就可以看到登录人的待办列表,并可以启动流程了。


    待办列表.png



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


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

    npm run build

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

    总结

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

      对于VUE和Angular和O2OA的集成,我们将在后面的章节为大家介绍。