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"。
image.png

第二步:创建React组件脚本

在门户中创建一个脚本,命名为:like_button。
image.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。

推荐文章:

服务集成-表单界面上自定义弹出选择器功能
2021-03-15
O2OA允许用户对表单进行自由的功能定制,可以增加自定义的组件和插件。本文介绍如果在表单界面上自定义弹出选择器的功能。
服务集成-通过接口实现表单上传附件功能
2021-03-15
O2OA允许用户使用接口来完成对流程、表单以及数据的相关操作。本文介绍如何使用接口来实现表单上传附件的功能。这样便能将流程附件的管理与其他业务进行整合,更方便业
流程设计-自定义提交功能
2021-03-11
当默认提交界面不能满足用户时候,可以使用本功能进行提交界面的定制。自定义提交功能基于表单和脚本实现。开发人员可以通过修改自定义界面的样式,添加或删除组件,设置提
系统配置-消息提醒配置说明
2021-02-25
O2OA平台设计了灵活的消息提醒数据交互方式,开发者可以根据自己的需要,来消费消息提醒数据,也可以将消息提醒数据接入到Kafka消息中间件来实现消息的准实时提醒
Custom应用前端代码编译
2021-03-15
O2OA允许用户对服务进行扩展,可以修改原来的代码,但是我们更推荐用户增加新的war包,jar包,根据O2OA的源码结构新增服务和应用来进行业务的扩展。本文主要
密码管理-超级管理员密码修改
2021-02-25
O2OA内置了一个登录账号为xadmin的超级管理员,此管理员信息未添加到组织结构中,对超级管理员的密码修改,可以使用命令,系统配置或者修改配置文件。本篇主要介
云服务器-阿里云ECS服务器的端口启用
2021-02-07
O2OA成功启动后,有可能无法正常访问服务器,需要在ECS进行安全策略配置,开放端口:80、20020、20030在阿里云上完成O2OA平台部署,并且启动完成后
系统架构-基于nginx快速集群部署-上下文分发
2021-02-26
O2OA平台使用分布式架构设计,提供灵活的扩展方案用于对服务器的负载能力进行扩展,保障系统的高可用性。本篇主要介绍如何基于nginx上下文分发的方式快速集群部署
门户开发-HTML模板导入
2021-03-01
O2OA提供的门户管理平台可以让用户自由地为企业定制符合企业特色的门户系统,门户页面。可以让页面展现的内容真正满足企业自身的需求。平台支持将完整的HTML文件导
信息管理和企业信息栏目开发
2021-02-25
本篇主要使用实例开发的方式讲述如何在O2OA平台中开发一个简单的通知公告,包括栏目创建,分类设置,表单设计以及如何验证表单开发成果。

results matching ""

    No results matching ""