O2OA开源免费开发平台:在O2门户页面中使用React(二)

原创
07/03 14:17
阅读数 182

 

  本章我们介绍使用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,如下图:

image.png

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

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

 

创建后目录结构如下:

image.png

 

添加O2脚本引入

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

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

image.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目录,如下图:

image.png

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

image.png


  登录后:

image.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怎么能够与之集成呢?

  下回分解

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部