JavaWeb - 仿小米商城网（4）：首页线路分类展示

JavaWeb - 仿小米商城网（4）：首页商品分类展示

1 功能描述

接上篇仿小米商城网（3）：登录与退出，本篇博客将分析和实现小米商城商品分类内容的查询和展示。此功能旨在控制 banner 顶部的展示内容。如以下H5页面所示：

2 功能分析

2.1 功能逻辑抽象

分类展示功能在逻辑上并不复杂：每当需要加载 <header> 标签中的内容时，都会向后端提交一个 GET 请求来获取分类数据内容。后端在收到请求后查询数据库并以 json 形式返回展示内容。

查询商品分类内的功能需要面向数据库中的另一张表 tb_goods_type，为了区分不同类型的数据查询业务以及代码的维护性和扩展性。在开发时基于三层架构体系建立对应的GoodTypeServlet 类、GoodTypeService 接口和实现类、GoodTypeDao 接口和实现类。

3 代码实现

3.2 后端

3.1.1 Servlet

在 GoodTypeServlet 类中定义查询所有商品分类内容的主体逻辑

    /**
     * 获取商品所有分类 返回json
     * @param request
     * @param response
     * @return
     */
    public String goodsTypeAjax(HttpServletRequest request, HttpServletResponse response){
        IGoodsTypeService service = new GoodsTypeServiceImpl();
        resultData.setData(false);
        List<GoodsType> lists = service.getGoodTypeByParent();
        if (lists!=null && lists.size()>=1){
            resultData.setFlag(true);
            resultData.setData(lists);
        }
        String json = JSON.toJSONString(resultData);
        System.out.println(json);
        //在响应中声明返回的是json格式字符串
        response.setContentType("application/json;charset=utf-8");
        return json;
    }

3.1.2 Service

在 GoodTypeServiceImpl 类中定义 getGoodTypeByParent() 方法，定义商品分类内容的具体查询业务逻辑(只获取上架的商品信息)

    @Override
    public List<GoodsType> getGoodTypeByParent() {
        //将有库存的放置新的集合
        List<GoodsType> goodsTypes1 = new ArrayList<>();
        List<GoodsType> goodsTypes2 = goodsTypeDao.getAllDatas();
        if (goodsTypes2!=null){
            for (GoodsType gt: goodsTypes2){
                if (gt.getPrent()==0){//从总的业务中筛选
                    goodsTypes1.add(gt);
                }
            }
            return goodsTypes1;
        }
        return null;
    }

3.1.3 Dao

在 GoodTypeDaoImpl 类中定义 getAllDatas() 方法，操作数据库查询 tb_goods_type表中的所有内容

    @Override
    public List<GoodsType> getAllDatas() {
        String sql = "select * from tb_goods_type";
        return queryBySql(sql,null);
    }

    @Override
    public List<GoodsType> queryBySql(String sql, Object... parms) {
        List<GoodsType> goodsTypes = null;
        QueryRunner qrun = new QueryRunner(DBUtils.getDataSource());
        try {
            goodsTypes = qrun.query(sql,parms,new BeanListHandler<>(GoodsType.class));
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return goodsTypes;
    }

3.2 代码实现

后端程序执行顺利的话，返回的响应结果可以使用 FireFox 浏览器的自动 json 解析功能观察到以下效果。

前端在加载 内容时便向后端提交异步请求。在 header.html 的 <script> 标签中定义以下 jQuery 代码：

//获取商品类别的
            $.ajax({
                url: "goodType.do?action=goodsTypeAjax",
                type: "GET",
                dataType: "json",
                success: function (result) {
                    for (var i in result.data) {
                        var a = $("<a href='goodType.do?action=getGoodsListByTypeId&typeid=" + result.data[i].id + "'>" + result.data[i].name + "</a>");
                        $("#goodsType").append(a);

                    }
                },
                error: function () {
                    alert("获取分类失败");
                }
            })

4.点击分类展示分类商品

4.1功能逻辑描述

4.2代码实现

 $(document).ready(function () {
            var typeid = getParams("typeid");
            // alert(typeid)
            //获取用户登录状态的
            $.get("goods.do?action=getGoodsList", "typeid=" + typeid, function (result) {
                if (result.flag === true) {//登录
                    for (var i in result.data) {
                        var temp = '<div class="col-sm-3">' +
                            '   <div class="thumbnail">' +
                            '     <img src="/'+result.data[i].picture+'" width="180" height="180"  alt="小米6" />' +
                            '     <div class="caption">' +
                            '       <h4>商品名称<a href="getGoodsById?id='+result.data[i].id+'">'+result.data[i].name+'</a></h4>' +
                            '       <p>热销指数 ';
                            var stTemp = "";
                            for(var j = 0;j<=result.data[i].star;j++){
                                stTemp += '<img src="image/star_red.gif" alt="start"/>'
                            }
                            temp += stTemp;
                            temp += '</p>'+
                            '        <p>上架日期:'+result.data[i].pubdate+'</p>' +
                            '            <p style="color:orange">价格:'+result.data[i].price+'</p>' +
                            '     </div>' +
                            '   </div>' +
                            ' </div>'

                        $("#dataDiv").append(temp);
                    }
                }
            });
        });

4.2.1 Servlet

/**
     * 根据商品类别返回goodsListByTypeId.html
     * @param request
     * @param response
     * @return
     */
    public String getGoodsListByTypeId(HttpServletRequest request, HttpServletResponse response){
        String typeid = request.getParameter("typeid");
        return Constants.REDIRECT+"/goodsListByTypeId.html?typeid="+typeid;
    }
    /**
     * 根据商品类别返回所有商品列表json数据
     * @param request
     * @param response
     * @return
     */
    public String getGoodsList(HttpServletRequest request, HttpServletResponse response){
        String typeid = request.getParameter("typeid");
        IGoodsService service = new GoodsServiceImpl();
        resultData.setFlag(false);
        List<Goods> goods = service.getGoodsByTypeId(typeid);
        if (goods!=null && goods.size()>=1){
            resultData.setFlag(true);
            resultData.setData(goods);
        }
        String json = JSON.toJSONString(resultData);
        System.out.println(json);
        //在响应中声明返回的是json格式字符串
        response.setContentType("application/json;charset=utf-8");
        return json;
    }

4.2.2 Service

    @Override
    public List<Goods> getGoodsByTypeId(String typeid) {
        List<Goods> goods = null;
        if (typeid==null){
            goods = goodsDao.getGoodDatas(10);//如果没有给分类 则提供前十条分类数据
        }else {
            goods = goodsDao.getGoodsByTyeId(typeid);
        }
        return goods;
    }

4.2.2 Dao

    @Override
    public List<Goods> getGoodDatas(int num) {
        String sql = "select * from tb_goods where  gstart=0 limit 0,?";
        return queryBySql(sql,num);
    }

    @Override
    public List<Goods> getGoodsByTyeId(String typeid) {
        String sql = "select * from tb_goods where gstart=0 and typeid=?";
        return queryBySql(sql,typeid);
    }
    @Override
    public List<Goods> queryBySql(String sql, Object... parms) {
        List<Goods> goods = null;
        QueryRunner qrun = new QueryRunner(DBUtils.getDataSource());
        try {
            goods = qrun.query(sql,parms,new BeanListHandler<>(Goods.class));
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return goods;
    }