[ppt] 購(gòu)物網(wǎng)站開(kāi)發(fā)之購(gòu)物車.ppt

1、第13章 JSP實(shí)例開(kāi)發(fā)2購(gòu)物車,13.2 系統(tǒng)業(yè)務(wù)流程,13.3 數(shù)據(jù)表設(shè)計(jì),13.4 文件結(jié)構(gòu)設(shè)計(jì),13.5 公共模塊設(shè)計(jì),13.1 實(shí)例開(kāi)發(fā)實(shí)質(zhì),13.7 查看購(gòu)物車,13.8 修改商品購(gòu)買數(shù)量,13.9 在購(gòu)物車中移除指定商品,13.10 收銀臺(tái)結(jié)賬,13.6 添加至購(gòu)物車,13.1 實(shí)例開(kāi)發(fā)實(shí)質(zhì),在商場(chǎng)或超市中，人們購(gòu)買很多東西時(shí)，往往要將購(gòu)買的商品放在商場(chǎng)為購(gòu)物者準(zhǔn)備的一種特殊的車子里，這種車子就叫購(gòu)物車。 隨著網(wǎng)絡(luò)的發(fā)展，網(wǎng)上購(gòu)物已經(jīng)成為一種潮流。那么，如何才能保證用戶在網(wǎng)上購(gòu)物時(shí)，也能像在現(xiàn)實(shí)中一樣將希望購(gòu)買的商品“隨身攜帶”呢？在網(wǎng)上商城應(yīng)用中，也包含一個(gè)購(gòu)物車模塊，這個(gè)購(gòu)物

2、車就是一輛虛擬的超市購(gòu)物車，用戶可以通過(guò)購(gòu)物車模塊實(shí)現(xiàn)和現(xiàn)實(shí)購(gòu)物車完全相同的功能，其中包括：將商品添加至購(gòu)物車，查看購(gòu)物車，修改購(gòu)物車中商品數(shù)量，在購(gòu)物車中移除指定商品，結(jié)賬等。 本章設(shè)計(jì)的購(gòu)物車系統(tǒng)采用JSP+Servlet+JDBC整合開(kāi)發(fā)，使用的數(shù)據(jù)庫(kù)為MYSQL5.0。通過(guò)本章學(xué)習(xí)，讀者可以掌握J(rèn)SP、Servlet和JDBC三者的結(jié)合使用，并且了解MYSQL5.0的實(shí)際項(xiàng)目中的應(yīng)用，更加熟練的應(yīng)用session開(kāi)發(fā)具體項(xiàng)目。,返回,系統(tǒng)的業(yè)務(wù)流程如圖所示：,13.2 系統(tǒng)業(yè)務(wù)流程,返回,本系統(tǒng)中使用的數(shù)據(jù)表分別為用戶表，商品表，用戶訂單表，用戶 訂單商品表。數(shù)據(jù)表樹(shù)形結(jié)構(gòu)圖如圖所示,

3、13.3 數(shù)據(jù)表設(shè)計(jì),返回,13.4 文件結(jié)構(gòu)設(shè)計(jì)（1）,本系統(tǒng)中用于存放商品圖片的文件夾和存放類的文件夾的文件結(jié)構(gòu)圖如圖所示：,13.4 文件結(jié)構(gòu)設(shè)計(jì)（2）,用于存放工程信息的文件夾和工程中JSP頁(yè)面文件的文件結(jié)構(gòu)圖如圖所示：,返回,13.5 公共模塊設(shè)計(jì),13.5.2 編碼轉(zhuǎn)換類設(shè)計(jì),13.5.3 交易流水號(hào)生成類設(shè)計(jì),13.5.4 系統(tǒng)配置,13.5.1 數(shù)據(jù)庫(kù)連接類設(shè)計(jì),返回,數(shù)據(jù)庫(kù)連接類設(shè)計(jì),本系統(tǒng)使用的數(shù)據(jù)庫(kù)為MySQL Server 5.0。將該數(shù)據(jù)庫(kù)的驅(qū)動(dòng)類庫(kù)安裝到系統(tǒng)后就可以編寫數(shù)據(jù)庫(kù)連接類，在數(shù)據(jù)庫(kù)連接類DBConnector.java中新建返回值為java.sql.Con

4、nection類型的方法getConnection，該方法用于返回?cái)?shù)據(jù)庫(kù)連接。,首先需要在此方法中定義幾個(gè)變量，這些變量用于得到數(shù)據(jù)庫(kù)的用戶名，密碼和數(shù)據(jù)庫(kù)連接URL，代碼如下：,String user = root;/用戶名變量 String psw = 111;/密碼變量 String url = jdbc:mysql:/localhost:3306/shoppingcart?user= + user+ /數(shù)據(jù)庫(kù)連接URL,定義Connection類型變量conn，同時(shí)加載數(shù)據(jù)驅(qū)動(dòng)，使用DriverManager 的getConnection()方法初始化變量conn，同時(shí)將其返回，代碼如

5、下：,Class.forName(org.gjt.mm.mysql.Driver).newInstance();/加載數(shù)據(jù)庫(kù)驅(qū)動(dòng) Connection conn = DriverManager.getConnection(url);/初始化數(shù)據(jù)庫(kù)連接變量 return conn;,（詳細(xì)代碼參見(jiàn)教材）,返回,public static String toChinese(String strvalue) try if (strvalue = null) return ;/如果參數(shù)strvalue為空則返回空串 else strvalue = new String(strvalue.getByte

6、s(ISO8859_1), GBK);/將編碼轉(zhuǎn)換為GBK return strvalue;/將轉(zhuǎn)換后的字符串返回 catch (Exception e) return ; e.printStackTrace(); /捕獲異常，返回空串并輸出錯(cuò)誤信息 ,編碼轉(zhuǎn)換類設(shè)計(jì),為了讓JSP頁(yè)面中可以顯示漢語(yǔ)，我們需要改變其編碼集為GBK，這時(shí)就會(huì)產(chǎn)生問(wèn)題：Servlet默認(rèn)處理的編碼集為ISO8859_1，但是頁(yè)面中所傳遞數(shù)據(jù)的編碼集卻為GBK，此時(shí)就會(huì)出現(xiàn)傳遞數(shù)據(jù)無(wú)法被Servlet識(shí)別的情況。為處理這個(gè)問(wèn)題，我們需要在公共模塊中加入用于處理編碼轉(zhuǎn)換的類“Chinese.java”，該類中的方法to

7、Chinese()將編碼轉(zhuǎn)換后的字符串返回。主要代碼如下：,返回,交易流水號(hào)生成類設(shè)計(jì),用戶進(jìn)行結(jié)賬時(shí)，需要將其賬單儲(chǔ)存到數(shù)據(jù)庫(kù)中，同時(shí)對(duì)該交易生成一個(gè)流水號(hào)以便日后查詢。這個(gè)流水號(hào)由交易的日期時(shí)間以及用戶的id組成。類“CodeCreator.java”中的方法createAccountcode()返回交易流水號(hào)，該方法代碼如下：,public String createAccountcode(Integer userid) SimpleDateFormat sdf = new SimpleDateFormat(yyyyMMddHHmmss);/設(shè)置日期格式 String accountCo

8、de = sdf.format(new Date().toString();/得到相應(yīng)格式的當(dāng)前日期 if (userid 10) /如果id為個(gè)位數(shù)則將其轉(zhuǎn)換為字符串時(shí)在前邊加上兩個(gè)0 accountCode = accountCode + 00 + userid.toString(); else if (userid 100) /如果id為十位數(shù)則將其轉(zhuǎn)換為字符串時(shí)在前邊加上一個(gè)0 accountCode = accountCode + 0 + userid.toString(); else /如果id為百位數(shù)則直接將其轉(zhuǎn)換為字符串 accountCode = accountCode +

9、userid.toString(); return accountCode;/返回交易流水號(hào)字符串 ,例如，當(dāng)前日期為2008年12月4日，時(shí)間為9點(diǎn)53分28秒，此時(shí)調(diào)用該方法并傳入?yún)?shù)14作為用戶id，會(huì)返回字符串：20081204095328014。,返回,系統(tǒng)配置,本系統(tǒng)采用Servlet和JSP整合開(kāi)發(fā)，對(duì)于Servlet程序，需要在“web.xml”文件中對(duì)其進(jìn)行相應(yīng)配置，例如：, UserinfoController sunyang.webtier.UserinfoController UserinfoController /user.do ,（詳細(xì)代碼參見(jiàn)教材）,返回,13.6

10、 添加至購(gòu)物車,13.6.2 添加至購(gòu)物車模塊技術(shù)分析,13.6.3 添加至購(gòu)物車模塊實(shí)現(xiàn)過(guò)程,13.6.1 添加至購(gòu)物車模塊概述,返回,添加至購(gòu)物車模塊概述,商品單查頁(yè)面除了可以查看商品的具體信息，還可以完成將商品加入購(gòu)物車的功能。單查商品頁(yè)面如圖所示：,單擊圖中的“加入購(gòu)物車”按鈕即可將商品加入購(gòu)物車，成功添加至購(gòu)物車的頁(yè)面如圖所示。,返回,添加至購(gòu)物車模塊技術(shù)分析,將商品添加至購(gòu)物車時(shí)，按照購(gòu)物車中是否已經(jīng)存在當(dāng)前商品分為以下兩種情況：,當(dāng)前商品不在購(gòu)物車中時(shí)，直接將當(dāng)前商品放入購(gòu)物車中。 當(dāng)前商品在購(gòu)物車中時(shí)，將當(dāng)前商品在購(gòu)物車中的數(shù)量加1。,如圖所示：,返回,添加至購(gòu)物車模塊實(shí)現(xiàn)過(guò)程

11、,1創(chuàng)建類Shoppingcart.java，其通過(guò)屬性對(duì)象保存購(gòu)物車中的商品信息。具有的變量如下：,2創(chuàng)建類CartController.java，其中的add()方法處理添加至購(gòu)物車請(qǐng)求。,3. 創(chuàng)建頁(yè)面addSCSuccess.jsp，其中顯示成功信息，并加入了繼續(xù)購(gòu)物和查看購(gòu)物車鏈接,private Integer id;/商品id private String goodsName;/商品名稱 private float price;/商品價(jià)格 private Integer number;/購(gòu)物車中商品數(shù)量,（以上代碼參見(jiàn)教材）,返回,13.7 查看購(gòu)物車,13.7.2 查看購(gòu)物車模

12、塊技術(shù)分析,13.7.3 查看購(gòu)物車模塊實(shí)現(xiàn)過(guò)程,13.7.1 查看購(gòu)物車模塊概述,返回,查看購(gòu)物車模塊概述,為了便于用戶隨時(shí)查看他所購(gòu)買的商品，加入了查看購(gòu)物車頁(yè)面。通過(guò)該頁(yè)面用戶可以查看購(gòu)物車中的所有商品信息，包括：商品名稱，價(jià)格，數(shù)量，價(jià)格小計(jì)及當(dāng)前消費(fèi)總金額，購(gòu)物車頁(yè)面如圖所示：,返回,查看購(gòu)物車模塊技術(shù)分析,查看購(gòu)物車主要是將Session中儲(chǔ)存的購(gòu)物車信息顯示到頁(yè)面，首先需要進(jìn)行判斷：是否當(dāng)前用戶購(gòu)物車中存在商品，如果存在則顯示商品信息，否則提示用戶尚未購(gòu)物，并給出到商品全查頁(yè)面的鏈接.查看購(gòu)物車流程如圖所示：,返回,查看購(gòu)物車模塊實(shí)現(xiàn)過(guò)程,查看購(gòu)物車時(shí)，將session中的購(gòu)物車

13、信息取出，判斷是否為空，如果為空，給出用戶尚未購(gòu)物的提示，否則將用戶購(gòu)物車中所有商品的名稱、價(jià)格、數(shù)量以及價(jià)格小計(jì)顯示在頁(yè)面中，并對(duì)每個(gè)商品加入了刪除鏈接，同時(shí)計(jì)算用戶購(gòu)物車中所有商品的總價(jià)格，加入修改數(shù)量按鈕并且設(shè)置清空購(gòu)物車、結(jié)賬、返回繼續(xù)購(gòu)物的鏈接。, 您尚未購(gòu)買任何商品，【單擊這里進(jìn)行購(gòu)物】 您的購(gòu)物車中商品如下： ,（詳細(xì)代碼參見(jiàn)教材）,返回,13.8 修改商品購(gòu)買數(shù)量,13.8.2 修改商品購(gòu)買數(shù)量模塊技術(shù)分析,13.8.3 修改商品購(gòu)買數(shù)量模塊實(shí)現(xiàn)過(guò)程,13.8.1 修改商品購(gòu)買數(shù)量模塊概述,返回,修改商品購(gòu)買數(shù)量模塊概述,用戶在查看購(gòu)物車頁(yè)面中對(duì)其中商品數(shù)量文本框進(jìn)行修改后，單

14、擊“修改數(shù)量”按鈕，即可修改其數(shù)量，數(shù)量修改完畢后會(huì)返回到查看購(gòu)物車頁(yè)面。此時(shí)購(gòu)物車中的商品數(shù)量，商品價(jià)格小計(jì)，和購(gòu)物車中商品總價(jià)格都會(huì)發(fā)生相應(yīng)的變化。,返回,修改商品購(gòu)買數(shù)量模塊技術(shù)分析,修改購(gòu)買數(shù)量是需要通過(guò)JavaScript在頁(yè)面中對(duì)文本框輸入的內(nèi)容進(jìn)行驗(yàn)證，如果用戶輸入的內(nèi)容不符合規(guī)定時(shí)會(huì)給出錯(cuò)誤提示，并禁止用戶單擊“修改數(shù)量”按鈕。JavaScript驗(yàn)證代碼如下：,function numAbove(temp) var numStr = /1-9+(0-9)0,3$/;/通過(guò)正則表達(dá)式定義字符串格式 if(!numStr.test(temp.value)/驗(yàn)證文本框中格式是否符合

15、規(guī)定 alert(商品數(shù)量必須為小于10000的正整數(shù)！); /如果符合規(guī)定給出警告 temp.focus();/將交點(diǎn)放在文本框 document.getElementById(submit).disabled=true;/將提交按鈕設(shè)為不可用 return false; else /符合規(guī)定則設(shè)置提交按鈕為可用 document.getElementById(submit).disabled=false; ,返回,修改商品購(gòu)買數(shù)量模塊實(shí)現(xiàn)過(guò)程,用戶單擊“修改數(shù)量”按鈕后頁(yè)面發(fā)出“cart.do?flag=1”請(qǐng)求，該請(qǐng)求由類“CartController.java”的changeNum()

16、方法進(jìn)行處理。代碼如下：,public void changeNum(HttpServletRequest request,HttpServletResponse response) List lsc = (List) request.getSession() .getAttribute(Shoppingcart);/得到購(gòu)物車Session try String number = request.getParameterValues(num);/使用數(shù)組獲取頁(yè)面?zhèn)鬟f參數(shù) List listSc = new ArrayList(); for (int i = 0; i lsc.size();

17、i+) /循環(huán)遍歷購(gòu)物車中商品，逐一修改商品數(shù)量 lsc.get(i).setNumber(Integer.parseInt(numberi); listSc.add(lsc.get(i);/將修改后的商品加入新購(gòu)物車List中 request.getSession().setAttribute(Shoppingcart, listSc);/重新設(shè)置購(gòu)物車Session的值 RequestDispatcher rd = request.getRequestDispatcher(selectSC.jsp); rd.forward(request, response);/將返回頁(yè)面重定向到sele

18、ctSC.jsp catch (Exception e) /捕獲異常 e.printStackTrace();/將異常輸出到控制臺(tái) ,返回,13.9 在購(gòu)物車中移除指定商品,13.9.2 移除商品模塊技術(shù)分析,13.9.3 移除商品模塊實(shí)現(xiàn)過(guò)程,13.9.1 移除商品模塊概述,返回,移除商品模塊概述,商品刪除后，查看購(gòu)物車中商品信息時(shí)不會(huì)將其顯示。同時(shí)，購(gòu)物車中商品總價(jià)格也會(huì)將所刪除商品的價(jià)格減掉。,返回,移除商品模塊技術(shù)分析,在購(gòu)物車中移除指定商品時(shí)，需要將購(gòu)物車中所有商品遍歷，依次比較是否是需要?jiǎng)h除的商品，如果需要?jiǎng)h除此商品，則調(diào)用List中的remove()方法將商品在購(gòu)物車List中刪

19、除，然后將刪除后的購(gòu)物車重新存入session中。remove()方法說(shuō)明如下：,boolean remove(Object arg0)：,刪除List類型變量中的某一元素，其參數(shù)為L(zhǎng)ist變量中的元素，如果該元素在List對(duì)象中則將其刪除，并返回true，否則返回false。,返回,移除商品模塊實(shí)現(xiàn)過(guò)程,用戶在查看購(gòu)物車頁(yè)面中單擊“刪除商品”鏈接會(huì)發(fā)送“cart.do?flag=3”請(qǐng)求同時(shí)將當(dāng)前商品的id作為參數(shù)傳遞給服務(wù)器。服務(wù)器端使用“CartController.java”類中的removeCart()方法處理該請(qǐng)求，代碼如下：,public void removeCart(Http

20、ServletRequest request, HttpServletResponse response) Integer id = Integer.parseInt(request.getParameter(id);/得到請(qǐng)求傳遞參數(shù)id List lsc = (List) request.getSession() .getAttribute(Shoppingcart);/得到購(gòu)物車List for (int i = 0; i lsc.size(); i+) /遍歷購(gòu)物車中所有商品 if (lsc.get(i).getId() = id) /如果商品是需要?jiǎng)h除的商品 lsc.remove(l

21、sc.get(i);/將商品從購(gòu)物車List中刪除 request.getSession().setAttribute(Shoppingcart, lsc);/重新將購(gòu)物車List放入Session中 RequestDispatcher rd = request.getRequestDispatcher(selectSC.jsp); try rd.forward(request, response);/重定向返回頁(yè)面 catch (Exception e) /捕獲異常 e.printStackTrace();/輸出異常 ,返回,13.10 收銀臺(tái)結(jié)賬,13.10.2 結(jié)賬模塊技術(shù)分析,13.1

22、0.3 結(jié)賬模塊實(shí)現(xiàn)過(guò)程,13.10.1 結(jié)賬模塊概述,返回,結(jié)賬模塊概述,返回,結(jié)賬模塊技術(shù)分析,打開(kāi)結(jié)賬頁(yè)面時(shí)，由系統(tǒng)自動(dòng)生成的訂單號(hào)就已經(jīng)顯示在頁(yè)面中了，也就是說(shuō)查看購(gòu)物車頁(yè)面中的“結(jié)賬”鏈接并不是指向一個(gè)頁(yè)面，而是一個(gè)請(qǐng)求，該請(qǐng)求會(huì)調(diào)用公共類“CodeCreator.java”中的方法得到訂單號(hào)，然后重定向到訂單頁(yè)面。 用戶單擊“結(jié)賬”按鈕后會(huì)將訂單信息和用戶當(dāng)前購(gòu)物車中的商品信息儲(chǔ)存到數(shù)據(jù)庫(kù)中，同時(shí)將用戶session及其購(gòu)物車session清除。,返回,結(jié)賬模塊實(shí)現(xiàn)過(guò)程（1）,1.用戶單擊查看購(gòu)物車頁(yè)面中的“結(jié)賬”鏈接后發(fā)出“account.do?flag=0”請(qǐng)求，該請(qǐng)求由類“AccountController.java”中的getAccount()方法處理。代碼如下：