话说：
各位读者，下午好，这里总结下首页显示商品。
目录：
1.效果展示
2.数据库设计
3.后端代码
4.首页代码
5.总结
开发工具：IDEA
难度系数：★★☆☆☆
建议用时：1.5~2H
1.效果展示
2.数据库设计
3张表,商品表、商品大类、商品小类。表之间的关系：商品表里面包含商品小类，商品大类和小类之间是一对多关系，这里就简单显示下。
创建表语句及模拟数据如下：
B 分类表
#大分类表 tb_superType
tb_superType
ID int
typeName
#小分类表 tb-subType
ID
superType
typeName
#创建大分类表
create table tb_superType (
ID int identity(1,1) not null,
typeName varchar(50)
);
#创建小分类表
create table tb_subType(
ID int identity(1,1) not null,
superType int,
typeName varchar(50)
);
#为大分类表插入数据
insert into tb_superType (typeName) values
('图书类'),
('家电类'),
('服装类'),
('电子类');
#为小分类表插入数据
insert into tb_subType (superType,typeName) values
(1,'文学'),
(1,'理财'),
(1,'哲学'),
(1,'社会政治'),
(2,'冰箱'),
(2,'电视'),
(2,'洗衣机'),
(3,'男装'),
(3,'女装'),
(3,'童装'),
(4,'笔记本'),
(4,'台式机'),
(4,'音响');
tb_goods
A 商品表
ID 商品Id
typeID 分类
goodsName 商品名称
introduce 商品简介
price 原价
salePrice 售价
count 库存
addTime 录入时间
picture 图片
newGoods 是否新品 默认1为新品 0 不是
sale 特价 认1为新品 0 不是
hit 热门商品（点击次数）
#创建表：
create table tb_goods (
ID int identity(1,1) not null,
typeId int,
goodsName varchar(200),
introduce text,
price money,
salePrice money,
kuCun int,
addTime datetime,
picture varchar(50),
newGoods int ,
sale int ,
hit int
)--'商品表' ;
#模拟热门商品
insert into tb_goods (typeId,goodsName,introduce,price,salePrice,kuCun,addTime,picture,newGoods,sale,hit) values
(2,'Yamaha/雅马哈 YHT-299','产品名称：Yamaha/雅马哈 YHT-299主机播放碟片格式: 无主机类型: 仅有功放无碟机毛重: 21kg视频连接方式: 无音效模式: DTS Dolby Pro Logic Dolby Pro Logic II音箱箱体材质: 塑料音箱连接方式: HDMI传输 光纤传输 同轴传输颜色分类: 黑色品牌: Yamaha/雅马哈型号: YHT-299声道数: 5.1款式: 卫星/迷你式是否DVD播放机: 不带DVD机输出功率: 601W(含)-800W(含) 最大输出功率: 675W',3356.23,4567.87,234,getdate(),'59.jpg',1,0,29);
#模拟最新上架
insert into tb_goods (typeId,goodsName,introduce,price,salePrice,kuCun,addTime,picture,newGoods,sale,hit) values
(12,'海尔电脑主机轰天雷X9','证书编号：2014010901684338证书状态：有效申请人名称：海尔信息科技(深圳)有限公司制造商名称：海尔信息科技(深圳)有限公司产品名称：微型计算机 产品名称：Haier/海尔 轰天雷X8-8G...CPU类型: Core/酷睿 i5型号: 4460适用品牌: Intel/英特尔台机Intel型号: 其他/other内存容量: 8GB内存类型: DDR3硬盘容量: 1T显卡类型: 独立显卡显卡型号: GTX950屏幕尺寸: 无显示器显示器类型: 无显示器操作系统: MS-DOS',3356.23,4567.87,234,getdate(),'54.jpg',1,0,0);
.....
#模拟打折商品
insert into tb_goods (typeId,goodsName,introduce,price,salePrice,kuCun,addTime,picture,newGoods,sale,hit) values
(10,'优贝宜 短袖T恤套装','品牌: Yobeyi/优贝宜安全等级: A类材质成分: 棉96% 聚氨酯弹性纤维(氨纶)4%货号: Y15282101适用性别: 中性颜色分类: 条纹猫头 围巾狗 面具 卡通大眼镜 卡通队长 高帽先生 小小熊 雪糕 小象灰 爆米花 熊 胡子 英文参考身高: 73cm 80cm 90cm 100cm 110cm 120cm 130cm 140cm 150cm 160cm 165cm模特实拍: 实拍无模特适用场景: 爱意表达按关系送礼: 孩子是否带帽子: 无组合形式: 其他面料: 纯棉(95%及以上)厚薄: 薄款适用季节: 夏季风格: 休闲衣门襟: 套头图案: 卡通动漫件数: 2件',3356.23,4567.87,234,getdate(),'42.jpg',0,1,0);
3.后端代码
Pojo GoodsDao GoodsDaoImpl GoodsListServlet
调用DBConn和之前不同的是：底层封装了下获取PreparedStatement的方法getPs()
//定义获取编译好的PreparedStatement 参数已经传进去
public static PreparedStatement getPs(Connection conn,String sql,Object... params) {
try {
//直接预编译SQL语句
PreparedStatement ps = conn.prepareStatement(sql);
//为参数赋值
//判断是否给参数 select * from tb_goods; select * from tb_goods where goodsId = ?
if(params != null) {
for(int i=0;i<params.length;i++) {
ps.setObject((i+1),params[i]);
}
}
return ps;
} catch (SQLException e) {
e.printStackTrace();
return null;
}
}Pojo
省略
GoodsDao
package com.hmc.dao;
import com.hmc.pojo.Goods;
import java.util.List;
public interface GoodsDao {
//查询商品列表
List<Goods> goodsList(String sql,Object[] params);
}GoodsDaoImpl
package com.hmc.dao;
import com.hmc.pojo.Goods;
import com.hmc.utils.DBConn;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;
/**
* User:Meice
* 2018/2/27 14:06
*/
public class GoodsDaoImpl implements GoodsDao {
@Override
public List<Goods> goodsList(String sql, Object[] params) {
List<Goods> goodsList = new ArrayList<>();
Connection conn = DBConn.getConn();
PreparedStatement ps = DBConn.getPs(conn,sql,params);
ResultSet rs = DBConn.getRs(sql,ps);
try {
while(rs.next()) {
Goods goods = new Goods();
goods.setID(rs.getInt("ID"));
goods.setTypeId(rs.getInt("typeId"));
goods.setAddTime(rs.getDate("addTime"));
goods.setGoodsName(rs.getString("goodsName"));
goods.setIntroduce(rs.getString("introduce"));
goods.setPrice(rs.getDouble("price"));
goods.setSalePrice(rs.getDouble("salePrice"));
goods.setKuCun(rs.getInt("kuCun"));
goods.setPicture(rs.getString("picture"));
goods.setNewsGoods(rs.getInt("newGoods"));
goods.setSale(rs.getInt("sale"));
goods.setHit(rs.getInt("hit"));
goodsList.add(goods);
}
return goodsList;
} catch (SQLException e) {
e.printStackTrace();
return null;
}
}
}GoodsListServlet
package com.hmc.servlet;
import com.hmc.dao.GoodsDao;
import com.hmc.dao.GoodsDaoImpl;
import com.hmc.dao.SuperTypeDao;
import com.hmc.dao.SuperTypeDaoImpl;
import com.hmc.pojo.Goods;
import com.hmc.pojo.SuperType;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.List;
/**
* User:Meice
* 2018/2/27 11:28
*/
@WebServlet("/front/goodsList")
public class GoodsListServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doPost(req,resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
System.out.println("查询大分类进来了..");
//1.接收参数
//2.调用方法
//1)显示大分类列表
SuperTypeDao std = new SuperTypeDaoImpl();
String sql = "select * from tb_superType";
List<SuperType> superTypeList = std.superTypeList(sql,null);
System.out.println("查询到的大分类列表是:"+superTypeList);
//2)显示热门商品
GoodsDao gd = new GoodsDaoImpl();
String sql2 = "select top 2 * from tb_goods order by hit desc ";
List<Goods> goodsListByHit = gd.goodsList(sql2,null);
//3)最新上架
String sql3 = "select top 6 * from tb_goods where newGoods = 1 order by addTime desc";
List<Goods> goodsListByNew = gd.goodsList(sql3,null);
//4)打折商品
String sql4 = "select top 6 * from tb_goods where sale = 1 order by addTime desc";
List<Goods> goodsListBySale = gd.goodsList(sql4,null);
System.out.println("热门商品"+goodsListByHit+" 打折商品:"+goodsListBySale+" 最新上架:"+goodsListByNew);
//3.跳转页面
req.setAttribute("superTypeList",superTypeList);
req.setAttribute("goodsListByHit",goodsListByHit);
req.setAttribute("goodsListByNew",goodsListByNew);
req.setAttribute("goodsListBySale",goodsListBySale);
req.getRequestDispatcher("index.jsp").forward(req,resp);
}
}4.首页代码
<%--
User: Meice
Date: 2018/2/24
Time: 11:43
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
//http://localhost:3306/
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort();
String pro = request.getContextPath();
String wholePath = basePath+pro;
%>
<html>
<head>
<title>小确幸商城</title>
<%--引入juery--%>
<script src="js/jquery-1.8.3.js"></script>
<%--导航栏样式--%>
<style type="text/css">
a{
text-decoration:none;
}
#nav ul li{
list-style: none;
float: left;
padding: 17px;
cursor: pointer;
//border: 3px red solid;
//height: 60px;
//width:70px;
text-align:center;
}
#nav ul a{
color:white;
text-align:center;
/* font-weight:bolder;*/
font-size:18px;
}
#nav a{
text-decoration:none;
}
.myIn{
background-color: #9e2626;
}
.active{
background-color: #9e2626;
}
/*设置图片样式*/
#reMen img{
height: 150px;
width:150px;
}
#newGoods img{
width:200px;
height:200px;
}
#saleGoods img{
width:200px;
height:200px;
}
</style>
<%--设置追加样式--%>
<script type="text/javascript">
$(function() {
//alert("进来了");
$("#nav ul li").mouseover(function() {
$(this).addClass("myIn");
}).mouseout(function() {
$(this).removeClass("myIn");
});
//如果被点击，就追加样式 页面刷新 没效果 通过jsp做
$("#nav ul li").click(function() {
//alert("进来了！");
$(this).addClass("active");
});
})
</script>
<%--轮播图 bootStrap--%>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div id="top" style="height:30px;background-color: #f0f0f0">
<div style="margin-left: 100px;">
<span>电话 888-88888888</span>
<a href="login.jsp">登录</a> |
<a href="register.jsp">注册</a>
</div>
<div style="float: right;margin: -10px 20px 0px 0px">
<a href="#">我的订单</a> |
<a href="#">我的收藏</a>
</div>
</div>
<div id="search" style="height:45px;padding-top: 20px;">
<div style="font-size: 35px; margin-left:100px;float:left;width:200px;">
<font style="color:orange;">小</font><font style="color:green;">确</font><font style="color:blue;">幸</font>
<font style="color:red;">商城</font></td>
</div>
<div style="float: right;margin: 0px 330px 0px 0px;">
<input type="text" style="width:500px;height:45px;border: 1px solid orange;">
<button type="button" style="opacity: 1;height: 45px;width:70px;background-color: white;border: 1px solid orange;">
<span class="glyphicon glyphicon-search"></span>
</button>
</div>
<div style="float: right;margin: -45px 30px 0px 500px;">
<button type="button" class="btn btn-primary btn-lg" style="background-color: white;color: red;">
<span class="glyphicon glyphicon-shopping-cart"></span> 我的购物车
</button>
<%-- <a>我的购物车</a>--%>
<%--<img src="">我的购物车--%></div>
</div>
<div id="nav" style="background-color: #e33737;height:60px;margin: 50px 0px 0px 0px;">
<ul>
<a href="goodsList?typeId=10000"><li class="active">首页</li></a>
<%--<a href="goodsList?typeId=10000"><li class="active">首页</li></a>--%>
<%--遍历显示商品大分类--%>
<c:forEach var="superType" items="${superTypeList}">
<a href="goodsList?typeId=${superType.ID}"> <li>${superType.typeName}</li></a>
</c:forEach>
</ul>
</div>
<div id="content">
<%--轮播图--%>
<div id="lunBo" style="width: 800px;height:360px;margin-top: 20px;margin-left: 30px; ">
<div id="myCarousel" class="carousel slide">
<!-- 轮播（Carousel）指标 -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- 轮播（Carousel）项目 -->
<div class="carousel-inner">
<div class="item active">
<img src="images/img1.png" alt="First slide">
</div>
<div class="item">
<img src="images/img2.png" alt="Second slide">
</div>
<div class="item">
<img src="images/img3.png" alt="Third slide">
</div>
<div class="item">
<img src="images/img4.png" alt="Third slide">
</div>
</div>
<!-- 轮播（Carousel）导航 -->
<a class="carousel-control left" href="#myCarousel"
data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel"
data-slide="next">›</a>
</div>
</div>
<%--热门商品--%>
<div id="reMen" style="float:right;height: 360px;width:400px;margin: -350px 90px 0px 0px;">
<span style="color:red;font-size:15px;font-weight:bolder;">热门商品</span>
<hr/>
<table >
<%--遍历--%>
<c:forEach var="goods" items="${goodsListByHit}">
<tr>
<%-- <td><%=wholePath%>/images/goods/${goods.picture}</td>--%>
<td><img src="<%=wholePath%>/images/goods/${goods.picture}"></td>
<td>${goods.goodsName}</td>
</tr>
</c:forEach>
</table>
</div>
<span style="color:red;font-size:15px;font-weight:bolder;">最新上架</span>
<hr/>
<%--最新上架--%>
<div id="newGoods">
<table>
<%--遍历--%>
<tr>
<c:forEach var="goods" items="${goodsListByNew}">
<td><img src="<%=wholePath%>/images/goods/${goods.picture}"></td>
</c:forEach>
</tr>
<tr>
<c:forEach var="goods" items="${goodsListByNew}">
<td>${goods.goodsName}</td>
</c:forEach>
</tr>
</table>
</div>
<br/><br/>
<span style="color:red;font-size:15px;font-weight:bolder;">打折商品</span>
<hr/>
<%--打折商品--%>
<div id="saleGoods">
<table >
<%--遍历--%>
<tr>
<c:forEach var="goods" items="${goodsListBySale}">
<td><img src="<%=wholePath%>/images/goods/${goods.picture}"></td>
</c:forEach>
</tr>
<tr>
<c:forEach var="goods" items="${goodsListBySale}">
<td>${goods.goodsName}</td>
</c:forEach>
</tr>
</table>
</div>
</div>
<div id="footNav">
<jsp:include page="foot.jsp"></jsp:include>
</div>
</body>
</html>5.总结
1.数据库方面没什么，不过显示前多少个可以用关键字top,比如：显示前6个商品：
select top 6 * from tb_goods;
2.首页轮播图及搜索、购物车小图标利用的是BootStrap，方便快捷；
3.首页导航栏，如何实现页面刷新时，被点击的商品大分类，比如图书能换背景色？
前端写搞不定，因为页面会刷新；JSP根据typeId来判断，但是首页没有存在数据库，会出现2个选项卡都
有选中背景色的情况，如何搞定？前端东西，不过多纠结；
4.jstl错误无非是：
1）page标签的url引入错误；
2）包虽然导入到IDEA中了，但是没有手动部署到IDEA的Tomcat下面，这个问题已经遇到很多啦。IDEA不会自动部署外部导入的包，需要手动部署。
哈哈哈，搞定！ 再会！
扫一扫
29万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
