以下是实现效果：

解释都写在代码里面了

package entity;public class Items {/** 数据库数据* * @pram id = 商品编号*/private int id;private String name;private String city;private int price;private int number;private String picture;public int getId() {return id;}public void setId(int id) {this.id = id;}public String getName() {return name;}public void setName(String name) {this.name = name;}public String getCity() {return city;}public void setCity(String city) {this.city = city;}public int getPrice() {return price;}public void setPrice(int price) {this.price = price;}public int getNumber() {return number;}public void setNumber(int number) {this.number = number;}public String getPicture() {return picture;}public void setPicture(String picture) {this.picture = picture;}}

package dao;
//商品的业务逻辑层import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;import entity.Items;
import util.DBHelper;public class ItemsDAO {// 获得所有商品信息public ArrayList<Items> getAllItems() {Connection conn = null;PreparedStatement stmt = null;// PreparedStatement 实例包含已编译的 SQL// 语句。这就是使语句“准备好”。ResultSet rs = null;// ResultSet它起到的作用就是完成了查询结果的存储功能ArrayList<Items> list = new ArrayList<Items>();// 商品集合try {conn = DBHelper.getConnection();String sql = "Select * from items;";// SQL语句stmt = conn.prepareStatement(sql);rs = stmt.executeQuery();// executeQuery()方法会把数据库响应的查询结果存放在ResultSet类对象中供我们使用while (rs.next()) {// 该方法的作用是将数据库游标向前移动一位，使得下一行成为当前行，当刚刚打开记录集对象时，数据库游标的位置在记录集的最前面// ，第一次使用next()方// 法将会使数据库游标定位到记录集的第一行，第二次使用next()方法将会使数据库游标定位到记录集的第二行，以此类推Items item = new Items();item.setId(rs.getInt("id"));// 因为成员类用了int数据类型所以这里也用。item.setCity(rs.getString("city"));item.setName(rs.getString("name"));item.setNumber(rs.getInt("number"));item.setPicture(rs.getString("picture"));item.setPrice(rs.getInt("price"));list.add(item);// 添加一个商品进去集合}return list;// 返回集合} catch (Exception ex) {ex.printStackTrace();return null;} finally {// 释放数据集对象if (rs != null) {try {rs.close();rs = null;} catch (Exception ex) {ex.printStackTrace();}// 释放语句对象if (stmt != null) {try {stmt.close();stmt = null;} catch (Exception ex) {ex.printStackTrace();}}}}}// 根据商品编号获得商品资料public Items getItemsById(int id ){Connection conn = null;PreparedStatement stmt = null;// PreparedStatement 实例包含已编译的 SQL// 语句。这就是使语句“准备好”。ResultSet rs = null;// ResultSet它起到的作用就是完成了查询结果的存储功能try {conn = DBHelper.getConnection();String sql = "Select * from items where id=?;";// SQL语句stmt = conn.prepareStatement(sql);stmt.setInt(1, id);//从id=1编号开始rs = stmt.executeQuery();// executeQuery()方法会把数据库响应的查询结果存放在ResultSet类对象中供我们使用if (rs.next()) {// 该方法的作用是将数据库游标向前移动一位，使得下一行成为当前行，当刚刚打开记录集对象时，数据库游标的位置在记录集的最前面// ，第一次使用next()方// 法将会使数据库游标定位到记录集的第一行，第二次使用next()方法将会使数据库游标定位到记录集的第二行，以此类推Items item = new Items();item.setId(rs.getInt("id"));//因为成员类用了int数据类型所以这里也用。item.setCity(rs.getString("city"));item.setName(rs.getString("name"));item.setNumber(rs.getInt("number"));item.setPicture(rs.getString("picture"));item.setPrice(rs.getInt("price"));return item;}else{return null;// 返回集合}} catch (Exception ex) {ex.printStackTrace();return null;} finally {//释放数据集对象if (rs != null) {try {rs.close();rs = null;} catch (Exception ex) {ex.printStackTrace();}//释放语句对象if (stmt != null) {try {stmt.close();stmt = null;} catch (Exception ex) {ex.printStackTrace();}}}}}//获取最近浏览的前五条商品信息public ArrayList<Items>getViewList(String list){System.out.println("list:"+list);ArrayList<Items>itemlist = new ArrayList<Items>();int iCount =5;//每次返回前5条记录if(list !=null && list.length()>0){//如果记录不为空且长度大于0String[] arr = list.split(",");//分割“，”System.out.println("arr.length"+arr.length);//输出arr数组的长度//如果商品记录大于等于5if(arr.length>=5){for(int i=arr.length-1;i>arr.length-iCount;i--){itemlist.add(getItemsById(Integer.parseInt(arr[i])));//把编号像子弹一样推进弹壳}}else{for(int i=arr.length-1;i>=0;i--){itemlist.add(getItemsById(Integer.parseInt(arr[i])));}}return itemlist;}else{return null;}}}

package util;import java.sql.Connection;
import java.sql.DriverManager;public class DBHelper {private static Connection conn;private static final String driver = "com.mysql.jdbc.Driver";// 数据库驱动private static final String url = "jdbc:mysql://localhost:3306/shopping?useUnicode=true&charactorEncoding=UTF";// 连接数据库的URL地址charactorEncoding以防乱码private static final String username = "root";// 数据库的用户名private static final String password = "root";// 数据库的密码static {try {Class.forName(driver);// 返回的是一个类} catch (Exception ex) {ex.printStackTrace();}}// 以单例模式返回数据库连接对象public static Connection getConnection() throws Exception {if (conn == null) {// 判断有没有实例化连接对象这个“钥匙/通道”，无则创建conn = DriverManager.getConnection(url, username, password);return conn;}return conn;}public static void main(String[] args) {try {Connection conn = DBHelper.getConnection();if (conn != null) {System.out.println("数据库连接正常！");} else {System.out.println("数据库连接异常！");}} catch (Exception e) {e.printStackTrace();}}}

<%@ 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><!-- 商品详情 --><!--      <center> 标签 --><!-- 定义和用法对其所包括的文本进行水平居中。 --><% 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="data: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><% }%><% String list ="";//从客户端获得Cookies集合Cookie[] cookies = request.getCookies();//遍历这个Cookies集合//如果发现cookies等于ListViewCookie则赋值if(cookies!=null&&cookies.length>0){for(Cookie c:cookies){if(c.getName().equals("ListViewCookie")){list = c.getValue();}}}list+=request.getParameter("id")+",";//list像一个栈一样: 1,2,3,4,5,6...//如果浏览记录超过100，清零String[] arr = list.split(",");//split()是个分割方法if(arr!=null&&arr.length>0){if(arr.length>=1000){list="";}}Cookie cookie = new Cookie("ListViewCookie",list);//Cookie("名字"，“值”);response.addCookie(cookie);%><!-- 浏览过的商品 --><td width="30%" bgcolor="#EEE" align="center"><br><b>您浏览过的商品</b><br><!-- 循环开始 --><% ArrayList<Items> itemlist = itemDao.getViewList(list);if(itemlist!=null&&itemlist.size()>0 ){System.out.println("itemlist.size="+itemlist.size());for(Items i:itemlist){%><div><dl><dt><a href="details.jsp?id=<%=i.getId()%>"><img src="data:images/<%=i.getPicture() %>" width="120" height="90" border="1"/></a></dt><dd class="dd_name"><%=i.getName() %></dd> <dd class="dd_city">产地:<%=i.getCity() %>  价格:<%=i.getPrice() %> ￥ </dd> </dl></div><% }}%><!-- 循环结束 --></td></tr></table></center></body>
</html>

<%@ page language="java" import="java.util.*"contentType="text/html; charset=utf-8" pageEncoding="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" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<style type="text/css">
div {float: left;margin: 10px;
}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><!-- cellpadding -- 代表单元格外面的一个距离,用于隔开单元格与单元格空间 --><!-- cellspacing) -- 代表表格边框与单元格补白的距离,也是单元格补白之间的距离 -->
<!--         <tr> 标签定义 HTML 表格中的行。 -->
<!-- <td> 标签定义 HTML 表格中的列。 --><table width="750" height="60" cellspacing="0" border="0"cellpadding="0"><tr><td><!-- 商品循环开始 --> <% ItemsDAO itemsDao = new ItemsDAO(); ArrayList<Items> list = itemsDao.getAllItems();if(list!=null && list.size()>0){for(int i=0;i<list.size();i++){Items item = list.get(i);%><div><dl><dt><a href="details.jsp?id=<%=item.getId()%>"><imgsrc="data:images/<%=item.getPicture()%>" width="120" height="90"border="1" /></a></dt><dd class="dd_name"><%=item.getName() %></dd><dd class="dd_city">产地:<%=item.getCity() %>  价格:￥<%=item.getPrice() %></dd></dl></div> <!-- 商品循环结束 --> <%}} %></td></tr></table></center>
</body>
</html>