軟件架構(gòu)小組實(shí)驗(yàn)報(bào)告1-3

1、中南大學(xué)軟件開發(fā)架構(gòu)平臺技術(shù)實(shí)驗(yàn)報(bào)告2014-05姓 名： 學(xué) 號： 班 級： 指導(dǎo)老師： 完成時間：實(shí)驗(yàn)一 基于MVC的JPetStore開發(fā)一、完成項(xiàng)目的過程和時間安排完成過程：實(shí)驗(yàn)由我們小組三人合作完成，考慮到我們對這個實(shí)驗(yàn)相關(guān)的知 識都還比較陌生，我們商量后決定每個人做自己的，遇到問題互相討論，最終我 們小組成員也都先后完成實(shí)驗(yàn)，達(dá)到實(shí)驗(yàn)預(yù)期的目標(biāo)，完成了基于MVC的JPetStore 的開發(fā)。時間安排：我們小組利用三天時間完成實(shí)驗(yàn)，事先對相關(guān)知識的熟悉大概花 費(fèi)了 1天的時間，大部分的時間都用來編碼和調(diào)試。二、遇到的問題和解決方法簡單的說一下做的過程中遇到的幾個問題，有些問題雖然看著

2、很簡單，但是在實(shí)驗(yàn)過程中確實(shí)經(jīng)常因?yàn)橐恍┖芎唵蔚膯栴}卡很久。問題1.商品展示部分product只能顯示一條內(nèi)容解決方法：一開始是以為jsp頁面顯示出了問題，但是沒有檢查出結(jié)果，后來發(fā) 現(xiàn)頁面顯示出的全都是每一個類型的第一條內(nèi)容，后來我開始在servlet方面查錯，通過一層層的調(diào)用 system.out.println()方法，最終發(fā)現(xiàn)我在 DA0層的Impl 實(shí)現(xiàn)類中把while寫成了 if,問題的原因也就顯而易見了。問題2.在商品展示模塊，所有的圖片都無法正常顯示解決方法：經(jīng)過檢查jsp頁面內(nèi)容都沒有出錯，后來發(fā)現(xiàn)由于組織工程的文件夾 內(nèi)容不同，在數(shù)據(jù)庫中的路徑寫的不一致，他用的是絕對路徑，

3、我改成了相對路 徑后問題解決。問題3.在編寫OrderDAOImpI的過程中出現(xiàn)了時間類型不匹配的情況 解決方法：一直報(bào)類型轉(zhuǎn)換錯誤的異常，我很奇怪異常中寫道必須為Date類，可是確實(shí)用的Date類的對象。后來通過上網(wǎng)查找問題發(fā)現(xiàn)這是由于pStatement.setDate需要一個java.sql.Date 類的對象。而我傳給它的參數(shù)是一個java.util.Date類的對象，于是我用這個的語句解決了這個問題：pStateme nt.setDate(3,newjava.sql.Date(order.getOrderDate().getTime();問題4.如何讀取checkbox中是否勾選信息

4、解決方法：一開始我認(rèn)為checkbox返回的是boolean類型的值，后來通過上網(wǎng)查 資料發(fā)現(xiàn)，如果不勾選時checkbox所對應(yīng)屬性的值為null，于是我用了這樣的 語句判斷是否勾選。Boolea n ship =request.getParameter(shippingAddressRequired)= null ;account .setListOption(request.getParameter(account.listOption).equals( true ) ? true : false );問題5.沒有找到例子中的合適的檢測是否登錄的方法解決方法：由于給的例子用了框架等方法，

5、沒有找到可以用的檢測是否在登錄狀 態(tài)的類，于是我自己寫了一個方法。public Boolea ngetAcco un tByUser nameA ndPassword Only (Acco untacco unt) boolean selectResult = false ;Conn ecti on connection = DBUtil.getCo nn ecti on ();try PreparedStateme nt pStateme nt = conn ecti on.prepareStateme nt(getAccou ntByUsernameA ndPassword On lySq

6、l);pStateme nt.setStri ng(1, acco un t.getUser name();pStateme nt.setStri ng(2, acco un t.getPassword();ResultSet resultSet = pStateme nt.executeQuery();if (resultSet.next() selectResult = true ;DBUtil. closeResultSet (resultSet);DBUtil. closePreparedStateme nt(pStateme nt);DBUtil. closeC onn ecti o

7、n(conn ecti on); catch (Exception e) e.pri ntStackTrace();retur n selectResult;三、小組成員分工組長：張先凱小組三人均獨(dú)立完成實(shí)驗(yàn)要求內(nèi)容實(shí)驗(yàn)二用AJAX改進(jìn)用戶體驗(yàn)一、項(xiàng)目應(yīng)用了 AJAX技術(shù)的功能模塊以及有無使用框架。運(yùn)用了 Ajax技術(shù)的功能模塊：1. 賬號管理模塊。在新建賬號和修改賬號信息頁面上用AJAX技術(shù)進(jìn)行表單驗(yàn)證。包括密碼與二次輸入密碼是否一致，用戶名是否重復(fù)等等。2商品查詢模塊。在首頁右上角的查詢商品中增加了自動補(bǔ)全功能，并可以 用鼠標(biāo)和鍵盤上線移動選中高亮部分，輸入框的內(nèi)容也會隨著鼠標(biāo)鍵盤的移動而

8、 移動。3.主頁商品展示模塊。在首頁展示商品的圖片上添加了AJAX效果，即當(dāng)鼠標(biāo)移到某個商品圖片上時，用懸浮窗動態(tài)加載該類型商品的信息。三個模塊中均未使用框架技術(shù)。二、說明應(yīng)用AJAX技術(shù)的理由、具體實(shí)現(xiàn)方法和核心源代碼。理由：將整個頁面刷新轉(zhuǎn)化為局部刷新功能，改進(jìn)響應(yīng)效果，增強(qiáng)用戶體驗(yàn)。具體實(shí)現(xiàn)方法：1.點(diǎn)擊按鈕或者鼠標(biāo)失焦等操作觸發(fā) ajax操作。2在js接收傳來的值，并利用Json對象與服務(wù)器異步交互。在沒有接 收到服務(wù)器的響應(yīng)之前，Jsp頁面做出響應(yīng)的等待的響應(yīng)的反應(yīng)。3得到響應(yīng)后刷新相應(yīng)的div或者控件或者顯示加載失敗。核心源代碼：模塊一：賬號管理模塊NewAcco un t.jsp

9、JSf弋碼：var xmlHttpRequest;fun ctio ncreateXMLHttpRequest()if (window.XMLHttpRequest) / ?非 IE 瀏覽器xmlHttpRequest = new XMLHttpRequest();else if (window.ActiveObject)IE6 以上版本的 IE 瀏覽器xmlHttpRequest = new ActiveObject( Msxml2.XMLHTTP);else /IE6及以下版本IE瀏覽器xmlHttpRequest = new ActiveObject( Microsoft.XMLHTTP

10、); functionuser namelsExist() var user name = docume nt.registerForm.username.value;sen dRequest( usernameIsExist?username=+ user name);function sen dRequest(url) createXMLHttpRequest(); xmlHttpRequest.open( GET, url, true ); xmlHttpRequest. on readystatecha nge = processResp onse; xmlHttpRequest.se

11、nd(null );functionprocessResp on se() if (xmlHttpRequest.readyState = 4) if (xmlHttpRequest.status = 200) varresp onselnfo=xmlHttpRequest.resp on seXML.getEleme ntsByTagName(msg )0.firstChild.data;vardivi = docume nt.getEleme ntByld(usernameMsg);if(resp onselnfo =Exist ) divi.i nn erHTML =vfont colo

12、r=redUser name isun available.v/fo ntJl else divi.i nn erHTML =vfont color=gree n availableuser namev/fo nt/以下是我自己寫的fun ctio n passwordlsCorrect() var password = document.registerForm.password.value;varrepeatedpassword=docume nt.registerForm.repeatedPassword.value;createXMLHttpRequest();xmlHttpReque

13、st.ope n(GET, SamePassword?password= +password +&repeatedpassword= + repeatedpassword, true );xmlHttpRequest. on readystatecha nge = processResp on sei;xmlHttpRequest.send(null );functionprocessResp on se1() if (xmlHttpRequest.readyState = 4) if (xmlHttpRequest.status = 200) varresp onselnfo=xmlHttp

14、Request.resp on seXML.getEleme ntsByTagName(msg )0.firstChild.data;var div2 = document.getElementByld(passwordMsg);if (resp onselnfo =Yes ) div2.i nn erHTML=vfontcolor=gree n Thetwopasswords are same.; else div2.i nn erHTML=Thetwopasswords are not the same.v/fo nt原JSP頁面修改：User ID: $sessionScope.acco

15、unt.usernameNew password: Repeat password: ServletUsernameIsExistServlet.javapackage org.csu.myjpetstore.web;import java.io.IOException;import java.io.PrintWriter;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.ser

16、vlet.http.HttpServletResponse;import org.csu.myjpetstore.domain.Account;import org.csu.myjpetstore.service.AccountService;public class UsernameIsExistServlet extends HttpServlet public UsernameIsExistServlet() super();request,request,public void doGet(HttpServletRequest HttpServletResponse response)

17、throws ServletException, IOException doPost(request,response);public void doPost(HttpServletRequest HttpServletResponse response)throws ServletException, IOException String username = request.getParameter(username);Account account = new Account();account.setUsername(username);AccountService service

18、= new AccountService();response.setContentType(text/xml;charset=utf-8);PrintWriter out = response.getWriter();if(service.usernameIsExist(account)out.println(Exist);else out.println(NotExist);out.flush();out.close();public void init() throws ServletException public void destroy() super.destroy();Same

19、PasswordServlet.javapackage org.csu.myjpetstore.web.Ajax;import java.io.IOException;import java.io.PrintWriter;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;public class SamePassw

20、ordServlet extends HttpServlet public SamePasswordServlet() super();request,request,public void doGet(HttpServletRequest HttpServletResponse response)throws ServletException, IOException doPost(request,response);public void doPost(HttpServletRequest HttpServletResponse response)throws ServletExcepti

21、on, IOException String password = request.getParameter(password);String repeatedpassword request.getParameter(repeatedpassword);System.out.println(password+repeatedpassword);response.setContentType(text/xml;charset=utf-8);PrintWriter out = response.getWriter();if(repeatedpassword.equals(password) ou

22、t.println(Yes);else out.println(No);out.flush();out.close();public void init() throws ServletException public void destroy() super.destroy();效果截圖:模塊二：商品查詢模塊核心代碼:原 JSP頁面修改 IncludeTop.jsp:vformn ame=searchFormmethod =posttype =textn ame=keywordsize =20on keyup =test(eve nt);/頁面中的JS代碼:聲明全局變量和XRL面則是在搜這里

23、是響應(yīng)事件的 function 其中包括獲取頁面 Search 模塊中所有的標(biāo)簽 并進(jìn)行了篩選，其中通過 key 的值屏蔽了除了字母之外其余輸入內(nèi)容的合法性， 而且對于方向鍵的向上和向下進(jìn)行了處理， 使得使用鍵盤時也可以獲取提示框中 的內(nèi)容，對重復(fù)的代碼也進(jìn)行了封裝，封裝代碼在下面。上面的函數(shù)是對鍵盤處理功能中重復(fù)代碼的封裝處理，選出應(yīng)修改內(nèi)容后對標(biāo)簽樣式的修改。這里是鼠標(biāo)處理， 使用了和鍵盤處理相同的全局變量使得使用中視覺 效果的同步。實(shí)驗(yàn)效果圖：只輸入 a：鼠標(biāo)或者鍵盤移動下去：模塊三：主頁商品展示模塊核心代碼：原jsp頁面修改Main.jspvdiv id =Mainlmage JS代碼

24、: vstyle * .b margin : 0px; padding : 0px; overflow : auto ; ine0line-height: 20px ;background-color: orange ;padding : 0px15px;ine1line-height: 18px ;background-color: orange ;padding : 0px10px;.w display : none; position : absolute ; right : 10px; bottom : 10px; width : 160px; height : 240px ; ove

25、rflow : hidden ; border : 2px groove #281; cursor : default ; -moz-user-select : none; .t line-height : 20px; height : 20px; width : 160px ; overflow : hidden ; background-color : orange ; color : white ;font-weight : bold ;border-bottom : 1px outset blue ; text-align : center ; .winBody height : 21

26、8px ; width : 160px; overflow-x : hidden ; overflow-y : auto ; border-top : 1px in setblue ; padd ing : 10px;text-indent : 10px ; background-color : white ; .seletcted background-color: gray ; /以下為鼠標(biāo)事件fun cti onbirdshow()var str11 =str11 += AboutBirds;str11 += AV-CB-01:Amaz onParrot AV-SB-02:Fin ch;

27、blockdocument.getElementByld(div2 ).innerHTML = str11;document.getElementByld(div2 ).style.display =fun cti onbirdshowoff()var str12 =;docume nt.getEleme ntByld(div2 ).innerHTML = str12;docume nt.getEleme ntByld(div2 ).style.display =none;fun cti onfishshow()var str21 =;str21 += AboutFish;str21+=FI-

28、FW-01:KoiFI-FW-02:GoldfishFI-SW-01:A ngelfishFI-SW-02:TigerShark;document.getElementByld(div2 ).innerHTML = str21;document.getElementByld(div2 ).style.display =blockfun cti ondogshow()var str31 =;str31 += AboutDogsstr31+=K9-BD-01:BulldogK9-CW-01:ChihuahuaK9-DL-01:Dalmatio nK9-PO-02:PoodleK9-RT-01:Go

29、lde n Retriever K9-RT-02:Labrador Retriever;docume nt.getEleme ntByld(div2 ).innerHTML = str31;docume nt.getEleme ntByld(div2 ).style.display =block;fun cti onreptileshow()var str41 =;str41 += AboutReptiles;str41+= RP-LI-02:lgua naRP-SN-01:Rattles nake;document.getElementByld(div2 ).innerHTML = str4

30、1;document.getElementByld(div2 ).style.display =blockfun cti oncatshow()var str51 =str51 += AboutCats;str51+= FL-DLH-02:PersianFL-DSH-01:Ma nxdocument.getElementByld(div2 ).innerHTML = str51;document.getElementByld(div2 ).style.display =block效果圖:上圖為鼠標(biāo)放在空白處時初始的界面上圖為鼠標(biāo)放在鳥圖案時右下角出現(xiàn)的關(guān)于鳥的一些信息。其余圖案也有相同的效果。

31、三、小組成員分工及實(shí)驗(yàn)體會小組成員分工：這次試驗(yàn)中，第一個用戶登錄相關(guān)模塊由于比較簡單，三個人都做出一份結(jié) 果。第二個搜索模塊由張先凱獨(dú)立完成， 第三個用戶商品展示模塊由胡濤和李靜 濤合作完成。心得體會：通過實(shí)驗(yàn)，我們了解到前端的內(nèi)容比較瑣碎， 需要更加認(rèn)真仔細(xì)， 由于我們基本不開設(shè)前端課程內(nèi)容，而它又是 web 開發(fā)中重要的一部分，需要 我們在平時自學(xué)完成。實(shí)驗(yàn)三 用 Struts 2 重構(gòu) JPetStore一、實(shí)驗(yàn)結(jié)果（一）在用 struts 2 重構(gòu) JPetStore 之后主要有以下一些變化1.如下圖所示，原來的JSP頁面中的標(biāo)簽已經(jīng)被struts2自帶的標(biāo)簽所代替，方 便以后添加輸

32、入驗(yàn)證等功能。2. web.xml 文件中改為 struts 的默認(rèn)攔截器3.原來web文件夾中的servlet已經(jīng)被Action類代替。CatalogAction.java4.struts.xml 配置文件中內(nèi)容interceptorclass =erceptors.CheckoutInterceptorsname=authvinterceptor-refname=auth vaction name=main class =org.csu.myjpetstore.web.AccountActionmethod =gomain v/ act

33、ion vresultname=success /WEB-INF/jsp/catalog/Main.jspv/ result vactionname=categoryViewclass =org.csu.myjpetstore.web.AccountActionmethod =categoryViewvresultname=input /WEB-INF/jsp/catalog/Category.jspv/ result v/ action vactionname=productViewclass =org.csu.myjpetstore.web.AccountActionmethod =pro

34、ductViewvresultname=input /WEB-INF/jsp/catalog/Product.jspv/ result v/ action vaction name=itemView class =org.csu.myjpetstore.web.AccountActionmethod =itemView /WEB-INF/jsp/catalog/Item.jspvactionname=searchProductsclass =org.csu.myjpetstore.web.AccountActionmethod =searchProducts vresult name=inpu

35、t /WEB-INF/jsp/catalog/SearchProducts.jspv/ result v/ action method =goSignonvaction name=signonForm class =org.csu.myjpetstore.web.CatalogActionvresult name=input /WEB-INF/jsp/account/Signon.jspv/ result v/ action vaction name=signoutForm class =org.csu.myjpetstore.web.CatalogActionmethod =goSignou

36、tvresult name=input /WEB-INF/jsp/catalog/Main.jspv/ result vactionname=CheckIsExistclass =org.csu.myjpetstore.web.CatalogActionvresult name=success /WEB-INF/jsp/account/Signon.jspvaction name=goHelp class =org.csu.myjpetstore.web.CatalogActionmethod =goHelp vresult name=input /help.html vactionname=

37、goEditAccountclass =org.csu.myjpetstore.web.CatalogActionmethod =goEditAccount vresult name=input /WEB-INF/jsp/account/EditAccount.jspv/ action v/ result vactionname=EditAccountclass =org.csu.myjpetstore.web.CatalogActionmethod =EditAccount vresult name=success /WEB-INF/jsp/catalog/Main.jspv/ result

38、 v/ action vaction name=goRegisterclass =org.csu.myjpetstore.web.CatalogActionmethod =goRegistervresultname=input /WEB-INF/jsp/account/NewAccount.jspv/ result v/ action vactionname=newAccountclass =org.csu.myjpetstore.web.CatalogActionmethod =newAccountv/ result vresult name=success /WEB-INF/jsp/cat

39、alog/Main.jspv/ action vaction name=cartclass =org.csu.myjpetstore.web.OrderActionmethod =cart vresultname=input /WEB-INF/jsp/cart/Cart.jspv/ result v/ action vaction name=goCart class =org.csu.myjpetstore.web.OrderActionmethod =goCart v/ action vresult name=input /WEB-INF/jsp/cart/Cart.jspv/ result

40、 vaction name=removeCart class =org.csu.myjpetstore.web.OrderActionmethod =removeCartvresult name=input /WEB-INF/jspZcart/Cart.jspv/ result vactionname= updateCartclass =org.csu.myjpetstore.web.OrderActionmethod =updateCartv/ action vresult name=input /WEB-INF/jsp/cart/Cart.jspv/ result vaction name

41、=checkout class =org.csu.myjpetstore.web.OrderActionmethod =checkout vresult name=input /WEB-INF/jsp/order/NewOrderForm.jspvresult name=login /WEB-INF/jsp/account/Signon.jspvinterceptor-ref name=security vactionname=comfirmOrderclass =org.csu.myjpetstore.web.OrderActionmethod =comfirmOrder vresultna

42、me=input /WEB-INF/jsp/order/ConfirmOrder.jspv/ result vresultname=success /WEB-INF/jsp/order/ShippingForm.jspv/ result v/ action vaction name=shipAddress class =org.csu.myjpetstore.web.OrderActionmethod =shipAddressv/ action vresult name=input /WEB-INF/jsp/order/ConfirmOrder.jspv/ result vaction name=submit class =org.csu.myjpetstore.web.OrderActionmethod =submit v/ action vresult name=input /WEB-INF/jsp/order/OrderView.jspv/ r