O2OA开源免费开发平台：在O2门户页面中使用React（二）

本章我们介绍使用React的Create React App工具，在O2平台中创建React应用。在本例中，我们将列示当前用户的前20条待办，点击标题打开待办；并通过点击按钮启动流程和打开主页。

版本要求

本文适用于如下版本：

O2OA版本要求：5.1及以上版本；

React版本：本文撰写时，react版本是16.13.1。（更低的版本未经验证）

前提

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

有一台O2服务器

使用合适的开发工具：WebStorm、VSCode、Atom等（本例使用WebStorm）

创建React应用

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

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

npx create-react-app my-app

cd my-app

创建后目录结构如下：

添加O2脚本引入

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

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

修改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目录部署到O2服务器的webServer下，并重命名为“react-app”。然后通过浏览器访问：http://your-server/react-app。

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

登录后：

　　如果您将您的应用部署到服务器的其他目录，如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怎么能够与之集成呢？

　　下回分解！