首页扩展开发 |
iPortal 提供了一套可视化定制系统以便于您对 iPortal 首页进行外观的定制。在可视化定制系统中，您可以使用 iPortal 内置提供的多种组件，以拖拽式操作积木式地搭建 iPortal 首页。另外，当可视化定制系统无法满足您的定制需求时，iPortal 还提供了一种“全代码”的深度定制方式，允许用户对 iPortal 首页进行完全的重写。
深度定制 iPortal 首页的一般流程包括：页面内容开发、配置启用定制页面。
页面内容实现的核心为开发一个首页所对应的 HTML 文件。您可以自行选用 Vue、React、Angular 等主流的前端开发框架或原生 JavaScript/JQuery 进行开发，具体的开发过程在此不作介绍，只需将您开发完成的工程放置在 %SuperMap iPortal_HOME%\webapps\iportal\resources\web-ui\extend\home 目录下即可。如果您不具备相应的前端开发经验，iPortal 提供了一个基于 Vue 的首页定制范例工程以指导您进行扩展开发。
如果您知晓前端开发的流程并具有相应的开发经验，可选择略过该节内容。
针对缺乏前端开发经验的项目实施人员，为协助您进行扩展开发，iPortal 在 Gitee 上开源了一个首页定制范例工程，实现了三套不同的门户首页：
图1 iPortal 深红主题首页
图2 “一张图”国土资源信息系统首页
该工程选用 Vue 技术栈进行开发，因此请您在开发前学习 Vue 的相关基础知识。下面简要介绍如何使用 iPortal 首页定制范例工程：
一、安装开发环境
请在扩展开发前安装好 Node.js 环境，这里推荐您安装 10.X 版本的 Node.js 以避免可能产生的兼容性问题。
二、抓取项目代码
在 Gitee 上下载 iPortal 示范工程代码至本地，其中 custom-home 文件夹为首页定制范例工程。以下是工程结构示意图：
根目录 custom-home：
部分关键文件（夹）说明如下：
其中 src 目录结构如下：
utils 目录结构如下：
三、启动示范工程项目
在 custom-home 目录下执行如下命令安装项目的依赖：
npm install
运行如下命令启动项目：
npm run serve
启动项目后，即可通过 http://<ip>:8080 访问首页，默认情况下访问的是“一张图”国土资源信息系统首页。您可以通过 router.js 文件中配置的路由访问其它两套首页，例如访问 iPortal 经典首页时，地址为：http://<ip>:8080/#/defhome。
四、进行定制开发
完成以上步骤后，您可以开始在 Vue.js 编辑器中编写代码：
import Vue from 'vue'
import VueRouter from 'vue-router'
const DefHomePage = () => import(/* webpackChunkName: "DefHomePage" */ './DefHomePage');
const DefHomePage1 = () => import(/* webpackChunkName: "DefHomePage1" */ './DefHomePage1');
const HomePage = () => import(/* webpackChunkName: "HomePage" */ './HomePage');
Vue.use(VueRouter);
const router = new VueRouter({
mode: 'hash',
routes: [
{
path: '/defhome',
name: 'defHome',
component: DefHomePage,
meta: {
title: '首页'
}
},
{
path: '/defhome1',
name: 'defhome1',
component: DefHomePage1,
meta: {
title: '首页'
}
},
{
path: '/home',
name: 'home',
component: HomePage,
meta: {
title: '首页'
}
},
]
})
export default router;
您可以通过更改 path 以改变自带的三套首页的路由地址；如果您是通过添加一个新的 Vue 文件进行完全独立的开发，则需要仿照已有内容，在文件头中引入创建的 Vue 文件并在 routes 数组中添加其对应的路由。
五、打包项目工程
代码编写完成并通过调试后，即可进行编译打包，执行如下命令进行编译：
npm run build
生成的 home-page 文件夹即为打包后的文件。
更多信息可以参阅首页定制开发指南。
完成首页的定制开发后，需按以下步骤配置启用定制后的首页：
一、将打包后的工程文件夹放置在 %SuperMap iPortal_HOME%\webapps\iportal\resources\web-ui\extend\home 目录中
注意：iPortal 默认已将示范工程打包后的成果放置在产品包该路径下（ %SuperMap iPortal_HOME%\webapps\iportal\resources\web-ui\extend\home\home-page ）以供您试用 ，您在自定义扩展开发完成后需将其替换为自己的工程。
二、修改扩展开发配置文件 %SuperMap iPortal_HOME%\webapps\iportal\resources\web-ui\extend\home\config.json ，将定制后的首页应用至 iPortal，config.js 代码如下：
{
"enable": true,
"useDefaultHeader": true,
"homeUrl": "{portalRoot}/resources/web-ui/extend/home/home-page/index.html"
}
修改并保存上述配置后，即可在 iPortal 中访问定制开发的首页。