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

F5刷新页面，就可以正常访问了

五、如何在扩展页面请求接口数据？

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)
}

扩展门户页面