O2OA使用手册
第1章 功能简介及概述
第6章 平台部署与配置
  • 6.1 系统安装-平台服务器下载及安装部署 For WindowsServer(适用于V8.1+)
  • 6.2 系统安装-平台服务器下载及安装部署 For WindowsServer
  • 6.3 系统安装-平台下载及安装及部署 For Linux
  • 6.4 系统安装-平台服务器下载及安装部署 For WindowsServer(适用于V7.2之前的版本)
  • 6.5 系统安装-平台服务器下载及安装部署 For Linux Server(适用于O2OA V7.2之前的版本)
  • 6.6 系统安装-华为云服务器部署O2OA-麒麟操作系统
  • 6.7 系统安装-在宝塔面板中安装O2OA(For Linux)
  • 6.8 系统安装-如何访问和操作H2内置数据库
  • 6.9 数据库配置-第三方数据库配置-MySQL
  • 6.10 数据库配置-O2OA使用openGauss(华为高斯数据库)配置
  • 6.11 数据库配置-修改数据库驱动jar包操作说明
  • 6.12 数据库配置-将流程数据推送到指定数据表中
  • 6.13 数据库配置-使用不同用户访问Oracle时报错-表或视图不存在
  • 6.14 数据库配置-平台数据库配置信息样例
  • 6.15 系统架构-私有化部署服务器架构推荐
  • 6.16 系统架构-平台部署之HTTP端口规划
  • 6.17 系统架构-集群部署配置及操作说明
  • 6.18 系统架构-O2OA作为认证中心实现基于OAUTH2单点认证
  • 6.19 系统架构-O2OA基于nginx的SSL跳转、转发配置
  • 6.20 系统配置-主要配置文件说明
  • 6.21 系统配置-配置服务器连接O2云
  • 6.22 系统配置-O2OA实现服务器随操作系统自动启动
  • 6.23 系统配置-文件存储服务器配置
  • 6.24 系统配置-工作日节假日配置
  • 6.25 系统配置-为平台增加全文检索功能
  • 6.26 系统配置-流程催办提醒配置
  • 6.27 系统配置-自定义消息提醒
  • 6.28 系统配置-消息提醒配置说明
  • 6.29 消息通知-定制消息通知的内容
  • 6.30 消息通知-消息通知过滤
  • 6.31 消息通知-为待办创建配置邮件通知
  • 6.32 日志管理-访问日志相关配置
  • 6.33 日志管理-审计日志相关配置@日志管理
  • 6.34 日志管理-平台日志文件说明
  • 6.35 日志管理-O2OA日志输出设置log4j2.xml
  • 6.36 系统安全-用户重置密码操作
  • 6.37 系统安全-用户密码初始化规则的设定
  • 6.38 系统安全-超级管理员(xadmin)密码修改
  • 6.39 系统安全-启用HTTPS(百度云版)
  • 6.40 系统安全-启用HTTPS(腾讯云版)
  • 6.41 系统安全-自签名SSL证书验证HTTPS功能
  • 6.42 系统安全-加密登录-登录密码RSA加密
  • 6.43 系统安全-用户登录IP限制
  • 6.44 系统安全-O2Server启用国密加密设置
  • 6.45 系统安全-在用户登录过程中启用图形验证码
  • 6.46 系统安全-平台部署之使用非root用户运行服务
  • 6.47 系统安全-o2server无法正常显示验证码解决办法
  • 6.48 平台维护-日志应用使用说明
  • 6.49 平台维护-定期自动执行数据备份与恢复
  • 6.50 平台维护-流转中工作数据的查询、操作和管理
  • 6.51 平台维护-待办待阅数据的查询操作和管理
  • 6.52 平台维护-自动执行平台数据的备份与恢复
  • 6.53 平台维护-数据导出导入与系统数据备份
  • 6.54 平台维护-平台服务器版本升级操作说明
  • 6.55 平台维护-在线部署自定义应用的WAR包和JAR包
  • 6.56 平台维护-使用Web端运行服务器管理命令
  • 第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提供了门户平台,使用可视化方式设计页面,用于设计系统主页、列表等系统中的各类页面,在一定程度上降低了开发者的技能要求。但是对于有经验的前端开发人员,或者已经习惯了使用前端开发框架的用户,这种页面设计模式的效率就显得不合适了。

      本系列教程,我们就来讲一下如何使用主流前端框架集成O2OA进行开发。主要包括现在主流的三个框架:React、VUE和Angular。

      本系列文章适用于O2OA5.1及以后的版本。

      让我们先从React开始吧!

    版本要求

    本文适用于如下版本:

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

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

    在O2门户页面中使用React


      在很多情况下,我们不需要复杂的React应用,通过仅仅几行代码并且无需使用构建工具,即可在O2平台门户页面中使用React。本章实现的例子和React官网的《在网站中添加 React》效果一致,可参考:

    https://zh-hans.reactjs.org/docs/add-react-to-a-website.html


    第一步:创建门户页面

    在O2平台创建一个门户,并新建一个页面。在页面中创建一个容器,标识为:"div"。

    门户页面.png


    第二步:创建React组件脚本

    在门户中创建一个脚本,命名为:like_button。


    组件脚本.png


    拷贝以下代码:

    'use strict';
    const e = React.createElement;
    //创建React组件
    class LikeButton extends React.Component {
      constructor(props) {
        super(props);
        this.state = { liked: false };
      }
      render() {
        if (this.state.liked) {
          return 'You liked this.';
        }
        return e(
          'button',
          { onClick: () => this.setState({ liked: true }) },
          'Like'
        );
      }
    }
    
    //获取组件容器(门户页面上的div容器)
    const domContainer = this.page.get("div").node;
    //在容器中渲染React组件
    ReactDOM.render(e(LikeButton), domContainer);


    第三步:页面中加载React

    在刚刚新建的页面的afterload事件中,添加以下代码:

    //引入React脚本
    o2.load([
        "https://unpkg.com/react@16/umd/react.development.js",
        "https://unpkg.com/react-dom@16/umd/react-dom.development.js"
    ], function(){
        //引入like_button组件
        this.include("like_button");
    }.bind(this));


    (如果是生产环境,请将React脚本的路径中development替换为production。当然你也可以下载js文件,放到O2服务器的webServer目录下,建议放到o2_lib目录,然后用正确的路径加载它。

    第四步:完成

    没有第四步了。你刚刚已经将第一个 React 组件添加到你的O2门户页面中了,现在您可以预览它,看到实现的效果了。


    经过以上四步,您已经用最简单的方式,将React集成到O2OA中。如果您希望使用更大的Javascript工具链,我们将在下面的章节中介绍两种方式使用Create React App脚手架集成O2OA。