文章目录
一、商品模块–商品查询(分页)
1.1 导入数据库表
sql：(也可以文件三获取)
CREATE TABLE `product` (
`pid` INT(10) PRIMARY KEY AUTO_INCREMENT,
`pname` VARCHAR(50) NOT NULL,
`color` VARCHAR(50),
`price` DOUBLE NOT NULL,
`description` VARCHAR(500),
`pic` VARCHAR(200),
`state` INT(5) DEFAULT '0',
`version` VARCHAR(50),
`product_date` DATETIME,
cid INT(10)
) ;
INSERT INTO `product`(`pid`,`cid`,`pname`,`color`,`price`,`description`,`pic`,`state`,`version`,`product_date`)
VALUES (3,2,'小浣熊干脆面1','棕色1',1,'好吃不贵','638707ea-5ed9-4e10-afe1-d428570eb4eatimg.jpg',1,'1.1','2022-07-08 11:25:45'),
(4,2,'神舟五号','白色',1000000,'中国骄傲','7ff58893-5fb1-4430-81b3-755c650ee8aatimg (1).jpg',4,'神州5号','2022-07-08 00:00:00'),
(9,3,'小米笔记本Air 13.3','银灰色',5399,'高性能轻薄笔记本\r\n设计制图、运行大型 3D 游戏，复杂任务也可以轻松驾驭。
','e328db7b-41a4-40ac-b7f5-ecf8ec1d8c01220x220.jpg',4,'air','2022-07-08 15:22:42'),
(10,6,'九号平衡车','白色',1999,'最高车速： 约16km/h\r\n最大扭矩： 整机35Nm*2','42796f9f-687a-4a86-9802-780da5f9aa12T1PX200x200.jpg',
4,'1','2022-07-08 15:26:09'),(11,6,'小米路由器4Q','蓝色',199,'MiNET 一键快连智能设备','2d370544-b521-4ac7-8607-fdfa16361959pms_15291.jpg',
4,'1.1','2022-07-08 15:28:15'),(12,3,'小米6X','蓝色',4999,'64GB+64GB，赤焰红、樱花粉限时秒杀，到手价1419元',
'2f2f75e8-e044-4dd5-9b38-b3ee115ff4738619.jpg',4,'1.1','2022-07-08 15:30:48'),
(13,4,'小米电视4A 43英寸 青春版','白色',4999,'人工智能语音系统\r\n全高清屏\r\n64位四核处理器\r\n',
'2aff3811-78fb-418e-acdc-90401cf166460.jpg',0,'1.1','2022-07-08 09:27:32'),
(14,4,'小米电视4A 43英寸 老年版','棕色',998,'人工智能语音系统','0c955dfb-2d0f-454b-b87a-9a91a810a4410.jpg',0,'1','2022-07-08 09:29:40'),
(15,4,'小米电视4A 43英寸 少年版','棕色',15000,'人工智能语音系统','876738db-7514-4fd1-972a-cb39a8dc55c80.jpg',3,'1','2022-07-08 09:30:22'),
(16,4,'小米电视4A 43英寸 幼儿版','蓝色',998,'海量影视内容','985c95ec-b9b8-427c-bef9-a5d3e1fb15250.jpg',2,'air','2022-07-08 09:31:05'),
(17,4,'小米电视4A 43英寸 旗舰版','棕色',5399,'杜比音效','eaebf9ec-cdad-4d46-915f-67de08d655bd0.jpg',3,'1.1','2022-07-08 15:22:42'),
(18,4,'米家互联网空调','白色',998,' 米家互联网空调（一级能效）','f3436d9a-cb89-423b-9b36-b1e5b77237cd20.jpg',3,'1','2022-07-08 09:33:45'),
(19,4,'米家互联网空调（升级版）','白色',15000,' 米家互联网空调（一级能效）','af686cbe-a16b-41e8-a903-39346436a17520.jpg',0,
'123','2022-07-08 09:34:33'),(20,4,' 米家互联网空调(土豪版)','蓝色',15000,
' 米家互联网空调（一级能效','54350161-4357-45f6-a71a-7387937caebe20.jpg',1,'1','2022-07-08 09:35:27'),
(21,6,'小米手环1','黑色',199,'心率、睡眠、记步，健康管理','8304a926-7272-4ee3-97cd-bbdb43ffe92f1338.jpg',3,'1.1','2022-07-08 10:23:07'),
(22,6,'小米手环2','棕色1',199,'心率、睡眠、记步，健康管理 / 长达20天续航能力','dcd05b4c-a59f-49dd-bc4d-097a8746f3351338.jpg',0,
'123','2022-07-08 10:23:56'),(23,6,'小米手环3','棕色',998,'长达20天续航能力','4f0ff94a-e9c7-4096-a14e-44de82251b251338.jpg',4,'123',
'2022-07-08 10:24:23'),(24,6,'小米手环4','棕色',998,'微信、QQ来电等消息内容直接显示','facdfa7b-6c4a-4340-8f60-0226f5452d1a1338.jpg',
2,'1','2022-07-08 10:24:49'),(25,6,'小米手环5','蓝色',998,'50米游泳防水','895d28e2-bfab-46c6-8722-a60662315e4c1338.jpg',1,'1.1',
'2022-07-08 10:25:24'),(26,6,'小米米家行车记录仪1S','棕色',998,'索尼 IMX307图像传感器 ','505294f3-0812-488d-a879-7361e133a6f0582.jpg',1
,'123','2022-07-08 10:27:01'),(27,6,'小米米家行车记录仪2S','棕色',998,' 3D降噪 / IPS大屏 / 本地语音控制',
'd71d279e-909b-4e37-a2b7-a9f02a82c052582.jpg',2,'1.1','2022-07-08 10:27:34'),(28,6,'小米米家行车记录仪3S','棕色',
998,'小米米家行车记录仪1S','58449bdb-7e58-4a2e-a579-9354bb0f8240582.jpg',2,'1','2022-07-08 10:28:00'),
(29,6,'小米米家行车记录仪4S','棕色',15000,'小米米家行车记录仪1S','cbc7a57a-b16e-4c1b-b512-0f53412da0e1582.jpg',
0,'air','2022-07-08 10:28:26'),(30,6,'小米米家行车记录仪5S','白色',998,'小米米家行车记录仪1S','d673a98c-4721-47f7-b61b-ddaa3398da05582.jpg',
2,'123','2022-07-08 10:29:01'),(31,13,'康师傅','红色',12,'122212121','78f99c6f-4ec4-4d68-8446-67cf6c75134cduola2.jpg',1,'12',
'2022-07-08 17:25:47');
1.2 商品查询（分页）
（1）Product.java
package com.zql.pojo;
import java.io.Serializable;
/**
* author:Daniel
* version:1.0
* 商品实体类
*
*/
public class Product implements Serializable{
private int pid;//序号
private String pname;//商品名称
private String color;//商品颜色
private double price;//商品价格
private String description;//商品简介
private String pic;//商品展示图
private int state;//是否热推
private String version;//商品型号
private String product_date;//商品生产日期
private int cid;//外键 关联商品分类表
public Product() {
super();
// TODO Auto-generated constructor stub
}
public Product(int pid, String pname, String color, double price, String description, String pic, int state,
String version, String product_date, int cid) {
super();
this.pid = pid;
this.pname = pname;
this.color = color;
this.price = price;
this.description = description;
this.pic = pic;
this.state = state;
this.version = version;
this.product_date = product_date;
this.cid = cid;
}
public int getPid() {
return pid;
}
public void setPid(int pid) {
this.pid = pid;
}
public String getPname() {
return pname;
}
public void setPname(String pname) {
this.pname = pname;
}
public String getColor() {
return color;
}
public void setColor(String color) {
this.color = color;
}
public double getPrice() {
return price;
}
public void setPrice(double price) {
this.price = price;
}
public String getDescription() {
return description;
}
public void setDescription(String description) {
this.description = description;
}
public String getPic() {
return pic;
}
public void setPic(String pic) {
this.pic = pic;
}
public int getState() {
return state;
}
public void setState(int state) {
this.state = state;
}
public String getVersion() {
return version;
}
public void setVersion(String version) {
this.version = version;
}
public String getProduct_date() {
return product_date;
}
public void setProduct_date(String product_date) {
this.product_date = product_date;
}
public int getCid() {
return cid;
}
public void setCid(int cid) {
this.cid = cid;
}
@Override
public String toString() {
return "Product [pid=" + pid + ", pname=" + pname + ", color=" + color + ", price=" + price + ", description="
+ description + ", pic=" + pic + ", state=" + state + ", version=" + version + ", product_date="
+ product_date + ", cid=" + cid + "]";
}
}
(2) admin/left.jsp
${pageContext.request.contextPath }/product?method=productByPageBean&pageNumber=1
(3)ProductServlet.java
package com.zql.web.servlet;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.zql.pojo.Category;
import com.zql.service.ProductService;
import com.zql.service.impl.ProductServiceImpl;
import com.zql.utils.PageBean;
/**
* author:Daniel
* version:1.0
*/
@WebServlet("/product")
public class ProductServlet extends BaseServlet{
private ProductService ps = new ProductServiceImpl();
//分页查询商品
public String productByPageBean(HttpServletRequest request, HttpServletResponse response)throws Exception {
//处理数据
String pageNumber = request.getParameter("pageNumber");
//创建pageBean对象
PageBean pb = new PageBean();
//设置当前页
pb.setPageNumber(Integer.parseInt(pageNumber));
//设置每页显示的条数
pb.setPageSize(5);
PageBean<Category> pageBean = ps.categoryByPageBean(pb);
//System.out.println(pageBean);
//存放到域中
request.setAttribute("pb", pageBean);
//请求转发
return "/admin/product_list.jsp";
}
}
(4)ProductService.java
package com.zql.service;
import com.zql.pojo.Category;
import com.zql.utils.PageBean;
/**
* author:Daniel
* version:1.0
*/
public interface ProductService {
//分页查询商品
PageBean<Category> categoryByPageBean(PageBean pb) throws Exception;
}
(5)ProductServiceImpl.java
package com.zql.service.impl;
import java.util.List;
import com.zql.dao.ProductDao;
import com.zql.dao.impl.ProductDaoImpl;
import com.zql.pojo.Category;
import com.zql.pojo.Product;
import com.zql.service.ProductService;
import com.zql.utils.PageBean;
/**
* author:Daniel
* version:1.0
*/
public class ProductServiceImpl implements ProductService{
private ProductDao pd = new ProductDaoImpl();
//分页查询商品
@Override
public PageBean<Category> categoryByPageBean(PageBean pb) throws Exception {
List<Product> result = pd.categoryByPageBean(pb);
int count = pd.selectCount(pb);
pb.setResult(result);
pb.setTotalCount(count);
return pb;
}
}
(6)ProductDao.java
package com.zql.dao;
import java.sql.SQLException;
import java.util.List;
import com.zql.pojo.Product;
import com.zql.utils.PageBean;
/**
* author:Daniel
* version:1.0
*/
public interface ProductDao {
//分页查询商品
List<Product> categoryByPageBean(PageBean pb) throws SQLException;
int selectCount(PageBean pb) throws SQLException;
}
(7)ProductDaoImpl.java
package com.zql.dao.impl;
import java.sql.SQLException;
import java.util.List;
import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.BeanListHandler;
import org.apache.commons.dbutils.handlers.ScalarHandler;
import com.zql.dao.ProductDao;
import com.zql.pojo.Product;
import com.zql.utils.C3P0Utils;
import com.zql.utils.PageBean;
/**
* author:Daniel
* version:1.0
*/
public class ProductDaoImpl implements ProductDao{
private QueryRunner qr = new QueryRunner(C3P0Utils.getDataSource());
//分页查询商品
@Override
public List<Product> categoryByPageBean(PageBean pb) throws SQLException {
String sql = "select * from product limit ?,?";
Object[] param = {pb.getStartIndex(),pb.getPageSize()};
return qr.query(sql, new BeanListHandler<Product>(Product.class),param);
}
@Override
public int selectCount(PageBean pb) throws SQLException {
String sql = "select count(*) from product";
Long count = (Long) qr.query(sql,new ScalarHandler());
return count.intValue();
}
}
(8) admin/product_list.jsp
（8.1）遍历部分
<c:if test="${not empty pb.result }">
<c:forEach items="${pb.result }" var="v" varStatus="vs">
<tr>
<td><input name="" type="checkbox" value="${v.pid }"/></td>
<td>${vs.count}</td>
<td>${v.cid }</td>
<td>${v.pname }</td>
<td>${v.color }</td>
<td>${v.price }</td>
<td width="10%">${v.description }</td>
<td>
<img src="/xml_upload/${v.pic }" alt="" width="80" />
</td>
<td>
<!-- 0 正常,1热门产品，2为你推荐，3，新品 4，小米明星单品 -->
<c:if test="${v.state == 0 }">正常</c:if>
<c:if test="${v.state == 1 }">热门产品</c:if>
<c:if test="${v.state == 2 }">为你推荐</c:if>
<c:if test="${v.state == 3 }">新品</c:if>
<c:if test="${v.state == 4 }">小米明星单品</c:if>
</td>
<td>${v.version }</td>
<td>${v.product_date }</td>
<td>
<a href="javascript:void(0)" onclick="">删除</a>
<a href="">修改</a>
</td>
</tr>
</c:forEach>
</c:if>
（8.2） 分页部分
（8.3） 完整代码
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>商品信息</title>
<link href="${pageContext.request.contextPath}/admin/css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.3.1.js"></script>
<script language="javascript" type="text/javascript" src="${pageContext.request.contextPath}/admin/js/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript">
// old write
$(document).ready(function(){
$(".click").click(function(){
$(".tip").fadeIn(200);
});
$(".tiptop a").click(function(){
$(".tip").fadeOut(200);
});
$(".sure").click(function(){
$(".tip").fadeOut(100);
});
$(".cancel").click(function(){
$(".tip").fadeOut(100);
});
});
</script>
</head>
<body>
<div class="place">
<span>位置：</span>
<ul class="placeul">
<li><a href="#">商品管理</a></li>
</ul>
</div>
<div class="rightinfo">
<div class="tools">
<ul class="toolbar">
<!--
<li class="click"><span><img src="images/t02.png" /></span>修改</li>
<li><span><img src="images/t04.png" /></span>统计</li>
-->
<li style="cursor: pointer;" id="addProduct" ><span><img src="${pageContext.request.contextPath}/admin/images/t01.png" /></span>添加商品</li>
<li style="cursor: pointer;" ><span><img src="${pageContext.request.contextPath}/admin/images/t03.png" /></span>批量删除</li>
</ul>
</div>
<table class="tablelist">
<thead>
<tr>
<th><input name="" type="checkbox" value=""/></th>
<th>序号<i class="sort"><img src="${pageContext.request.contextPath}/admin/images/px.gif" /></i></th>
<th>商品类别</th>
<th>商品名称</th>
<th>商品颜色</th>
<th>商品价格</th>
<th width="10%">简介</th>
<th>商品展示图</th>
<th>是否热推</th>
<th>型号</th>
<th>生产日期</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<c:if test="${not empty pb.result }">
<c:forEach items="${pb.result }" var="v" varStatus="vs">
<tr>
<td><input name="" type="checkbox" value="${v.pid }"/></td>
<td>${vs.count}</td>
<td>${v.cid }</td>
<td>${v.pname }</td>
<td>${v.color }</td>
<td>${v.price }</td>
<td width="10%">${v.description }</td>
<td>
<img src="/xml_upload/${v.pic }" alt="" width="80" />
</td>
<td>
<!-- 0 正常,1热门产品，2为你推荐，3，新品 4，小米明星单品 -->
<c:if test="${v.state == 0 }">正常</c:if>
<c:if test="${v.state == 1 }">热门产品</c:if>
<c:if test="${v.state == 2 }">为你推荐</c:if>
<c:if test="${v.state == 3 }">新品</c:if>
<c:if test="${v.state == 4 }">小米明星单品</c:if>
</td>
<td>${v.version }</td>
<td>${v.product_date }</td>
<td>
<a href="javascript:void(0)" onclick="">删除</a>
<a href="">修改</a>
</td>
</tr>
</c:forEach>
</c:if>
</tbody>
</table>
<div class="pagin">
<div class="message">共<i class="blue">${pb.totalCount }</i>条记录，当前显示第 <i class="blue">${pb.pageNumber} </i>页</div>
<ul class="paginList">
<li class="paginItem"><a href="${pageContext.request.contextPath }/product?method=productByPageBean&pageNumber=1">首页</a></li>
<li class="paginItem"><a href="${pageContext.request.contextPath }/product?method=productByPageBean&pageNumber=${pb.pageNumber-1}">上一页</a></li>
<li class="paginItem"><a href="${pageContext.request.contextPath }/product?method=productByPageBean&pageNumber=${pb.pageNumber+1}">下一页</a></li>
<li class="paginItem"><a href="${pageContext.request.contextPath }/product?method=productByPageBean&pageNumber=${pb.totalPage}">尾页</a></li>
</ul>
</div>
<div class="tip">
<div class="tiptop"><span>提示信息</span><a></a></div>
<div class="tipinfo">
<span><img src="images/ticon.png" /></span>
<div class="tipright">
<p>是否确认对信息的修改 ？</p>
<cite>如果是请点击确定按钮 ，否则请点取消。</cite>
</div>
</div>
<div class="tipbtn">
<input name="" type="button" class="sure" value="确定" />
<input name="" type="button" class="cancel" value="取消" />
</div>
</div>
</div>
<script type="text/javascript">
$('.tablelist tbody tr:odd').addClass('odd');
</script>
</body>
</html>
1.3 查询出来的商品类别显示
（1）需求：将类别如下的数字变为对应的类别名称
（2）增加关联
Product.java
//将对应的类别变为类别名称
private Category category;
public Category getCategory() {
return category;
}
public void setCategory(Category category) {
this.category = category;
}
（2）ProductServiceImpl.java
(4)admin/product_list.jsp
最终显示 http://localhost:8080/xiaomi/admin/main.jsp
二、商品模块–模糊查询（分两步）
2.1 第一步 模糊查询
（1）在admin/product.jsp中导入文件四 模糊查询表单代码
最终显示位置：
（2）编写(从商品名称，是否热推，时间分三步编写代码)
ProductServlet
//模糊查询
Product p = new Product();//这步完了不要在各层加 Product p 或 p(不过idea或eclipse会提醒的)
//模糊查询获取商品
String pname = request.getParameter("pname");
p.setPname(pname);
//模糊查询获取是否热推
String state = request.getParameter("state");
if(state != null && !"".equals(state)) {
p.setState(Integer.parseInt(state));
}
//模糊查询获取时间
String start_time = request.getParameter("start_time");
String end_time = request.getParameter("end_time");
//先到javabean中添加见(3)，不然这里没有
p.setStart_time(start_time);
p.setEnd_time(end_time);
//PageBean<Category> pageBean = ps.categoryByPageBean(pb,p);
(3) Product.java
//模糊查询获取时间
private String start_time;
private String end_time;
public String getStart_time() {
return start_time;
}
public void setStart_time(String start_time) {
this.start_time = start_time;
}
public String getEnd_time() {
return end_time;
}
public void setEnd_time(String end_time) {
this.end_time = end_time;
}
ProductDaoImpl.java
//分页查询商品——>模糊查询(动态sql,sql拼接，中级框架中会详细总结)
@Override
public List<Product> categoryByPageBean(PageBean pb,Product p) throws SQLException {
StringBuffer sb = new StringBuffer();
sb.append("select * from product where 1=1");
//模糊查询获取商品
if(p.getPname() != null && !"".equals(p.getPname())) {
sb.append(" and pname like '%"+p.getPname()+"%' ");
}
//模糊查询获取是否热推
if(p.getState() != 0 && !"".equals(p.getState())) {
sb.append(" and state like '%"+p.getState()+"%' ");
}
//模糊查询获取时间
if(p.getStart_time() != null && !"".equals(p.getStart_time()) &&
p.getEnd_time() != null && !"".equals(p.getEnd_time())) {
sb.append(" and product_date between '"+p.getStart_time()+"' and '"+p.getEnd_time()+"' ");
}
sb.append(" limit "+pb.getStartIndex()+","+pb.getPageSize()+"");
return qr.query(sb.toString(), new BeanListHandler<Product>(Product.class));
}
最终显示（例如模糊查询"热门产品"）
2.2 第二步 模糊查询回显数据
（1） ProductServlet.java
存放到域中：
request.setAttribute("p", p);
（2）admin/product_list.jsp
(3) ProductDaoImpl.java(注：这一步之前需要 在对应层加 Product p 或 p)
//查询分页下标总记录(copy全面做修改添)——>模糊查询显示
@Override
public int selectCount(PageBean pb,Product p) throws SQLException {
StringBuffer sb = new StringBuffer();
sb.append("select count(*) from product where 1=1");
//模糊查询获取商品
if(p.getPname() != null && !"".equals(p.getPname())) {
sb.append(" and pname like '%"+p.getPname()+"%' ");
}
//模糊查询获取是否热推
if(p.getState() != 0 && !"".equals(p.getState())) {
sb.append(" and state like '%"+p.getState()+"%' ");
}
//模糊查询获取时间
if(p.getStart_time() != null && !"".equals(p.getStart_time()) &&
p.getEnd_time() != null && !"".equals(p.getEnd_time())) {
sb.append(" and product_date between '"+p.getStart_time()+"' and '"+p.getEnd_time()+"' ");
}
Long count = (Long) qr.query(sb.toString(),new ScalarHandler());
return count.intValue();
}
(4) 最终显示（注：当查询后点击上下页面，会显示全部，这个需要额外工具类实现）：
三、前台首页
3.1 前台首页–登录回显
（1）导入 文件四 index.jsp页面到WebContent下面
（2）login.jsp
location.href="${pageContext.request.contextPath}/index.jsp";
（3）编写 index.jsp
<!-- 前台首页显示top显示 -->
<!-- 未登录成功 -->
<c:if test="${empty user}">
<a class="mix" href="register.html">登录</a>
<a href="sign.html">注册</a>
</c:if>
<!-- 登录成功显示 -->
<c:if test="${not empty user}">
<a>
<font color= "while">欢迎您：${user.name } </font>
</a>
<a href="sign.html">
<a href="${pageContext.request.contextPath }/user?method=loginOut">退出</a>
</a>
</c:if>
（4）UserServiceImpl.java
//将登录成功的用户名放在session域中
request.getSession().setAttribute("user", user);
(5) UserServlet.java
//登录到首页点击退出loginOut
public String loginOut(HttpServletRequest request, HttpServletResponse response)throws Exception {
//获取session数据
HttpSession session = request.getSession();
//获取登录成功（UserServiceImpl）session中的user值
session.removeAttribute("user");
//重定向
response.sendRedirect(request.getContextPath()+"/login.jsp");
return null;
}
(6) 最终显示：http://localhost:8080/xiaomi/login.jsp
3.2 前台首页–分类展示
（1）编写sql先试先查询 SELECT * FROM category ORDER BY order_number ASC LIMIT 10
（2）login.jsp
location.href="${pageContext.request.contextPath}/toIndex?method=toIndex";
(3) 创建并且编写 ToIndexServlet.java
package com.zql.web.servlet;
import java.sql.SQLException;
import java.util.List;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.zql.pojo.Category;
import com.zql.service.CategoryService;
import com.zql.service.impl.CategoryServiceImpl;
@WebServlet("/toIndex")
public class ToIndexServlet extends BaseServlet {
private CategoryService cs = new CategoryServiceImpl();
//登录到首页动态获取左侧分类显示
public String toIndex(HttpServletRequest request, HttpServletResponse response) throws SQLException {
//查询前10条数据 按照升序进行排序展示 在左侧
//业务处理
List<Category> clist = cs.toIndex(10);
//存放到域中
request.setAttribute("clist", clist);
//跳转到首页
return "/index.jsp";
}
}
(4) 编写 CategoryService.java
//登录到首页动态获取左侧分类显示
List<Category> toIndex(int i) throws SQLException;
(5) 编写 CategoryServiceImpl.java
//登录到首页动态获取左侧分类显示
@Override
public List<Category> toIndex(int i) throws SQLException {
//登录到首页动态获取左侧分类显示
return cd.toIndex(i);
}
(6) 编写 CategoryDao.java
//登录到首页动态获取左侧分类显示
List<Category> toIndex(int i) throws SQLException;
(7) 编写 CategoryDaoImpl.java
//登录到首页动态获取左侧分类显示
@Override
public List<Category> toIndex(int i) throws SQLException {
//先到数据库写好直接copy这里就行，？ ToServlet.java中已经设置了10
String sql = "SELECT * FROM category ORDER BY order_number ASC LIMIT ? ";
return qr.query(sql, new BeanListHandler<Category>(Category.class),i);
}
Debug调试程序看是否动态拿到mysql数据
(8) index.jsp
<c:if test="${not empty clist}">
<c:forEach items="${clist}" var="c" varStatus="cs">
<li class="scr_li"><a href="">${c.cname }</a><i class="scr_i"></i></li>
</c:forEach>
</c:if>
（9）最终展示：
（9.1）可以在后台添加一条数据http://localhost:8080/xiaomi/admin/login.jsp
（9.2）前台则会显示上面后台数据和所添加数据 http://localhost:8080/xiaomi/login.jsp
3.3 前台首页–小米明星单品(在3.2基础上进行)
（1）需求：如下首页显示静态则解决从数据库动态获取
（2）编写sql先试先查询 SELECT * FROM product WHERE state = 4 LIMIT 5;
（3）ToIndesServlet.java
package com.zql.web.servlet;
import java.sql.SQLException;
import java.util.List;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.zql.pojo.Category;
import com.zql.pojo.Product;
import com.zql.service.CategoryService;
import com.zql.service.ProductService;
import com.zql.service.impl.CategoryServiceImpl;
import com.zql.service.impl.ProductServiceImpl;
@WebServlet("/toIndex")
public class ToIndexServlet extends BaseServlet {
//登录到首页动态获取左侧分类显示
public String toIndex(HttpServletRequest request, HttpServletResponse response) throws Exception {
//分类查询
//查询前10条数据 按照升序进行排序展示 在左侧
CategoryService cs = new CategoryServiceImpl();
//业务处理
List<Category> clist = cs.toIndex(10);
//小米明星单品
ProductService ps = new ProductServiceImpl();
//查询5条 因为静态格式显示5 是否热推以及数据库固定了 小米明星为state = 4
List<Product> plist = ps.findStarProduct(4,5);
//存放到域中
request.setAttribute("clist", clist);
request.setAttribute("plist", plist);
//跳转到首页
return "/index.jsp";
}
}
ProductService.java
//小米明星单品
List<Product> findStarProduct(int i, int j) throws Exception;
ProductServiceImpl.java
//小米明星单品
@Override
public List<Product> findStarProduct(int i, int j) throws Exception {
return pd.findStarProduct(i, j);
}
ProductDao.java
//小米明星单品
List<Product> findStarProduct(int i, int j) throws SQLException;
ProductDaoImpl.java
//小米明星单品
@Override
public List<Product> findStarProduct(int i, int j) throws SQLException {
String sql = "select * from product where state = ? like ?";
Object [] param = {i,j};
return qr.query(sql, new BeanListHandler<Product>(Product.class),param);
}
Debug调试程序看是否动态拿到mysql小米明星表内数据
index.jsp（描述需要引入fn函数）
index.jsp 完整代码
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小米首页</title>
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/index.css">
<script src="${pageContext.request.contextPath}/js/jquery-3.3.1.js"></script>
<style>
</style>
</head>
<body>
<div class="box">
<div class="inner whiteGL">
<div class="left">
<a class="mix" href="">仿小米商城-未经本人同意，请勿商用</a>
</div>
<div class="right">
<!-- 前台首页显示top显示 -->
<!-- 未登录成功 -->
<c:if test="${empty user}">
<a class="mix" href="register.html">登录</a>
<a href="sign.html">注册</a>
</c:if>
<!-- 登录成功显示 -->
<c:if test="${not empty user}">
<a>
<font color= "while">欢迎您：${user.name } </font>
</a>
<a href="sign.html">
<a href="${pageContext.request.contextPath }/user?method=loginOut">退出</a>
</a>
</c:if>
<a class="max" href="">消息通知</a>
<a href="trolley.html"><img src="img/cart.jpg" alt=""></a>
</div>
</div>
</div>
<div class="logo">
<div class="logo_left">
<div>
<a href="javascript:void(0);" title="小米官网"><img class="xiaomi" src="img/logo.jpg"></a>
</div>
</div>
<ul class="logo_center orangeGL">
<a href="">小米手机</a>
<a href="">红米</a>
<a href="">笔记本</a>
<a href="">电视</a>
<a href="">盒子</a>
<a href="">新品</a>
<a href="">路由器</a>
<a href="">智能硬件</a>
<a href="">服务</a>
<a href="">社区</a>
</ul>
<formv class="logo_right">
<div class="logo_input"><input type="text">
<!-- <div class="logo_input_div">
<a class="logo_input_a" href="">小米5 新品</a>
<a class="logo_input_a" href="">小米Note 3</a>
</div> -->
</div>
<a class="logo_right_a"><img src="img/find.jpg"></a>
<!--<a href="">红米5新品</a>-->
<!--<a href="">小米Noto 3</a>-->
</formv>
</div>
<div class="scroll">
<ul>
<li><a href=""><img src="img/scroll_01.jpg" alt=""></a></li>
<li><a href=""><img src="img/scroll_02.jpg" alt=""></a></li>
<li><a href=""><img src="img/scroll_03.jpg" alt=""></a></li>
<li><a href=""><img src="img/scroll_04.jpg" alt=""></a></li>
<li><a href=""><img src="img/scroll_05.jpg" alt=""></a></li>
<li><a href=""><img src="img/scroll_06.jpg" alt=""></a></li>
</ul>
<div class="scroll_dot">
<span class="scroll_dot_span"></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="scroll_arrows">
<a href="javascript:void(0);"><span class="left scroll_arrows_back">〈</span></a>
<a href="javascript:void(0);"><span class="right scroll_arrows_back">〉</span></a>
</div>
<div class="scroll_left">
<ul class="scr-ul">
<c:if test="${not empty clist}">
<c:forEach items="${clist}" var="c" varStatus="cs">
<li class="scr_li"><a href="">${c.cname }</a><i class="scr_i"></i></li>
</c:forEach>
</c:if>
<!-- <li class="scr_li"><a href="">手机 电话卡</a><i class="scr_i"></i></li>
<li class="scr_li"><a href="">笔记本</a><i class="scr_i"></i></li>
<li class="scr_li"><a href="">电视 盒子</a><i class="scr_i"></i></li>
<li class="scr_li"><a href="">路由器 智能硬件</a><i class="scr_i"></i></li>
<li class="scr_li"><a href="">移动电源 电池 插线板</a><i class="scr_i"></i></li>
<li class="scr_li"><a href="">耳机 音响</a><i class="scr_i"></i></li>
<li class="scr_li"><a href="">保护套 贴膜</a><i class="scr_i"></i></li>
<li class="scr_li"><a href="">线材 支架 存储卡</a><i class="scr_i"></i></li>
<li class="scr_li"><a href="">箱包 服饰 鞋 眼镜</a><i class="scr_i"></i></li>
<li class="scr_li"><a href="">米兔 生活周边</a><i class="scr_i"></i></li> -->
</ul>
</div>
<!--<div class="scroll_right"><img src="img/scroll_02.jpg"></div>-->
</div>
<div class="bot">
<div class="bot_max">
<div class="bot_first">
<div class="bot_one">
<div><a href=""><img src="img/bot_01.jpg">选购手机</a></div>
<div><a href=""><img src="img/bot_02.jpg">企业团购</a></div>
<div><a href=""><img src="img/bot_03.jpg">F码通道</a></div>
<div><a href=""><img src="img/bot_04.jpg">img米粉卡</a></div>
<div><a href=""><img src="img/bot_05.jpg">以旧换新</a></div>
<div><a href=""><img src="img/bot_06.jpg">话费充值</a></div>
</div>
</div>
<a href="#"><img src="img/3_02.jpg" alt=""></a>
<a href="#"><img src="img/3_03.jpg" alt=""></a>
<a href="#"><img src="img/3_04.jpg" alt=""></a>
</div>
</div>
<div class="time">
<div class="H">小米明星单品</div>
<div class="time_in">
<!-- <div><a href=""><img class="time_min" src="img/4_01.jpg" alt=""></a></div>
<div><a href=""><img src="img/4_02.jpg" alt=""></a></div>
<div><a href=""><img src="img/4_03.jpg" alt=""></a></div>
<div><a href=""><img src="img/4_04.jpg" alt=""></a></div>
<div><a href=""><img src="img/4_05.jpg" alt=""></a></div> -->
<c:if test="${not empty plist }">
<c:forEach items="${plist }" var="p" varStatus="ps">
<div style="background-color: #fff;width: 234px;height:320px;float: left;margin-left: 11px; ">
<a href="#" target="_blank">
<img class="time_min" style="width:234px;height: 234px;" src="/xml_upload/${p.pic }" alt="">
</a>
<div style="clear: both;" align="center">
${p.pname }
</div>
<br/>
<br/>
<div style="width: 234px;height: 85px;" align="center">
<div style="width: 234px;height: 20px;line-height: 20px;text-align: center;font-size: 14px;font-family: Arial">
<%-- ${p.description } --%>
<c:if test="${p.description.length() <= 12 }">
${p.description }
</c:if>
<c:if test="${p.description.length() > 12 }">
${fn:substring(p.description , 0 , 12) }···
</c:if>
</div>
<div style="width: 234px;height: 30px;line-height: 30px;text-align: center;color: #ff6700;font-size: 14px;font-family: Arial">
<span style="color: #000"> 起始价 ${p.price }</span>
</div>
</div>
</div>
</c:forEach>
</c:if>
</div>
</div>
<div class="appliances">
<div class="app_width">
<div class="app_A">家电</div>
<div class="app_Ar orangeGL">
<div class="app_Ar_r"><a href="">热门</a></div>
<div class="app_Ar_r"><a href="">电视影音</a></div>
<div class="app_Ar_r"><a href="">电脑</a></div>
<div class="app_Ar_r"><a href="">家居</a></div>
</div>
<div class="app_max">
<div class="appl"><a href=""><img src="img/app_00.jpg" alt=""></a></div>
<div class="appr">
<div class="appr_top">
<div class="appr_min" id="appr_min1"><a href=""><img src="img/app_04.jpg" alt=""></a></div>
<div class="appr_min"><a href=""><img src="img/app_03.jpg" alt=""></a></div>
<div class="appr_min"><a href=""><img src="img/app_02.jpg" alt=""></a></div>
<div class="appr_min"><a href=""><img src="img/app_01.jpg" alt=""></a></div>
</div>
<div class="appr_bottom">
<div class="appr_min" id="appr_min2">
<div class="appr_min_top"><a href=""><img src="img/app_24.jpg" alt=""></a></div>
<div class="appr_min_bottom"><a href="">
<div class="figure_a">
<h3>浏览更多</h3>
<li style="color:#757575; ">热门</li>
</div>
<div class="figure_b">
<div class="figure_b_yuan">
<li >→</li>
</div>
</div>
</a></div>
</div>
<div class="appr_min"><a href=""><img src="img/app_23.jpg" alt=""></a></div>
<div class="appr_min"><a href=""><img src="img/app_22.jpg" alt=""></a></div>
<div class="appr_min"><a href=""><img src="img/app_21.jpg" alt=""></a></div>
</div>
</div>
</div>
</div>
</div>`
<div class="capabackground">
<div class="capacity">
<div class="capa_box_top">
<div class="capa_box_top_al">智能</div>
<div class="capa_box_top_ar">
<div class="capa_box_top_ar_min orangeGL"><a class="script_capa_box_top_ar" href="javascript:;">路由器</a></div>
<div class="capa_box_top_ar_min orangeGL"><a class="script_capa_box_top_ar" href="javascript:;">酷玩</a></div>
<div class="capa_box_top_ar_min orangeGL"><a class="script_capa_box_top_ar" href="javascript:;">健康</a></div>
<div class="capa_box_top_ar_min orangeGL"><a class="script_capa_box_top_ar" href="javascript:;">出行</a></div>
<div class="capa_box_top_ar_min orangeGL"><a class="script_capa_box_top_ar" href="javascript:;">热门</a></div>
</div>
</div>
<div class="capa_box scrip_capa_box scrip_capa_box_on">
<div class="capa_top">
<div class="capa capa_shadow">
<a href=""><img src="img/capa_01.jpg"></a>
</div>
<div class="capa capa_shadow">
<a href=""><img src="img/capa_02.jpg">
<div class="tran">
<span>小米一如既往的好前天下单今天就到了，送货到家很细心的...</span>
</div>
</a>
<div class="capa_a">
<ul>
<li style="color: #333333">米家LED 智能台灯</li>
<li style="color: #b0b0b0">无可视频闪,四种场景可变调光</li>
<li style="font-size: 14px;margin-top: 10px; color: #ff6700" >169元</li>
</ul>
</div>
</div>
<div class="capa capa_shadow">
<a href=""><img src="img/capa_03.jpg"><div class="tran">
<span>现在看起来挺不错的，性价比超高！持续关注呀</span>
</div></a>
<div class="capa_a">
<ul>
<li style="color: #333333">九号平衡车 Plus</li>
<li style="color: #b0b0b0">35km超长续航,一键自动跟随</li>
<li style="font-size: 14px;margin-top: 10px; color: #ff6700" >3499元</li>
</ul>
</div>
</div>
<div class="capa capa_shadow">
<a href=""><img src="img/capa_04.jpg"><div class="tran">
<span>米兔智能故事机.</span>
</div></a>
<div class="capa_a">
<ul>
<li style="color: #333333">米兔智能故事机</li>
<li style="color: #b0b0b0">微信远程互动,智能语音交互</li>
<li style="font-size: 14px;margin-top: 10px; color: #ff6700">199元</li>
</ul>
</div>
</div>
<div class="capa capa_shadow capa_unright">
<a href=""><img src="img/capa_05.jpg" alt="">
<div class="tran">
<span>小米一如既往的好前天下单今天就到了，送货到家很细心的...</span>
</div></a>
<div class="capa_a">
<ul>
<li style="color: #333333">米家恒温电水壶</li>
<li style="color: #b0b0b0">水温智能控制,304不锈钢内胆</li>
<li style="font-size: 14px;margin-top: 10px; color: #ff6700">199元</li>
</ul>
</div>
</div>
</div>
<div class="capa_bottom">
<div class="capa capa_shadow">
<a href=""><img src="img/capa_06.jpg"></a>
</div>
<div class="capa capa_shadow">
<a href=""><img src="img/capa_07.jpg">
<div class="tran">
<span>小米一如既往的好前天下单今天就到了，送货到家很细心的...</span>
</div></a>
<div class="capa_a">
<ul>
<li style="color: #333333">iHealth体温计</li>
<li style="color: #b0b0b0">一秒速测,LED屏清晰读数</li>
<li style="font-size: 14px;margin-top: 10px; color: #ff6700">129元</li>
</ul>
</div>
</div>
<div class="capa capa_shadow">
<a href=""><img src="img/capa_08.jpg">
<div class="tran">
<span>小米一如既往的好前天下单今天就到了，送货到家很细心的...</span>
</div></a>
<div class="capa_a">
<ul>
<li style="color: #333333">米家行车记录仪</li>
<li style="color: #b0b0b0">晚上能拍清车牌的行车记录仪</li>
<li style="font-size: 14px;margin-top: 10px; color: #ff6700">349元</li>
</ul>
</div>
</div>
<div class="capa capa_shadow">
<a href=""><img src="img/capa_09.jpg">
<div class="tran">
<span>小米一如既往的好前天下单今天就到了，送货到家很细心的...</span>
</div></a>
<div class="capa_a">
<ul>
<li style="color: #333333">米家iHealth血压计</li>
<li style="color: #b0b0b0">爸妈上手就会用的智能血压计</li>
<li style="font-size: 14px;margin-top: 10px; color: #ff6700">399元</li>
</ul>
</div>
</div>
<div class="capa capa_unright" >
<div class="capa_min ">
<img class="capa_shadow" src="img/capa_10.jpg">
</div>
<div class="capa_min bottom capa_shadow">
<div class="figure_a">
<h3>浏览更多</h3>
<li style="color:#757575; ">电影影视</li>
</div>
<div class="figure_b">
<div class="figure_b_yuan">
<li >→</li>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="capa_box scrip_capa_box ">
<div class="capa_top">
<div class="capa capa_shadow">
<a href=""><img src="img/capa_05.jpg"></a>
</div>
<div class="capa capa_shadow">
<a href=""><img src="img/capa_04.jpg">
<div class="tran">
<span>小米一如既往的好前天下单今天就到了，送货到家很细心的...</span>
</div></a>
<div class="capa_a">
<ul>
<li style="color: #333333">米家LED 智能台灯</li>
<li style="color: #b0b0b0">无可视频闪,四种场景可变调光</li>
<li style="font-size: 14px;margin-top: 10px; color: #ff6700" >169元</li>
</ul>
</div>
</div>
<div class="capa capa_shadow">
<a href=""><img src="img/capa_03.jpg"><div class="tran">
<span>现在看起来挺不错的，性价比超高！持续关注呀</span>
</div></a>
<div class="capa_a">
<ul>
<li style="color: #333333">九号平衡车 Plus</li>
<li style="color: #b0b0b0">35km超长续航,一键自动跟随</li>
<li style="font-size: 14px;margin-top: 10px; color: #ff6700" >3499元</li>
</ul>
</div>
</div>
<div class="capa capa_shadow">
<a href=""><img src="img/capa_02.jpg"><div class="tran">
<span>米兔智能故事机.</span>
</div></a>
<div class="capa_a">
<ul>
<li style="color: #333333">米兔智能故事机</li>
<li style="color: #b0b0b0">微信远程互动,智能语音交互</li>
<li style="font-size: 14px;margin-top: 10px; color: #ff6700">199元</li>
</ul>
</div>
</div>
<div class="capa capa_shadow capa_unright">
<a href=""><img src="img/capa_01.jpg" alt="">
<div class="tran">
<span>小米一如既往的好前天下单今天就到了，送货到家很细心的...</span>
</div></a>
<div class="capa_a">
<ul>
<li style="color: #333333">米家恒温电水壶</li>
<li style="color: #b0b0b0">水温智能控制,304不锈钢内胆</li>
<li style="font-size: 14px;margin-top: 10px; color: #ff6700">199元</li>
</ul>
</div>
</div>
</div>
<div class="capa_bottom">
<div class="capa capa_shadow">
<a href=""><img src="img/capa_06.jpg"></a>
</div>
<div class="capa capa_shadow">
<a href=""><img src="img/capa_07.jpg">
<div class="tran">
<span>小米一如既往的好前天下单今天就到了，送货到家很细心的...</span>
</div></a>
<div class="capa_a">
<ul>
<li style="color: #333333">iHealth体温计</li>
<li style="color: #b0b0b0">一秒速测,LED屏清晰读数</li>
<li style="font-size: 14px;margin-top: 10px; color: #ff6700">129元</li>
</ul>
</div>
</div>
<div class="capa capa_shadow">
<a href=""><img src="img/capa_08.jpg">
<div class="tran">
<span>小米一如既往的好前天下单今天就到了，送货到家很细心的...</span>
</div></a>
<div class="capa_a">
<ul>
<li style="color: #333333">米家行车记录仪</li>
<li style="color: #b0b0b0">晚上能拍清车牌的行车记录仪</li>
<li style="font-size: 14px;margin-top: 10px; color: #ff6700">349元</li>
</ul>
</div>
</div>
<div class="capa capa_shadow">
<a href=""><img src="img/capa_09.jpg">
<div class="tran">
<span>小米一如既往的好前天下单今天就到了，送货到家很细心的...</span>
</div></a>
<div class="capa_a">
<ul>
<li style="color: #333333">米家iHealth血压计</li>
<li style="color: #b0b0b0">爸妈上手就会用的智能血压计</li>
<li style="font-size: 14px;margin-top: 10px; color: #ff6700">399元</li>
</ul>
</div>
</div>
<div class="capa capa_unright" >
<div class="capa_min ">
<img class="capa_shadow" src="img/capa_10.jpg">
</div>
<div class="capa_min bottom capa_shadow">
<div class="figure_a">
<h3>浏览更多</h3>
<li style="color:#757575; ">电影影视</li>
</div>
<div class="figure_b">
<div class="figure_b_yuan">
<li >→</li>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="capa_box scrip_capa_box">
<div class="capa_top">
<div class="capa capa_shadow">
<a href=""><img src="img/capa_01.jpg"></a>
</div>
<div class="capa capa_shadow">
<a href=""><img src="img/capa_02.jpg">
<div class="tran">
<span>小米一如既往的好前天下单今天就到了，送货到家很细心的...</span>
</div></a>
<div class="capa_a">
<ul>
<li style="color: #333333">米家LED 智能台灯</li>
<li style="color: #b0b0b0">无可视频闪,四种场景可变调光</li>
<li style="font-size: 14px;margin-top: 10px; color: #ff6700" >169元</li>
</ul>
</div>
</div>
<div class="capa capa_shadow">
<a href=""><img src="img/capa_03.jpg"><div class="tran">
<span>现在看起来挺不错的，性价比超高！持续关注呀</span>
</div></a>
<div class="capa_a">
<ul>
<li style="color: #333333">九号平衡车 Plus</li>
<li style="color: #b0b0b0">35km超长续航,一键自动跟随</li>
<li style="font-size: 14px;margin-top: 10px; color: #ff6700" >3499元</li>
</ul>
</div>
</div>
<div class="capa capa_shadow">
<a href=""><img src="img/capa_04.jpg"><div class="tran">
<span>米兔智能故事机.</span>
</div></a>
<div class="capa_a">
<ul>
<li style="color: #333333">米兔智能故事机</li>
<li style="color: #b0b0b0">微信远程互动,智能语音交互</li>
<li style="font-size: 14px;margin-top: 10px; color: #ff6700">199元</li>
</ul>
</div>
</div>
<div class="capa capa_shadow capa_unright">
<a href=""><img src="img/capa_05.jpg" alt="">
<div class="tran">
<span>小米一如既往的好前天下单今天就到了，送货到家很细心的...</span>
</div></a>
<div class="capa_a">
<ul>
<li style="color: #333333">米家恒温电水壶</li>
<li style="color: #b0b0b0">水温智能控制,304不锈钢内胆</li>
<li style="font-size: 14px;margin-top: 10px; color: #ff6700">199元</li>
</ul>
</div>
</div>
</div>
<div class="capa_bottom">
<div class="capa capa_shadow">
<a href=""><img src="img/capa_10.jpg"></a>
</div>
<div class="capa capa_shadow">
<a href=""><img src="img/capa_09.jpg">
<div class="tran">
<span>小米一如既往的好前天下单今天就到了，送货到家很细心的...</span>
</div></a>
<div class="capa_a">
<ul>
<li style="color: #333333">iHealth体温计</li>
<li style="color: #b0b0b0">一秒速测,LED屏清晰读数</li>
<li style="font-size: 14px;margin-top: 10px; color: #ff6700">129元</li>
</ul>
</div>
</div>
<div class="capa capa_shadow">
<a href=""><img src="img/capa_08.jpg">
<div class="tran">
<span>小米一如既往的好前天下单今天就到了，送货到家很细心的...</span>
</div></a>
<div class="capa_a">
<ul>
<li style="color: #333333">米家行车记录仪</li>
<li style="color: #b0b0b0">晚上能拍清车牌的行车记录仪</li>
<li style="font-size: 14px;margin-top: 10px; color: #ff6700">349元</li>
</ul>
</div>
</div>
<div class="capa capa_shadow">
<a href=""><img src="img/capa_07.jpg">
<div class="tran">
<span>小米一如既往的好前天下单今天就到了，送货到家很细心的...</span>
</div></a>
<div class="capa_a">
<ul>
<li style="color: #333333">米家iHealth血压计</li>
<li style="color: #b0b0b0">爸妈上手就会用的智能血压计</li>
<li style="font-size: 14px;margin-top: 10px; color: #ff6700">399元</li>
</ul>
</div>
</div>
<div class="capa capa_unright" >
<div class="capa_min ">
<img class="capa_shadow" src="img/capa_06.jpg">
</div>
<div class="capa_min bottom capa_shadow">
<div class="figure_a">
<h3>浏览更多</h3>
<li style="color:#757575; ">电影影视</li>
</div>
<div class="figure_b">
<div class="figure_b_yuan">
<li >→</li>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="capa_box scrip_capa_box">
<div class="capa_top">
<div class="capa capa_shadow">
<a href=""><img src="img/capa_03.jpg"></a>
</div>
<div class="capa capa_shadow">
<a href=""><img src="img/capa_03.jpg">
<div class="tran">
<span>小米一如既往的好前天下单今天就到了，送货到家很细心的...</span>
</div></a>
<div class="capa_a">
<ul>
<li style="color: #333333">米家LED 智能台灯</li>
<li style="color: #b0b0b0">无可视频闪,四种场景可变调光</li>
<li style="font-size: 14px;margin-top: 10px; color: #ff6700" >169元</li>
</ul>
</div>
</div>
<div class="capa capa_shadow">
<a href=""><img src="img/capa_03.jpg"><div class="tran">
<span>现在看起来挺不错的，性价比超高！持续关注呀</span>
</div></a>
<div class="capa_a">
<ul>
<li style="color: #333333">九号平衡车 Plus</li>
<li style="color: #b0b0b0">35km超长续航,一键自动跟随</li>
<li style="font-size: 14px;margin-top: 10px; color: #ff6700" >3499元</li>
</ul>
</div>
</div>
<div class="capa capa_shadow">
<a href=""><img src="img/capa_04.jpg"><div class="tran">
<span>米兔智能故事机.</span>
</div></a>
<div class="capa_a">
<ul>
<li style="color: #333333">米兔智能故事机</li>
<li style="color: #b0b0b0">微信远程互动,智能语音交互</li>
<li style="font-size: 14px;margin-top: 10px; color: #ff6700">199元</li>
</ul>
</div>
</div>
<div class="capa capa_shadow capa_unright">
<a href=""><img src="img/capa_05.jpg" alt="">
<div class="tran">
<span>小米一如既往的好前天下单今天就到了，送货到家很细心的...</span>
</div></a>
<div class="capa_a">
<ul>
<li style="color: #333333">米家恒温电水壶</li>
<li style="color: #b0b0b0">水温智能控制,304不锈钢内胆</li>
<li style="font-size: 14px;margin-top: 10px; color: #ff6700">199元</li>
</ul>
</div>
</div>
</div>
<div class="capa_bottom">
<div class="capa capa_shadow">
<a href=""><img src="img/capa_06.jpg"></a>
</div>
<div class="capa capa_shadow">
<a href=""><img src="img/capa_07.jpg">
<div class="tran">
<span>小米一如既往的好前天下单今天就到了，送货到家很细心的...</span>
</div></a>
<div class="capa_a">
<ul>
<li style="color: #333333">iHealth体温计</li>
<li style="color: #b0b0b0">一秒速测,LED屏清晰读数</li>
<li style="font-size: 14px;margin-top: 10px; color: #ff6700">129元</li>
</ul>
</div>
</div>
<div class="capa capa_shadow">
<a href=""><img src="img/capa_08.jpg">
<div class="tran">
<span>小米一如既往的好前天下单今天就到了，送货到家很细心的...</span>
</div></a>
<div class="capa_a">
<ul>
<li style="color: #333333">米家行车记录仪</li>
<li style="color: #b0b0b0">晚上能拍清车牌的行车记录仪</li>
<li style="font-size: 14px;margin-top: 10px; color: #ff6700">349元</li>
</ul>
</div>
</div>
<div class="capa capa_shadow">
<a href=""><img src="img/capa_09.jpg">
<div class="tran">
<span>小米一如既往的好前天下单今天就到了，送货到家很细心的...</span>
</div></a>
<div class="capa_a">
<ul>
<li style="color: #333333">米家iHealth血压计</li>
<li style="color: #b0b0b0">爸妈上手就会用的智能血压计</li>
<li style="font-size: 14px;margin-top: 10px; color: #ff6700">399元</li>
</ul>
</div>
</div>
<div class="capa capa_unright" >
<div class="capa_min ">
<img class="capa_shadow" src="img/capa_10.jpg">
</div>
<div class="capa_min bottom capa_shadow">
<div class="figure_a">
<h3>浏览更多</h3>
<li style="color:#757575; ">电影影视</li>
</div>
<div class="figure_b">
<div class="figure_b_yuan">
<li >→</li>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="capa_box scrip_capa_box">
<div class="capa_top">
<div class="capa capa_shadow">
<a href=""><img src="img/capa_01.jpg"></a>
</div>
<div class="capa capa_shadow">
<a href=""><img src="img/capa_02.jpg">
<div class="tran">
<span>小米一如既往的好前天下单今天就到了，送货到家很细心的...</span>
</div></a>
<div class="capa_a">
<ul>
<li style="color: #333333">米家LED 智能台灯</li>
<li style="color: #b0b0b0">无可视频闪,四种场景可变调光</li>
<li style="font-size: 14px;margin-top: 10px; color: #ff6700" >169元</li>
</ul>
</div>
</div>
<div class="capa capa_shadow">
<a href=""><img src="img/capa_03.jpg"><div class="tran">
<span>现在看起来挺不错的，性价比超高！持续关注呀</span>
</div></a>
<div class="capa_a">
<ul>
<li style="color: #333333">九号平衡车 Plus</li>
<li style="color: #b0b0b0">35km超长续航,一键自动跟随</li>
<li style="font-size: 14px;margin-top: 10px; color: #ff6700" >3499元</li>
</ul>
</div>
</div>
<div class="capa capa_shadow">
<a href=""><img src="img/capa_04.jpg"><div class="tran">
<span>米兔智能故事机.</span>
</div></a>
<div class="capa_a">
<ul>
<li style="color: #333333">米兔智能故事机</li>
<li style="color: #b0b0b0">微信远程互动,智能语音交互</li>
<li style="font-size: 14px;margin-top: 10px; color: #ff6700">199元</li>
</ul>
</div>
</div>
<div class="capa capa_shadow capa_unright">
<a href=""><img src="img/capa_05.jpg" alt="">
<div class="tran">
<span>小米一如既往的好前天下单今天就到了，送货到家很细心的...</span>
</div></a>
<div class="capa_a">
<ul>
<li style="color: #333333">米家恒温电水壶</li>
<li style="color: #b0b0b0">水温智能控制,304不锈钢内胆</li>
<li style="font-size: 14px;margin-top: 10px; color: #ff6700">199元</li>
</ul>
</div>
</div>
</div>
<div class="capa_bottom">
<div class="capa capa_shadow">
<a href=""><img src="img/capa_06.jpg"></a>
</div>
<div class="capa capa_shadow">
<a href=""><img src="img/capa_07.jpg">
<div class="tran">
<span>小米一如既往的好前天下单今天就到了，送货到家很细心的...</span>
</div></a>
<div class="capa_a">
<ul>
<li style="color: #333333">iHealth体温计</li>
<li style="color: #b0b0b0">一秒速测,LED屏清晰读数</li>
<li style="font-size: 14px;margin-top: 10px; color: #ff6700">129元</li>
</ul>
</div>
</div>
<div class="capa capa_shadow">
<a href=""><img src="img/capa_08.jpg">
<div class="tran">
<span>小米一如既往的好前天下单今天就到了，送货到家很细心的...</span>
</div></a>
<div class="capa_a">
<ul>
<li style="color: #333333">米家行车记录仪</li>
<li style="color: #b0b0b0">晚上能拍清车牌的行车记录仪</li>
<li style="font-size: 14px;margin-top: 10px; color: #ff6700">349元</li>
</ul>
</div>
</div>
<div class="capa capa_shadow">
<a href=""><img src="img/capa_09.jpg">
<div class="tran">
<span>小米一如既往的好前天下单今天就到了，送货到家很细心的...</span>
</div></a>
<div class="capa_a">
<ul>
<li style="color: #333333">米家iHealth血压计</li>
<li style="color: #b0b0b0">爸妈上手就会用的智能血压计</li>
<li style="font-size: 14px;margin-top: 10px; color: #ff6700">399元</li>
</ul>
</div>
</div>
<div class="capa capa_unright" >
<div class="capa_min ">
<img class="capa_shadow" src="img/capa_10.jpg">
</div>
<div class="capa_min bottom capa_shadow">
<div class="figure_a">
<h3>浏览更多</h3>
<li style="color:#757575; ">电影影视</li>
</div>
<div class="figure_b">
<div class="figure_b_yuan">
<li >→</li>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="recommend">
<div class="capacity">
<div class="capa_box_top">
<div class="capa_box_top_al">为你推荐</div>
<div class="capa_box_top_ar">
<!--<div class="capa_box_top_ar_min orangeGL"><a href="">路由器</a></div>-->
<!--<div class="capa_box_top_ar_min orangeGL"><a href="">酷玩</a></div>-->
<!--<div class="capa_box_top_ar_min orangeGL"><a href="">健康</a></div>-->
<!--<div class="capa_box_top_ar_min orangeGL"><a href="">出行</a></div>-->
<!--<div class="capa_box_top_ar_min orangeGL"><a href="">热门</a></div>-->
</div>
</div>
<div class="capa_box">
<div class="capa_top">
<div class="capa capa_shadow">
<a href=""><img src="img/capa_01.jpg"></a>
</div>
<div class="capa capa_shadow">
<a href=""><img src="img/capa_02.jpg">
<!--<div class="tran">-->
<!--<span>小米一如既往的好前天下单今天就到了，送货到家很细心的...</span>-->
<!--</div>-->
</a>
<div class="capa_a">
<ul>
<li style="color: #333333">米家LED 智能台灯</li>
<li style="color: #b0b0b0">无可视频闪,四种场景可变调光</li>
<li style="font-size: 14px;margin-top: 10px; color: #ff6700" >169元</li>
</ul>
</div>
</div>
<div class="capa capa_shadow">
<a href=""><img src="img/capa_03.jpg">
<!--<div class="tran">-->
<!--<span>现在看起来挺不错的，性价比超高！持续关注呀</span>-->
<!--</div>-->
</a>
<div class="capa_a">
<ul>
<li style="color: #333333">九号平衡车 Plus</li>
<li style="color: #b0b0b0">35km超长续航,一键自动跟随</li>
<li style="font-size: 14px;margin-top: 10px; color: #ff6700" >3499元</li>
</ul>
</div>
</div>
<div class="capa capa_shadow">
<a href=""><img src="img/capa_04.jpg">
<!--<div class="tran">-->
<!--<span>米兔智能故事机.</span>-->
<!--</div>-->
</a>
<div class="capa_a">
<ul>
<li style="color: #333333">米兔智能故事机</li>
<li style="color: #b0b0b0">微信远程互动,智能语音交互</li>
<li style="font-size: 14px;margin-top: 10px; color: #ff6700">199元</li>
</ul>
</div>
</div>
<div class="capa capa_shadow capa_unright">
<a href=""><img src="img/capa_05.jpg" alt="">
<!--<div class="tran">-->
<!--<span>小米一如既往的好前天下单今天就到了，送货到家很细心的...</span>-->
<!--</div>-->
</a>
<div class="capa_a">
<ul>
<li style="color: #333333">米家恒温电水壶</li>
<li style="color: #b0b0b0">水温智能控制,304不锈钢内胆</li>
<li style="font-size: 14px;margin-top: 10px; color: #ff6700">199元</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="popular">
<div class="popular_background">
<div class="popular_box_top">
<div class="popular_box_top_al">热门产品</div>
</div>
<div class="popu_box">
<div class="popu popu_unleft popu_shadow">
<a href=""><img src="img/popu_01.jpg"></a>
<div class="popu_bottom">
<p class="review">
外形简洁大方，大爱小米！全家人都在用小米的产品，真心不错，最主要的是性价比高。附图，给客服妹子一个大...
</p>
<p class="author"> 来自于 秘密 的评价 </p>
<div class="info">
<h3 class="title">小米随身蓝牙音箱</h3>
<span class="sep">|</span>
<p class="price"><span>69</span>元</p>
</div>
</div>
</div>
<div class="popu popu_shadow">
<a href=""><img src="img/popu_02.jpg"></a>
<div class="popu_bottom">
<p class="review">
这箱子很好，外观漂亮，实用性强。很轻，有点软但不影响它的坚固。
</p>
<p class="author"> 来自于 秘密 的评价 </p>
<div class="info">
<h3 class="title">90分旅行箱 20寸</h3>
<span class="sep">|</span>
<p class="price"><span>229</span>元</p>
</div>
</div>
</div>
<div class="popu popu_shadow">
<a href=""><img src="img/popu_03.jpg"></a>
<div class="popu_bottom">
<p class="review">
安装简洁方便，信号不错！！！！！
</p>
<p class="author"> 来自于 秘密 的评价 </p>
<div class="info">
<h3 class="title">小米路由器3</h3>
<span class="sep">|</span>
<p class="price"><span>149</span>元</p>
</div>
</div>
</div>
<div class="popu popu_shadow">
<a href=""><img src="img/popu_04.jpg"></a>
<div class="popu_bottom">
<p class="review">
包装很让人感动，式样也很可爱，做出的饭全家人都爱吃，超爱五星！手机控制还是不太熟练，最主要是没有连接...
</p>
<p class="author"> 来自于 秘密 的评价 </p>
<div class="info">
<h3 class="title">米家压力IH电饭煲</h3>
<span class="sep">|</span>
<p class="price"><span>999</span>元</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="content">
<div class="popular_background">
<div class="popular_box_top">
<div class="popular_box_top_al">内容</div>
</div>
<div class="popu_box">
<div class="popu cont_border_top1 popu_unleft popu_shadow">
<div class="popu_bottom">
<h2 class="con_title">图书</h2>
<h4 class="popu_name">哈利·波特与被诅咒的孩子</h4>
<p class="popu_desc"><a href="">“哈利·波特”第八个故事中文版震撼来袭！特别彩排版剧本！ </a></p>
<p class="popu_price"><a href="">29.37元</a></p>
</div>
<a href=""><img src="img/cont_01.jpg"></a>
</div>
<div class="popu cont_border_top2 popu_shadow ">
<div class="popu_bottom">
<h2 class="con_title">MIUI 主题</h2>
<h4 class="popu_name">包宝宝养成记</h4>
<p class="popu_desc"><a href="">包宝宝定制主题Q萌上线！快来领取萌萌包宝宝吧！</a></p>
<p class="popu_price"><a href="">4.2米币</a></p>
</div>
<a href=""><img src="img/cont_02.jpg"></a>
</div>
<div class="popu cont_border_top3 popu_shadow ">
<div class="popu_bottom">
<h2 class="con_title">游戏</h2>
<h4 class="popu_name">小米超神</h4>
<p class="popu_desc"><a href="">实力派！一起团！</a></p>
<p class="popu_price"><a href=""></a></p>
</div>
<a href=""><img src="img/cont_03.jpg"></a>
</div>
<div class="popu popu_border_top4 popu_shadow ">
<div class="popu_bottom">
<h2 class="con_title">应用</h2>
<h4 class="popu_name">2017金米奖</h4>
<p class="popu_desc"><a href="">最优秀的应用和游戏</a></p>
<p class="popu_price"><a href=""></a></p>
</div>
<a href=""><img src="img/cont_04.jpg"></a>
</div>
</div>
</div>
</div>
<div class="video">
<div class="popular_background">
<div class="popular_box_top">
<div class="popular_box_top_al">视频</div>
</div>
<div class="popu_box">
<div class="vid popu_unleft popu_shadow">
<div class="video_top">
<a href=""><video class="this_vid" src="img/snowPerson.mp4" controls loop poster="img/video_01.jpg"></video></a>
</div>
<div class="video_bottom">
<h3 class="vid_title"><a href="">小米8，一部与众不同的手机</a></h3>
<p class="vid_desc">透明探索版，将科技与美学完美结合</p>
</div>
</div>
<div class="vid popu_shadow">
<div class="video_top">
<a href=""><video class="this_vid" src="img/snowPerson.mp4" controls loop poster="img/video_02.jpg"></video></a>
</div>
<div class="video_bottom">
<h3 class="vid_title"><a href="">小米MIX 2S，一面科技 一面艺术</a></h3>
<p class="vid_desc">艺术品般陶瓷机身，惊艳、璀璨</p>
</div>
</div>
<div class="vid popu_shadow">
<div class="video_top">
<a href=""><video class="this_vid" src="img/snowPerson.mp4" controls loop poster="img/video_03.jpg"></video></a>
</div>
<div class="video_bottom">
<h3 class="vid_title"><a href="">天生丽质的小米6X</a></h3>
<p class="vid_desc">让你一见倾心</p>
</div>
</div>
<div class="vid popu_shadow">
<div class="video_top">
<a href=""><video class="this_vid" src="img/snowPerson.mp4" controls loop poster="img/video_01.jpg"></video></a>
</div>
<div class="video_bottom">
<h3 class="vid_title"><a href="">生活中无所不在的小爱同学</a></h3>
<p class="vid_desc">透明探索版，将科技与美学完美结合</p>
</div>
</div>
</div>
</div>
</div>
<div class="foot">
<ul class="foot_ul">
<li class="foot_li">预约维修服务</li>
<li class="foot_li">7天无理由退货</li>
<li class="foot_li">15天免费换货</li>
<li class="foot_li">满15元包邮</li>
<li class="foot_li foot_fot">520余家售后网点</li>
</ul>
<div class="foot_center">
<div class="foot_cen_left">
<dl class="foot_dl">
<dt class="foot_dt">帮助中心</dt>
<dd class="foot_dd"><a>账户管理</a></dd>
<dd class="foot_dd"><a>购物指南</a></dd>
<dd class="foot_dd"><a>订单操作</a></dd>
</dl>
<dl class="foot_dl">
<dt class="foot_dt">帮助中心</dt>
<dd class="foot_dd"><a>账户管理</a></dd>
<dd class="foot_dd"><a>购物指南</a></dd>
<dd class="foot_dd"><a>订单操作</a></dd>
</dl>
<dl class="foot_dl">
<dt class="foot_dt">帮助中心</dt>
<dd class="foot_dd"><a>账户管理</a></dd>
<dd class="foot_dd"><a>购物指南</a></dd>
<dd class="foot_dd"><a>订单操作</a></dd>
</dl>
<dl class="foot_dl">
<dt class="foot_dt">帮助中心</dt>
<dd class="foot_dd"><a>账户管理</a></dd>
<dd class="foot_dd"><a>购物指南</a></dd>
<dd class="foot_dd"><a>订单操作</a></dd>
</dl>
<dl class="foot_dl">
<dt class="foot_dt">帮助中心</dt>
<dd class="foot_dd"><a>账户管理</a></dd>
<dd class="foot_dd"><a>购物指南</a></dd>
<dd class="foot_dd"><a>订单操作</a></dd>
</dl>
<dl class="foot_dl">
<dt class="foot_dt">帮助中心</dt>
<dd class="foot_dd"><a>账户管理</a></dd>
<dd class="foot_dd"><a>购物指南</a></dd>
<dd class="foot_dd"><a>订单操作</a></dd>
</dl>
</div>
<div class="foot_cen_right">
<p class="foot-phone">400-100-5678</p>
<p class="foot-right-center">周一至周日 8:00-18:00<br>（仅收市话费)</p>
<a class="foot-right-bottmo" href="">联系客服</a>
</div>
</div>
</div>
<div class="fot_bot_max">
<div class="fot_bot">
<img src="img/logo.jpg" class="fot_bot_logo" >
<div class="fot_bot_text">
<p class="fot_bot_p">
<a class="fot_bot_a" href="">小米商城</a>
<span class="fot_bot_span">|</span>
<a class="fot_bot_a" href="">MIUI</a>
<span class="fot_bot_span">|</span>
<a class="fot_bot_a" href="">米家</a>
<span class="fot_bot_span">|</span>
<a class="fot_bot_a" href="">米聊</a>
<span class="fot_bot_span">|</span>
<a class="fot_bot_a" href="">多看</a>
<span class="fot_bot_span">|</span>
<a class="fot_bot_a" href="">游戏</a>
<span class="fot_bot_span">|</span>
<a class="fot_bot_a" href="">路由器</a>
<span class="fot_bot_span">|</span>
<a class="fot_bot_a" href="">米粉卡</a>
<span class="fot_bot_span">|</span>
<a class="fot_bot_a" href="">政企服务</a>
<span class="fot_bot_span">|</span>
<a class="fot_bot_a" href="">小米天猫店</a>
<span class="fot_bot_span">|</span>
<a class="fot_bot_a" href="">隐私政策</a>
<span class="fot_bot_span">|</span>
<a class="fot_bot_a" href="">问题反馈</a>
<span class="fot_bot_span">|</span>
<a class="fot_bot_a" href="">廉政举报</a>
<span class="fot_bot_span">|</span>
<a class="fot_bot_a" href="">Select Region</a>
</p>
<p class="fot_bot_p fot_bot_a1">
"©"
<a class="fot_bot_a1" href="">mi.con</a>
" 京ICP证110507号"
<a class="fot_bot_a1" href="">京ICP备10046444号</a>
<a class="fot_bot_a1" href="">京公网安备11010802020134号</a>
<a class="fot_bot_a1" href="">京网文[2017]1530-131号</a>
"<br>违法和不良信息举报电话：185-0130-1238，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试"
</p>
</div>
<div class="fot_bot_right">
<a href="" class="fot_bot_right_img"><img src="img/foot_01.png" alt=""></a>
<a href="" class="fot_bot_right_img"><img src="img/foot_02.png" alt=""></a>
<a href="" class="fot_bot_right_img"><img src="img/foot_03.png" alt=""></a>
<a href="" class="fot_bot_right_img"><img src="img/foot_04.png" alt=""></a>
<a href="" class="fot_bot_right_img"><img src="img/foot_05.png" alt=""></a>
</div>
</div>
<img class="fot_bottom_img" src="img/foot_06.png">
</div>
<script>
var abc = document.getElementsByClassName("script_capa_box_top_ar");
console.log("abc:"+abc);
console.log("abc[0]"+abc[0]);
var box = document.getElementsByClassName("scrip_capa_box");
console.log("box:"+box);
console.log("box[0]:"+box[0]);
for(var i = 0; i<abc.length;i++){
abc[i].index=i;
abc[i].onmouseover=function(){
for(var j = 0 ;j<abc.length;j++){
box[j].className="capa_box scrip_capa_box";
}
box[this.index].className="capa_box scrip_capa_box scrip_capa_box_on"
console.log("this.index:"+this.index);
}
}
var n = 0;
/*setInterval(function () {
n++;
if(n > $(".scroll ul li").length){
n=0;
}
$(".scroll ul li").css("opacity","0").eq(n).css("opacity","1")
},100)*/
var t = setInterval(fun,1000);
function fun() {
n++;
if(n > $(".scroll>ul>li").length-1){
n = 0;
}
$(".scroll>ul>li").css("opacity","0").eq(n).css("opacity","1")
$(".scroll_dot span").eq(n).addClass("scroll_dot_span").siblings().removeClass("scroll_dot_span");
}
$(".scroll_arrows .left").click(function() {
n -= 2;
if(n <-1){
n=4;
}
fun()
} );
$(".scroll_arrows .right").click(function() {
fun()
});
$(".scroll_dot span").click(function () {
console.log($(this).index());
n=$(this).index()-1;
$(this).siblings().removeClass("scroll_dot_span").end().addClass("scroll_dot_span");
fun()
}); $(".scroll").hover(function () {
clearInterval(t);
},
function () {
t = setInterval(fun,1000);
});
</script>
</body>
</html>
最终显示：http://localhost:8080/xiaomi/login.jsp
3.4 前台首页–跳转到商品详情页面
（1） 导入文件四 product_detail.jsp 页面，如下
（2) 编写添加方法
index.jsp
${pageContext.request.contextPath }/product?method=findProductdetailByPid&pid=${p.pid}
(3) 后端编写
ProductServlet.java
private ProductService ps = new ProductServiceImpl();
//通过pid查询小米明星单品详情页findProductdetailByPid
public String findProductdetailByPid(HttpServletRequest request, HttpServletResponse response)throws Exception {
//处理数据
String pid = request.getParameter("pid");
//业务处理
Product product = ps.findProductdetailByPid(pid);
//存到与对象中
request.setAttribute("p", product);
//请求转发
return "/product_detail.jsp";
}
ProductService.java
//通过pid查询小米明星单品详情页
Product findProductdetailByPid(String pid) throws Exception;
ProductServiceImpl.java
//通过pid查询小米明星单品详情页
@Override
public Product findProductdetailByPid(String pid) throws Exception {
return pd.findProductdetailByPid(pid);
}
ProductDao.java
//通过pid查询小米明星单品详情页
Product findProductdetailByPid(String pid) throws SQLException;
ProductDaoImpl.java
//通过pid查询小米明星单品详情页
@Override
public Product findProductdetailByPid(String pid) throws SQLException {
String sql = "select * from product where pid = ?";
return qr.query(sql, new BeanHandler<>(Product.class),pid);
}
(4) 一定要先Debug调试，查到数据，再进行前端的编写
(5) 前端编写
product_detail.jsp
(6) 最终显示 http://localhost:8080/xiaomi/login.jsp （点击小米明星单品则会跳转对应详情页）
3544
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
