秒杀之创建商品模型（二）

最新推荐文章于 2025-03-28 13:34:51 发布

原创最新推荐文章于 2025-03-28 13:34:51 发布 · 262 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#spring #java #后端

秒杀专栏收录该内容

16 篇文章

订阅专栏

文章描述了一个商品信息系统的实现，包括在ItemController中的商品详情和列表页面的处理，使用了Java8的StreamAPI转换数据对象。同时，文章提到了数据库连接问题导致的商品详情无法正常展示，以及商品列表页面通过Ajax获取数据并动态渲染DOM。

1.在ItemController中添加代码

 //商品详情页浏览
    @RequestMapping(value = "/get", method = {RequestMethod.GET})
    @ResponseBody
    public CommonReturnType getItem(@RequestParam(name = "id") Integer id ){
          ItemModel itemModel=itemService.getItemById(id);

          ItemVO itemVO = convertVOFromModel(itemModel);

          return CommonReturnType.create(itemVO);
    }

运行报错

好像是数据库连接有问题！！

还未解决

2.ItemDOMapper.xml

 <select id="listItem"  resultMap="BaseResultMap">

    select
    <include refid="Base_Column_List" />
    /*通过销量倒序排序*/
    from item ORDER BY sales DESC;
  </select>

3.ItemDOMapper.java

  List<ItemDO> listItem();

4.ItemServiceImpl实现类

   @Override
    public List<ItemModel> listItem() {
        List<ItemDO> itemDOList = itemDOMapper.listItem();
        //使用Java8的stream API
        List<ItemModel> itemModelList = itemDOList.stream().map(itemDO -> {
            ItemStockDO itemStockDO = itemStockDOMapper.selectByItemId(itemDO.getId());
            ItemModel itemModel = this.convertModelFromDataObject(itemDO, itemStockDO);
            return itemModel;
        }).collect(Collectors.toList());
        return itemModelList;
    }

5.ItemController.java

//商品列表页面浏览
    @RequestMapping(value = "/list", method = {RequestMethod.GET})
    @ResponseBody
    public CommonReturnType listItem() {
        List<ItemModel> itemModelList = itemService.listItem();
        //使用stream API将list内的itemModel转化为itemVO；
        List<ItemVO> itemVOList = itemModelList.stream().map(itemModel -> {
            ItemVO itemVO = this.convertVOFromModel(itemModel);
            return itemVO;
        }).collect(Collectors.toList());
        return CommonReturnType.create(itemVOList);
    }

6.商品列表页面 listitem.html

<html>
<head>
    <meta charset="UTF-8">
    <link href="static/assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <link href="static/assets/global/css/components.css" rel="stylesheet" type="text/css"/>
    <link href="static/assets/admin/pages/css/login.css" rel="stylesheet" type="text/css"/>
    <script src="static/assets/global/plugins/jquery-1.11.0.min.js" type="text/javascript"></script>
    <title>Title</title>
</head>
<body>
<div class="content">
    <h3 class="form-title">商品列表浏览</h3>
    <div class="table-responsive">
        <table class="table">
            <thead>
            <tr>
                <th>商品名</th>
                <th>商品图片</th>
                <th>商品描述</th>
                <th>商品价格</th>
                <th>商品库存</th>
                <th>商品销量</th>
            </tr>
            </thead>

            <tbody id="container">

            </tbody>
        </table>
    </div>
</div>
</body>

<script>
    // 定义全局商品数组信息
    var g_itemList = [];
    $(document).ready(function() {
        $.ajax({
            type: "GET",
            url: "http://localhost:8080/item/list",
            xhrFields:{
                withCredentials:true,
            },
            success: function(data) {
                if (data.status == "success") {
                    g_itemList = data.data;
                    reloadDom();
                } else {
                    alert("获取商品信息失败，原因为" + data.data.errMsg);
                }
            },
            error: function(data) {
                alert("获取商品信息失败，原因为" + data.responseText);
            }
        });
    });
    function reloadDom() {
        for (var i = 0; i < g_itemList.length; i++) {
            var itemVO =g_itemList[i];
            var dom =
                "<tr data-id='"+itemVO.id+"' id='itemDetail"+itemVO.id+"'>\
			<td>"+itemVO.title+"</td>\
			<td><img style='width:100px;heigth:auto;' src='"+itemVO.imgUrl+"'/></td>\
			<td>"+itemVO.description+"</td>\
			<td>"+itemVO.price+"</td>\
			<td>"+itemVO.stock+"</td>\
			<td>"+itemVO.sales+"</td>\
			</tr>";
            $("#container").append($(dom));
            //点击一行任意的位置 跳转到商品详情页
            $("#itemDetail"+itemVO.id).on("click", function(e) {
                window.location.href="getitem.html?id="+$(this).data("id");
            });
        }

    }
</script>

</html></html>

7.跳转到商品详情页 getitem.html

<html>
<head>
    <meta charset="UTF-8">
    <link href="static/assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <link href="static/assets/global/css/components.css" rel="stylesheet" type="text/css"/>
    <link href="static/assets/admin/pages/css/login.css" rel="stylesheet" type="text/css"/>
    <script src="static/assets/global/plugins/jquery-1.11.0.min.js" type="text/javascript"></script>
    <title>Title</title>
</head>
<body class="login">
<div class="content">
    <h3 class="form-title">商品详情</h3>
    <div class="form-group">
        <label class="control-label">商品名</label>
        <div>
            <label class="control-label" id="title" />
        </div>
    </div>
    <div class="form-group">
        <label class="control-label">商品描述</label>
        <div>
            <label class="control-label" id="description" />
        </div>
    </div>
    <div class="form-group">
        <label class="control-label">商品价格</label>
        <div>
            <label class="control-label" id="price" />
        </div>
    </div>
    <div class="form-group">
        <label class="control-label">图片</label>
        <div>
            <img style="width: 200px;height: auto" id="imgUrl"/>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label">商品库存</label>
        <div>
            <label class="control-label" id="stock" />
        </div>
    </div>

    <div class="form-group">
        <label class="control-label">商品销量</label>
        <div>
            <label class="control-label" id="sales" />
        </div>
    </div>

</div>
</body>

<script>
    function getParam(paramName) {
        paramValue = "", isFound = !1;
        if (this.location.search.indexOf("?") == 0 && this.location.search.indexOf("=") > 1) {
            arrSource = unescape(this.location.search).substring(1, this.location.search.length).split("&"), i = 0;
            while (i < arrSource.length && !isFound)
                arrSource[i].indexOf("=") > 0 && arrSource[i].split("=")[0].toLowerCase() == paramName.toLowerCase() && (paramValue = arrSource[i].split("=")[1], isFound = !0), i++
        }
        return paramValue == "" && (paramValue = null), paramValue
    }
    var g_itemVO = {};
    jQuery(document).ready(function () {
            //获取商品详情
            $.ajax({
                type:"GET",
                contentType:"application/x-www-form-urlencoded",
                url:"http://localhost:8090/item/get",
                data:{
                    "id":getParam("id"),

                },
                //允许跨域请求
                xhrFields:{withCredentials:true},
                success:function (data) {
                    if (data.status=="success") {
                        g_itemVO = data.data;
                        reloadDom();
                    }else {
                        alert("获取信息失败，原因为" + data.data.errMsg);
                    }
                },
                error:function (data) {
                    alert("获取信息失败，原因为"+data.responseText);
                }
            });
        });
    function reloadDom() {
        $("#title").text(g_itemVO.title);
        $("#imgUrl").attr("src", g_itemVO.imgUrl);
        $("#description").text(g_itemVO.description);
        $("#price").text(g_itemVO.price);
        $("#stock").text(g_itemVO.stock);
        $("#sales").text(g_itemVO.sales);
    }
</script>
</html>

做完了商品详情但是数据库连接有问题也展示不出来

等解决了问题再发一次