Case 2 -- Extend a new management page based on Vue components |
Vue is a progressive JavaScript framework for building user interfaces, used to build data-driven Web interfaces. iPortal supports users to package their extended content as Vue components and add them to the iPortal management menu. The effect of extended development is as follows:
The sample code used in this example locates in the %SuperMap iPortal_HOME%\samples\code\iportal-admin-ui-extend directory. (Only the complete iPortal package contains the sample code, the deploy distribution package does not contain the sample code.)
The extension development process is as follows:
Step 1: Install the development environment
npm install -g vue-cli
Step 2: Initialize a Vue project with the command:
vue init webpack-simple iportal-admin-ui-extend
The bold part is the project folder name. Here we use iportal-admin-ui-extend. You can also configure the project name, description, author, etc., when initializing the project. After the configuration is completed, a Vue project is successfully created.
Step 3: Enter the created project folder, create a "components" folder in the src directory, under the "components" folder create a file ends with the ".vue" suffix for writing the codes of the extended component.
Step 4: Go back to the project root directory and create an "index.js" file. The index.js file is used to expose the extended component files. The code is as follows, you can modify it according to your project.
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: 'Custom Component Demo', 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 component demo', keepAlive: true, permission: ['portal:admin:extendsPage:viewVuePage']}
},
{
path: 'http://support.supermap.com.cn:8092',
name: 'supermap',
meta: {
title: 'Open New Window Demo',
target: '_blank',
permission: ['portal:admin:extendsPage:viewNewWindowPage']
}
}
]
},
{
path: '/admin-ui/extend/iframe',
name: 'UserIframe',
component: UserAddVue,
meta: { icon: 'select', title: 'iFrame Embedded Page', keepAlive: true, src: 'http://support.supermap.com.cn:8092' ,permission: ['portal:admin:extendsPage:viewIFramePage']}
}
];
return extendRoute;
}
export function addToVue(_Vue) {
}
The GenerateRoutes in the above code is the routing function, which is described as follows:
For more information about the routing function, please refer to: Vue Router.
Step 5: Modify the webpack.config.js file. According to your customized content, modify the bold part. Click here to query the description of the parameter in bold.
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
})
])
}
Step 6: In the project root directory, run the command to compile:
npm install
After the compilation is complete, run the command to package:
npm run build
After the packaging is completed, a "dist" folder will appear in the root directory. You need to place the js files in the dist folder to the SuperMap iPortal_HOME%\webapps\iportal\resources\admin-ui\extend directory.
Step 7: Modify the index.json file in the %SuperMap iPortal_HOME%\webapps\iportal\resources\admin-ui\extend directory as follows:
{
"routerName": "GenerateRoutes",
"libraryName": "extendPage",
"addDependsToVue": "addToVue",
"jsUrl": [
"/iportal/resources/admin-ui/extend/extendPage.js"
]
}
Step 8: Edit the permissions.json in the %SuperMap iPortal_HOME%\webapps\iportal\resources\admin-ui\extend directory, write the custom permission expressions in the fourth step in json format. The permissions list of Roles Management can automatically add the custom permissions set in the permission.json file. Both Chinese and English are supported. The example is as follows:
{
"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 extended page in new window"
}
},
{
"permission": "portal:admin:extendsPage:viewIFramePage",
"label": {
"zh": "查看iframe扩展示例页面",
"en": "View iframe extended page"
}
}
]
}
When complete, save the files. Log in iPortal as an administrator, you can see the extended content in the menu of the management page.
Note: If an HTTP 404 problem occurs when refreshed the newly extended management page, you need to add the following configuration in the urlrewrite.xml file in the %SuperMap iPortal_HOME%\webapps\iportal\WEB-INF directory:
<rule>
<name>extendPage</name>
<from>^/admin-ui/extend/.*</from>
<to>/admin-ui/index-iPortal.html</to>
</rule>