MDF4.1脚手架扩展门户页面
非元数据开发的页面我们在src/client/web/components/portal下编写,portal下的页面都当做一个单独的页面进行访问。(适用于本地联调)
1、创建页面
我们在portal下创建自定义扩展文件夹容器portalDemo(用来放置扩展某一类门户页面);
图 1
我们在portal/portalDemo下增加个hello.jsx,在里面输入这是一个PC组件Hello!
import React, { Component } from 'react';
import './hello.less';
export default class Hello extends Component {
render() {
return (
<div className='portal-hello'>这是一个PC组件Hello!</div>
)
}
}
二、注册页面
两种注册方式:(推荐第二种)
一、使用自定义配置路由(需要配合第三步配置路由一起使用)只适用于线下调试 src/client/web/components/portal下的index页面,将新写的组件注入进去
export Hello from './portalDemo/hello';
二、使用platform公共路由,无需配置第三步;(线下和线上走支持)
src/client/web/components/portal下的index页面,将新写的组件注入进去
import Hello from './portalDemo/hello';
const PortalComponents = {
'hello': Hello
}
export default PortalComponents
三、配置路由
扩展的页面路由需要配置两处:
1.1:在src/web/routes/index.jsx里面配置(如图2)
图 2
1.2:在公共配置文件下src/common/config.env.js里面配置(如图3)
图 3
四、访问使用
一、通过自定义路由注册时,访问如下:
访问节点 /hello,就可以访问到刚刚编写的页面组件.这里的hello,就是刚刚注入的Hello组件对应的keys字段。
访问:http://local.diwork.com:3003/hello
二、通过公共路由platform注册时,访问如下:
访问节点 /platform/hello,就可以访问到刚刚编写的页面组件.这里的hello,就是刚刚注入的Hello组件对应的keys字段
访问:http://local.diwork.com:3003/platform/hello
五、发布到线上环境
* 发布到线上环境时,需要使用公共路由platform得方式配置路由
添加自建服务
*这里得url 就是/platform/hello
五、如何在扩展页面请求接口数据?
cb.rest.DynamicProxy
无ViewModel时的情况,需要自行传入domainKey参数; params:需要上送的参数对象
// 声明
var proxy = cb.rest.DynamicProxy.create({
ensure: {
url: '/xxx/xxx/autoPick',
method: 'POST'
}
});
// 调用
proxy.ensure(params, function (err, result) {
console.log('success', result)
}