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

门户技术实现方案 2011-05目录目录门户需求 实现方案数据模型技术选型企业门户内容信息发布 应用集成 互动交流 管理后台企业门户术语版式主题企业门户术语模块栏目模块设置内容维护可设置模块显示位置、信息显示条数、模块的组件样式等在特殊节日展示企业文化，并提供贺卡功能版式可由三栏1:1:1变为两栏1:2,模块可通过拖拽调整位置模块设置主题切换版式调整门户个性化企业门户个性化自定义栏目如果预置栏目不足以满足用户需求，可创建新的栏目，并定制栏目首页自定义模块可自定义新的模块，如文章列表型模块、跑马灯图片模块等模块设定内容维护模块设置模块分类信息发布类模块：如公司新闻、通知公告等；应用集成类模块：如博客推荐、论坛热帖等；互动交流类模块：如调查问卷、留言板等；用户扩展类模块：如图片链接、文章内容等；依据用户自定义的新栏目而创建的信息发布类模块技术选型具体原因如下门户的技术实现不采用数商架构，部分参门户的技术实现不采用数商架构，部分参考数商建站方案考数商建站方案开发架构不同版本升级互相影响业务目标不同A、企业内网门户个性化程度没有数商建站的高B、企业内网信息门户，内容大于形式借鉴数商技术方案1、富文本编辑器数商Zshop1.0 门户中有在线编辑文章以及进行文章排版的需求，直接采用数商的富文本编辑器，避免重复工作。借鉴数商技术方案2、使用SSI（Server Side Include)技术实现静态页面合成技术实现静态页面合成Main页面部分SSISSI技术在门户应用中具体实现见后面的页面静态化章节技术在门户应用中具体实现见后面的页面静态化章节借鉴数商技术方案3、借鉴数商模块添加设计方案通过预置好内置模块，便于用户快捷添加删除模块。技术技术选型选型VelocityHTML使用使用Velocity模板技术将界面设计与业务模板技术将界面设计与业务逻辑分离及页面静态化逻辑分离及页面静态化ExtJSJAVA使用使用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、页面静态化处理、页面静态化处理 管理员进行模块设置变更时以及页面数据在新增、编辑或删除时生成静态页面。数据模型数据模型数据模型CE300CE300的专题的专题CE300门户的专题如下样式：门户的专题如下样式：CE300CE300的搜索功能：的搜索功能：页面静态化方案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(http:/: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:)采用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 MVCVelocity集成使用模式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框架（采用该方案）数据模型