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

作者：从前慢现在也慢 | 2024-03-16 05:13:21

踩

web 商品分类

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

1 功能描述

接上篇JavaWeb-仿小米商场(3):登录与退出本篇博客将分析和实现旅游线路分类内容的查询和展示。此功能旨在控制 banner 顶部的展示内容。如以下H5页面所示：

在这里插入图片描述

2 功能分析

2.1 功能逻辑抽象

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

在这里插入图片描述

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

3 代码实现

3.1 业务流程描述

在这里插入图片描述

3.2 Servlet

3.1.1 Servlet

在 GoodsTypeServlett 类中定义查询所有线路分类内容的主体逻辑


@WebServlet(value = "/goodType.do")
public class GoodsTypeServlet extends BaseServlet {
    private ResultData resultData = new ResultData();

    /**
     * 获取所有商品分类,返回json数据
     *
     * @param req
     * @param resp
     * @return
     * @throws ServletException
     * @throws IOException
     */
    public String goodsTypeAjax(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        IGoodsTypeService service = new GoodsTypeServiceImpl();
        resultData.setFlag(false);
        List<GoodsType> list = service.getGoodsTypeByParent();
        if (list != null && list.size() >= 1) {
            System.out.println(list);
            resultData.setFlag(true);
            resultData.setData(list);
        }
        String json = JSON.toJSONString(resultData);
        System.out.println(json);
        resp.setContentType("application/json;charset=utf-8");
        return json;
    }
    

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

3.1.2 Service

在GoodsTypeServicel 类中定义getGoodsTypeByParent() 方法，定义商品分类内容的具体查询业务逻辑

public class GoodsTypeServiceImpl implements IGoodsTypeService {
    private IGoodsTypeDao goodsTypeDao = new GoodsTypeDaoImpl();
    //.......
     @Override
    //封装的查询数据的方法   根据sql语句查询不同的数据
    public List<GoodsType> getGoodsTypeByParent() {
        List<GoodsType> allDatas = goodsTypeDao.getAllDatas();
        System.out.println(allDatas);
        List<GoodsType> arr = new ArrayList<>();
        if (allDatas != null && allDatas.size() >= 1) {
            for (GoodsType gt : allDatas) {
                if (gt.getParent() == 0) {//从总的分类数据中做筛选,只提取级别为零的分类数据
                    arr.add(gt);
                }
            }
            return arr;
        }
        return null;
    }
    
    
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

3.1.3 Dao

在 GoodsTypeDao类中定义getAllDatas 方法，操作数据库查询 tb_goods 表中的所有内容

public class GoodsTypeDaoImpl implements IGoodsTypeDao {
    private QueryRunner runner = null;
    //.......
    @Override
    public GoodsType findDataById(int id) {
        String sql = "select *from tb_goods_type";
        List<GoodsType> goodsTypes = queryGoodsBySql(sql, id + "");
        if (goodsTypes.size() >= 1 && goodsTypes != null) {
            return goodsTypes.get(0);
        }
        return null;
    }

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

    @Override
    public List<GoodsType> queryGoodsBySql(String sql, Object... parms) {
        List<GoodsType> query = null;
        QueryRunner run = new QueryRunner(DBUtils.getDataSource());
        try {
            query = run.query(sql, parms, new BeanListHandler<>(GoodsType.class));
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return query;
    }
//........
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

3.2 前端

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

3.2.1:根据数据库的数据动态改变导航栏

因为其他导航栏都是使用header页面,所以只需要改变header页面就可以达到改变所有相关页面的效果


        $(document).ready(function () {
            //获取用户登录状态的请求
            $.get("user.do?action=checkUserLogin", "", function (data) {
                if (data.flag == true) {//登录
                    var temp = '欢迎回来,<a href="userAddress?flag=show" id="a_top">'+data.data.username+'</a>' +
                        '<li>|</li>' +
                        '<a href="userservlet?method=logOut" id="a_top">注销</a> ' +
                        '<li>|</li>' +
                        '<a href="getOrderList" id="a_top">我的订单</a> ' +
                        ' <li>|</li> ' +
                        '<a href="userservlet?method=getAddress" id="a_top">地址管理</a>' +
                        '<a href="" id="a_top">消息通知</a> ' +
                        '<a href="cartservlet?method=getCart" id="shorpcar">购物车</a> ';
                    $("#showuser").html(temp);
                } else {
                    var temp = '<a href="login.html" id="a_top">登录</a> ' +
                        '<li>|</li>' +
                        '<a href="register.html" id="a_top">注册</a> ' +
                        '<a href="" id="a_top">消息通知</a> ' +
                        '<a href="cartservlet?method=getCart" id="shorpcar">购物车</a> ';
                    $("#showuser").html(temp);
                }
            })
            //获取商品类别的
            $.ajax({
                url: "goodType.do?action=goodsTypeAjax",
                type: "GET",
                dataType: "json",
                success: function (result) {
                    for (var i in result.data) {
                        //注意这里的servlet对象为goods.do  点击该链接会跳转到商品列表页面,然后根据数据库中的数据展示相应类别的商品
                        var a = $("<a href='goods.do?action=getGoodsTypeAjax&typeid=" + result.data[i].id + "'>" + result.data[i].name + "</a>");
                        $("#goodsType").append(a);
                    }
                },
                error: function () {
                    //alert("失败");
                }
            })
        })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

4点击分类展示分类商品

4.1功能描述

在这里插入图片描述

GoodsServlet类的代码如下


@WebServlet(value = "/goods.do")
public class GoodsServlet extends BaseServlet{
    private ResultData resultData = new ResultData();

    /**
     * 转发请求到商品列表页面
     * @param req
     * @param resp
     * @return
     * @throws ServletException
     * @throws IOException
     */
    public String getGoodsTypeAjax(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        String typeId = req.getParameter("typeid");

        return Constants.REDIRECT+"/goodsListByType.html?typeid="+typeId;
    }

    /**
     * 通过前端页面传来的typeid  查询对应数据并返回其对应的json数据
     * @param req
     * @param resp
     * @return
     * @throws ServletException
     * @throws IOException
     */
    public String getGoodsList(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        String typeId = req.getParameter("typeid");
        IGoodsService service = new GoodsServiceImpl();
        resultData.setFlag(false);
        List<Goods> list = service.getGoodsByTypeId(typeId);
        if (list != null && list.size() >= 1) {
            resultData.setFlag(true);
            resultData.setData(list);
        }
        String json = JSON.toJSONString(resultData);
        System.out.println(json);
        resp.setContentType("application/json;charset=utf-8");
        return json;
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

GoodsService类代码:

public class GoodsServiceImpl implements IGoodsService {
    private IGoodsDao goodsDao = new GoodsDaoImpl();
    //.......

public List<Goods> getGoodsByTypeId(String typeId) {
        List<Goods> allDatas = null;

        if (typeId == null) {
            allDatas=  goodsDao.getGoodDatas(10);//todo 如果没有给分类  提供前十条商品数据
        } else {
            allDatas= goodsDao.getGoodsByTypeId(typeId);
        }

        return allDatas;
    }
  //........
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

GoodsDao类代码


public class GoodsDaoImpl implements IGoodsDao {
//......
@Override
    public List<Goods> getAllDatas() {
        String sql = "select *from tb_goods where gstart=0 ";
        return queryGoodsBySql(sql, null);

    }

    public List<Goods> queryGoodsBySql(String sql, Object... parms) {
        List<Goods> query = null;
        QueryRunner run = new QueryRunner(DBUtils.getDataSource());
        try {
            query = run.query(sql, parms, new BeanListHandler<>(Goods.class));
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return query;
    }

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

    @Override
    public List<Goods> getGoodsByTypeId(String typeId) {
        String sql = "select * from tb_goods where gstart=0 and typeid=? ";
        List<Goods> goods = queryGoodsBySql(sql, typeId);
        return goods;
    }
    
    //.....
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

商品分类页面加载商品信息的函数

读取后端传来的json数据加载商品对应的信息


    <script type="text/javascript">
        $(document).ready(function () { //获取用户登录状态的请求
            let typeid = getParams("typeid");

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

                        $("#showDiv").append(a)
                    }
                }
            })


        })
    </script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

ata[i].price + ‘

\n’ +
’ \n’ +
’ \n’ +
’ \n’;

                    $("#showDiv").append(a)
                }
            }
        })


    })
</script>
1
2
3
4
5
6
7
8

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/247295