JSP 商品資訊[Web]
採用Model1(jsp+Javabean)實現
- 實現DBHelper類(連線資料庫)
- 建立實體類
- 建立業務邏輯類(DAO)
- 建立頁面層
一、環境準備
1.1 MySQL 安裝
Mac 安裝方式
- 官網下載安裝包dmg即可
- 安裝
- 偏好設定啟動mysql
- 配置bash_profile
- 新增“export PATH=$PATH:/usr/local/mysql/bin”
下載MySQL驅動 JDBC
1.2 建立專案
IDEA選擇： Java Enterprise -> Web application
配置專案：
- WEB_INF 內建立 classes 和 lib 資料夾
- File -> Project Structure -> paths -> Use module compile output path 選擇classes資料夾
- File -> Project Structure -> Dependecies -> “+”號 -> JAR… -> 選擇建立的lib資料夾
1.3 資料庫建立
開啟終端：登入資料庫
mysql -u root -p建立一個新的資料庫 -> shopping :
create database shopping;檢視是否建立成功：
show databases;1.4 連線資料庫測試
IDEA： View -> Tool Windows -> Database
- : 選擇 Data Source -> MySQL
Database：shopping
再填寫使用者名稱+密碼，Test Connection
1.5 建立資料庫內容
1. 開啟 Navicat，進入shopping資料庫
2. Query 選擇 New Query
複製貼上：
SET FOREIGN_KEY_CHECKS=0;
-- ----------------------------
-- Table structure for items
-- ----------------------------
DROP TABLE IF EXISTS `items`;
CREATE TABLE `items` (
`id` int(11) NOT NULL auto_increment,
`name` varchar(50) default NULL,
`city` varchar(50) default NULL,
`price` int(11) default NULL,
`number` int(11) default NULL,
`picture` varchar(500) default NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=11 DEFAULT CHARSET=utf8;
-- ----------------------------
-- Records of items
-- ----------------------------
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`);
執行，生成表
1.5.3 重新整理資料庫，檢視結果
1.6 存放資料庫的圖片到Web專案
- 專案中web目錄下新建一個資料夾images
- 找10張圖片放入，命名格式”001.jpg”,”002.jgp”…
二、DBHelper類 連線資料庫
定義靜態變數：資料庫驅動
public static final String driver = "com.mysql.jdbc.Driver"; //資料庫驅動
//連線資料庫的URL地址
public static final String url = "jdbc:mysql://localhost:3306/shopping?useUnicode=true&charactorEncoding=UTF-8";
public static final String username = "root";
public static final String password = "amoy1205";
public 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();
}
}三、item 類(存放商品實體)
定義商品屬性 ：
private int id ; //商品編號
private String name; //商品名稱
private String city; //產地
private int price; //價格
private int number; //庫存
private String picture; //商品圖片四、ItemDAO 類 (業務邏輯類)
4.1 獲取全部商品資訊的方法
通過SQL語句:select * from Items; 從表items查詢結果。
public ArrayList<Items> getAllItems()
{
Connection conn = null;
PreparedStatement stmt = null;
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();
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("number"));
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();
}
}
}
}執行SQL語句要記得捕獲異常，且要用finally釋放資源。
PreparedStatement : 執行SQL查詢語句的API之一
「JDBC 中preparedStatement和Statement區別」參考資料：https://blog.csdn.net/xuebing1995/article/details/72235380
4.2 根據商品編號獲取商品資訊
public Items getItemsById()
和獲取全部資訊的程式碼差不多，這裡僅修改try{}裡的程式碼:
- 修改sql查詢語句
- stmt.setInt(1,id)將指定的引數設定為給定的java int值, sql將查詢id匹配的條目
- 查詢結果不用迴圈
- 返回item而不是list
try{
conn = DBHelper.getConnection();
String sql = "select * from Items WHERE id=?;"; //SQL語句
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("number"));
item.setPrice(rs.getInt("price"));
item.setPicture(rs.getString("picture"));
return item;
}
else {
return null;
}
}4.3 通過cookie實現 商品瀏覽記錄DAO
① 傳入list字串，通過分隔符”#”識別出不同的商品id，存放到字串陣列arr中
注意: Tomcat高版本中，Cookie物件的建構函式的兩個字串引數：Cookie名字和Cookie值都不能包含空白字元以及下列字元：[]() < > = , ” / ? @ :
因此，分隔符采用”#”
② 根據分割後的id，查詢商品資訊，新增到itemlist中，返回
public ArrayList<Items> getViewList(String list){
System.out.println("list:"+list);
ArrayList<Items> itemlist = new ArrayList<Items>();
int iCount = 5;
if (list!=null && list.length()>=0)
{
String[] arr = list.split("#");
System.out.println("arr.length="+arr.length);
if(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;
}
}五、頁面層
5.1 index.jsp
5.1.1 <head> 中新增css樣式
<head>
<title>商品展示</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>5.1.2 獲取全部商品資訊
呼叫ItemsDAO的getAllItems() 獲得所有商品的Item例項
遍歷列印商品資訊：
<h1>商品展示</h1>
<hr>
<table>
<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()%>"><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>為圖片設定超連結，目的：進入到商品詳情頁面
5.2 details.jsp
實現功能：顯示商品詳情(點取超連結時傳入的id值再呼叫ItemsDAO的getItemsById()獲取商品資訊)+最近瀏覽商品記錄(cookie實現)
css樣式和index.jsp相同，複製即可
<body>中需要處理的：
① 從request中獲取cookie: request.getCookies()
② 獲取本專案Cookie對應的字串
if(c.getName().equals("ListViewCookie"))
{
list = c.getValue();
}③ 追加本次瀏覽的記錄：
list+=request.getParameter("id")+"#";④ 建立新的cookie物件，並將其放到response:
Cookie cookie = new Cookie("ListViewCookie",list);
response.addCookie(cookie);⑤ 再通過ItemsDAO的getViewList()獲取cookie的字串，根據返回的列表列印最近瀏覽的記錄
<body>標籤中新增完整程式碼:
<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>
<%
}
%>
<%
String list ="";
//從客戶端獲得Cookies集合
Cookie[] cookies = request.getCookies();
//遍歷這個Cookies集合
if(cookies!=null&&cookies.length>0)
{
for(Cookie c:cookies)
{
if(c.getName().equals("ListViewCookie"))
{
list = c.getValue();
}
}
}
list+=request.getParameter("id")+"#";
//如果瀏覽記錄超過1000條，清零.
String[] arr = list.split("#");
if(arr!=null&&arr.length>0)
{
if(arr.length>=1000)
{
list="";
}
}
Cookie cookie = new Cookie("ListViewCookie",list);
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="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>