使用struts2開發(fā)企業(yè)級(jí)web應(yīng)用程序7第七章插件

第七章Struts2插件回顧

使用Struts2上傳時(shí)如果表單中包含一個(gè)name屬性值為xxx的文件域，則對(duì)應(yīng)Action需要使用3個(gè)屬性來封裝該文件域的信息：類型為File的xxx屬性封裝了對(duì)應(yīng)文件域上傳的文件實(shí)例。類型為String的xxxFileName屬性封裝了該文件域?qū)?yīng)的文件的文件名。類型為String的xxxContentType屬性封裝了該文件域?qū)?yīng)的文件的文件類型Struts2中文件上傳的過濾器是fileUpload，為了讓該攔截器起作用，只需要在該Action中配置該攔截器引用即可。文件過濾失敗后，系統(tǒng)自動(dòng)轉(zhuǎn)入input邏輯視圖，因此必須為該Action配置名為input的邏輯視圖。Struts2提供了stream結(jié)果類型，該結(jié)果類型專用于支持文件下載功能。本章內(nèi)容1JSON插件2JFreeChart插件1JSON插件實(shí)現(xiàn)Ajax異步樹形結(jié)構(gòu)2JFreeChart插件顯示城市的平均薪資1.jax異步動(dòng)態(tài)顯示省市樹形功能實(shí)踐練習(xí)1.JSON的基本知識(shí)2.使用JSON插件技術(shù)講解講解時(shí)間：50分鐘實(shí)踐時(shí)間：40分鐘7.1JSON插件JSON概念：JSON的全稱是JavaScriptObjectNotation，即JavaScript對(duì)象符號(hào)，它是一種輕量級(jí)的數(shù)據(jù)交換格式JSON主要有如下兩種數(shù)據(jù)結(jié)構(gòu)：

7.1.1JSON的基本知識(shí)11.由key-value對(duì)組成的數(shù)據(jù)結(jié)構(gòu)22.有序集合使用JSON插件，實(shí)現(xiàn)異步檢查用戶賬號(hào)是否已經(jīng)被注冊(cè)的操作步驟如下:1.將struts2-json-plugin-2.3.16.3.jar文件拷貝到Web應(yīng)用的WEB-INF/lib路徑下。2.創(chuàng)建注冊(cè)頁面，regist.jsp文件。在文件中使用jQuery的ajax方法異步獲取服務(wù)器響應(yīng)的JSON格式的數(shù)據(jù)。

7.1.2使用JSON插件本書使用的JSON插件的版本為struts2-json-plugin-2.3.16.33.regist.jsp頁面參考代碼如下：4.創(chuàng)建Action類UserManagerAction，在類中定義checkUserIsRegist方法，該方法用于檢查用戶輸入的賬號(hào)是否已經(jīng)被注冊(cè)。5.在struts.xml文件中，配置UserManagerAction類的相關(guān)信息。代碼如下：

7.1.2使用JSON插件<scriptsrc="js/jquery-1.8.1.js"></script><script>$(function(){$("#txtNo").blur(function(){$.ajax({url:"userManager_checkUserIsRegist",type:"post",//請(qǐng)求方法data:"account="+$("#txtNo").val(),dataType:"json",//返回json的數(shù)據(jù)格式success:function(data){//操作成功后執(zhí)行的回調(diào)函數(shù)$.each(data,function(index,item){//循環(huán)遍歷data集合alert(item);});}});});});</script>id為“textNo”的文本框失去焦點(diǎn)時(shí)執(zhí)行blur方法獲取id為“txtNo”文本框的輸入值，將其賦值給account屬性引入jquery1.8.1類庫<packagename="jsonPlugin"extends="json-default"> <actionname="userManager_*"class="包名.UserManagerAction"method="{1}"><resulttype="json"name="regist"><!—判斷Action中的哪些屬性需要轉(zhuǎn)換為JSON數(shù)據(jù)格式--><paramname="includeProperties">errorMsg</param></result></action></package>返回結(jié)果必須為jsonincludeProperties屬性用于指定Action中的哪些屬性需要轉(zhuǎn)換成JSON形式的數(shù)據(jù)格式

此處必須繼承json-default

6.訪問用戶注冊(cè)頁面，如果用戶輸入的賬號(hào)已經(jīng)被注冊(cè)，則系統(tǒng)給出友好的提示信息，告知用戶該賬號(hào)無法使用。

7.1.2使用JSON插件7.1.3學(xué)生實(shí)踐練習(xí)實(shí)踐時(shí)間：40分鐘實(shí)現(xiàn)Ajax異步動(dòng)態(tài)顯示省市樹形功能具體要求如下：1.用戶點(diǎn)擊“查看”按鈕后，出現(xiàn)“中國”的文字鏈接，點(diǎn)擊該鏈接后，會(huì)顯示出中國的四個(gè)直轄市名稱的鏈接。2.點(diǎn)擊“北京”鏈接，頁面仍會(huì)無刷新地在“北京”鏈接下方顯示北京各區(qū)域名的鏈接。3.如果再次點(diǎn)擊“北京”鏈接，該鏈接下方出現(xiàn)的區(qū)域名鏈接消失。頁面效果如下圖所示。7.1.3學(xué)生實(shí)踐練習(xí)1.在數(shù)據(jù)庫中創(chuàng)建區(qū)域表t_area，該表的表結(jié)構(gòu)見下表。字段名數(shù)據(jù)類型說明area_idint區(qū)域Id，主鍵area_namevarchar(10)區(qū)域名稱，不允許為空該表是一張自連接表，parent_id字段作為本表的外鍵，該列的參考列為area_id。7.1.3學(xué)生實(shí)踐練習(xí)2.用戶點(diǎn)擊頁面中的“查看”按鈕時(shí)，通過jquery為“查看”按鈕綁定click事件。當(dāng)click事件被觸發(fā)后，通過$.getJSON方法請(qǐng)求后臺(tái)AreaAction的queryArea方法。3.在queryArea方法中，通過調(diào)用AreaDao對(duì)象的queryArea(intparentId)方法查詢滿足條件的區(qū)域，并將這些區(qū)域保存至List集合中functionqueryArea(id){$.getJSON("areaAction_queryArea","area.areaId="+id,function(data){$("#"+id).append("<ulid='ul"+id+"'></ul>");$.each(data,function(i,item){$.each(item,function(index){varareaName=item[index]["areaName"];varareaId=item[index]["areaId"];if($("#"+id+"ul").length>1){$("#"+id+"ul").remove()};$("#ul"+id).append("<liid='"+areaId+"'><ahref='javascript:queryArea("+areaId+")'>"+areaName+"</a></li>");});});});}循環(huán)遍歷服務(wù)器返回的數(shù)據(jù)在$("#"+id)對(duì)象下添加ul子元素，并為id屬性賦值7.1.3學(xué)生實(shí)踐練習(xí)4.在src.xml文件中，配置AreaAction類的相關(guān)信息。5.顯示返回的JSON格式的區(qū)域數(shù)據(jù)<actionname="areaAction_*"class="包名.AreaAction"method="{1}"><resulttype="json"><paramname="includeProperties">areaList.*</param></result></action>點(diǎn)擊“北京”鏈接，如該鏈接下沒有顯示北京的各區(qū)域，則將查詢的數(shù)據(jù)作為子節(jié)點(diǎn)添加至“北京”節(jié)點(diǎn)下，如果“北京”鏈接已經(jīng)顯示了各區(qū)域名，則需要先刪除上一次已經(jīng)顯示的區(qū)域名，然后將查詢的數(shù)據(jù)作為子節(jié)點(diǎn)保存至該節(jié)點(diǎn)下1.使用freeChart插件統(tǒng)計(jì)5大城市平均薪資的柱狀圖。實(shí)踐練習(xí)

1.字段校驗(yàn)器2.使用JFreeChart插件

技術(shù)講解講解時(shí)間：55分鐘實(shí)踐時(shí)間：35分鐘7.2JFreeChart插件JFreeChart：JFreeChart可用于生成各式各樣的統(tǒng)計(jì)圖表，只要開發(fā)人員提供符合JFreeChart所需格式的數(shù)據(jù)，JFreeChart即可自動(dòng)生成相應(yīng)的統(tǒng)計(jì)圖表。7.2.1JFreeChart簡介

餅狀圖柱狀圖JFreeChart使用前準(zhǔn)備：使用JFreeChart生成統(tǒng)計(jì)圖表，必須下載JFreeChart的相關(guān)jar文件。JFreeChart官方下載地址本教材使用的JFreeChart的版本為1.0.14，JCommon的版本為1.0.17。7.2.1JFreeChart簡介

使用JFreeChart插件的具體操作步驟如下：1.將jfreechart-1.0.14.jar、mon-1.0.17.jar以及struts2-jfreechart-plugin-2.3.16.3.jar拷貝到WEB-INF/lib目錄下。2.創(chuàng)建JFreeChartAction類，該類用于創(chuàng)建餅狀圖7.2.2Struts2下使用JFreeChart插件JFreeChartAction類具體代碼由老師演示，并分析講解3.在struts.xml文件中，配置JFreeChartAction相關(guān)信息。4.創(chuàng)建chart.jsp頁面，該頁面用于顯示服務(wù)器返回的餅狀圖。7.2.2Struts2下使用JFreeChart插件<packagename="jfreechartPlugin"extends="jfreechart-default"><actionname="jFreeChart_*"class="包名.action.JFreeChartAction"method="{1}">

<resultname="success"type="chart"> <paramname="width">800</param> <paramname="height">600</param></result></action></package><head><title>在Struts2下使用JFreeChart插件生成餅狀圖</title></head><body><imgsrc="jFreeChart_createChart"></body>設(shè)置圖形的寬度設(shè)置圖形的高度

type返回類型值必須為chart此處必須繼承jfreechart-default5.通過瀏覽器訪問chart.jsp，運(yùn)行效果如下圖所示。7.2.2Struts2下使用JFreeChart插件7.2.3學(xué)生實(shí)踐練習(xí)實(shí)踐時(shí)間：35分鐘使用Struts2JfreeChart插件實(shí)現(xiàn)統(tǒng)計(jì)2012年至2014年中國5大城市平均薪資的柱狀圖。運(yùn)行效果如下圖所示。7.2.3學(xué)生實(shí)踐練習(xí)1.創(chuàng)建Action類BarChartAction，該類用于生成柱狀圖2.在struts.xml文件下，配置BarChartAction類的相關(guān)信息。3.創(chuàng)建barChart.jsp頁面，該頁面用于顯示平均工資的柱狀圖?？偨Y(jié)使用JSON插件時(shí)需要注意，在struts.xml文件中<package>元素的extends屬性值必須為json-default，且<result>元