JSP浏览商品信息项目学习笔记

2 篇文章 0 订阅

这个项目是我在慕课网上看到的,《JAVA遇见HTML--JSP基础篇》,项目并不是我原创,但因为要写的是我的学习笔记,所以标了原创。


项目很简单,就是显示商品信息,然后点击商品详情的时候在右边显示浏览过的商品信息,类似淘宝。

原项目是用的MyEclipse+mysql ,我改成了Eclipse + oracle


1、在Oracle里创建表

CREATE TABLE items(
  id number NOT NULL PRIMARY KEY,
  name varchar(50) default NULL,
  city varchar(50) default NULL,
  price number default NULL,
  n_umber number default NULL,
  picture varchar(500) default NULL
)
这里我还做了一个ID只能以1递增的功能,执行的时候可以,但是插入数据有问题,我也不清楚是否成功

create sequence sequence_id
  start with 1                --设定起始值
  increment by 1              --设定递增值
  maxvalue  999999999         --设定最大值


create or replace trigger trigger_id
before insert or update on items
for each row
begin
    if insert then
        select sequence_id.nextval into :new.id;
    end if;
    if update('id') then
        raise_application_error('-20001','不能修改 id 列的值!');
    end if;
end;
然后插入10条数据

INSERT INTO items VALUES ('1', '沃特篮球鞋', '佛山', '180', '500', '001.jpg');
INSERT INTO items VALUES ('2', '安踏运动鞋', '福州', '120', '800', '002.jpg');
INSERT INTO items VALUES ('3', '耐克运动鞋', '广州', '500', '1000', '003.jpg');
INSERT INTO items VALUES ('4', '阿迪达斯T血衫', '上海', '388', '600', '004.jpg');
INSERT INTO items VALUES ('5', '李宁文化衫', '广州', '180', '900', '005.jpg');
INSERT INTO items VALUES ('6', '小米3', '北京', '1999', '3000', '006.jpg');
INSERT INTO items VALUES ('7', '小米2S', '北京', '1299', '1000', '007.jpg');
INSERT INTO items VALUES ('8', 'thinkpad笔记本', '北京', '6999', '500', '008.jpg');
INSERT INTO items VALUES ('9', 'dell笔记本', '北京', '3999', '500', '009.jpg');
INSERT INTO items VALUES ('10', 'ipad5', '北京', '5999', '500', '010.jpg');

2、创建数据库连接类DBHepler.java

<pre name="code" class="java">package util;

import java.sql.Connection;
import java.sql.DriverManager;

public class DBHelper {
	private static final String driver = "oracle.jdbc.driver.OracleDriver"; 

	private static final String url="jdbc:oracle:" + "thin:@192.168.1.40:1521:ETL"; 
	private static final String username="wqq";
	private static final String password="123456";
    
	private static Connection conn=null;
	
	//静态代码块负责加载驱动 
	
	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 ex)
		{
			ex.printStackTrace();
		}
		
	}
}

 
这里老师用了一个单例模式来连接数据库,单例模式以前我没有接触过,这边第一次接触,学习到了但还不是特别明白,以后继续学习。 

通过单例模式可以保证系统中一个类只有一个实例而且该实例易于外界访问,从而方便对实例个数的控制并节约系统资源。如果希望在系统中某个类的对象只能存在一个,单例模式是最好的解决方案。

3、创建实体类Items.java
package entity;

public class Items {

	private Integer id; 
	private String name;  
	private String city;  
	private int price;  
	private int number;  
	private String picture;

	public Integer 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;
	}
	
	public boolean equals(Object o){
		   if(this == o){
		    return true;
		   }
		   if(! (o instanceof Items)){
		    return false;
		   }
		   final Items other = (Items)o;
		   if(this.id.equals(other.getId())){
		    return true;
		   }
		   else{
		    return false;
		   }
		}

		public int hashCode(){
		   int result;
		   result = (id == null?0:id.hashCode());
		   //result = 37*result + (age == null?0:age.hashCode());
		   return result;
		}
	
}


因为这个实体里要添加到LinkedHashSet中,所以这边重写了equals 和 hashcode两个方法

4、创建DAO层ItemsDAO.java

package dao;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;
import java.util.LinkedHashSet;

import util.DBHelper;

import entity.Items;


public class ItemsDAO {

	//展示所有商品信息
	public ArrayList<Items> getAllItems() {
		Connection conn = null;
		PreparedStatement stmt = null;
		ResultSet rs = null;
		ArrayList<Items> list = new ArrayList<Items>(); //商品集合
		
		try {
			conn = DBHelper.getConnection();
			String sql = "select * from items"; 
			stmt = conn.prepareStatement(sql);
			rs = stmt.executeQuery();
			
			while (rs.next()) {
				Items item = new Items();
				item.setId(rs.getInt("id"));
				item.setName(rs.getString("name"));
				item.setCity(rs.getString("city"));
				item.setNumber(rs.getInt("n_umber")); 
				item.setPrice(rs.getInt("price"));
				item.setPicture(rs.getString("picture"));
				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(Integer id) {
		Connection conn = null;
		PreparedStatement stmt = null;
		ResultSet rs = null;
		try {
			conn = DBHelper.getConnection();
			String sql = "select * from items where id=?"; 
			stmt = conn.prepareStatement(sql);
			stmt.setInt(1, id);
			rs = stmt.executeQuery();
			if (rs.next()) {
				Items item = new Items();
				item.setId(rs.getInt("id"));
				item.setName(rs.getString("name"));
				item.setCity(rs.getString("city"));
				item.setNumber(rs.getInt("n_umber"));
				item.setPrice(rs.getInt("price"));
				item.setPicture(rs.getString("picture"));
				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 LinkedHashSet<Items> getViewList(String list){
		System.out.println("list:"+list);
		LinkedHashSet<Items> itemlist = new LinkedHashSet<Items>();
		
		if(list!=null&&list.length()>0)
		{
			String[] arr = list.split(",");
			System.out.println("arr.length="+arr.length);
			//如果商品记录大于5条
			if(arr.length>=5)
			{
				for(int i=arr.length-1;i>=arr.length-5;i--)
				{
					itemlist.add(getItemsById(Integer.parseInt(arr[i])));
				}
			}
			else
				//如果商品的记录少于5条则直接倒叙输出
			{
				for(int i=arr.length-1;i>=0;i--)
				{
					itemlist.add(getItemsById(Integer.parseInt(arr[i])));
				}
			}
			return itemlist;
		}
		else
		{
			return null;
		}
		
	}
	
}

这个类里实现了三个方法,分别是展示所有商品信息,根据商品编号获得商品资料,以及获取最近浏览的五条商品的信息。

这三个方法都没有什么特别的难度,但是老师写的特别的精巧。


5、创建所有商品的展示页面index.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>商品信息</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: 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>
    <table width="750" height="60" cellpadding="0" cellspacing="0" border="0">
      <tr>
        <td>
          
          <!-- 商品循环开始 -->
           <% 
               ItemsDAO itemsDao = new ItemsDAO(); 
               ArrayList<Items> list = itemsDao.getAllItems();
               if(list!=null&&list.size()>0)
               {
	               for(Integer i=0;i<list.size();i++)
	               {
	                  Items item = list.get(i);
           %>   
          <div>
             <dl>
               <dt>
                 <a href="details.jsp?id=<%=item.getId()%>"><img src="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>

<!-- 
jsp的代码我写的比较少,所以这个将java代码嵌入到JSP页面里的写法我真的是第一次亲手写。
1、首先将Java的代码嵌入到JSP里面,然后可以将要展示的商品的DIV加入到中间,进行循环,就能够把所有的商品展示出来了。
        2、然后这里有一个关键点就是在写商品的href的时候,要给details.jsp传入一个ID,details.jsp页面获取这个id将商品详情显示出来。
-->

6、展示商品详情和浏览记录的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>商品详情</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">

    <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" boeder="0">
			<tr>
				<td>
					<!-- 商品循环开始 --> <%
					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>
				<%
					}
				%>
				<%
					//初次点击商品的时候只是从request对象里获得了一个当前请求商品的信息
					//而cookie因为没有新建,所以初次加载的时候cookie没有值
					//然后再次点击商品的时候list加载到了cookie里面进行比较,相同获取值
					//每次选择商品就相当于是手动做了循环
					
					
					String list = "";//用来存储浏览过的商品编号
					
					Cookie[] cookies = request.getCookies();//request.getCookies()返回的是cookie数组
					if(cookies!=null&&cookies.length>0)
					{
						//遍历这个Cookies集合
						for(Cookie c:cookies)//for循环加强版
						{
							if(c.getName().equals("ListViewCookie"))//获取cookie的名称,既然下面也是ListViewCookie,那么肯定相等
							{
								list = c.getValue();
							}
						}
					}
					
					list+=request.getParameter("id")+",";//request对象包含了所有当前浏览器请求的信息,也就是点击商品的单个信息?
														 //getParameter以字符串的形势返回客户端的某一个请求参数的值
					
					String arr[] = list.split(",");//表示有一个值   
					if(arr!=null&&arr.length>0)
					{//如果浏览的数据超过1000条,清零
						if(arr.length>=1000)
						{
							list = "";
						}
					}
					
					Cookie cookie = new Cookie("ListViewCookie",list);//对于cookie对象的描述和要保存的cookie的对象
					response.addCookie(cookie);
					
				%>
				<!-- 浏览过的商品 -->
				<td>
					<br>
					<b>浏览过的商品</b><br>
					<!-- 循环开始 -->
					<%
						LinkedHashSet<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="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>
					 </div>
              		<% 
                   			}
                		}
             		%>
             <!-- 循环结束 -->
				</td>
			</tr>
		</center>
	</body>
</html>

<!-- 
1、展示商品详情的时候通过调用方法,传入id即完成了,还是比较简单的。
2、要显示浏览记录这块代码花了我好久的时间去理解。ItemsDAO里方法倒是很好理解,这边嵌入的Java代码很难理解。
首先我发现初次点击商品详情的时候,cookie里是没有记录的,或者说没有cookie。后来我发现了是因为初次加载的时候没有创建cookie,创建了之后cookie里就有值了
但是这个值始终比初次加载的少1,这个写法我实在不是很理解。
3、如果去掉cookie,只用request获取的话,因为request是获取当前的请求信息,所以只有一条记录
是不是第一次获取list,将之命名,然后告诉cookie获取这个,大概的理解吧。cookie获取的少一条记录由list+=request.getParameter("id")+","这行代码完成了。
以上是我的理解,可能有误。
4、然后展示浏览记录这里原本用的是ArrayList,这个集合很好用,但是缺点是不排除相同的记录。我换成LinkedHashSet以后可以排除相同的记录,
但是当记录,1,2,3,4,5,5,5,5,5, 这样的记录的话,应为每次只读最后5条记录,相同的排除,页面上只剩一条记录了。这个问题我还没有解决
如果有人可以解决的话,欢迎告知我,可以留言或者发我邮箱angelawoo@163.com,谢谢!
  -->


以上就是我对整个项目的理解,虽然很简单,也花了我好几天,希望可以帮到哪怕一个人我就很开心了。

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值