首页模块-商品分类
思路
前台:
- 在 WebContent 文件夹的子文件夹commmon下找到 left.jsp 文件。
index.jsp文件包含left.jsp文件,在left.jsp文件里实现左方信息显示
index.jsp文件包含left.jsp文件的代码片段:
<div id="main" class="wrap">
<div class="lefter">
<jsp:include page="common/left.jsp" />
</div>
- 循环遍历
<dt>
和<dd>
标签,过程中动态获取大类别和大类别下的小类别集合
后台:
- 通过项目需求、观察数据库里t_bigtype和t_smalltype两表之间的一对多关系,我们可以在查询大类别的同时,查询当前大类别下的小类别集合
- 依旧是操作IndexServlet
实操
- 打开BigType.java,添加代码;
BigType.java文件更新代码:
...
private String remakes; //备注
//添加一行代码,存放小类别数据
private List<SmallType> smallTypeList;//小类别集合
//敲完以上代码可以使用ALT+SHIFT+S组合键;
//选择Generate Getters and Setters...
//选择Select all;ok后即可自动生成下面的Get、Set方法代码
//新加的小类别get,set方法
public List<SmallType> getSmallTypeList() {
return smallTypeList;
}
public void setSmallTypeList(List<SmallType> smallTypeList) {
this.smallTypeList = smallTypeList;
}
public Integer getId() {
return id;
}
...
文件中List、SmallType
报红依旧是分别 CTRL+1 导一下包和创建一个类在po包下。
- 在生成的SmallType.java文件里添加功能代码:
SmallType.java文件代码:
package com.xxx.po;
public class SmallType {
//这些属性条目在数据库的t_smalltype表里可以看到
private Integer id; //主键id
private String name; //名称
private String remakes; //备注
private Integer bigTypeId; //大类别Id
//敲完以上几行代码后可以使用ALT+SHIFT+S组合键;
//选择Generate Getters and Setters...
//选择Select all;ok后即可自动生成下面的Get、Set方法代码
//使用Alt+shift+s,选择Generate Constructor using Fields...
//再次使用Alt+shift+s,选择Generate Constructor from superclass...
//两者都Select all,OK即可,生成一下自动构造参数
public Integer getId() {
return id;
}
public SmallType() {
super();
// TODO Auto-generated constructor stub
}
public SmallType(Integer id, String name, String remakes, Integer bigTypeId) {
super();
this.id = id;
this.name = name;
this.remakes = remakes;
this.bigTypeId = bigTypeId;
}
public void setId(Integer id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getRemakes() {
return remakes;
}
public void setRemakes(String remakes) {
this.remakes = remakes;
}
public Integer getBigTypeId() {
return bigTypeId;
}
public void setBigTypeId(Integer bigTypeId) {
this.bigTypeId = bigTypeId;
}
}
- 更新bigTypeServiceImpl.java文件的功能代码内容
bigTypeServiceImpl.java文件更新代码:
package com.xxx.service.impl;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;
import java.util.List;
import com.xxx.po.BigType;
import com.xxx.po.SmallType;
import com.xxx.service.BigTypeService;
import com.xxx.util.DBUtil;
public class bigTypeServiceImpl implements BigTypeService {
//添加的代码
private SmallTypeService smallTypeService = new SmallTypeServiceImp();
//查询大类别
@Override
public List<BigType> findAll() {
// TODO Auto-generated method stub
//new一个list
List<BigType> list = new ArrayList<>();
Connection conn = null;
PreparedStatement sta = null;
ResultSet res = null;
//异常
try{
//数据库操作
//建立连接
conn = DBUtil.getConnection();
//编写sql语句
String sql = "select * from t_bigtype";
//预编译,防止Sql注入
sta = conn.prepareStatement(sql);
//执行查询,返回结果集;
res = sta.executeQuery();
//分析结果集
while(res.next()){
BigType bigType = new BigType();
//从数据库表里获得数据
bigType.setId(res.getInt(1));
bigType.setName(res.getString("name"));
bigType.setRemakes(res.getString(3));
//添加的代码
//查询大类别的同时,查询当前大类别下的小类别集合
List<SmallType> smallTypeList = smallTypeService.findByBigTypeId(res.getInt(1));
bigType.setSmallTypeList(smallTypeList);
//获得的数据放在list里
list.add(bigType);
}
} catch (Exception e){
e.printStackTrace();
}finally{
//关闭连接
DBUtil.close(res, sta, conn);
}
return list;
}
}
文件中的SmallType、SmallTypeService
和SmallTypeServiceImpl、findByBigTypeId
报红只需要分别Ctrl+1导一下包、建一个接口(放在Srevice包下)和建一个类(放在impl包下)、建一个方法即可。
- 在SmallTypeServiceImpl.java文件中完成功能代码即可
SmallTypeServiceImpl.java文件代码
package com.xxx.service.impl;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;
import java.util.List;
import com.xxx.po.SmallType;
import com.xxx.po.Tag;
import com.xxx.service.SmallTypeService;
import com.xxx.util.DBUtil;
public class SmallTypeServiceImpl implements SmallTypeService {
//通过大类别Id查询小类别集合
@Override
public List<SmallType> findByBigTypeId(int bigTypeId) {
// TODO Auto-generated method stub
//new一个list
List<SmallType> list = new ArrayList<>();
Connection conn = null;
PreparedStatement sta = null;
ResultSet res = null;
//异常
try{
//数据库操作
//建立连接
conn = DBUtil.getConnection();
//编写sql语句
String sql = "select * from t_smalltype where bigTypeId = ?";
//预编译,防止Sql注入
sta = conn.prepareStatement(sql);
//设置参数
sta.setInt(1,bigTypeId );
//执行查询,返回结果集;
res = sta.executeQuery();
//分析结果集
while(res.next()){
//从数据库表里获得数据
SmallType smallType = new SmallType(res.getInt(1),res.getString(2),res.getString(3),res.getInt(4));
//获得的数据放在list里
list.add(smallType);
}
} catch (Exception e){
e.printStackTrace();
}finally{
//关闭连接
DBUtil.close(res, sta, conn);
}
return list;
}
}
- 前台写left.jsp相关代码
left.jsp相关代码
<div class="box">
<h2>商品分类</h2>
<dl>
<!-- 循环遍历<dt>和<dd>标签 -->
<c:forEach items="${bigTypeList}" var="bigType" >
<dt>${bigType.name}</dt>
<!-- 查询大类别的同时,查询当前大类别下的小类别集合 -->
<c:forEach items="${bigType.smallTypeList}" var="smallType" >
<dd><a href="">${smallType.name}</a></dd>
</c:forEach>
</c:forEach>
</dl>
</div>
经过上面的过程,分别保存一下文件,再重新启动一下服务器,刷新一下地址,首页模块的商品分类栏也就完成咯。
首页模块-今日特价
思路
前台:
- 今日特价小模块的代码放在index.jsp文件中
- 循环遍历存放今日特价商品信息的
<li>
标签,过程中动态获商品图片、标题、价格
后台:
- indexServlet
- 调用service在数据库中查询今日特价商品集合
- 使用session域对象储存数据
- 请求转发 跳转到index.jsp
实操
- 打开index.jsp文件,写代码
index.jsp文件更新代码:
<div class="main">
<div class="price-off">
<h2>今日特价</h2>
<ul class="product clearfix">
<!-- 循环遍历存放今日特价商品信息的<li>标签 -->
<c:forEach items="${specialProductList }" var="specialProduct">
<li>
<dl>
<dt>
<a href="" target="_blank"><img src="${specialProduct.proPic }" /></a>
</dt>
<dd class="title">
<a href="" target="_blank">${specialProduct.name }</a>
</dd>
<dd class="price">¥${specialProduct.price}</dd>
</dl>
</li>
</c:forEach>
- po包下新建一个名为Product的Class文件,补充代码;
Product.java文件代码
package com.xxx.po;
import java.util.Date;
/**
* 商品Bean
* @author yu
*
*/
public class Product {
//Product类的条目来自于数据库t_product表
private Integer id; //主键Id
private String description; //商品详情描述
private Integer hot; //标记是否为热门商品。1为是,0不是
private Date hotTime; //热门商品截止时间
private String name; //商品名称
private Integer price; //商品价格
private String proPic; //商品图片路径
private Integer specialPrice; //是否特价,1是,0不是
private Date specialPriceTime; //特价截止时间
private Integer stock; //库存
private Integer bigTypeId; //外键,关联大类别Id
private Integer smallTypeId; //外键,关联小类别Id
//敲完以上几行代码后可以使用ALT+SHIFT+S组合键;
//选择Generate Getters and Setters...
//选择Select all;ok后即可自动生成下面的Get、Set方法代码
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getDescription() {
return description;
}
public void setDescription(String description) {
this.description = description;
}
public Integer getHot() {
return hot;
}
public void setHot(Integer hot) {
this.hot = hot;
}
public Date getHotTime() {
return hotTime;
}
public void setHotTime(Date hotTime) {
this.hotTime = hotTime;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public Integer getPrice() {
return price;
}
public void setPrice(Integer price) {
this.price = price;
}
public String getProPic() {
return proPic;
}
public void setProPic(String proPic) {
this.proPic = proPic;
}
public Integer getSpecialPrice() {
return specialPrice;
}
public void setSpecialPrice(Integer specialPrice) {
this.specialPrice = specialPrice;
}
public Date getSpecialPriceTime() {
return specialPriceTime;
}
public void setSpecialPriceTime(Date specialPriceTime) {
this.specialPriceTime = specialPriceTime;
}
public Integer getStock() {
return stock;
}
public void setStock(Integer stock) {
this.stock = stock;
}
public Integer getBigTypeId() {
return bigTypeId;
}
public void setBigTypeId(Integer bigTypeId) {
this.bigTypeId = bigTypeId;
}
public Integer getSmallTypeId() {
return smallTypeId;
}
public void setSmallTypeId(Integer smallTypeId) {
this.smallTypeId = smallTypeId;
}
}
java.util.Date
包一开始可能没有,导致Data数据类型报红,导入一下即可。
- 在indexServlet.java文件中调用service在数据库里查询今日特价商品集合
indexServlet.java文件更新代码:
package com.xxx.servlet;
import java.io.IOException;
import java.util.List;
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 javax.servlet.http.HttpSession;
import org.apache.catalina.filters.RequestDumperFilter;
import com.oracle.jrockit.jfr.RequestableEvent;
import com.xxx.po.BigType;
import com.xxx.po.Product;
import com.xxx.po.Tag;
import com.xxx.service.BigTypeService;
import com.xxx.service.TagService;
import com.xxx.service.impl.TagServiceImpl;
import com.xxx.service.impl.bigTypeServiceImpl;
import jdk.nashorn.internal.ir.RuntimeNode.Request;
/**
* 首页模块
*
*/
@WebServlet("/index")
public class IndexServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
private BigTypeService bigTypeService = new bigTypeServiceImpl();
private TagService tagService = new TagServiceImpl();
//今日特价小模块的新增代码
private ProductService productService = new ProductServiceImpl();//Ctrl+1,ProductService生成一下接口放在Service包下,ProductServiceImpl生成一下类放在Impl包下
protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//调用service在数据库中查询大类别集合
List<BigType> bigTypeList = bigTypeService.findAll();
//调用service在数据库中查询标签集合
List<Tag> tagList = tagService.findAll();
//今日特价小模块的新增代码
//调用service在数据库中查询今日特价商品集合
List<Product> specialProductList = productService.findspecialProduct();//Ctrl+1,Product导一下包;findspecialProduct()生成一下方法
//使用session域对象储存数据
HttpSession session = request.getSession();
session.setAttribute("bigTypeList", bigTypeList);
session.setAttribute("tagList",tagList);
//今日特价小模块的新增代码
session.setAttribute("specialProductList",specialProductList);
//请求转发 跳转index.jsp
request.getRequestDispatcher("/index.jsp").forward(request, response);
}
}
代码中有报红的地方按注释导一下包生成一下接口文件、类文件和findspecialProduct方法即可。
- 生成的ProductServiceImpl.java文件中写功能代码即可
ProductServiceImpl.java文件代码:
package com.xxx.service.impl;
import java.sql.Connection;
import java.util.ArrayList;
import java.util.List;
import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.BeanListHandler;
import com.xxx.po.Product;
import com.xxx.service.ProductService;
import com.xxx.util.DBUtil;
public class ProductServiceImpl implements ProductService {
//查询今日特价商品集合
@Override
public List<Product> findspecialProduct() {
// TODO Auto-generated method stub
//new一个list
List<Product> list = new ArrayList<>();
Connection conn = null;
//异常
try{
//数据库操作
//建立连接
conn = DBUtil.getConnection();
//编写sql语句
//查询时,数据库里有很多商品条目,但是我们需要的是符合今日特价条件的商品信息
//即在t_product表中我们需要的信息是specialPriceTime这一属性大于等于当前实时日期的商品
//且离当前实时日期越近的商品应该放在越靠前的位置
//此处可能需要更改一下t_product表中specialPriceTime这一属性的值为大于等于当前实时日期的值才能查询到商品信息(表太老了,数据没更新)
String sql = "select * from t_product where specialPrice = 1 and specialPriceTime >= now() ORDER BY specialPriceTime";
//此处使用Apache提供的工具来操作数据库
//工具包在WEB-INF文件夹下的lib子文件夹中,是自带的
//工具包名:commons-dbutils-1.7
//它能自动帮我们查询、封装好数据库,再放入List中
//new一个QueryRunner
QueryRunner qr = new QueryRunner();
//执行查询,得到商品集合,再放入List中
list = qr.query(conn, sql ,new BeanListHandler<>(Product.class));
} catch (Exception e){
e.printStackTrace();
}finally{
//关闭连接
DBUtil.close(null, null, conn);
}
return list;
}
}
经过上面的过程,分别保存一下文件,再重新启动一下服务器,刷新一下地址,首页模块的今日特价栏也就完成咯。
为了美观考虑,我们可以限制今日特价栏显示的数量,在index.jap文件中,我们可以在<c:forEach items="${specialProductList }" var="specialProduct">
的var
属性后再加一个属性end="7"
,即只显示查出来的前8个商品信息。更多的特价商品信息可以再做一个今日特价页面和后台去单独显示所有的特价商品信息。
更改后如下图所示:
首页模块-最新公告
思路
前台:
- 最新公告小模块的代码放在index.jsp文件中
- 循环遍历存放最新公告信息的
<li>
标签,过程中动态获取最新公告信息
后台:
- IndexServlet
- 调用service在数据库中查询最新公告集合
- 使用session域对象储存数据
- 请求转发 跳转到index.jsp
实操
- 打开index.jsp文件,找到最新公告代码段,重新编辑。
index.jsp文件最新公告代码段更新代码:
...
<div class="side">
<div class="news-list">
<h4>最新公告</h4>
<ul>
<!-- 循环遍历存放最新公告信息的<li>标签,过程中动态获取最新公告信息,为了美观,最多显示7条 -->
<c:forEach items="${noticeList }" var="notice" end="6">
<li>
<a href="">${notice.title }</a>
</li>
</c:forEach>
</ul>
</div>
...
- 打开 IndexServlet.java文件,增加最新公告代码:
IndexServlet.java文件更新代码:
package com.xxx.servlet;
import java.io.IOException;
import java.util.List;
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 javax.servlet.http.HttpSession;
import com.xxx.po.BigType;
import com.xxx.po.Product;
import com.xxx.po.Tag;
import com.xxx.service.BigTypeService;
import com.xxx.service.ProductService;
import com.xxx.service.TagService;
import com.xxx.service.impl.ProductServiceImpl;
import com.xxx.service.impl.TagServiceImpl;
import com.xxx.service.impl.bigTypeServiceImpl;
/**
* 首页模块
*
*/
@WebServlet("/index")
public class IndexServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
private BigTypeService bigTypeService = new bigTypeServiceImpl();
private TagService tagService = new TagServiceImpl();
//今日特价小模块的新增代码
private ProductService productService = new ProductServiceImpl();
//最新公告小模块的新增代码
private NoticeService noticeService = new NoticeServiceImpl();//Ctrl+1,NoticeService创建一个接口放在Service包下,NoticeServiceImpl()创建一个类放在impl包下
protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//调用service在数据库中查询大类别集合
List<BigType> bigTypeList = bigTypeService.findAll();
//调用service在数据库中查询标签集合
List<Tag> tagList = tagService.findAll();
//今日特价小模块的新增代码
//调用service在数据库中查询今日特价商品集合
List<Product> specialProductList = productService.findspecialProduct();
//最新公告小模块的新增代码
//调用service在数据库中查询最新公告集合
List<Notice> noticeList = noticeService.findAll(); //Ctrl+1,Notice创建一个类放在po包下,findAll()创建一个方法
//使用session域对象储存数据
HttpSession session = request.getSession();
session.setAttribute("bigTypeList", bigTypeList);
session.setAttribute("tagList",tagList);
//今日特价小模块的新增代码
session.setAttribute("specialProductList",specialProductList);
//最新公告小模块的新增代码
session.setAttribute("noticeList",noticeList);
//请求转发 跳转index.jsp
request.getRequestDispatcher("/index.jsp").forward(request, response);
}
}
- 生成的Notice.java文件里补全一下字段:
Notice.java文件代码:
package com.xxx.po;
import java.util.Date;
/**
* 公告Bean
* @author yu
*
*/
public class Notice {
private Integer id; //主键id
private String content; //公告内容
private Date creatTime; //公告创建时间,Data数据类型报红导一下java.util.Date包
private String title; //公告标题
//敲完以上几行代码后可以使用ALT+SHIFT+S组合键;
//选择Generate Getters and Setters...
//选择Select all;ok后即可自动生成下面的Get、Set方法代码
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getContent() {
return content;
}
public void setContent(String content) {
this.content = content;
}
public Date getCreatTime() {
return creatTime;
}
public void setCreatTime(Date creatTime) {
this.creatTime = creatTime;
}
public String getTitle() {
return title;
}
public void setTitle(String title) {
this.title = title;
}
}
- 生成的NoticeServiceImpl.java文件里写功能代码
NoticeServiceImpl.java文件代码
package com.xxx.service.impl;
import java.sql.Connection;
import java.util.ArrayList;
import java.util.List;
import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.BeanListHandler;
import com.xxx.po.Notice;
import com.xxx.service.NoticeService;
import com.xxx.util.DBUtil;
public class NoticeServiceImpl implements NoticeService {
//查询公告集合
@Override
public List<Notice> findAll() {
// TODO Auto-generated method stub
//new一个list
List<Notice> list = new ArrayList<>();
Connection conn = null;
//异常
try{
//数据库操作
//建立连接
conn = DBUtil.getConnection();
//编写sql语句
//查询时,数据库里有很多公告条目
//在t_notice表中我们需要依据createTime的时间将最新的公告放在靠前的位置
String sql = "select * from t_notice order by createTime desc";
//此处使用Apache提供的工具来操作数据库
//工具包在WEB-INF文件加下的lib子文件夹中,是自带的
//工具包名:commons-dbutils-1.7
//它能自动帮我们查询、封装好数据库,再放入List中
//new一个QueryRunner
QueryRunner qr = new QueryRunner();
//执行查询,得到公告集合,再放入List中
list = qr.query(conn, sql ,new BeanListHandler<>(Notice.class));
} catch (Exception e){
e.printStackTrace();
}finally{
//关闭连接
DBUtil.close(null, null, conn);
}
return list;
}
}
经过上面的过程,分别保存一下文件,再重新启动一下服务器,刷新一下地址,今天的最后一个小模块最新公告也完成啦。