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无法正常显示验证码解决办法
  • 6.51 O2OA(翱途)开发平台前端安全配置建议(一)
  • 第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篇:在O2OA平台框架中使用React

    时间:2022-08-03   

    提示:

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

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


    版本要求

    本文适用于如下版本:

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

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

    前提

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


    创建React应用

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

    reactApp.png


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

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


    创建后目录结构如下:

    目录结构.png

    添加O2脚本引入

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

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

    head.png


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

    import React from 'react';
    import ReactDOM from 'react-dom';
    import './index.css';
    import App from './App';
    
    //定义O2平台对象
    let layout = window.layout;
    let o2 = window.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')
            );
        });
    });

    其中:

    let layout = window.layout;

    let o2 = window.o2;

    获取两个O2的全局对象。


    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';
    
    function App(props) {
        function openHomepage(){
        		//通过O2全局对象layout的openApplication方法打开主页"Homepage"
            window.layout.openApplication(null,"Homepage")
        }
        function openTask(id){
          	//通过O2全局对象layout的openApplication方法打开待办
            window.layout.openApplication(null,"process.Work", {"workId": id});
        }
        function startProcess(){
          	//通过o2.env对象启动流程
          	//o2.env对象即是在O2门户页面的脚本中的this指向,可以使用其方法。
          	//请将“application-name”和“process-name”修改为您的流程应用名称和流程名
            window.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,点击后分别启动指定的流程,打开主页。

    其中用到两个全局对象:o2和layout。我们在Node.Js环境中开发,o2的对象是通过<script>标签引入的,由于全局环境不同,直接使用layout和o2访问对象会引起编译错误,所以我们使用window.layout和window.o2来访问。


      当然,我们可以通过import来解决这个问题,创建一个src/o2.js文件,添加以下代码:

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

      然后在需要使用o2对象的组件中,使用以下代码引入:

    import {o2, layout} from './o2.js';

      然后就可以直接使用layout和o2对象了。


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



    编译并运行

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

      由于我们要将react应用放到O2的web服务器的目录下,而非根路径下,所以我们需要在package.json中增加homepage字段,设置值为".":

    {
    	...
    	"homepage": ".",
      ...
    }


      在当前项目路径下执行以下命令:

    npm run build

      React会在将所有的代码编译到build目录,如下图:

    build.png

      接着将build目录部署到O2服务器的webServer下,并重命名为“react-app”。然后通过浏览器访问:http://your-server/react-app。
      如果您未登录到服务器,会出现登录页面,登录后就可以看到登录人的待办列表,并可以启动流程了。


    登录后:

    待办列表.png


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

    import React from 'react';
    import ReactDOM from 'react-dom';
    import './index.css';
    import App from './App';
    
    //定义O2平台对象
    let layout = window.layout;
    let o2 = window.o2;
    //设置o2目录
    o2.base = "../";
    //在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')
            );
        });
    });

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


    开发模式优化

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


    本地运行O2服务器

      您可以在本地运行服务器,然后直接在服务器的webServer目录下创建项目。然后您必须修改React的build路径到正确的路径。其中一个方法为:

      在项目目录下运行以下命令:

    npm run eject

      此命令会暴露React应用的隐藏配置项,我们找到config/paths.js,找到“appBuild”并修改之:appBuild: resolveApp('../react-app')

    module.exports = {
      dotenv: resolveApp('.env'),
      appPath: resolveApp('.'),
      appBuild: resolveApp('../react-app'),
      appPublic: resolveApp('public'),
      appHtml: resolveApp('public/index.html'),
      ...
    };

      然后每次运行npm run build后,React会将编译后的应用生成在webServer/react-app/目录下,我们直接通过http://locahost/react-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': 'build',
        'host': 'o2server服务器',
        'user': 'sftp user',
        'pass': 'sftp password',
        "port": 22,
        "remotePath": "/data/o2server/servers/webServer/react-app"
    };
    
    //sftp任务
    function upload_sftp(){
        var build = "build/**/*";
        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 = "build/**/*";
        return gulp.src(build)
            .pipe(ftp({
                host: options.host,
                user: options.user || 'anonymous',
                pass: options.pass || null,
                port: options.port || 21,
                remotePath: (options.remotePath || '/')
            }));
    }
    //运行React build
    function build_react() {
        return run('npm run build').exec();
    }
    输出gulp任务,如果使用ftp,更换第二个任务为upload_ftp
    exports.build = gulp.series(build_react, upload_sftp);


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

    gulp build

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


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


    总结

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

      在大多数情况下,这样的方式已经足够满足需要了,但如果您想要搭建自己的web服务器,并通过React作为前端构建框架,那O2OA怎么能够与之集成呢?

      下回分解!