开发知识-九游会官网登录入口网页

提示：

此文中介绍的方法已过时，建议查看文档：

九游会官网登录入口网页-ag8九游会j9登录入口进行前端的二次开发，介绍了创建九游会官网登录入口网页-ag8九游会j9登录入口 component的方式，基于react和vue的模式

如果您考虑完全脱离o2的web服务器，自己搭建web服务器，那就请阅读本章。

我们还是使用vue的vue-cli工具，创建vue应用，然后将九游会官网登录入口网页-ag8九游会j9登录入口集成到应用中，并实现以下功能：嵌入一个o2平台数据中心中的视图，展现内容管理信息；并创建两个按钮，用于创建信息文档和打开九游会官网登录入口网页主页。

版本要求

本文适用于如下版本：

• o2oa版本要求：5.1及以上版本；

• vue版本：本文撰写时，vue版本是2.6.11。（更低的版本未经验证）

• vue-cli版本：本文撰写时，vue-cli版本是4.4.4。

环境安装

　　vue cli 需要 node.js 8.9 或更高版本 (推荐 8.11.0 )。在正确安装号node.js和npm或yarn后，可以使用下列任一命令全局安装vue-cli：

npm install -g @vue/cli
# or
yarn global add @vue/cli

　　安装之后，你就可以在命令行中访问 vue 命令。你可以通过简单运行 vue，看看是否展示出了一份所有可用命令的帮助信息，来验证它是否安装成功。

　　你还可以用这个命令来检查其版本是否正确：

vue --version

　　vue-cli还有一个ui工具，可以通过vue ui命令来启动：

vue ui

vue create vue-app

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

修改public/x_desktop/res/config/config.json文件：

{
	"center": [
    {
      "port": "20030",		//o2服务器中心服务器端口
      "host": "develop.o2oa.net"	//o2服务器中心服务器host
    }
  ],
  "applicationserver": {
    "host": "develop.o2oa.net"	//o2应用服务器host
  },
  "sessionstorageenable" : true,
  "initmanagerchanged": true,
  "initmanagername": "",
	...
}

此文件主要修改两部分内容：

1、center部分，修改为要访问的o2中心服务器地址和端口；

2、applicationserver部分，修改为要访问的o2应用服务器地址，如果没有applicationserver，就添加一个。集群环境下，可配置应用服务器负载地址；

　　为了方便后续引入，我们在src下创建一个o2.js，添加以下代码：

let o2 = window.o2;
let layout = window.layout;
export {o2, layout};

　　修改src/main.js文件如下：

import vue from 'vue'
import app from './app.vue'
//引入o2的layout对象
import {layout} from "./o2";
vue.config.productiontip = false;
//当o2载入完成后创建vue根组件
layout.addready(function(){
  new vue({
    render: h => h(app),
  }).$mount('#app')
});

修改app组件

　　修改src/app.vue文件如下：

　　app.vue是一个vue组件，文件分为三部分：其中<template>部分定义了组件的模板；<style>部分定义组件样式；<script>部分实现组件的逻辑。

在模板中，我们使用了<o2-view>标签，将由o2-view组件负责渲染，给o2-view传入了两个参数：app="内容管理数据"和name="所有信息"，我们将在o2-view组件中使用这两个参数，用于展现“内容管理数据”这个数据应用下的“所有信息”视图。您需要现在o2平台里创建好对应的视图，如果需要展现其他数据应用的其他视图，需要修改这两个值。

我们创建了两个button，通过@click分别绑定了createdocument和openhomepage两个方法，分别用于新建内容管理文档和打开九游会官网登录入口网页主页应用

　　我们在components部分引用了o2view组件，下面我们就要创建这个组件。

创建o2-view组件

　　删除src/components/目录下的原有.vue文件，然后新建o2-view.vue文件，输入以下代码：

div {
  height: 600px;
}

　　在o2-view组件中，我们主要做的事是，在vue组件挂载后，将o2的视图组件，再挂载到o2-view组件的根dom对象。

　　当然，这里我们要在我们的o2服务器上创建好数据应用和视图，对应本例中，就是“内容管理数据”应用下的“所有信息”视图。

编译并运行

　　我们完成了上述开发工作，就可以编译并运行我们的应用了。使用以下任一命令来运行开发服务器：

npm run serve
#or
yarn serve

　　运行后，会启动一个web服务器，默认端口8080，打开浏览器，访问http://locahost:8080，就可以看到和第五章一样的效果了。

如果您未登录到服务器，会出现登录页面，登录后就可以看到结果了。

您可以接着修改代码，每次修改保存后，react会自动编译，并刷新浏览器，及时看到修改效果。

开发完成后，可使用命令：

npm run build
#or
yarn build

vue会在将所有的代码编译到dist目录下，你就可以将dist中的内容部署到任意的web服务器了。

总结

o2oa和vue的集成还是非常方便的，对于熟悉vue的用户，可以通过更多更灵活的工具来进行集成开发，更多有关vue的内容请参考vueag8九游会j9登录入口官网教程。