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-02-26
组织成员即人员和组织和隶属关系,表明人员的组织隶属关系。由于一个人员有可能由于兼职或者借调的原因,需要在多个组织里使用,这样系统会为该人员生成多种人员与组织的关
o2oa集成yozo
2021-08-30
@移动办公@O2OA微信办公@微信公众号办公@微信办公@手机办公O2OA平台是一个企业办公类系统,为了方便实现在线编辑word、excel、ppt文件,与永中y
开发知识-中标麒麟安装人大金仓详细步骤
2021-03-24
环境说明操作系统版本:NeoKylinLinuxAdvancedServerreleaseV7Update6(Chromium)1.前期准备工作1.1数据库下载
平台维护-使用Web端运行服务器管理命令
2021-03-09
平台提供web管理端方便快捷查看服务器当前状态,同时方便管理服务器。实现平台的易用性。本篇主要介绍如何使用浏览器访问系统查看集群运行日志以及运行服务端命令。
业务开发-组织架构-组织职位信息管理
2021-02-26
O2OA提供多级组织架构设置能力,用户可以在系统内设置集团、分公司、部门、小组等多级企业组织结构来满足办公需要,可以为组织设置不同的职务来实现配置和人员的解耦。
日程安排
2021-02-19
O2OA日程安排模块为企业提供了各级员工均可以使用的日程管理和日程提醒能力,并且可以将日程发布为组织日程,让组织所有员工均可以看到并且收到提醒。也可以维护一个公
开发知识-Vue篇:在Vue应用中集成O2OA
2021-12-01
  在前面的章节中,我们介绍了两种在O2OA中使用Vue开发应用的方式,已经可以满足绝大多数的情况了。如果您考虑完全脱离O2的web服务器,自己搭建web服务器
神经网络
2021-02-19
O2OA支持配置神经网络模型,协助完成办公系统中的信息推荐,意见选择等功能。它是一种模仿动物神经网络行为特征,进行分布式并行信息处理的算法数学模型,通过创建神经
常见问题-服务器错误:can not decrypt token
2021-02-07
cannotdecrypttoken服务端无法解开token,可能的原因是,xadmin的密码刚刚修改过而前台没有刷新页面.重新刷新前台页面即可,app端需要重
系统集成-SSO微软ADSF单点认证-AD域认证
2021-02-26
O2OA平台提供灵活的系统集成方案,让企业信息平台与各类第三方系统进行集成。本篇主要介绍如何在O2OA中使用微软ADSF单点认证的方案与其他系统实现单点登入。

results matching ""

    No results matching ""