1、,門戶技術(shù)實現(xiàn)方案,2011-05,目錄,門戶需求,實現(xiàn)方案,數(shù)據(jù)模型,技術(shù)選型,企業(yè)門戶內(nèi)容,信息發(fā)布,應(yīng)用集成,互動交流,管理后臺,企業(yè)門戶術(shù)語,版式,主題,企業(yè)門戶術(shù)語,模塊,欄目,模塊設(shè)置,內(nèi)容維護,可設(shè)置模塊顯示位置、信息顯示條數(shù)、 模塊的組件樣式等,在特殊節(jié)日展示企業(yè)文化，并提供賀卡功能,版式可由三欄1:1:1變?yōu)閮蓹?:2, 模塊可通過拖拽調(diào)整位置,模塊設(shè)置,主題切換,版式調(diào)整,門戶個性化,企業(yè)門戶個性化,自定義欄目,如果預(yù)置欄目不足以滿足用戶需求， 可創(chuàng)建新的欄目，并定制欄目首頁,自定義模塊,可自定義新的模塊，如文章列表型模塊、 跑馬燈圖片模塊等,模塊設(shè)定,內(nèi)容維護,模塊設(shè)置,

2、模塊分類,信息發(fā)布類模塊：如公司新聞、通知公告等； 應(yīng)用集成類模塊：如博客推薦、論壇熱帖等； 互動交流類模塊：如調(diào)查問卷、留言板等； 用戶擴展類模塊：如圖片鏈接、文章內(nèi)容等；,依據(jù)用戶自定義的新欄目而創(chuàng)建的信息發(fā)布類模塊,技術(shù)選型,具體原因如下,門戶的技術(shù)實現(xiàn)不采用數(shù)商架構(gòu)，部分參考數(shù)商建站方案,開發(fā)架構(gòu) 不同,版本升級 互相影響,業(yè)務(wù)目標(biāo) 不同,A、企業(yè)內(nèi)網(wǎng)門戶個性化程度沒有數(shù)商建站的高 B、企業(yè)內(nèi)網(wǎng)信息門戶，內(nèi)容大于形式,借鑒數(shù)商技術(shù)方案,1、富文本編輯器數(shù)商Zshop1.0 門戶中有在線編輯文章以及進行文章排版的需求，直接采用數(shù)商的富文本編輯器，避免重復(fù)工作。,借鑒數(shù)商技術(shù)方案,2、使用

3、SSI（Server Side Include)技術(shù)實現(xiàn)靜態(tài)頁面合成,Main頁面部分 SSI技術(shù)在門戶應(yīng)用中具體實現(xiàn)見后面的頁面靜態(tài)化章節(jié),借鑒數(shù)商技術(shù)方案,3、借鑒數(shù)商模塊添加設(shè)計方案,通過預(yù)置好內(nèi)置模塊，便于用戶快捷添加刪除模塊。,技術(shù)選型,Velocity,HTML,使用Velocity模板技術(shù)將界面設(shè)計與業(yè)務(wù)邏輯分離及頁面靜態(tài)化,ExtJS,JAVA,使用HTML確定各模版頁中的頁面結(jié)構(gòu),開發(fā)門戶后臺管理界面,采用數(shù)管REST開發(fā)框架,實現(xiàn)方案,實現(xiàn)方案,員工訪問 html+js,前臺維護 html+js+Velocity,后臺管理ExtJS,普通用戶,管理員,Web服務(wù)器,數(shù)管Ja

4、va端開發(fā)框架,門戶用戶訪問頁采用傳統(tǒng)的HTML技術(shù)，而管理后臺采用與協(xié)同辦公等兄弟系統(tǒng)相同的研發(fā)技術(shù),Velocity模板代碼,html中嵌套Velocity腳本,用戶看到的網(wǎng)頁效果圖,Velocity合成后 的頁面,門戶各功能具體實現(xiàn),1、通過切換組件來改變模塊的內(nèi)容展示效果 管理員可對某一模塊切換新的組件樣式從而改變該模塊內(nèi)容的展示效果。例如由左圖右文樣式切換為右圖左文樣式。 2、切換主題 換主題即針對所有頁面更換CSS文件。 3、模塊的拖拽與保存 使用JS在客戶端實現(xiàn)模塊的拖拽，頁面保存時把相關(guān)模塊的ID值組合成JSON串保存到數(shù)據(jù)庫中，下次該頁面打開使用該JSON串再重新組織模塊顯示

5、位置。 4、應(yīng)用集成 門戶與各應(yīng)用系統(tǒng)的集成，各應(yīng)用系統(tǒng)提供相應(yīng)的接口，采用抓的方式從各應(yīng)用系統(tǒng)獲取數(shù)據(jù)在門戶中進行顯示。,門戶功能具體實現(xiàn),5、頁面中模塊設(shè)置時的頁面局部刷新 在模塊設(shè)置或模塊內(nèi)容維護時，使用Ajax動態(tài)加載回顯數(shù)據(jù)，進行頁面局部刷新。（采用jQuery實現(xiàn)） 6、普通用戶靜態(tài)頁面與管理員動態(tài)頁面 普通用戶訪問的頁面是靜態(tài)HTML頁面，該頁面由對應(yīng)的動態(tài)頁面而生成。管理員訪問的頁面是動態(tài)頁面，管理員進行模塊設(shè)置變更時以及頁面數(shù)據(jù)變化時會相應(yīng)生成靜態(tài)頁面。,7、頁面靜態(tài)化處理 管理員進行模塊設(shè)置變更時以及頁面數(shù)據(jù)在新增、編輯或刪除時生成靜態(tài)頁面。,數(shù)據(jù)模型,數(shù)據(jù)模型,數(shù)據(jù)模型,

6、CE300,CE300的專題,CE300,門戶的專題如下樣式：,CE300,CE300的搜索功能：,頁面靜態(tài)化,方案1、只生成當(dāng)前維護的數(shù)據(jù)所對應(yīng)的頁面 其它關(guān)聯(lián)頁面輪循定時生成 說明：靜態(tài)化實現(xiàn)方案簡單，但由于采用輪循，靜態(tài)化實時性不高且有過多重復(fù)生成。 方案2、生成當(dāng)前維護的數(shù)據(jù)所對應(yīng)的頁面，關(guān)聯(lián)頁面同時進行靜態(tài)化。 說明：不采用輪循，頁面有變化時，實時進行靜態(tài)化。 采用方案2,方案1、把頁面頂部、底部等不常更新變化的模塊獨立出來，這部分頁面單獨進行靜態(tài)化，使用SSI技術(shù)進行頁面合成，其它模塊有變化時整個頁面整體靜態(tài)化。（如首頁中的公司新聞模塊有變化時，整個首頁重新進行靜態(tài)化） 方案2、把

7、每一個模塊都分解成一個獨立的HTML頁面，使用SSI技術(shù)合成。模塊內(nèi)容有變化時，僅該模塊的HTML重新生成，總頁面不重新靜態(tài)化。 （如首頁中的公司新聞模塊有變化時，首頁不進行靜態(tài)化） 采用方案2,頁面靜態(tài)化,靜態(tài)化時機： 管理員前臺操作：版式選擇、模塊管理、模塊拖拽、模塊屬性維護、模塊內(nèi)容維護 管理員后臺操作：欄目管理、信息管理 靜態(tài)化原則： 1）分頁情況時僅第一頁生成靜態(tài)化 靜態(tài)化范圍： 1）定期進行數(shù)據(jù)刷新的模塊不作靜態(tài)化 2）應(yīng)用集成模塊不作靜態(tài)化 動態(tài)請求地址靜態(tài)化： 1）管理員前臺維護時頁面中的所有鏈接都是動態(tài)地址 2）進行頁面靜態(tài)化后動態(tài)地址轉(zhuǎn)換為靜態(tài)地址,應(yīng)用集成,門戶的應(yīng)用集成

8、需求,應(yīng)用集成, function showEmployee(rs) alert(rs.email); function getEmpInfo() var params = name:abc; Ext.ux.JSONP.request( :8080/crossdomain/employee/saveEmployee, callbackKey : jsoncallback,/服務(wù)器端取此參數(shù),并在js片段中返回給前端 params : params,/提交參數(shù)，在服務(wù)器端request可獲得 callback : showEmployee /返回后調(diào)用此函數(shù) ); ,采用JSONP實現(xiàn)跨域訪問,

9、客戶端,應(yīng)用集成,public void saveEmployee(CEOpenRequest request) String callback = request.getParameter(jsoncallback);/js中寫的參數(shù) /業(yè)務(wù)操作（增刪改查等），獲得相關(guān)數(shù)據(jù)后以拼裝成JSON格式 JSONObject json = new JSONObject(); json.put(name, name); json.put(email, email); String rs = callback + ( + json.toString() + );/以這種形式返回 Representati

10、on 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實現(xiàn)跨域訪問,服務(wù)器端,Velocity的集成模式,VelocityEngine ve = new VelocityEngine(); ve.init(veloci

11、perties); 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的基本

12、使用,Velocity集成使用模式,public class CustomerVelocityServlet extends VelocityViewServlet /設(shè)置返回視圖為text/html編碼為utf-8 Override protected void setContentType(HttpServletRequest request, HttpServletResponse response) response.setContentType(text/html;charset=utf-8); /處理請求 Override protected Template handleRequ

13、est(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,軟件研發(fā)部1); list.add(new Employee(2,張三,陜西西安,19,new Department(2,軟件研發(fā)部2); ctx.put(list, list

14、); /調(diào)用父類的方法getTemplate() return getTemplate(demo.vm, gbk); ,基于Servlet,為了把相關(guān)的各種操作都在同一個類中，并實現(xiàn)不同的請求路徑映射到Servlet的不同方法，需開發(fā)新的Controller。,Velocity集成使用模式,public class WelcomeController extends MultiActionController private CourseService courseService; public ModelAndView showList(HttpServletRequest req,Http

15、ServletResponse 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); pu

16、blic 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

17、./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); /合并模板和數(shù)據(jù)并輸出HTML StringWriter sw = new StringWriter(); t.merge(context, sw); String outp