商城项目第二天
今日任务
- 分类信息的加载
- 首页最新最热商品展示
- 商品的详情展示
- 某个分类下的商品的分页展示
导航菜单
导航实现步骤:
- 导航菜单显示的是数据库中的商品分类信息
- 页面加载中,向服务器发送请求
- Servlet调用业务层方法,获取集合
- 业务层调用持久层方法
- Servlet将注册结果封装对象,向客户端回写JSON数据
- 客户端判断JSON数据,跳转页面
header.html
var url = "/category?method=findAllCategorys";
var params = "";
HM.ajax(url,params,function(data){
if(data.code==1){
var cateArr = data.data;
var str="";
$.each(cateArr, function(index,cate) {
str +=`<li><a href="http://www.itheima342.com:8020/web/view/product/list.html?cid=${cate.cid}">${cate.cname}</a></li>`;
});
$("#cate_list").html(str);
}
});
CategoryServlet
public void findCategorys(HttpServletRequest request, HttpServletResponse response)
throws IOException {
List<Category> categorys = categoryService.findCategorys();
Result result = new Result(Constant.SUCCESS,"查询成功",categorys);
String s = JSONObject.fromObject(result).toString();
response.getWriter().write(s);
}
CategoryService
public List<Category> findCategorys() {
List<Category> list = null;
try {
list = categoryDao.findCategorys();
} catch (SQLException e) {
e.printStackTrace();
}
return list;
}
CategoryDao
public List<Category> findCategorys() throws SQLException {
String sql = "select * from category";
return qr.query(sql,new BeanListHandler<>(Category.class));
}
首页最新最热商品展示
登录实现步骤:
- 首页加载完成,AJAX向服务器发送请求
- Servlet调用业务层两次查询方法
- 业务层分别调用持久层两次方法
- 持久层两次方法分别查询最热门商品和最新商品
- Servlet获取两次查询方法结果集,并封装Result对象
- Result对象转成JSON数据并响应
首页index
<script type="text/javascript">
$(function(){
var url="/product?method=findNewsAndHots";
var params="";
HM.ajax(url,params,function(data){
if(data.code==1){
var hotsArr = data.data.hots;
$.each(hotsArr, function(index,p) {
var str=`<div class="col-md-2" style="text-align:center;height:200px;padding:10px 0px;">
<a href="http://www.itheima342.com:8020/web/view/product/info.html?pid=${p.pid}">
<img src="http://www.itheima342.com:8020/web/${p.pimage}" width="130" height="130" style="display: inline-block;">
</a>
<p><a href="http://www.itheima342.com:8020/web/view/product/info.html?pid=${p.pid}" style='color:#666'>${p.pname}</a></p>
<p><font color="#E4393C" style="font-size:16px">¥${p.shop_price}</font></p>
</div>`;
$("#hotlist").append(str);
});
var newsArr = data.data.news;
$.each(newsArr, function(index,p) {
var str=`<div class="col-md-2" style="text-align:center;height:200px;padding:10px 0px;">
<a href="http://www.itheima342.com:8020/web/view/product/info.html?pid=${p.pid}">
<img src="http://www.itheima342.com:8020/web/${p.pimage}" width="130" height="130" style="display: inline-block;">
</a>
<p><a href="http://www.itheima342.com:8020/web/view/product/info.html?pid=${p.pid}" style='color:#666'>${p.pname}</a></p>
<p><font color="#E4393C" style="font-size:16px">¥${p.shop_price}</font></p>
</div>`;
$("#newlist").append(str);
});
}
});
})
</script>
ProductServlet
public void findNewsAndHots(HttpServletRequest request, HttpServletResponse response)
throws InvocationTargetException, IllegalAccessException,
IOException {
List<Product> news = productService.findNews();
List<Product> hots = productService.findHots();
Map<String,List<Product>> map = new HashMap<>();
map.put("news",news);
map.put("hots",hots);
Result result = new Result(Constant.SUCCESS,"查询最新最热",map);
response.getWriter().write(JSONObject.fromObject(result).toString());
}
ProductService
@Override
public List<Product> findNews() {
List<Product> list = null;
try {
list=productDao.findNews();
} catch (SQLException e) {
e.printStackTrace();
}
return list;
}
@Override
public List<Product> findHots() {
List<Product> list = null;
try {
list=productDao.findHots();
} catch (SQLException e) {
e.printStackTrace();
}
return list;
}
ProductDao
@Override
public List<Product> findNews() throws SQLException {
String sql = "SELECT * FROM product WHERE pflag=? ORDER BY pdate DESC LIMIT ?";
Object[] params = { Constant.WEI_XIA_JIA,9};
return qr.query(sql,new BeanListHandler<>(Product.class),params);
}
@Override
public List<Product> findHots() throws SQLException {
String sql = "SELECT * FROM product WHERE pflag=? AND is_hot=? ORDER BY pdate DESC LIMIT ?";
Object[] params = { Constant.WEI_XIA_JIA,Constant.IS_HOT,9};
return qr.query(sql,new BeanListHandler<>(Product.class),params);
}
展示商品详情
实现步骤
- 首页拼接字符串,将每个商品的主键id传递到详情页面
- 详情页面获取商品主键,向服务器发送AJAX请求
- Servlet接收客户端请求的主键值
- 调用业务层方法,根据主键查询商品
- 业务层调用持久层查询商品传递,返回商品对象
- Servlet接收业务层返回的商品对象
- 商品对象封装Result对象,转成JSON数据,响应浏览器
首页拼接字符串,传递商品主键
<a href="http://www.itheima342.com:8020/web/view/product/info.html?pid=${p.pid}">
商品详情页面info.html
$(function(){
var pid = HM.getParameter("pid");
if(!pid){
alert("没有此商品");
location.href="http://www.itheima342.com:8020/web/index.html";
}
var url="/product?method=pinfo";
var params = "pid="+pid;
HM.ajax(url,params,function(data){
if(data.code==0){
alert("没有此商品");
location.href="http://www.itheima342.com:8020/web/index.html";
}
if(data.code==1){
var p = data.data;
$("#pname").html(p.pname);
$("#pid").html("编号:"+p.pid);
$("#shop_price").html(p.shop_price);
$("#market_price").html("¥"+p.market_price+"元");
$("#pimage").attr("src","http://www.itheima342.com:8020/web/"+p.pimage);
$("#smallImg").attr("src","http://www.itheima342.com:8020/web/"+p.pimage);
$("#pdesc").html(p.pdesc);
}
})
})
ProductServlet
public void pinfo(HttpServletRequest request, HttpServletResponse response)
throws InvocationTargetException, IllegalAccessException,
IOException {
String pid = request.getParameter("pid");
Product product= productService.pinfo(pid);
if(product==null){
Result result = new Result(Constant.FAILS,"未查到此商品");
response.getWriter().write(JSONObject.fromObject(result).toString());
return;
}
Result result = new Result(Constant.SUCCESS,"查询商品详情成功",product);
response.getWriter().write(JSONObject.fromObject(result).toString());
}
ProductService
@Override
public Product pinfo(String pid) {
Product product = null;
try {
product=productDao.pinfo(pid);
} catch (SQLException e) {
e.printStackTrace();
}
return product;
}
ProductDao
@Override
public Product pinfo(String pid) throws SQLException {
String sql = "select * from product where pid=?";
Object[] params={pid};
return qr.query(sql, new BeanHandler<>(Product.class), params);
}
查询每个分类下的商品详情
实现步骤
- 菜单页面拼接超链接,传递商品分类主键
- 分类商品页面接收分类主键数据,向服务器发送AJAX请求
- Servlet接收客户端分类主键的数据
- 调用业务层方法组装PageBean数据
- 业务层调用持久层方法,分页查询数据表
- Servlet接收业务层返回的PageBean数据,转成JSON响应客户端
header页面添加连接
str += `<li><a href="http://www.itheima342.com:8020/web/view/product/list.html?cid=${c.cid}">${c.cname}</a></li>`;
list 商品分页展示页面
$(function(){
var cid=HM.getParameter("cid");
var pageNumber=HM.getParameter("pageNumber");
if(!pageNumber){
pageNumber=1;
}
var url="/product?method=findProductsByCid";
var params="cid="+cid+"&pageNumber="+pageNumber;
HM.ajax(url,params,function(data){
var pb = data.data;
var pArray = pb.data;
$.each(pArray, function(index,p) {
var str=`<div class="col-md-2" style="text-align:center;height:200px;padding:10px 0px;">
<a href="http://www.itheima342.com:8020/web/view/product/info.html?pid=${p.pid}">
<img src="http://www.itheima342.com:8020/web/${p.pimage}" width="130" height="130" style="display: inline-block;">
</a>
<p><a href="http://www.itheima342.com:8020/web/view/product/info.html?pid=${p.pid}" style='color:#666'>${p.pname}</a></p>
<p><font color="#E4393C" style="font-size:16px">¥${p.shop_price}</font></p>
</div>`;
$("#productlist").append(str);
});
var page = HM.page(pb,"http://www.itheima342.com:8020/web/view/product/list.html?cid="+cid);
$("#page").html(page);
});
})
ProductServlet
public void findProductsByCid(HttpServletRequest request, HttpServletResponse response)
throws InvocationTargetException, IllegalAccessException,
IOException {
String cid = request.getParameter("cid");
int pageNumber = Integer.parseInt(request.getParameter("pageNumber"));
int pageSize =12;
PageBean<Product> pb = productService
.getPageBeanByCid(cid, pageNumber, pageSize);
Result result = new Result(Constant.SUCCESS,"查询分类商品成功",pb);
response.getWriter().write(JSONObject.fromObject(result).toString());
}
ProductService
@Override
public PageBean<Product> getPageBeanByCid(String cid, int pageNumber,
int pageSize) {
PageBean<Product> pageBean = new PageBean<>();
try {
int total = (int)productDao.findTotalByCid(cid);
pageBean.setTotal(total);
pageBean.setPageNumber(pageNumber);
pageBean.setPageSize(pageSize);
pageBean.setTotalPage((int)Math.ceil(total*1.0/pageSize));
List<Product> products = productDao
.findProductsByCid(cid, pageNumber, pageSize);
pageBean.setData(products);
} catch (SQLException e) {
e.printStackTrace();
}
return pageBean;
}
ProductDao
@Override
public long findTotalByCid(String cid) throws SQLException {
String sql = "select count(*) from product where cid = ?";
Object[] params = {cid};
return qr.query(sql, new ScalarHandler<>(), params);
}
@Override
public List<Product> findProductsByCid(String cid, int pageNumber,
int pageSize) throws SQLException {
String sql = "select * from product where cid=? limit ?,?";
Object[] params = {cid,(pageNumber-1)*pageSize,pageSize};
return qr.query(sql,new BeanListHandler<>(Product.class),params);
}