案例2—以 Vue 组件形式扩展新的管理页面 |
Vue 是一套构建用户界面的渐进式 JavaScript 框架，用于构建数据驱动的 Web界面。iPortal 支持用户将自己扩展开发的内容打包为 Vue 组件，添加到 iPortal 管理菜单中。扩展开发的效果如下：
本例使用的示范代码位于：%SuperMap iPortal_HOME%\samples\code\iportal-admin-ui-extend，示范代码已为您完成了扩展开发流程中的第二至第五步。（仅 iPortal 完整包含示范代码，deploy 分发包不含示范代码）。
注意：扩展开发所使用的 Ant Design Vue 版本和 Vue 版本需相互兼容，例如 Ant Design Vue 2.x 版本最低支持的版本为 Vue 3.0，更多版本兼容性说明请参见： Ant Design Vue 官方帮助文档
完整的扩展开发流程如下：
第一步：安装开发环境
npm install -g vue-cli
第二步：通过如下命令初始化一个 Vue 项目：
vue init webpack-simple iportal-admin-ui-extend
其中加粗部分为项目文件夹名，本例中为 iportal-admin-ui-extend，您在开发时可自定义命名。初始化项目时还可按需配置项目名称、项目描述、作者等基本信息，配置完成后即成功创建了一个 Vue 项目。
第三步：进入创建的项目文件夹，在 src 目录下新建 components 文件夹，然后在此文件夹下新建后缀名为 .vue 的扩展组件文件，编写扩展页面的具体内容。
第四步：返回项目根目录，新建 index.js 文件。 index.js 是把扩展组件文件暴露出去的出口，示范如下，用户需根据自己的项目进行更改。
import ant1 from './src/components/ant-design-vue-demo'
import 'default-passive-events'
export function GenerateRoutes(UserAddVue, pageView, routeView) {
const extendRoute = [//路由
{
path: '/admin-ui/extend',
name: 'UserElement',
component: pageView,
meta: { icon: 'select', title: '用户扩展组件演示', keepAlive: true, permission: ['portal:admin:extendsPage:viewVuePage', 'portal:admin:extendsPage:viewNewWindowPage']},
children: [
{
path: '/admin-ui/extend/ant-design-vue',
name: 'UserAntDesign',
component: ant1,
meta: { title: 'ant-design-vue组件演示', keepAlive: true, permission: ['portal:admin:extendsPage:viewVuePage']}
},
{
path: 'http://support.supermap.com.cn:8092',
name: 'supermap',
meta: {
title: '新窗口打开演示',
target: '_blank',
permission: ['portal:admin:extendsPage:viewNewWindowPage']
}
}
]
},
{
path: '/admin-ui/extend/iframe',
name: 'UserIframe',
component: UserAddVue,
meta: { icon: 'select', title: 'iFrame嵌入页面', keepAlive: true, src: 'http://support.supermap.com.cn:8092' ,permission: ['portal:admin:extendsPage:viewIFramePage']}//权限路由
}
];
return extendRoute;
}
export function addToVue(_Vue) {
}
其中 GenerateRoutes 为路由函数，单个路由的说明如下：
有关路由函数的更多信息，可参考：Vue Router。
第五步：修改webpack.config.js 文件，根据用户自定义扩展的内容，对粗体部分代码进行更改，点击此处查询粗体部分参数的说明：
var path = require('path')
var webpack = require('webpack')
const NODE_ENV = process.env.NODE_ENV
module.exports = {
entry: NODE_ENV === 'development' ? './src/main.js' : './index.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: NODE_ENV === 'development' ? '/dist/' : '/iportal/resources/admin-ui/extend/',
filename: 'extendPage.js',
library: 'extendPage',
libraryTarget: "umd",
umdNamedDefine: true
},
module: {
rules: [
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
],
}, {
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
}
// other vue-loader options go here
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg|ttf|woff)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
},
extensions: ['*', '.js', '.vue', '.json']
},
devServer: {
historyApiFallback: true,
noInfo: true,
overlay: true
},
performance: {
hints: false
},
devtool: '#eval-source-map'
}
if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
}
第六步：在项目根目录下（针对 iPortal 提供的示范代码时，为 %SuperMap iPortal_HOME%\samples\code\iportal-admin-ui-extend 目录）运行如下命令进行编译：
npm install
编译完成后，运行如下命令进行打包：
npm run build
打包完成之后，会在根目录下自动创建一个 dist 文件夹，您需要将 dist 文件夹内打包出来的 js 放置在 %SuperMap iPortal_HOME%\webapps\iportal\resources\admin-ui\extend 目录下。
第七步：修改 index.json 文件（位于%SuperMap iPortal_HOME%\webapps\iportal\resources\admin-ui\extend 目录），如下所示：
{
"routerName": "GenerateRoutes",
"libraryName": "extendPage",
"addDependsToVue": "addToVue",
"jsUrl": [
"/iportal/resources/admin-ui/extend/extendPage.js"
]
}
第八步：编辑 %SuperMap iPortal_HOME%\webapps\iportal\resources\admin-ui\extend 目录中的 permissions.json 文件，将第四步中所有的权限表达式以 json 格式写入。该文件可以在角色管理的权限列表中增加针对访问扩展页面的权限设置项，支持中文、英文两种语言，示例如下：
{
"permissions":[
{
"permission": "portal:admin:extendsPage:viewVuePage",
"label": {
"zh": "查看ant-design-vue组件演示",
"en": "View ant-design-vue components demo page"
}
},
{
"permission": "portal:admin:extendsPage:viewNewWindowPage",
"label": {
"zh": "显示在新窗口中扩展示例页面菜单项",
"en": "Show open extends page in new window"
}
},
{
"permission": "portal:admin:extendsPage:viewIFramePage",
"label": {
"zh": "查看iframe扩展示例页面",
"en": "View iframe extends page"
}
}
]
}
保存后，以管理员身份登录 iPortal，拥有对应访问权限的用户即可在管理页面的菜单项中看到扩展的内容。
注意：新扩展的管理页面在刷新后可能会出现 HTTP 404 问题，此时需要在 %SuperMap iPortal_HOME%\webapps\iportal\WEB-INF 目录下的 urlrewrite.xml 文件中新增如下配置：
<rule>
<name>extendPage</name>
<from>^/admin-ui/extend/.*</from>
<to>/admin-ui/index-iPortal.html</to>
</rule>