portal

本文围绕Portlet技术展开,介绍其主要功能,如单点登陆、个性化设置等。阐述了Portlet及Portlet容器的组成和作用,还列举了现有portal项目的开源和商业解决方案及优缺点,给出代表网站示例,最后介绍了JSR 168 Java规范,旨在建立portlet和门户的可移植性关系。

1.主要功能
SSO ( Singal SignOn ) 单点登陆
个性化设置Personalization
权限管理
Content aggregation (内容聚合)
 

 


2.组成
Portlet:portlet 是一个基于 Java 技术的 Web 组件,它由portlet 容器管理,负责处理请求和生成动态内容的。Portlet 被门户用作可插入用户界面组件,用户界面组件用于在信息系统中提供表示层。

Portlet 容器:Portlet Container用来管理Portlet的生命周期并且提供其运行所需要的必要环境. 并且为Portlet Preferences提供持久性(Persistent)存取服务.但是其不支持内容的Aggregation. Aggregation由Portal组件提供.

注: Portlet Preferences是Portlet的一个新特性,提供类似数据库的功能.但是不是用来取代数据库. 只是用来存取简单的Portlet参数配置.
 


3.现有portal项目(商业的和开源的)解决方案及优缺点


Open source projects

http://jportlet.sourceforge.net/
http://jakarta.apache.org/jetspeed/site/index.html
完整的文档,但jetspeed没有支持JSR168,jetspeed2还没有release.

http://www.liferay.com/home/index.jsp
liferay的架构比较混乱,基于它进行二次开发困难

http://basicportal.com/
http://www.jahia.org/
http://jporta.sourceforge.net/

http://jakarta.apache.org/pluto
portlet container


Commercial products
weblogic portal 8.1
提供的是开发平台,有很多的解决方案http://dev2dev.bea.com.cn/techdoc/wlportal/index.jsp

IBM Websphere Portal - http://www.software.ibm.com/wsdd/zones/portal/
Oracle Portal Developer Kit - http://portalstudio.oracle.com/

其它:
PSML - http://jakarta.apache.org/jetspeed/site/psml.html
BEA: Web Logic Portal 4.0 http://www.bea.com/products/weblogic/portal/index.shtml
IBM: WebSphere Portal 2.1 http://www-4.ibm.com/software/webservers/portal/
iPlanet: iPlanet Portal Server 3.0 http://www.iplanet.com/products/iplanet_portal/home_portal.html
Oracle: Oracle 9i Portal http://www.oracle.com/ip/deploy/ias/portal/index.html
Apache Software Foundation: Jakarta JetSpeed 1.3
BEA: Web Logic Portal 4.0 http://www.bea.com/products/weblogic/portal/index.shtml
IBM: WebSphere Portal 2.1 http://www-4.ibm.com/software/webservers/portal/
iPlanet: iPlanet Portal Server 3.0 http://www.iplanet.com/products/iplanet_portal/home_portal.html
Oracle: Oracle 9i Portal http://www.oracle.com/ip/deploy/ias/portal/index.html
SAP Portal: http://www.iviewstudio.com
Epicentric portal: http://www.epicentric.com/solutions/products/efs/

4.代表网站
http://www.mynetscape.com/index2.psp
 u/p:antstone2004/ants
http://demo.liferay.net/c/portal_public/layout?p_l_id=275.1
 u/p:echo@ants.com.cn / stone
http://www.bluesunrise.com/jetspeed/portal
 u/p:stone/stone

5.JSR 168
JSR 168 (Java Portlet) 是一种 Java 规范,其目的是在 portlet 和门户之间建立可移植性关系。这个规范的一个主要目标是为门户和portlet 供应商建立一组 Java API 标准。这些 API 涉及的领域包括表示、聚合、安全性以及 portlet 生命周期。

08-15
### 三级标题:Portal 的定义与应用场景 在前端开发中,“Portal”通常指的是将某个组件或内容渲染到当前组件树之外的一个机制。这种机制允许开发者将某些 UI 元素(如模态框、弹出菜单、提示框等)渲染到页面的任意位置,而不仅仅局限于当前组件的 DOM 结构中。这种技术在 Angular 和 React 等主流框架中都有实现。 在 Angular 中,`@angular/cdk/portal` 提供了 `Portal` 和 `PortalOutlet` 这两个核心概念,用于实现在框架执行上下文之外动态创建子视图的功能。开发者可以通过 `ComponentPortal` 或 `TemplatePortal` 来封装需要渲染的内容,并将其挂载到指定的 `PortalOutlet` 中。为了简化开发流程,Angular CDK 还提供了 `CdkPortal` 和 `CdkPortalOutlet` 指令,隐藏了底层实现细节,使得开发者只需简单的调用即可完成 Portal 的创建和挂载 [^1]。 在 React 中,`ReactDOM.createPortal()` 是官方提供的用于实现 Portal 的 API。通过该方法,可以将某个 React 组件的内容渲染到指定的 DOM 节点中,而不会受到父组件的样式或布局限制。这种方式特别适用于需要脱离当前组件层级结构的 UI 元素,例如全屏遮罩、全局提示等 [^2]。 ### 三级标题:Portal 的工作原理 在 Angular 中,`Portal` 的核心机制是通过 `ViewContainerRef` 和 `ComponentFactoryResolver` 来动态创建组件实例,并将其附加到指定的 `PortalOutlet` 容器中。`PortalOutlet` 可以是一个 DOM 元素,也可以是一个已经存在的 Angular 组件容器。通过这种方式,Portal 可以实现跨组件层级的渲染。 在 React 中,`createPortal` 的实现依赖于 React 的渲染机制。当调用 `ReactDOM.createPortal(child, container)` 时,React 会将 `child` 渲染为 `container` 节点的子节点,而不是当前组件的父节点。这意味着 Portal 渲染的内容虽然在 DOM 结构上脱离了当前组件的层级,但在 React 的虚拟 DOM 中仍然属于当前组件的树结构 [^2]。 ### 三级标题:Portal 的优势与注意事项 Portal 的主要优势在于它能够将特定的 UI 元素渲染到页面的任意位置,从而避免样式污染和布局限制。例如,在模态框或弹出菜单的实现中,如果这些元素被嵌套在多个父组件中,可能会受到父组件的 `overflow` 或 `z-index` 样式的影响,导致显示异常。通过 Portal,可以将这些元素直接渲染到 `<body>` 下,从而避免这些问题。 然而,使用 Portal 时也需要注意一些潜在的问题。例如: - **样式隔离**:由于 Portal 渲染的内容可能位于页面的不同位置,因此需要确保其样式不会与其他部分产生冲突。 - **事件冒泡**:Portal 渲染的内容虽然在 DOM 结构上独立,但事件仍然会按照正常的 DOM 结构进行传播。因此,需要注意事件的捕获和阻止冒泡。 - **性能优化**:频繁地创建和销毁 Portal 可能会影响性能,因此建议在必要时才使用 Portal,并合理管理其生命周期 [^1][^2]。 ### 三级标题:Portal 的实际应用示例 #### Angular 中的 Portal 示例 在 Angular 中,可以使用 `ComponentPortal` 来创建一个 Portal,并将其挂载到指定的 `PortalOutlet` 上。以下是一个简单的示例代码: ```typescript import { ComponentPortal } from '@angular/cdk/portal'; import { Component, ViewChild, ViewContainerRef } from '@angular/core'; @Component({ selector: 'app-root', template: ` <div> <button (click)="attachPortal()">Attach Portal</button> <ng-template #portalOutlet></ng-template> </div> ` }) export class AppComponent { @ViewChild('portalOutlet', { read: ViewContainerRef }) portalOutlet!: ViewContainerRef; attachPortal() { const portal = new ComponentPortal(PortalContentComponent); this.portalOutlet.attach(portal); } } @Component({ selector: 'portal-content', template: '<div>This is the portal content!</div>' }) export class PortalContentComponent {} ``` #### React 中的 Portal 示例 在 React 中,可以使用 `ReactDOM.createPortal()` 来实现 Portal。以下是一个简单的示例代码: ```jsx import React from 'react'; import ReactDOM from 'react-dom'; const Portal = ({ children }) => { const portalRoot = document.getElementById('portal-root'); return ReactDOM.createPortal(children, portalRoot); }; function App() { return ( <div> <h1>Main Content</h1> <Portal> <div style={{ position: 'fixed', top: '0', left: '0', zIndex: '999' }}> This is the portal content! </div> </Portal> </div> ); } export default App; ``` 在这个示例中,`Portal` 组件会将传入的 `children` 渲染到 `id` 为 `portal-root` 的 DOM 节点中,从而实现脱离当前组件层级的渲染。 ### 三级标题:总结 Portal 是一种非常实用的技术,尤其在需要将 UI 元素渲染到当前组件层级之外的场景中。无论是 Angular 还是 React,都提供了相应的实现方式来简化 Portal 的使用。通过合理地运用 Portal,可以有效解决样式污染、布局限制等问题,提升用户体验和开发效率。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值