门户技术实现方案PPT学习课件.ppt

,门户技术实现方案,2011-05,目录,门户需求,实现方案,数据模型,技术选型,企业门户内容,信息发布,应用集成,互动交流,管理后台,企业门户术语,版式,主题,企业门户术语,模块,栏目,模块设置,内容维护,可设置模块显示位置、信息显示条数、,模块的组件样式等,在特殊节日展示企业文化，并提供贺卡功能,版式可由三栏,1:1:1,变为两栏,1:2,模块可通过拖拽调整位置,模块设置,主题切换,版式调整,门户个性化,企业门户个性化,自定义栏目,如果预置栏目不足以满足用户需求，,可创建新的栏目，并定制栏目首页,自定义模块,可自定义新的模块，如文章列表型模块、,跑马灯图片模块等,模块设定,内容维护,模块设置,模块分类,信息发布类模块：如公司新闻、通知公告等；,应用集成类模块：如博客推荐、论坛热帖等；,互动交流类模块：如调查问卷、留言板等；,用户扩展类模块：如图片链接、文章内容等；,依据用户自定义的新栏目而创建的信息发布类模块,技术选型,具体原因如下,门户的技术实现不采用数商架构，部分参考数商建站方案,开发架构,不同,版本升级,互相影响,业务目标,不同,A、企业内网门户个性化程度没有数商建站的高,B、企业内网信息门户，内容大于形式,借鉴数商技术方案,1、富文本编辑器数商Zshop,1.0,门户中有在线编辑文章以及进行文章排版的需求，直接采用数商的富文本编辑器，避免重复工作。,借鉴数商技术方案,2,、使用,SSI（Server Side Include)技术实现静态页面合成,Main,页面部分,SSI技术在门户应用中具体实现见后面的页面静态化章节,借鉴数商技术方案,3,、借鉴数商模块添加设计方案,通过预置好内置模块，便于用户快捷添加删除模块。,技术选型,Velocity,HTML,使用Velocity模板技术将界面设计与业务逻辑分离及页面静态化,ExtJS,JAVA,使用HTML确定各模版页中的页面结构,开发门户后台管理界面,采用数管,REST,开发框架,实现方案,实现方案,员工访问,html+js,前台维护,html+js+Velocity,后台管理,ExtJS,普通用户,管理员,Web,服务器,数管,Java,端开发框架,门户用户访问页采用传统的HTML技术，而管理后台采用与协同办公等兄弟系统相同的研发技术,Velocity,模板代码,html,中嵌套Velocity脚本,用户看到的网页效果图,Velocity合成后,的页面,门户各功能具体实现,1、通过切换组件来改变模块的内容展示效果,管理员可对某一模块切换新的组件样式从而改变该模块内容的展示效果。例如由左图右文样式切换为右图左文样式。,2、切换主题,换主题即针对所有页面更换,CSS,文件。,3、模块的拖拽与保存,使用JS在客户端实现模块的拖拽，页面保存时把相关模块的ID值组合成JSON串保存到数据库中，下次该页面打开使用该JSON串再重新组织模块显示位置。,4,、应用集成,门户与各应用系统的集成，各应用系统提供相应的接口，采用抓的方式从各应用系统获取数据在门户中进行显示。,门户功能具体实现,5,、页面中模块设置时的页面局部刷新,在模块设置或模块内容维护时，使用Ajax动态加载回显数据，进行页面局部刷新。（采用,jQuery,实现）,6,、普通用户静态页面与管理员动态页面,普通用户访问的页面是静态HTML页面，该页面由对应的动态页面而生成。管理员访问的页面是动态页面，管理员进行模块设置变更时以及页面数据变化时会相应生成静态页面。,7,、页面静态化处理,管理员进行模块设置变更时以及页面数据在新增、编辑或删除时生成静态页面,。,数据模型,数据模型,数据模型,CE300,CE300,的专题,CE300,门户的专题如下样式：,CE300,CE300,的搜索功能：,页面静态化,方案1、只生成当前维护的数据所对应的页面 其它关联页面轮循定时生成,说明：静态化实现方案简单，但由于采用轮循，静态化实时性不高且有过多重复生成。,方案,2,、生成当前维护的数据所对应的页面，关联页面同时进行静态化。,说明：不采用轮循，页面有变化时，实时进行静态化。,采用方案,2,方案,1,、把页面顶部、底部等不常更新变化的模块独立出来，这部分页面单独进行静态化，使用SSI技术进行页面合成，其它模块有变化时整个页面整体静态化。（如首页中的公司新闻模块有变化时，整个首页重新进行静态化）,方案,2,、把每一个模块都分解成,一个独立的HTML页面，,使用SSI技术,合成。模块内容有变化时，仅该模块的,HTML,重新生成，总页面不重新静态化。,（如首页中的公司新闻模块有变化时，首页不进行静态化）,采用方案,2,页面静态化,静态化时机：,管理员前台操作：版式选择、模块管理、模块拖拽、模块属性维护、模块内容维护,管理员后台操作：栏目管理、信息管理,静态化原则：,1,）分页情况时仅第一页生成静态化,静态化范围：,1,）定期进行数据刷新的模块不作静态化,2,）应用集成模块不作静态化,动态请求地址静态化：,1,）管理员前台维护时页面中的所有链接都是动态地址,2,）进行页面静态化后动态地址转换为静态地址,应用集成,门户的应用集成需求,应用集成,function showEmployee(rs),alert(rs.email);,function getEmpInfo(),var params=name:abc;,Ext.ux.JSONP.request(,:8080/crossdomain/employee/saveEmployee,callbackKey:jsoncallback,/,服务器端取此参数,并在,js,片段中返回给前端,params:params,/,提交参数，在服务器端,request,可获得,callback:showEmployee/,返回后调用此函数,);,采用,JSONP,实现跨域访问,客户端,应用集成,public void saveEmployee(CEOpenRequest request),String callback=request.getParameter(jsoncallback);/js,中写的参数,/,业务操作（增删改查等），获得相关数据后以拼装成,JSON,格式,JSONObject json=new JSONObject();,json.put(name,name);,json.put(email,email);,String rs=callback+(+json.toString()+);/,以这种形式返回,Representation rp=new StringRepresentation(rs,MediaType.APPLICATION_JAVASCRIPT,Language.ALL,CharacterSet.UTF_8);,getResponse().setStatus(Status.SUCCESS_OK);,getResponse().setEntity(rp);,/jsonpCallback(name:abc,email:abc),采用,JSONP,实现跨域访问,服务器端,Velocity,的集成模式,VelocityEngine ve=new VelocityEngine();,ve.init(velocity.properties);,Template template=ve.getTemplate(helloWorld.vm);,VelocityContext context=new VelocityContext();,context.put(name,madding);,context.put(password,madding);,StringWriter writer=new StringWriter();,template.merge(context,writer);,System.out.println(writer.toString();,Velocity,的基本使用,Velocity,集成使用模式,public class CustomerVelocityServlet extends VelocityViewServlet,/,设置返回视图为,text/html,编码为,utf-8,Override,protected void setContentType(HttpServletRequest request,HttpServletResponse response),response.setContentType(text/html;charset=utf-8);,/,处理请求,Override,protected Template handleRequest(HttpServletRequest request,HttpServletResponse response,Context ctx)throws Exception,ctx.put(username,张三,);,ctx.put(age,20);,List list=new ArrayList();,list.add(new Employee(1,张三,陕西西安,18,new Department(1,软件研发部,1);,list.add(new Employee(2,张三,陕西西安,19,new Department(2,软件研发部,2);,ctx.put(list,list);,/,调用父类的方法,getTemplate(),return getTemplate(demo.vm,gbk);,基于,Servlet,为了把相关的各种操作都在同一个类中，并实现不同的请求路径映射到,Servlet,的不同方法，需开发新的,Controller,。,Velocity,集成使用模式,public class WelcomeController extends MultiActionController,private CourseService courseService;,public ModelAndView showList(HttpServletRequest req,HttpServletResponse resp),List courses=courseService.getAllCourses();,return new ModelAndView(courseList,courses,courses);,public ModelAndView showList(HttpServletRequest req,HttpServletResponse resp),List courses=courseService.getAllCourses();,return new ModelAndView(courseList,courses,courses);,public ModelAndView addUser(HttpServletRequest req,HttpServletResponse resp),Map model=new HashMap();,model.put(model,model);,return new ModelAndView(this.getSuccessView(),model);,基于,Spring MVC,门户中既包含前台也包含后台，如果前台采用,SpringMVC+Velocity,，而后台采用,ExtJS+REST,存在两种,Controller,。,Velocity,集成使用模式,listCourse,./velocitly/,.vm,基于,Spring MVC,Velocity,集成使用模式,public class EipPageREST extends AppBaseREST,public Representation getPage(CEOpenRequest ceOpenRequest),/,取得,velocity,的上下文,context,Context context=new VelocityContext();,context.put(siteinfo,super.getEipPageBiz().getSiteInfo();,/,取得,velocity,的模版,Template t=Velocity.getTemplate(index.vm,utf-8);,/,合并模板和数据并输出,HTML,StringWriter sw=new StringWriter();,t.merge(context,sw);,String outputHtml=sw.toString(),StringRepresentation stringRepresentation=new StringRepresentation(outputHtml,MediaType.TEXT_HTML,Language.ALL,CharacterSet.UTF_8);,this.getResponse().setEntity(stringRepresentation);,return this.getResponse().getEntity();,基于数管,REST,框架,（采用该方案）,数据模型,