Java遇见HTML——JSP篇之商品浏览记录的实现

一、项目总体介绍

使用Cookie实现商品浏览记录。

要实现这个程序采取的是Model1(Jsp+JavaBean)架构实现,具体步骤:

  • 首先要有个数据库,商品表,操作数据库的一个类DBHelper类
  • 创建实体类(与数据库表一一对应)
  • 创建业务逻辑类(DAO)
  • 创建页面层

二、DBHelper类设计

 1 package util;
 2 
 3 import java.sql.Connection;  4 import java.sql.DriverManager;  5  6 public class DBHelper {  7  8 private static final String driver = "com.mysql.jdbc.Driver"; //数据库驱动  9 //连接数据库的URL地址 10 private static final String url="jdbc:mysql://localhost:3306/shopping?useUnicode=true&characterEncoding=UTF-8"; 11 private static final String username="root";//数据库的用户名 12 private static final String password="root";//数据库的密码 13 14 private static Connection conn=null; 15 16 //静态代码块负责加载驱动 17 static 18  { 19 try 20  { 21  Class.forName(driver); 22  } 23 catch(Exception ex) 24  { 25  ex.printStackTrace(); 26  } 27  } 28 29 //单例模式返回数据库连接对象 30 public static Connection getConnection() throws Exception 31  { 32 if(conn==null)//连接为空 33  { 34 conn = DriverManager.getConnection(url, username, password); 35 return conn; 36  } 37 return conn;//连接不为空,说明这个conn曾经被实例化过。被实例化也是通过DriverManager实例化了。 38 //由于这是单例模式,意味着这个连接对象在整个服务中只有一份拷贝 39  } 40 41 //测试DBHelper类 42 public static void main(String[] args) { 43 try 44  { 45 Connection conn = DBHelper.getConnection(); 46 if(conn!=null) 47  { 48 System.out.println("数据库连接正常!"); 49  } 50 else 51  { 52 System.out.println("数据库连接异常!"); 53  } 54  } 55 catch(Exception ex) 56  { 57  ex.printStackTrace(); 58  } 59 60  } 61 }

三、商品实体类设计

数据库shopping中items表:

对应的实体类:

 1 package entity;
 2 
 3 //商品类  4 public class Items {  5  6 private int id; // 商品编号  7 private String name; // 商品名称  8 private String city; // 产地  9 private int price; // 价格 10 private int number; // 库存 11 private String picture; // 商品图片 12 13 public int getId() { 14 return id; 15  } 16 17 public void setId(int id) { 18 this.id = id; 19  } 20 21 public String getName() { 22 return name; 23  } 24 25 public void setName(String name) { 26 this.name = name; 27  } 28 29 public String getCity() { 30 return city; 31  } 32 33 public void setCity(String city) { 34 this.city = city; 35  } 36 37 public int getPrice() { 38 return price; 39  } 40 41 public void setPrice(int price) { 42 this.price = price; 43  } 44 45 public int getNumber() { 46 return number; 47  } 48 49 public void setNumber(int number) { 50 this.number = number; 51  } 52 53 public String getPicture() { 54 return picture; 55  } 56 57 public void setPicture(String picture) { 58 this.picture = picture; 59  } 60 61 }

四、获取所有商品资料方法的实现

 1 package dao;
 2 
 3 import java.sql.Connection;
 4 import java.sql.PreparedStatement;
 5 import java.sql.ResultSet;
 6 import java.util.ArrayList;
 7 
 8 import util.DBHelper;
 9 
10 import entity.Items;
11 
12 //商品的业务逻辑类
13 public class ItemsDAO {
14 
15     // 获得所有的商品信息
16     public ArrayList<Items> getAllItems() {
17         Connection conn = null;
18         PreparedStatement stmt = null;
19         ResultSet rs = null;
20         ArrayList<Items> list = new ArrayList<Items>(); // 商品集合
21         try {
22             conn = DBHelper.getConnection();
23             String sql = "select * from items;"; // SQL语句
24             stmt = conn.prepareStatement(sql);
25             rs = stmt.executeQuery();
26             while (rs.next()) {
27                 Items item = new Items();
28                 item.setId(rs.getInt("id"));
29                 item.setName(rs.getString("name"));
30                 item.setCity(rs.getString("city"));
31                 item.setNumber(rs.getInt("number"));
32                 item.setPrice(rs.getInt("price"));
33                 item.setPicture(rs.getString("picture"));
34                 list.add(item);// 每次遍历时把一个商品加入集合
35             }
36             return list; // 返回集合。
37         } catch (Exception ex) {
38             ex.printStackTrace();
39             return null;
40         } finally {
41             //finally释放资源(从小到大释放资源rs,stmt。注意连接对象conn不要释放,因为它是单例模式,一旦释放了,后面的方法就没法使用了)
42             // 释放数据集对象
43             if (rs != null) {
44                 try {
45                     rs.close();//这个地方会抛出异常
46                     rs = null;
47                 } catch (Exception ex) {
48                     ex.printStackTrace();
49                 }
50             }
51             // 释放语句对象
52             if (stmt != null) {
53                 try {
54                     stmt.close();
55                     stmt = null;
56                 } catch (Exception ex) {
57                     ex.printStackTrace();
58                 }
59             }
60         }
61 
62     }
63 
64 }

五、所有商品信息显示

 1 <%@ page language="java" import="java.util.*" contentType="text/html; charset=utf-8"%>
 2 <%@ page import="entity.Items"%>
 3 <%@ page import="dao.ItemsDAO"%>
 4 <%
 5 String path = request.getContextPath();
 6 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
 7 %>
 8 
 9 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
10 <html>
11   <head>
12     <base href="<%=basePath%>">
13     
14     <title>My JSP 'index.jsp' starting page</title>
15     <meta http-equiv="pragma" content="no-cache">
16     <meta http-equiv="cache-control" content="no-cache">
17     <meta http-equiv="expires" content="0">    
18     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
19     <meta http-equiv="description" content="This is my page">
20     <!--
21     <link rel="stylesheet" type="text/css" href="styles.css">
22     -->
23     <style type="text/css">
24        div{
25           float:left;
26           margin: 10px;
27        }
28        div dd{
29           margin:0px;
30           font-size:10pt;
31        }
32        div dd.dd_name
33        {
34           color:blue;
35        }
36        div dd.dd_city
37        {
38           color:#000;
39        }
40     </style>
41   </head>
42   
43   <body>
44     <h1>商品展示</h1>
45     <hr>
46     <center>
47     <table width="750" height="60" cellpadding="0" cellspacing="0" border="0">
48       <tr>
49         <td>
50           <!-- 商品循环开始 -->
51            <% 
52                ItemsDAO itemsDao = new ItemsDAO(); 
53                ArrayList<Items> list = itemsDao.getAllItems();
54                if(list!=null&&list.size()>0)
55                {
56                    for(int i=0;i<list.size();i++)
57                    {
58                       Items item = list.get(i);
59            %>   
60           <div>
61              <dl>
62                <dt>
63                  <a href="details.jsp?id=<%=item.getId()%>"><img src="images/<%=item.getPicture()%>" width="120" height="90" border="1"/></a>
64                </dt>
65                <dd class="dd_name"><%=item.getName() %></dd> 
66                <dd class="dd_city">产地:<%=item.getCity() %>&nbsp;&nbsp;价格:¥ <%=item.getPrice() %></dd> 
67              </dl>
68           </div>
69           <!-- 商品循环结束 -->
70           <%
71                    }
72               } 
73           %>
74         </td>
75       </tr>
76     </table>
77     </center>
78   </body>
79 </html>

六、商品详细信息显示

 在ItemsDAO.java中添加如下代码:

 1 // 根据商品编号获得商品资料
 2     public Items getItemsById(int id) {
 3         Connection conn = null;
 4         PreparedStatement stmt = null;
 5         ResultSet rs = null;
 6         try {
 7             conn = DBHelper.getConnection();
 8             String sql = "select * from items where id=?;"; // SQL语句
 9             stmt = conn.prepareStatement(sql);
10             stmt.setInt(1, id);
11             rs = stmt.executeQuery();
12             if (rs.next()) {
13                 Items item = new Items();
14                 item.setId(rs.getInt("id"));
15                 item.setName(rs.getString("name"));
16                 item.setCity(rs.getString("city"));
17                 item.setNumber(rs.getInt("number"));
18                 item.setPrice(rs.getInt("price"));
19                 item.setPicture(rs.getString("picture"));
20                 return item;
21             } else {
22                 return null;
23             }
24         } catch (Exception ex) {
25             ex.printStackTrace();
26             return null;
27         } finally {
28             // 释放数据集对象
29             if (rs != null) {
30                 try {
31                     rs.close();
32                     rs = null;
33                 } catch (Exception ex) {
34                     ex.printStackTrace();
35                 }
36             }
37             // 释放语句对象
38             if (stmt != null) {
39                 try {
40                     stmt.close();
41                     stmt = null;
42                 } catch (Exception ex) {
43                     ex.printStackTrace();
44                 }
45             }
46 
47         }
48     }

在details.jsp添加如下代码:

<%@ page language="java" import="java.util.*" contentType="text/html; charset=utf-8" %>
<%@ page import="entity.Items"%>
<%@ page import="dao.ItemsDAO"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'details.jsp' starting page</title>
    
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->
    <style type="text/css">
       div{
          float:left;
          margin-left: 30px;
          margin-right:30px;
          margin-top: 5px;
          margin-bottom: 5px;
       }
       div dd{
          margin:0px;
          font-size:10pt;
       }
       div dd.dd_name
       {
          color:blue;
       }
       div dd.dd_city
       {
          color:#000;
       }
    </style>
  </head>
  
  <body>
    <h1>商品详情</h1>
    <hr>
    <center>
      <table width="750" height="60" cellpadding="0" cellspacing="0" border="0">
        <tr>
          <!-- 商品详情 -->
          <% 
             ItemsDAO itemDao = new ItemsDAO();
             Items item = itemDao.getItemsById(Integer.parseInt(request.getParameter("id")));
             if(item!=null)
             {
          %>
          <td width="70%" valign="top">
             <table>
               <tr>
                 <td rowspan="4"><img src="images/<%=item.getPicture()%>" width="200" height="160"/></td>
               </tr>
               <tr>
                 <td><B><%=item.getName() %></B></td> 
               </tr>
               <tr>
                 <td>产地:<%=item.getCity()%></td>
               </tr>
               <tr>
                 <td>价格:<%=item.getPrice() %></td>
               </tr> 
             </table>
          </td>
          <% 
            }
          %>
        </tr>
      </table>
    </center>
  </body>
</html>

七、使用Cookie实现保存商品浏览记录

如何把浏览记录保存在cookie中?

因为商品编号是唯一的,我们可以获取商品的编号,自然而然可以获取商品的信息。那么用户在每一次点击商品的详情的时候,他会把商品的编号传给details.jsp页面,那么我们可以想办法在details.jsp页面当中把传过来的商品编号给它保存在一个字符串当中。

主要思路:

把每次浏览的商品编号保存在字符串中,编号和编号之间用分隔符分隔,每次取出前五条记录。

(把字符串保存在cookie当中,每次只要在cookie中读取这个字符串就可以了。把这个字符串通过分隔符转换成字符串数组,数组中的每个元素实际上就是商品编号)

大致思路:
1、用一个字符串来记录浏览商品的id记录。***字符串处理:将id添加到字符串中,并用','隔开。操作方式:str += id + ",";这样所有的记录都保存在字符串中,如:1,3,5,1,....
2、通过request.getCookies()遍历cookie集合,通过cookie.getName().equals(strname)查询用于保存字符串的cookie,通过cookie.getValue()得到字符串后传入逻辑业务中的方法。
3、在逻辑业务操作中,定义一个方法接受字符串,取得字符串后,使用str.sqlit(",")将字符串分割为字符串数组[1,3,5,1...],这样就获得了商品id的浏览记录。
4、之后就是通过遍历和添加数组,最后返回浏览记录的数组即可

 1 //获取最近浏览的前五条商品信息
 2     public ArrayList<Items> getViewList(String list)
 3     {
 4         System.out.println("list:"+list);
 5         ArrayList<Items> itemlist = new ArrayList<Items>();
 6         int iCount=5; //每次返回前五条记录
 7         if(list!=null&&list.length()>0)
 8         {
 9             String[] arr = list.split(",");
10             System.out.println("arr.length="+arr.length);
11             //如果商品记录大于等于5条
12             if(arr.length>=5)
13             {
14                for(int i=arr.length-1;i>=arr.length-iCount;i--)
15                {
16                   itemlist.add(getItemsById(Integer.parseInt(arr[i])));  
17                }
18             }
19             else
20             {
21                 for(int i=arr.length-1;i>=0;i--)
22                 {
23                     itemlist.add(getItemsById(Integer.parseInt(arr[i])));
24                 }
25             }
26             return itemlist;
27         }
28         else
29         {
30             return null;
31         }
32         
33     }

detail.jsp

  1 <%@ page language="java" import="java.util.*" contentType="text/html; charset=utf-8" %>
  2 <%@ page import="entity.Items"%>
  3 <%@ page import="dao.ItemsDAO"%>
  4 <%
  5 String path = request.getContextPath();
  6 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
  7 %>
  8 
  9 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 10 <html>
 11   <head>
 12     <base href="<%=basePath%>">
 13     
 14     <title>My JSP 'details.jsp' starting page</title>
 15     
 16     <meta http-equiv="pragma" content="no-cache">
 17     <meta http-equiv="cache-control" content="no-cache">
 18     <meta http-equiv="expires" content="0">    
 19     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
 20     <meta http-equiv="description" content="This is my page">
 21     <!--
 22     <link rel="stylesheet" type="text/css" href="styles.css">
 23     -->
 24     <style type="text/css">
 25        div{
 26           float:left;
 27           margin-left: 30px;
 28           margin-right:30px;
 29           margin-top: 5px;
 30           margin-bottom: 5px;
 31        }
 32        div dd{
 33           margin:0px;
 34           font-size:10pt;
 35        }
 36        div dd.dd_name
 37        {
 38           color:blue;
 39        }
 40        div dd.dd_city
 41        {
 42           color:#000;
 43        }
 44     </style>
 45   </head>
 46   
 47   <body>
 48     <h1>商品详情</h1>
 49     <hr>
 50     <center>
 51       <table width="750" height="60" cellpadding="0" cellspacing="0" border="0">
 52         <tr>
 53           <!-- 商品详情 -->
 54           <% 
 55              ItemsDAO itemDao = new ItemsDAO();
 56              Items item = itemDao.getItemsById(Integer.parseInt(request.getParameter("id")));
 57              if(item!=null)
 58              {
 59           %>
 60           <td width="70%" valign="top">
 61              <table>
 62                <tr>
 63                  <td rowspan="4"><img src="images/<%=item.getPicture()%>" width="200" height="160"/></td>
 64                </tr>
 65                <tr>
 66                  <td><B><%=item.getName() %></B></td> 
 67                </tr>
 68                <tr>
 69                  <td>产地:<%=item.getCity()%></td>
 70                </tr>
 71                <tr>
 72                  <td>价格:<%=item.getPrice() %></td>
 73                </tr> 
 74              </table>
 75           </td>
 76           <% 
 77             }
 78           %>
 79           <% 
 80               String list ="";
 81               //从客户端获得Cookies集合
 82               Cookie[] cookies = request.getCookies();
 83               //遍历这个Cookies集合
 84               if(cookies!=null&&cookies.length>0)
 85               {
 86                   for(Cookie c:cookies)
 87                   {
 88                       if(c.getName().equals("ListViewCookie"))
 89                       {
 90                          list = c.getValue();
 91                       }
 92                   }
 93               }
 94               
 95               list+=request.getParameter("id")+",";
 96               //如果浏览记录超过1000条,清零.
 97               String[] arr = list.split(",");
 98               if(arr!=null&&arr.length>0)
 99               {
100                   if(arr.length>=1000)
101                   {
102                       list="";
103                   }
104               }
105               Cookie cookie = new Cookie("ListViewCookie",list);
106               response.addCookie(cookie);
107           
108           %>
109           <!-- 浏览过的商品 -->
110           <td width="30%" bgcolor="#EEE" align="center">
111              <br>
112              <b>您浏览过的商品</b><br>
113              <!-- 循环开始 -->
114              <% 
115                 ArrayList<Items> itemlist = itemDao.getViewList(list);
116                 if(itemlist!=null&&itemlist.size()>0 )
117                 {
118                    System.out.println("itemlist.size="+itemlist.size());
119                    for(Items i:itemlist)
120                    {
121                          
122              %>
123              <div>
124              <dl>
125                <dt>
126                  <a href="details.jsp?id=<%=i.getId()%>"><img src="images/<%=i.getPicture() %>" width="120" height="90" border="1"/></a>
127                </dt>
128                <dd class="dd_name"><%=i.getName() %></dd> 
129                <dd class="dd_city">产地:<%=i.getCity() %>&nbsp;&nbsp;价格:<%=i.getPrice() %></dd> 
130              </dl>
131              </div>
132              <% 
133                    }
134                 }
135              %>
136              <!-- 循环结束 -->
137           </td>
138         </tr>
139       </table>
140     </center>
141   </body>
142 </html>

最终的案例界面:

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值