展示所有商品案例
案例一：展示所有商品
需求:
点击首页上的超链接,在页面上展示所有的商品信息
步骤分析:
alter database hjh character set utf8 collate utf8_bin;设置数据库编码，以避免中文乱码。
1.数据库和表
create database hjh;
use hjh;
create table product (
pid varchar (96),
pname varchar (150),
market_price double ,
shop_price double ,
pimage varchar (600),
pdate date ,
pdesc varchar (765)
);
INSERT INTO `product` VALUES('1','小米 4c 标准版','1399','1299','products/xiaomi.jpg','2019-11-02','小米 4c 标准版 全网通 白色 移动联通电信4G手机 双卡双待');
INSERT INTO `product` VALUES('2','华为 Ascend Mate7','2699','2599','products/huawei.jpg','2019-11-02','华为 Ascend Mate7 月光银 移动4G手机 双卡双待双通6英寸高清大屏，纤薄机身，智能超八核，按压式指纹识别！!选择下方“移动老用户4G飞享合约”，无需换号，还有话费每月返还！');
INSERT INTO `product` VALUES('3','vivo X5Pro','2399','2298','products/vivo.jpg','2019-11-02','移动联通双4G手机 3G运存版 极光白【购机送蓝牙耳机+蓝牙自拍杆】新升级3G运行内存·双2.5D弧面玻璃·眼球识别技术');
INSERT INTO `product` VALUES('4','努比亚（nubia）My 布拉格','1899','1799','products/nubia.jpg','2019-11-02','努比亚（nubia）My 布拉格 银白 移动联通4G手机 双卡双待【嗨11，下单立减100】金属机身，快速充电！布拉格相机全新体验！');
INSERT INTO `product` VALUES('5','华为 麦芒4','2599','2499','products/huawei4.jpg','2019-11-02','华为 麦芒4 晨曦金 全网通版4G手机 双卡双待金属机身 2.5D弧面屏 指纹解锁 光学防抖');
INSERT INTO `product` VALUES('6','vivo X5M','1899','1799','products/vivox5m.jpg','2019-11-02','vivo X5M 移动4G手机 双卡双待 香槟金【购机送蓝牙耳机+蓝牙自拍杆】5.0英寸大屏显示·八核双卡双待·Hi-Fi移动KTV');
INSERT INTO `product` VALUES('7','Apple iPhone 6 (A1586)','4399','4288','products/iphone6.jpg','2019-11-02','Apple iPhone 6 (A1586) 16GB 金色 移动联通电信4G手机长期省才是真的省！点击购机送费版，月月送话费，月月享优惠，畅享4G网络，就在联通4G！');
2.新建一个项目
3.导入jar包
驱动 dbutils c3p0 jstl beanutils
4.包结构
utils工具类:datasourceutils
导入c3p0配置文件
5.新建一个首页index.jsp
添加一个超链接
6.点击超链接 发送一个servlet上(FindAllServlet)
7.FindAllServlet:
调用service,查询所有的商品 返回值:list
将list放入request域中,请求转发 prodouct_list.jsp
案例如下：
productDao.java
package com.hjh.dao;
import java.sql.SQLException;
import java.util.List;
import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.BeanListHandler;
import com.hjh.domain.Product;
import com.hjh.utils.DataSourceUtils;
public class ProductDao {
//查询所有商品
public List<Product> findAll() throws SQLException {
QueryRunner qr = new QueryRunner(DataSourceUtils.getDataSourse());
String sql = "select * from product";
return qr.query(sql, new BeanListHandler<>(Product.class));
}
}
product.java
package com.hjh.domain;
import java.util.Date;
public class Product {
private String pid;
private String pname;
private double market_price;
private double shop_price;
private String pimage;
private Date pdate;
private String pdesc;
public Product() {}
public Product(String pid, String pname, double market_price, double shop_price, String pimage, Date pdate,
String pdesc) {
this.pid = pid;
this.pname = pname;
this.market_price = market_price;
this.shop_price = shop_price;
this.pimage = pimage;
this.pdate = pdate;
this.pdesc = pdesc;
}
public String getPid() {
return pid;
}
public void setPid(String pid) {
this.pid = pid;
}
public String getPname() {
return pname;
}
public void setPname(String pname) {
this.pname = pname;
}
public double getMarket_price() {
return market_price;
}
public void setMarket_price(double market_price) {
this.market_price = market_price;
}
public double getShop_price() {
return shop_price;
}
public void setShop_price(double shop_price) {
this.shop_price = shop_price;
}
public String getPimage() {
return pimage;
}
public void setPimage(String pimage) {
this.pimage = pimage;
}
public Date getPdate() {
return pdate;
}
public void setPdate(Date pdate) {
this.pdate = pdate;
}
public String getPdesc() {
return pdesc;
}
public void setPdesc(String pdesc) {
this.pdesc = pdesc;
}
}
productService.java
package com.hjh.service;
import java.sql.SQLException;
import java.util.List;
import com.hjh.dao.ProductDao;
import com.hjh.domain.Product;
public class ProductService {
//查询所有商品
public List<Product> findAll() throws SQLException {
return new ProductDao().findAll();
}
}
FindAllServlet.java
package com.hjh.servlet;
import java.io.IOException;
import java.sql.SQLException;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.hjh.domain.Product;
import com.hjh.service.ProductService;
//展示所有的商品
public class FindAllServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//调用service,查询所有的商品，返回list
List<Product> plist =null;
try {
plist = new ProductService().findAll();
} catch (SQLException e) {
e.printStackTrace();
}
//将list放入request域中
request.setAttribute("list",plist );
//请求转发
request.getRequestDispatcher("/product_list.jsp").forward(request,response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
DataSourceUtils.java
package com.hjh.utils;
import java.sql.Connection;
import java.sql.PreparedStatement;
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 {
//建立连接池ds
private static ComboPooledDataSource ds = new ComboPooledDataSource();
//将connection绑定在当前线程中
private static ThreadLocal<Connection> tl = new ThreadLocal<>();
//获取数据源
public static DataSource getDataSourse() {
return ds;
}
//获取连接,从当前线程中获取
public static Connection getConnection() throws Exception {
Connection conn = tl.get();
if(conn==null) {
//第一次获取，创建一个连接和当前线程绑定在一起
conn =ds.getConnection();
//绑定
tl.set(conn);
}
return conn;
}
//获取连接，开启事务
public static void startTransaction() throws Exception {
getConnection().setAutoCommit(false);
}
//事务提交|解除绑定
public static void commitAndClose() {
try {
Connection conn = getConnection();
//提交事务
conn.commit();
//解除绑定
tl.remove();
//释放资源
closeConnection(conn);
} catch (Exception e) {
e.printStackTrace();
}
}
//事务回滚
public static void rollbackAndClose() {
try {
Connection conn = getConnection();
//提交事务
conn.rollback();
//释放资源
closeConnection(conn);
//解除绑定
tl.remove();
} catch (Exception e) {
e.printStackTrace();
}
}
//释放资源connection
public static void closeConnection(Connection conn) {
try {
if(conn!=null) {
conn.close();
//并和当前线程解绑
tl.remove();
}
} catch (Exception e) {
e.printStackTrace();
}
conn = null;
}
//释放资源Statement
public static void closeStatement(Statement st) {
try {
if(st!=null) {
st.close();
}else {
st = null;
}
} catch (SQLException e) {
e.printStackTrace();
}
}
/**释放资源closePreparedStatement*/
public static void closePreparedStatement(PreparedStatement ps) {
try {
if(ps!=null) {
ps.close();
}else {
ps = null;
}
} catch (SQLException e) {
e.printStackTrace();
}
}
//释放资源Connection ,Statement
public static void close2Resourse(Connection conn,Statement st) {
closeStatement(st);
closeConnection(conn);
}
/**释放资源closeResourse（conn,ps）*/
public static void close2Resourse(Connection conn,PreparedStatement ps) {
closePreparedStatement(ps);
closeConnection(conn);
}
/**释放资源closeResourse（rs）*/
public static void closeResourse(ResultSet rs) {
try {
if(rs!=null) {
rs.close();
}else {
rs = null;
}
} catch (SQLException e) {
e.printStackTrace();
}
}
}
c3p0-config.xml
<c3p0-config>
<!-- 默认配置，如果没有指定则使用这个配置 -->
<default-config>
<!-- 基本配置 -->
<property name="driverClass">com.mysql.jdbc.Driver</property>
<property name="jdbcUrl">jdbc:mysql://localhost/hjh?characterEncoding=UTF-8 </property>
<property name="user">root</property>
<property name="password">root</property>
<!--扩展配置-->
<property name="checkoutTimeout">30000</property>
<property name="idleConnectionTestPeriod">30</property>
<property name="initialPoolSize">10</property>
<property name="maxIdleTime">30</property>
<property name="maxPoolSize">100</property>
<property name="minPoolSize">10</property>
<property name="maxStatements">200</property>
</default-config>
<!-- 命名的配置 -->
<named-config name="XXX">
<property name="driverClass">com.mysql.jdbc.Driver</property>
<property name="jdbcUrl">jdbc:mysql://127.0.0.1:3306/xxxx</property>
<property name="user">root</property>
<property name="password">1234</property>
<!-- 如果池中数据连接不够时一次增长多少个 -->
<property name="acquireIncrement">5</property>
<property name="initialPoolSize">20</property>
<property name="minPoolSize">10</property>
<property name="maxPoolSize">40</property>
<property name="maxStatements">20</property>
<property name="maxStatementsPerConnection">5</property>
</named-config>
</c3p0-config>
web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:web="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
<servlet>
<servlet-name>FindAllServlet</servlet-name>
<servlet-class>com.hjh.servlet.FindAllServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>FindAllServlet</servlet-name>
<url-pattern>/findAll</url-pattern>
</servlet-mapping>
</web-app>
index.jsp
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>展示所有商品</title>
</head>
<body>
<h2><a href="${pageContext.request.contextPath }/findAll">展示所有商品</a></h2>
</body>
</html>
product_list.jsp
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>商品展示</title>
</head>
<body>
<table border="1" align="center" width="88%">
<tr>
<th>pid</th>
<th>商品图片</th>
<th>商品名称</th>
<th>市场价</th>
<th>商城价</th>
<th>日期</th>
<th>商品描述</th>
</tr>
<c:forEach items="${list}" var="plist">
<tr>
<td width="8%">${plist.pid}</td>
<td width="8%">
<img alt="手机" src="${pageContext.request.contextPath }/${plist.pimage}" width="80%">
</td>
<td width="8%">${plist.pname}</td>
<td width="8%">${plist.market_price}</td>
<td width="8%">${plist.shop_price}</td>
<td width="8%">${plist.pdate}</td>
<td>${plist.pdesc}</td>
<td width="8%">修改|删除</td>
</tr>
</c:forEach>
</table>
</body>
</html>
数据库数据显示如下：
点击展示所有商品的超链接，页面显示如下：
在调试代码时，主要遇到3个异常：
①异常信息如下。这是因为在导jar的时候，少导了一个jar包：mysql-connector-java-5.1.47.jar；导入jar之后buildpath一下，问题就解决了
②这个异常问题出现在<c:forEach>标签的items中，没有用EL表达式，直接上了一个list字符串，正确写法应该是items="${list}"，用于取request中放置的list集合。
③商品的图片没有展示出来。查找原因，发现这是因为在初始化数据库的时候，给pimage定义的是a路径，项目中实际路径是b路径，2个路径不一致导致图片加载出错。
案例2-添加商品
需求: 在index.jsp添加一个超链接,跳转到一个页面,用来填写商品信息,点击保存按钮,将商品保存到数据库中 步骤分析: 1.在index.jsp添加一个超链接 跳转到add.jsp 2.add.jsp放入一个表单 3.表单提交到 AddProductServlet 封装数据 调用service完成保存操作 跳转到FindAllServlet (请求转发和重定向) 有表单使用的时候若使用请求转发会出现重复提交 方案1:重定向 方案2:令牌机制 扩展:令牌机制 在添加页面上随机生成一个字符串, 放入session中一份,放入表单中一份 提交的时候在后台获取两个码 然后移除session中码(只使用一次) 然后判断两个码是否一致, 若不一致就是重复提交了
案例3-修改商品信息:
需求: 在product-list.jsp每一个商品后面都有修改操作.点击修改操作,到了一个edit.jsp(将原来的数据展示出来),最后保存就可以了 步骤分析 先查询后修改 查询步骤分析: 点击修改连接的时候 <a href="/day14/getProductById?pid=sss">修改</a> getProductById 获取pid 通过pid获取到商品 返回值product 将product放入request域中 请求转发到edit.jsp ////////////// 修改步骤分析: edit.jsp已经将商品的所有信息展示出来 需要将商品的id通过隐藏域放入表单中 点击保存,跳转到editProductServlet editProductServlet: 1.封装数据 2.调用servcie完成修改更新操作 3.页面跳转到 FindAllServlet(重定向)
案例4-删除商品
需求: 在列表页面上,点击一个商品的删除操作,弹出一个提示,点击确定的时候,商品当前商品 步骤分析: 先给删除添加事件 单击事件 弹出提示 confirm() 点击确定再去删除商品 location.href="/day14/deleteProductById?pid=xxx" 相当于超链接 deleteProductById 1.获取商品id 2.调用service完成删除操作 3.页面重定向 FindAllServlet
扩展:删除多个商品:
需求: 在每个商品前面添加复选框,勾选需要删除的商品,添加一个按钮(删除选中),点击之后删除选中的商品 步骤分析: 给每一个商品添加复选框(全选全不选),同时添加name属性 值为"pid",value为当前商品的pid 点击删除选中,需要将勾选上的商品的id提交到后台 request.getParameterValues("pid") 必须把所有的商品的放入一个表单中, 需要在按钮添加事件 需要先获取表单, 调用表单的submit() delCheckedServlet 1.获取所有要删除的商品的id String[] ids 2.调用servcie完成操作 3.页面重定向 FindAllServlet
扩展:案例5-多条件查询
需求: 在product_list.jsp页面上添加一个表单,输入商品名称 和 关键词,点击确定,将符合条件的商品展示在当前页面上 步骤分析: 在product_list.jsp页面上添加一个表单,添加一个查询按钮 提交的路径 findProductByCondition 1.获取两个条件 2.调用service完成查询 返回值:list 3.将list放入request域中,请求转发 productDao 基本sql:select * from product where 1=1 若商品名称不为空 and pname like ... 若商品名不为空 and pdesc like ...
案例6-分页展示商品
需求: 将商品进行分页展示 技术分析: 分页 /////////////////////////// 分页: 将数据按照页码划分,提高用户的体验度. 分类: 物理分页:(开发中经常使用) 一次只去数据库中查询当前页需要的数据. 逻辑分页: 一次性将所有数据查询出来,放入内存(集合),每次查询只需要去内存中截取 mysql中分页: limit 格式1: select .... limit m,n; 从索引为m条开始向后查找n条数据 就是从第m+1条 到 第m+n条 [] 格式2: select .... limit n; 等价于:select .... limit 0,n; 每页显示3条数据 第一页 limit 0,3 第二页 limit 3,3 第三页 limit 6,3 第n页 limit (n-1)*3,3 扩展: oracle中 rownum sqlserver中 top
每一页需要的数据有 当前页内容 limit查询 当前页码 从前台传递过去 每页显示的条数 固定 总条数 count(*) 总页数 总条数/每页显示的条数 Math.ceil(double) 以后开发中一般会将这5个参数封装一个javabean(PageBean) private List<T> list;//当前页内容 查询 private int currPage;//当前页码 传递 private int pageSize;//每页显示的条数 固定 private int totalCount;//总条数 查询 private int totalPage;//总页数 计算
步骤分析: 最终结果: [首页][上一页][下一页][尾页] [首页][上一页]x x x[下一页][尾页] 1.创建一个页面 product_page.jsp 有上面的内容 还需要有当前页的数据 2.在首页上有一个超链接,点击超链接将第一页查询出来 <a href="/day14/showProductsByPage?currPage=1">分页展示商品</a> 3.showProductsByPage 获取第几页 调用service 完成查询操作,返回值:pagebean 将pagebean放入request域中,请求转发product_page.jsp 4.service.showProductsByPage 返回值pagebean 查询当前页的数据 查询出总条数 //////////////////////////////////// 在页面上展示 1.展示当前也数据 通过<c:forEach items="${pb.list}"> 2.添加首页 上一页 ....的超链接 3.判断是否是第一页.若是第一页 不展示首页和上一页 4.判断是否是最后一页 若是最后一页 不展示尾页和下一页 5.展示所有页码 <c:forEach begin='1' end="${pb.totalPage}"> 6.判断是否是当前页 若是当前页 不加超链接 若不是当前页 添加超链接 扩展:页面多的时候 采用前五后四的方式 只需要控制begin和end begin 判断当前页-5>0?当前页-5:1 end 判断 当前页+4>总页数?总页数:当前页+4
