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

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

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

3、題解決。問(wèn)題3. 在編寫(xiě)orderdaoimpl的過(guò)程中出現(xiàn)了時(shí)間類(lèi)型不匹配的情況解決方法：一直報(bào)類(lèi)型轉(zhuǎn)換錯(cuò)誤的異常，我很奇怪異常中寫(xiě)道必須為date類(lèi)，可是確實(shí)用的date類(lèi)的對(duì)象。后來(lái)通過(guò)上網(wǎng)查找問(wèn)題發(fā)現(xiàn)這是由于pstatement.setdate 需要一個(gè)java.sql.date類(lèi)的對(duì)象。而我傳給它的參數(shù)是一個(gè)java.util.date類(lèi)的對(duì)象，于是我用這個(gè)的語(yǔ)句解決了這個(gè)問(wèn)題：pstatement.setdate(3,new java.sql.date(order.getorderdate().gettime();問(wèn)題4. 如何讀取checkbox中是否勾選信息解決方法：一開(kāi)始我認(rèn)

4、為checkbox返回的是boolean類(lèi)型的值，后來(lái)通過(guò)上網(wǎng)查資料發(fā)現(xiàn)，如果不勾選時(shí)checkbox所對(duì)應(yīng)屬性的值為null，于是我用了這樣的語(yǔ)句判斷是否勾選。boolean ship = request.getparameter(shippingaddressrequired)=null;account.setlistoption(request.getparameter(account.listoption).equals(true) ? true : false);問(wèn)題5. 沒(méi)有找到例子中的合適的檢測(cè)是否登錄的方法解決方法：由于給的例子用了框架等方法，沒(méi)有找到可以用的檢測(cè)是否在登錄狀態(tài)

5、的類(lèi)，于是我自己寫(xiě)了一個(gè)方法。public boolean getaccountbyusernameandpasswordonly(account account) boolean selectresult = false;connection connection = dbutil.getconnection();try preparedstatement pstatement = connection.preparestatement(getaccountbyusernameandpasswordonlysql);pstatement.setstring(1, account.getuse

6、rname();pstatement.setstring(2, account.getpassword();resultset resultset = pstatement.executequery();if (resultset.next() selectresult = true;dbutil.closeresultset(resultset);dbutil.closepreparedstatement(pstatement);dbutil.closeconnection(connection); catch (exception e) e.printstacktrace();return

7、 selectresult;三、小組成員分工組長(zhǎng)：張先凱小組三人均獨(dú)立完成實(shí)驗(yàn)要求內(nèi)容實(shí)驗(yàn)二 用ajax改進(jìn)用戶(hù)體驗(yàn)一、 項(xiàng)目應(yīng)用了ajax技術(shù)的功能模塊以及有無(wú)使用框架。運(yùn)用了ajax技術(shù)的功能模塊：1. 賬號(hào)管理模塊。在新建賬號(hào)和修改賬號(hào)信息頁(yè)面上用ajax技術(shù)進(jìn)行表單驗(yàn)證。包括密碼與二次輸入密碼是否一致，用戶(hù)名是否重復(fù)等等。2.商品查詢(xún)模塊。在首頁(yè)右上角的查詢(xún)商品中增加了自動(dòng)補(bǔ)全功能，并可以用鼠標(biāo)和鍵盤(pán)上線(xiàn)移動(dòng)選中高亮部分，輸入框的內(nèi)容也會(huì)隨著鼠標(biāo)鍵盤(pán)的移動(dòng)而移動(dòng)。3. 主頁(yè)商品展示模塊。在首頁(yè)展示商品的圖片上添加了ajax效果，即當(dāng)鼠標(biāo)移到某個(gè)商品圖片上時(shí)，用懸浮窗動(dòng)態(tài)加載該類(lèi)型商品的

8、信息。三個(gè)模塊中均未使用框架技術(shù)。二、 說(shuō)明應(yīng)用ajax技術(shù)的理由、具體實(shí)現(xiàn)方法和核心源代碼。理由：將整個(gè)頁(yè)面刷新轉(zhuǎn)化為局部刷新功能，改進(jìn)響應(yīng)效果，增強(qiáng)用戶(hù)體驗(yàn)。具體實(shí)現(xiàn)方法：1. 點(diǎn)擊按鈕或者鼠標(biāo)失焦等操作觸發(fā)ajax操作。2. 在js接收傳來(lái)的值，并利用json對(duì)象與服務(wù)器異步交互。在沒(méi)有接收到服務(wù)器的響應(yīng)之前，jsp頁(yè)面做出響應(yīng)的等待的響應(yīng)的反應(yīng)。3. 得到響應(yīng)后刷新相應(yīng)的div或者控件或者顯示加載失敗。核心源代碼：模塊一：賬號(hào)管理模塊newaccount.jspjs代碼：var xmlhttprequest;function createxmlhttprequest()if (wind

9、ow.xmlhttprequest) /非ie瀏覽器xmlhttprequest = new xmlhttprequest();else if (window.activeobject)/ie6以上版本的ie瀏覽器xmlhttprequest = new activeobject(msxml2.xmlhttp);else /ie6及以下版本ie瀏覽器xmlhttprequest = new activeobject(microsoft.xmlhttp);function usernameisexist() var username = document.registerform.usernam

10、e.value;sendrequest(usernameisexist?username= + username);function sendrequest(url) createxmlhttprequest();xmlhttprequest.open(get, url, true);xmlhttprequest.onreadystatechange = processresponse;xmlhttprequest.send(null);function processresponse() if (xmlhttprequest.readystate = 4) if (xmlhttpreques

11、t.status = 200) var responseinfo = xmlhttprequest.responsexml.getelementsbytagname(msg)0.firstchild.data;var div1 = document.getelementbyid(usernamemsg);if (responseinfo = exist) div1.innerhtml = username is unavailable.; else div1.innerhtml = available username;/以下是我自己寫(xiě)的function passwordiscorrect()

12、 var password = document.registerform.password.value;var repeatedpassword = document.registerform.repeatedpassword.value;createxmlhttprequest();xmlhttprequest.open(get, samepassword?password= + password + &repeatedpassword= + repeatedpassword, true);xmlhttprequest.onreadystatechange = processrespons

13、e1;xmlhttprequest.send(null);function processresponse1() if (xmlhttprequest.readystate = 4) if (xmlhttprequest.status = 200) var responseinfo = xmlhttprequest.responsexml.getelementsbytagname(msg)0.firstchild.data;var div2 = document.getelementbyid(passwordmsg);if (responseinfo = yes) div2.innerhtml

14、 = the two passwords are same.; else div2.innerhtml = the two passwords are not the same.;原jsp頁(yè)面修改：user id:$sessionscope.account.usernamenew password:repeat password:servlet：usernameisexistservlet.javapackage org.csu.myjpetstore.web;import java.io.ioexception;import java.io.printwriter;import javax.

15、servlet.servletexception;import javax.servlet.http.httpservlet;import javax.servlet.http.httpservletrequest;import javax.servlet.http.httpservletresponse;import org.csu.myjpetstore.domain.account;import org.csu.myjpetstore.service.accountservice;public class usernameisexistservlet extends httpservle

16、t public usernameisexistservlet() super();public void doget(httpservletrequest request, httpservletresponse response)throws servletexception, ioexception dopost(request,response);public void dopost(httpservletrequest request, httpservletresponse response)throws servletexception, ioexception string u

17、sername = request.getparameter(username);account account = new account();account.setusername(username);accountservice service = new accountservice();response.setcontenttype(text/xml;charset=utf-8);printwriter out = response.getwriter();if(service.usernameisexist(account)out.println(exist);else out.p

18、rintln(notexist);out.flush();out.close();public void init() throws servletexception public void destroy() super.destroy();samepasswordservlet.javapackage org.csu.myjpetstore.web.ajax;import java.io.ioexception;import java.io.printwriter;import javax.servlet.servletexception;import javax.servlet.http

19、.httpservlet;import javax.servlet.http.httpservletrequest;import javax.servlet.http.httpservletresponse;public class samepasswordservlet extends httpservlet public samepasswordservlet() super();public void doget(httpservletrequest request, httpservletresponse response)throws servletexception, ioexce

20、ption dopost(request,response);public void dopost(httpservletrequest request, httpservletresponse response)throws servletexception, ioexception string password = request.getparameter(password);string repeatedpassword = request.getparameter(repeatedpassword);system.out.println(password+repeatedpasswo

21、rd);response.setcontenttype(text/xml;charset=utf-8);printwriter out = response.getwriter();if(repeatedpassword.equals(password)out.println(yes);else out.println(no);out.flush();out.close();public void init() throws servletexception public void destroy() super.destroy(); 效果截圖：模塊二：商品查詢(xún)模塊核心代碼：原jsp頁(yè)面修改

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

23、main.jsp js代碼:* .b margin:0px; padding:0px; overflow:auto; .line0 line-height:20px; background-color:orange; padding:0px 15px; .line1 line-height:18px; background-color:orange; padding:0px 10px; .w display:none;position:absolute; right:10px; bottom:10px; width:160px; height:240px; overflow:hidden; b

24、order: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:218px; width:160px; overflow-x:hidden; overflow-y:au

25、to; border-top:1px inset blue; padding:10px; text-indent:10px; background-color:white; .seletcted background-color:gray;/以下為鼠標(biāo)事件function birdshow()var str11 = ;str11 += aboutbirds;str11 += av-cb-01:amazon parrot av-sb-02: finch;document.getelementbyid(div2).innerhtml = str11;document.getelementbyid(

26、div2).style.display = block;function birdshowoff() var str12 = ; document.getelementbyid(div2).innerhtml = str12;document.getelementbyid(div2).style.display = none;function fishshow()var str21 = ;str21 += aboutfish;str21 += fi-fw-01:koi fi-fw-02:goldfish fi-sw-01:angelfish fi-sw-02:tiger shark;docum

27、ent.getelementbyid(div2).innerhtml = str21;document.getelementbyid(div2).style.display = block;function dogshow()var str31 = ;str31 += aboutdogs;str31 += k9-bd-01:bulldog k9-cw-01:chihuahua k9-dl-01:dalmation k9-po-02:poodle k9-rt-01:golden retriever k9-rt-02:labrador retriever;document.getelementby

28、id(div2).innerhtml = str31;document.getelementbyid(div2).style.display = block;function reptileshow()var str41 = ;str41 += aboutreptiles;str41 += rp-li-02:iguana rp-sn-01:rattlesnake;document.getelementbyid(div2).innerhtml = str41;document.getelementbyid(div2).style.display = block;function catshow(

29、)var str51 = ;str51 += aboutcats;str51 += fl-dlh-02:persian fl-dsh-01:manx;document.getelementbyid(div2).innerhtml = str51;document.getelementbyid(div2).style.display = block;效果圖:上圖為鼠標(biāo)放在空白處時(shí)初始的界面。上圖為鼠標(biāo)放在鳥(niǎo)圖案時(shí)右下角出現(xiàn)的關(guān)于鳥(niǎo)的一些信息。其余圖案也有相同的效果。3、 小組成員分工及實(shí)驗(yàn)體會(huì)小組成員分工：這次試驗(yàn)中，第一個(gè)用戶(hù)登錄相關(guān)模塊由于比較簡(jiǎn)單，三個(gè)人都做出一份結(jié)果。第二個(gè)搜索模塊由張先

30、凱獨(dú)立完成，第三個(gè)用戶(hù)商品展示模塊由胡濤和李靜濤合作完成。心得體會(huì)：通過(guò)實(shí)驗(yàn)，我們了解到前端的內(nèi)容比較瑣碎，需要更加認(rèn)真仔細(xì)，由于我們基本不開(kāi)設(shè)前端課程內(nèi)容，而它又是web開(kāi)發(fā)中重要的一部分，需要我們?cè)谄綍r(shí)自學(xué)完成。實(shí)驗(yàn)三 用struts 2重構(gòu)jpetstore1、 實(shí)驗(yàn)結(jié)果（1） 在用struts 2重構(gòu)jpetstore之后主要有以下一些變化1.如下圖所示，原來(lái)的jsp頁(yè)面中的標(biāo)簽已經(jīng)被struts2自帶的標(biāo)簽所代替，方便以后添加輸入驗(yàn)證等功能。2. web.xml文件中改為struts的默認(rèn)攔截器3. 原來(lái)web文件夾中的servlet已經(jīng)被action類(lèi)代替。catalogactio

31、n.java 4.struts.xml配置文件中內(nèi)容 /web-inf/jsp/catalog/main.jsp/web-inf/jsp/catalog/category.jsp/web-inf/jsp/catalog/product.jsp/web-inf/jsp/catalog/item.jsp/web-inf/jsp/catalog/searchproducts.jsp/web-inf/jsp/account/signon.jsp/web-inf/jsp/catalog/main.jsp/web-inf/jsp/catalog/main.jsp/web-inf/jsp/account/signon.jsp/help.html/web-inf/jsp/account/editaccount.jsp/web-inf/jsp/catalog/main.jsp/web-inf/jsp/account/newaccount.jsp/web-inf/jsp/catalog/main.jsp/web-inf/jsp/cart/cart.jsp/web-inf/jsp/cart/cart.jsp/web-inf/jsp/cart/cart.jsp/web-inf/jsp/cart/cart.jsp/web-inf/jsp/order/ne