JSP 商品浏览[Web application]

时间 2019-11-16

标签 jsp 商品浏览 web application 栏目 JSP 繁體版

原文原文链接

JSP 商品信息[Web]

采用Model1(jsp+Javabean)实现css

实现DBHelper类(链接数据库)
建立实体类
建立业务逻辑类(DAO)
建立页面层

1、环境准备

1.1 MySQL 安装

Mac 安装方式

官网下载安装包dmg便可
安装
偏好设置启动mysql
配置bash_profile
添加“export PATH=$PATH:/usr/local/mysql/bin”

下载MySQL驱动 JDBChtml

1.2 建立项目

IDEA选择： Java Enterprise -> Web application
配置项目：java

WEB_INF 内建立 classes 和 lib 文件夹
File -> Project Structure -> paths -> Use module compile output path 选择classes文件夹
File -> Project Structure -> Dependecies -> “+”号 -> JAR… -> 选择建立的lib文件夹

1.3 数据库建立

开启终端：登陆数据库mysql

mysql -u root -p

建立一个新的数据库 -> shopping :web

create database shopping;

查看是否建立成功：sql

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

复制粘贴：bash

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');

运行，生成表cookie

1.5.3 刷新数据库，查看结果

1.6 存放数据库的图片到Web项目

项目中web目录下新建一个文件夹images
找10张图片放入，命名格式”001.jpg”,”002.jgp”…

2、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();
    }
}

3、item 类(存放商品实体)

定义商品属性：

private int id ; //商品编号
private String name; //商品名称
private String city; //产地
private int price;  //价格
private int number;  //库存
private String picture; //商品图片

4、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、页面层

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() %>&nbsp;&nbsp;价格:￥ <%=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() %>&nbsp;&nbsp;价格:<%=i.getPrice() %> ￥ </dd> 
         </dl>
         </div>
         <% 
               }
            }
         %>
         <!-- 循环结束 -->
      </td>
    </tr>
  </table>