显示商品信息（java web）

一.目的

     在jsp页面中显示手机商品的信息。

二.思想步骤

     2.1收集手机图片信息，价格信息，手机名信息等。

     2.2 创建mysql数据库，新建表，将信息存入表中。

     2.4 创建三个类（DataSourceUtils，product，product_servlet）

            2.4.1 DataSourceUtils数据库连接池

            2.4.2 product 存储获取到商品信息

            2.4.3 product_servlet 连接数据库，获取信息，并将product对象存在List集合中，再将集合设置在requset域中，转发到jsp页面。

      2.5 创建jsp页面 ，获取request域中的List集合，遍历集合，通过jsp脚本代码将信息显示在页面上。

三.实际步骤

      3.1 mysql数据

      3.1.1 创建数据库 ，数据库名:product，创建新表，表名：message.

           

        3.1.2 将数据存到message表中  （手机信息百度云：https://pan.baidu.com/s/1fMKzWmpuO3FTiRHjhn4Nkg 提取码：xrc8）。

             

   3.1.3 存储成功

         

       3.2 java代码

       3.2.1 DataSourceUtils 类    

（注意此处需要导入jar包，并且需要将修改好了的c3p0-config.xml 配置文件，放在web项目的src目录下，）

  https://pan.baidu.com/s/1eev43QR5TAFKi_ZRqIn_PQ   提取码：ebcw（此处是jar包和xml配置文件）

package cn.jsp.getdate;

import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import javax.sql.DataSource;
import com.mchange.v2.c3p0.ComboPooledDataSource;

public class DataSourceUtils {

   private static DataSource dataSource = new ComboPooledDataSource();

   private static ThreadLocal<Connection> tl = new ThreadLocal<Connection>();

   // 直接可以获取一个连接池
   public static DataSource getDataSource() {
      return dataSource;
   }

   // 获取连接对象
   public static Connection getConnection() throws SQLException {

      Connection con = tl.get();
      if (con == null) {
         con = dataSource.getConnection();
         tl.set(con);
      }
      return con;
   }

   // 开启事务
   public static void startTransaction() throws SQLException {
      Connection con = getConnection();
      if (con != null) {
         con.setAutoCommit(false);
      }
   }

   // 事务回滚
   public static void rollback() throws SQLException {
      Connection con = getConnection();
      if (con != null) {
         con.rollback();
      }
   }

   // 提交并且 关闭资源及从ThreadLocall中释放
   public static void commitAndRelease() throws SQLException {
      Connection con = getConnection();
      if (con != null) {
         con.commit(); // 事务提交
         con.close();// 关闭资源
         tl.remove();// 从线程绑定中移除
      }
   }

   // 关闭资源方法
   public static void closeConnection() throws SQLException {
      Connection con = getConnection();
      if (con != null) {
         con.close();
      }
   }

   public static void closeStatement(Statement st) throws SQLException {
      if (st != null) {
         st.close();
      }
   }

   public static void closeResultSet(ResultSet rs) throws SQLException {
      if (rs != null) {
         rs.close();
      }
   }

}

 

 

 

 

3.2.2 product 类（JavaBean)

package cn.jsp.getdate;

public class product {

    int id;
    String product_name;
    String product_img;
    double product_money;

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getProduct_name() {
        return product_name;
    }

    public void setProduct_name(String product_name) {
        this.product_name = product_name;
    }

    public String getProduct_img() {
        return product_img;
    }

    public void setProduct_img(String product_img) {
        this.product_img = product_img;
    }

    public double getProduct_money() {
        return product_money;
    }

    public void setProduct_money(double product_money) {
        this.product_money = product_money;
    }


}

 

3.2.3  product_servlet 类

package cn.jsp.getdate;

import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.BeanListHandler;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.sql.SQLException;
import java.util.List;


public class product_servlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
       // 连接数据库编写sql语句，获取数据。
        QueryRunner runner=new QueryRunner(DataSourceUtils.getDataSource());
        String sql="select * from message";
        //将数据存在List集合中
        List<product> products=null;
        try {
            products = runner.query(sql,new BeanListHandler<product>(product.class));
        }catch (SQLException e){
            e.printStackTrace();
        }
        //将list集合存在request域中；
        request.setAttribute("productsList",products);
        //转发到show_product.jsp 页面进行显示
        request.getRequestDispatcher("/show_product.jsp").forward(request,response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request,response);
    }

}

 

 

3.2.4 jsp页面

<%@ page import="java.util.List" %>
<%@ page import="cn.jsp.getdate.product" %><%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2019/3/19
  Time: 19:39
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Show_Product</title>
    <link  rel="stylesheet" type="text/css" href="css/show_Product.css"/>
</head>
<body>
<!--导航栏-->
<div id="page">
    <div id="AppBar">
        <!--logo-->
        <div class="logo">Second-hand mobile
            <br/>phone</div>
        <ul>
            <li>首页</li>
            <li>商店</li>
            <li>app下载</li>
            <li>联系我们</li>
        </ul>
    </div>
   <!-- 显示商品-->
    <div id="commodity">

        <%
//            System.out.println(request.getAttribute("productsList"));
            List<product> products=(List<product>)request.getAttribute("productsList");
            if(products!=null){
        %>
        <div class="low">
            <%

                for (product product:products){
            %>
            <ul>
                <li class="img"><img src="<%=product.getProduct_img()%>" class="mobile_phone"/></li>
                <li class="name"><%= product.getProduct_name()%></li>
                <li class="money">￥<%= product.getProduct_money()%></li>
                <li class="affirm">购买</li>
            </ul>
            <%
                }
            %>
       </div>
        <%
            }
        %>
    </div>
</div>
</body>
</html>

3.2.5 jsp 的css样式

*{
    margin: 0px;
    padding: 0px;
}
#page{
     width: 100%;
 }
#AppBar{
    width: 100%;
    height: 50px;
    background-color: #9278f7;
    padding-top: 25px;
}
#page .logo{
    float: left;
    width: 20%;
    height: 55px;
    background-color: #6b6b6b;
    margin-left: 25px;
    margin-top: -25px;
    text-align: center;
    font-family: "楷体";
    font-size: 16px;
    color: white;
    padding-top: 20px;
    opacity: 0.7;
}
#page #AppBar ul li{
    width: 10%;
    height: 45px;
    float: left;
    margin-left: 10px;
    text-align: center;
    list-style: none;
    font-size: 15px;
    color: wheat;
}
#commodity{

    width: 100%;
    background-color: #FFFDFE;
}
#commodity .low{
    width: 100%;
}
#commodity .low ul{
    margin: 50px;
    list-style: none;
    float: right;
}
#commodity .low .img{
    width: 150px;
    height: 150px;
    border: 1px dotted #333333;
}
.mobile_phone{
    width: 100%;
    height: 100%;
}
#commodity .low .name{
    width: 150px;
    height: 45px;
    font-family: "宋体";
    font-size: 10px;
    text-align: center;
}
#commodity .low .money{
    width: 150px;
    height: 21px;
    font-family: "宋体";
    font-size: 10px;
    text-align: center;
    color: red;
}
#commodity .low .affirm{
    width: 150px;
    height: 21px;
    background-color: #07524C;
    font-size: 12px;
    color: white;
    text-align: center;
    cursor: pointer;

}

 

四.演示

       发布项目，根据自己的项目输入http://localhost:8080/web_war_exploded/product