JavaEE学习日志(六十九): 黑马商城项目（二）

JavaEE学习日志持续更新----> 必看！JavaEE学习路线（文章总汇）

黑马商城项目（二）

今天任务

• 导航菜单

• 首页最新最热商品展示

导航菜单

实现步骤

• 导航菜单显示的是数据库中的商品分类信息
• 页面加载中,向服务器发送请求
• Servlet调用业务层方法,获取集合
• 业务层调用持久层方法
• Servlet将注册结果封装对象,向客户端回写JSON数据
• 客户端判断JSON数据,跳转页面

前端

header.html中发送ajax请求

//发送AJAX请求，获取的是导航菜单的数据，分类表
		HM.ajax("/category","method=findAll",function(data){
			//data返回json数据
			if(data.code==1){
				//取出Json数据,categoryList的json数据
				var category = data.obj;
				//遍历数组，取出分类数据	
				var str = "";
				$.each(category, function(index,element) {
					str+="
"+element.cname+"
";
					
				});
				$("#cate_list").html(str);
			}
		});

CategoryServlet

package com.itheima.web;

import com.itheima.domain.Category;
import com.itheima.service.CategoryService;
import com.itheima.utils.BeanFactory;
import net.sf.json.JSONObject;

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;

@WebServlet(urlPatterns = "/category")
public class CategoryServlet extends BaseServlet {
    //bean工厂，获取业务层接口的实现类
    private CategoryService categoryService = BeanFactory.newInstance(CategoryService.class);
    /*
        实现查询所有的分类数据
        调用业务层方法，返回集合对象
        集合封装到结果对象，转成json响应
     */
    public void findAll(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        List<Category> categoryList = categoryService.findAll();
        //封装到结果对象
        Result result = new Result(Result.SUCCESS,"查询成功",categoryList);
        response.getWriter().print(JSONObject.fromObject(result));
    }
}

CategoryService

package com.itheima.service.impl;

import com.itheima.dao.CategoryDao;
import com.itheima.domain.Category;
import com.itheima.service.CategoryService;
import com.itheima.utils.BeanFactory;

import java.sql.SQLException;
import java.util.List;

public class CategoryServiceImpl implements CategoryService {
    //bean工厂，获取dao层的接口实现类
    private CategoryDao categoryDao = BeanFactory.newInstance(CategoryDao.class);
    /*
        调用dao层，查询所有的分类数据
        返回集合list
     */
    @Override
    public List<Category> findAll() {
        List<Category> categoryList = null;
        try {
            categoryList = categoryDao.findAll();
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return categoryList;
    }
}

CategoryDao

package com.itheima.dao.impl;

import com.itheima.dao.CategoryDao;
import com.itheima.domain.Category;
import com.itheima.utils.C3P0UtilsXML;
import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.BeanListHandler;

import java.sql.SQLException;
import java.util.List;

public class CategoryDaoImpl implements CategoryDao {
    private QueryRunner qr = new QueryRunner(C3P0UtilsXML.getDataSource());
    /*
        查询所有的分类信息
        返回集合List
     */
    @Override
    public List<Category> findAll() throws SQLException {
        //拼写查询所有分类数据的sql
        String sql = "select * from category";
        return qr.query(sql,new BeanListHandler<Category>(Category.class));
    }
}

首页显示最热最新商品

实现步骤

• 首页加载完成,AJAX向服务器发送请求
• Servlet调用业务层两次查询方法
• 业务层分别调用持久层两次方法
• 持久层两次方法分别查询最热门商品和最新商品
• Servlet获取两次查询方法结果集,并封装Result对象
• Result对象转成JSON数据并响应

前端

index.html中发送ajax请求

<script type="text/javascript">
			$(function(){
				//向服务器端发送ajax请求，获取最新和最热商品
				HM.ajax("/product","method=findNewsAndHot",function(data){
					if(data.code==1){
						//取出json中的数据
						//取出热门商品
						var isHot = data.obj.isHot;
						var hot = $("#hot");
						//isHot是个数组，数组的每个元素是商品对象
						$.each(isHot, function(index,element) {
							var str = "
\n" +
    "\t\t\t\t\t\t\n" +
    "\t\t\t\t\t\t\t+element.pimage+"\" width=\"130\" height=\"130\" style=\"display: inline-block;\">\n" +
    "\t\t\t\t\t\t\n" +
    "\t\t\t\t\t\t
"+element.pname+"
\n" +
    "\t\t\t\t\t\t
¥"+element.shop_price+"
\n" +
    "\t\t\t\t\t
";
    						//向div中追加标签
    						hot.append(str);
    
						});
						
						var newsId = $("#news");
						//取出最新商品
						var news = data.obj.news;
						$.each(news, function(index,element) {
							var str = "
\n" +
    "\t\t\t\t\t\t\n" +
    "\t\t\t\t\t\t\t+element.pimage+"\" width=\"130\" height=\"130\" style=\"display: inline-block;\">\n" +
    "\t\t\t\t\t\t\n" +
    "\t\t\t\t\t\t
"+element.pname+"
\n" +
    "\t\t\t\t\t\t
¥"+element.shop_price+"
\n" +
    "\t\t\t\t\t
";
    						newsId.append(str);
						});
					}
				});
				
			});
		script>

ProductServlet

package com.itheima.web;

import com.itheima.domain.Product;
import com.itheima.service.ProductService;
import com.itheima.utils.BeanFactory;
import net.sf.json.JSONObject;

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.HashMap;
import java.util.List;
import java.util.Map;

@WebServlet(urlPatterns = "/product")
public class ProductServlet extends BaseServlet {
    //获取业务层接口实现类对象
    private ProductService productService = BeanFactory.newInstance(ProductService.class);
    /*
        查询最新和最热商品
        调用两次业务层方法
        分别获取最新和最热商品
     */
    public void findNewsAndHot(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //调用业务层方法，获取最热商品
        List<Product> isHotList = productService.findIsHot();
        //调用业务层，获取最新商品
        List<Product> newList = productService.findNew();
        //把集合List合并为Map集合
        Map<String,List<Product>> map = new HashMap<String,List<Product>>();
        map.put("isHot",isHotList);
        map.put("news",newList);
        Result result = new Result(Result.SUCCESS,"查询成功",map);
        response.getWriter().print(JSONObject.fromObject(result));
    }
}

ProductService

package com.itheima.service.impl;

import com.itheima.dao.ProductDao;
import com.itheima.domain.Product;
import com.itheima.service.ProductService;
import com.itheima.utils.BeanFactory;

import java.sql.SQLException;
import java.util.List;

public class ProductServiceImpl implements ProductService {
    //Bean工厂获取dao层接口实现类对象
    private ProductDao productDao = BeanFactory.newInstance(ProductDao.class);
    /*
        查询最新商品
     */
    @Override
    public List<Product> findNew() {
        List<Product> newList = null;
        try {
            newList = productDao.findNew();
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return newList;
    }
    /*
        查询热门商品
     */
    @Override
    public List<Product> findIsHot() {
        List<Product> isHotList = null;
        try {
            isHotList = productDao.findIsHot();
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return isHotList;
    }
}

ProductDao

package com.itheima.dao.impl;

import com.itheima.dao.ProductDao;
import com.itheima.domain.Product;
import com.itheima.utils.C3P0UtilsXML;
import com.itheima.web.Constr;
import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.BeanListHandler;

import java.sql.SQLException;
import java.util.List;

public class ProductDaoImpl implements ProductDao {
    private QueryRunner qr = new QueryRunner(C3P0UtilsXML.getDataSource());

    /*
        查询最新商品
        按照发布日期进行倒序desc
     */
    @Override
    public List<Product> findNew() throws SQLException {
        //拼写sql
        String sql = "select * from product where pflag = ? order by pdate desc limit ?,?";
        return qr.query(sql,new BeanListHandler<Product>(Product.class),Constr.PFLAG,0,9);
    }

    /*
        查询所有热门商品：is_hot=1 pflag=0
        把热门，上架，定义为变量
     */
    @Override
    public List<Product> findIsHot() throws SQLException {
        //拼写热门sql语句
        String sql = "select * from product where is_hot = ? and pflag = ? limit ?,?";
        return qr.query(sql,new BeanListHandler<Product>(Product.class), Constr.ISHOT,Constr.PFLAG,0,9);
    }


}