第13章__JSP实例开发2—购物车.ppt

1、第13章 JSP实例开发2购物车,13.2 系统业务流程,13.3 数据表设计,13.4 文件结构设计,13.5 公共模块设计,13.1 实例开发实质,13.7 查看购物车,13.8 修改商品购买数量,13.9 在购物车中移除指定商品,13.10 收银台结账,13.6 添加至购物车,13.1 实例开发实质,在商场或超市中，人们购买很多东西时，往往要将购买的商品放在商场为购物者准备的一种特殊的车子里，这种车子就叫购物车。 随着网络的发展，网上购物已经成为一种潮流。那么，如何才能保证用户在网上购物时，也能像在现实中一样将希望购买的商品“随身携带”呢？在网上商城应用中，也包含一个购物车模块，这个购物

2、车就是一辆虚拟的超市购物车，用户可以通过购物车模块实现和现实购物车完全相同的功能，其中包括：将商品添加至购物车，查看购物车，修改购物车中商品数量，在购物车中移除指定商品，结账等。 本章设计的购物车系统采用JSP+Servlet+JDBC整合开发，使用的数据库为MYSQL5.0。通过本章学习，读者可以掌握JSP、Servlet和JDBC三者的结合使用，并且了解MYSQL5.0的实际项目中的应用，更加熟练的应用session开发具体项目。,返回,系统的业务流程如图所示：,13.2 系统业务流程,返回,本系统中使用的数据表分别为用户表，商品表，用户订单表，用户 订单商品表。数据表树形结构图如图所示,

3、13.3 数据表设计,返回,13.4 文件结构设计（1）,本系统中用于存放商品图片的文件夹和存放类的文件夹的文件结构图如图所示：,13.4 文件结构设计（2）,用于存放工程信息的文件夹和工程中JSP页面文件的文件结构图如图所示：,返回,13.5 公共模块设计,13.5.2 编码转换类设计,13.5.3 交易流水号生成类设计,13.5.4 系统配置,13.5.1 数据库连接类设计,返回,数据库连接类设计,本系统使用的数据库为MySQL Server 5.0。将该数据库的驱动类库安装到系统后就可以编写数据库连接类，在数据库连接类DBConnector.java中新建返回值为java.sql.Con

4、nection类型的方法getConnection，该方法用于返回数据库连接。,首先需要在此方法中定义几个变量，这些变量用于得到数据库的用户名，密码和数据库连接URL，代码如下：,String user = root;/用户名变量 String psw = 111;/密码变量 String url = jdbc:mysql:/localhost:3306/shoppingcart?user= + user+ /数据库连接URL,定义Connection类型变量conn，同时加载数据驱动，使用DriverManager 的getConnection()方法初始化变量conn，同时将其返回，代码如

5、下：,Class.forName(org.gjt.mm.mysql.Driver).newInstance();/加载数据库驱动 Connection conn = DriverManager.getConnection(url);/初始化数据库连接变量 return conn;,（详细代码参见教材）,返回,public static String toChinese(String strvalue) try if (strvalue = null) return ;/如果参数strvalue为空则返回空串 else strvalue = new String(strvalue.getByte

6、s(ISO8859_1), GBK);/将编码转换为GBK return strvalue;/将转换后的字符串返回 catch (Exception e) return ; e.printStackTrace(); /捕获异常，返回空串并输出错误信息 ,编码转换类设计,为了让JSP页面中可以显示汉语，我们需要改变其编码集为GBK，这时就会产生问题：Servlet默认处理的编码集为ISO8859_1，但是页面中所传递数据的编码集却为GBK，此时就会出现传递数据无法被Servlet识别的情况。为处理这个问题，我们需要在公共模块中加入用于处理编码转换的类“Chinese.java”，该类中的方法to

7、Chinese()将编码转换后的字符串返回。主要代码如下：,返回,交易流水号生成类设计,用户进行结账时，需要将其账单储存到数据库中，同时对该交易生成一个流水号以便日后查询。这个流水号由交易的日期时间以及用户的id组成。类“CodeCreator.java”中的方法createAccountcode()返回交易流水号，该方法代码如下：,public String createAccountcode(Integer userid) SimpleDateFormat sdf = new SimpleDateFormat(yyyyMMddHHmmss);/设置日期格式 String accountCo

8、de = sdf.format(new Date().toString();/得到相应格式的当前日期 if (userid 10) /如果id为个位数则将其转换为字符串时在前边加上两个0 accountCode = accountCode + 00 + userid.toString(); else if (userid 100) /如果id为十位数则将其转换为字符串时在前边加上一个0 accountCode = accountCode + 0 + userid.toString(); else /如果id为百位数则直接将其转换为字符串 accountCode = accountCode +

9、userid.toString(); return accountCode;/返回交易流水号字符串 ,例如，当前日期为2008年12月4日，时间为9点53分28秒，此时调用该方法并传入参数14作为用户id，会返回字符串：20081204095328014。,返回,系统配置,本系统采用Servlet和JSP整合开发，对于Servlet程序，需要在“web.xml”文件中对其进行相应配置，例如：, UserinfoController sunyang.webtier.UserinfoController UserinfoController /user.do ,（详细代码参见教材）,返回,13.6

10、 添加至购物车,13.6.2 添加至购物车模块技术分析,13.6.3 添加至购物车模块实现过程,13.6.1 添加至购物车模块概述,返回,添加至购物车模块概述,商品单查页面除了可以查看商品的具体信息，还可以完成将商品加入购物车的功能。单查商品页面如图所示：,单击图中的“加入购物车”按钮即可将商品加入购物车，成功添加至购物车的页面如图所示。,返回,添加至购物车模块技术分析,将商品添加至购物车时，按照购物车中是否已经存在当前商品分为以下两种情况：,当前商品不在购物车中时，直接将当前商品放入购物车中。 当前商品在购物车中时，将当前商品在购物车中的数量加1。,如图所示：,返回,添加至购物车模块实现过程

11、,1创建类Shoppingcart.java，其通过属性对象保存购物车中的商品信息。具有的变量如下：,2创建类CartController.java，其中的add()方法处理添加至购物车请求。,3. 创建页面addSCSuccess.jsp，其中显示成功信息，并加入了继续购物和查看购物车链接,private Integer id;/商品id private String goodsName;/商品名称 private float price;/商品价格 private Integer number;/购物车中商品数量,（以上代码参见教材）,返回,13.7 查看购物车,13.7.2 查看购物车模

12、块技术分析,13.7.3 查看购物车模块实现过程,13.7.1 查看购物车模块概述,返回,查看购物车模块概述,为了便于用户随时查看他所购买的商品，加入了查看购物车页面。通过该页面用户可以查看购物车中的所有商品信息，包括：商品名称，价格，数量，价格小计及当前消费总金额，购物车页面如图所示：,返回,查看购物车模块技术分析,查看购物车主要是将Session中储存的购物车信息显示到页面，首先需要进行判断：是否当前用户购物车中存在商品，如果存在则显示商品信息，否则提示用户尚未购物，并给出到商品全查页面的链接.查看购物车流程如图所示：,返回,查看购物车模块实现过程,查看购物车时，将session中的购物车

13、信息取出，判断是否为空，如果为空，给出用户尚未购物的提示，否则将用户购物车中所有商品的名称、价格、数量以及价格小计显示在页面中，并对每个商品加入了删除链接，同时计算用户购物车中所有商品的总价格，加入修改数量按钮并且设置清空购物车、结账、返回继续购物的链接。, 您尚未购买任何商品，【单击这里进行购物】 您的购物车中商品如下： ,（详细代码参见教材）,返回,13.8 修改商品购买数量,13.8.2 修改商品购买数量模块技术分析,13.8.3 修改商品购买数量模块实现过程,13.8.1 修改商品购买数量模块概述,返回,修改商品购买数量模块概述,用户在查看购物车页面中对其中商品数量文本框进行修改后，单

14、击“修改数量”按钮，即可修改其数量，数量修改完毕后会返回到查看购物车页面。此时购物车中的商品数量，商品价格小计，和购物车中商品总价格都会发生相应的变化。,返回,修改商品购买数量模块技术分析,修改购买数量是需要通过JavaScript在页面中对文本框输入的内容进行验证，如果用户输入的内容不符合规定时会给出错误提示，并禁止用户单击“修改数量”按钮。JavaScript验证代码如下：,function numAbove(temp) var numStr = /1-9+(0-9)0,3$/;/通过正则表达式定义字符串格式 if(!numStr.test(temp.value)/验证文本框中格式是否符合

15、规定 alert(商品数量必须为小于10000的正整数！); /如果符合规定给出警告 temp.focus();/将交点放在文本框 document.getElementById(submit).disabled=true;/将提交按钮设为不可用 return false; else /符合规定则设置提交按钮为可用 document.getElementById(submit).disabled=false; ,返回,修改商品购买数量模块实现过程,用户单击“修改数量”按钮后页面发出“cart.do?flag=1”请求，该请求由类“CartController.java”的changeNum()

16、方法进行处理。代码如下：,public void changeNum(HttpServletRequest request,HttpServletResponse response) List lsc = (List) request.getSession() .getAttribute(Shoppingcart);/得到购物车Session try String number = request.getParameterValues(num);/使用数组获取页面传递参数 List listSc = new ArrayList(); for (int i = 0; i lsc.size();

17、i+) /循环遍历购物车中商品，逐一修改商品数量 lsc.get(i).setNumber(Integer.parseInt(numberi); listSc.add(lsc.get(i);/将修改后的商品加入新购物车List中 request.getSession().setAttribute(Shoppingcart, listSc);/重新设置购物车Session的值 RequestDispatcher rd = request.getRequestDispatcher(selectSC.jsp); rd.forward(request, response);/将返回页面重定向到sele

18、ctSC.jsp catch (Exception e) /捕获异常 e.printStackTrace();/将异常输出到控制台 ,返回,13.9 在购物车中移除指定商品,13.9.2 移除商品模块技术分析,13.9.3 移除商品模块实现过程,13.9.1 移除商品模块概述,返回,移除商品模块概述,商品删除后，查看购物车中商品信息时不会将其显示。同时，购物车中商品总价格也会将所删除商品的价格减掉。,返回,移除商品模块技术分析,在购物车中移除指定商品时，需要将购物车中所有商品遍历，依次比较是否是需要删除的商品，如果需要删除此商品，则调用List中的remove()方法将商品在购物车List中删

19、除，然后将删除后的购物车重新存入session中。remove()方法说明如下：,boolean remove(Object arg0)：,删除List类型变量中的某一元素，其参数为List变量中的元素，如果该元素在List对象中则将其删除，并返回true，否则返回false。,返回,移除商品模块实现过程,用户在查看购物车页面中单击“删除商品”链接会发送“cart.do?flag=3”请求同时将当前商品的id作为参数传递给服务器。服务器端使用“CartController.java”类中的removeCart()方法处理该请求，代码如下：,public void removeCart(Http

20、ServletRequest request, HttpServletResponse response) Integer id = Integer.parseInt(request.getParameter(id);/得到请求传递参数id List lsc = (List) request.getSession() .getAttribute(Shoppingcart);/得到购物车List for (int i = 0; i lsc.size(); i+) /遍历购物车中所有商品 if (lsc.get(i).getId() = id) /如果商品是需要删除的商品 lsc.remove(l

21、sc.get(i);/将商品从购物车List中删除 request.getSession().setAttribute(Shoppingcart, lsc);/重新将购物车List放入Session中 RequestDispatcher rd = request.getRequestDispatcher(selectSC.jsp); try rd.forward(request, response);/重定向返回页面 catch (Exception e) /捕获异常 e.printStackTrace();/输出异常 ,返回,13.10 收银台结账,13.10.2 结账模块技术分析,13.1

22、0.3 结账模块实现过程,13.10.1 结账模块概述,返回,结账模块概述,返回,结账模块技术分析,打开结账页面时，由系统自动生成的订单号就已经显示在页面中了，也就是说查看购物车页面中的“结账”链接并不是指向一个页面，而是一个请求，该请求会调用公共类“CodeCreator.java”中的方法得到订单号，然后重定向到订单页面。 用户单击“结账”按钮后会将订单信息和用户当前购物车中的商品信息储存到数据库中，同时将用户session及其购物车session清除。,返回,结账模块实现过程（1）,1.用户单击查看购物车页面中的“结账”链接后发出“account.do?flag=0”请求，该请求由类“AccountController.java”中的getAccount()方法处理。代码如下：