SpringBoot项目--电脑商城【显示商品详情功能】

1.持久层[Mapper]

1规划需要执行的SQL语句

根据商品id显示商品详情的SQL语句

SELECT * FROM t_product WHERE id=?

2 设计接口和抽象方法

在ProductMapper接口中添加抽象方法

/**
 * 根据商品id查询商品详情
 * @param id 商品id
 * @return 匹配的商品详情，如果没有匹配的数据则返回null
 */
Product findById(Integer id);

3编写映射

在ProductMapper.xml文件中配置findById(Integer id)方法的映射

<select id="findById" resultMap="ProductEntityMap">
    select * from t_product where id=#{id}
</select>

2.业务层[Service]

1规划异常

如果商品数据不存在，应该抛出ProductNotFoundException，所以创建ProductNotFoundException异常类并使其继承ServiceException

/** 商品数据不存在的异常 */
public class ProductNotFoundException extends ServiceException {
    /**重写ServiceException的所有构造方法*/
}

2设计接口和抽象方法及实现

1.在业务层IProductService接口中添加findById(Integer id)抽象方法

/**
 * 根据商品id查询商品详情
 * @param id 商品id
 * @return 匹配的商品详情，如果没有匹配的数据则返回null
 */
Product findById(Integer id);

2.在ProductServiceImpl类中，实现接口中的findById(Integer id)抽象方法

@Override
public Product findById(Integer id) {
    Product product = productMapper.findById(id);
    // 判断查询结果是否为null
    if (product == null) {
        throw new ProductNotFoundException("尝试访问的商品数据不存在");
    }
    // 将查询结果中的部分属性设置为null
    product.setPriority(null);
    product.setCreatedUser(null);
    product.setCreatedTime(null);
    product.setModifiedUser(null);
    product.setModifiedTime(null);

    return product;
}

3.控制层[Controller]

1处理异常

在BaseController类中的handleException()方法中添加处理ProductNotFoundException的异常

else if (e instanceof ProductNotFoundException) {
	result.setState(4006);
    result.setMessage("访问的商品数据不存在的异常");
}

2 设计请求

• /products/{id}/details
• Integer id
• GET
• JsonResult<Product>

3处理请求

在ProductController类中添加处理请求的getById()方法

@GetMapping("{id}/details")
public JsonResult<Product> getById(@PathVariable("id") Integer id) {
    Product data = productService.findById(id);
    return new JsonResult<Product>(OK, data);
}

4.前端页面

1.首页将商品id发送给详情页后,详情页需要从url中裁取获得该id,实现方法在jquery-getUrlParam.js中(目前怎么实现裁取可以先不学),所以需要在product.html页面中导入该js文件,这里我在body标签内部的最后引入该js文件

<script type="text/javascript" src="../js/jquery-getUrlParam.js"></script>

jquery-getUrlParam.js

(function ($) {
	$.getUrlParam = function (name) {
		var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
		var r = window.location.search.substr(1).match(reg);
		if (r != null) 
			return unescape(r[2]);
		return null;
	}
})(jQuery);

2.在product.html页面中body标签内部的最后添加获取当前商品详情的代码

<script type="text/javascript">
            //调用jquery-getUrlParam.js文件的getUrlParam方法获取商品id
            var id = $.getUrlParam("id");
            console.log("id=" + id);
            $(document).ready(function() {
                $.ajax({
                    url: "/products/" + id + "/details",
                    type: "GET",
                    dataType: "JSON",
                    success: function(json) {
                        if (json.state == 200) {
                            console.log("title=" + json.data.title);
                            //html()方法:
                            // 假设有个标签<div id="a"></div>
                            //那么$("#a").html(<p></p>)就是给该div标签加p标签
                            //$("#a").html("我爱中国")就是给该div标签填充"我爱中国"内容
                            $("#product-title").html(json.data.title);
                            $("#product-sell-point").html(json.data.sellPoint);
                            $("#product-price").html(json.data.price);

                            for (var i = 1; i <= 5; i++) {
                                $("#product-image-" + i + "-big").attr("src", ".." + json.data.image + i + "_big.png");
                                $("#product-image-" + i).attr("src", ".." + json.data.image + i + ".jpg");
                            }
                        } else if (json.state == 4006) { // 商品数据不存在的异常
                            location.href = "index.html";
                        } else {
                            alert("获取商品信息失败！" + json.message);
                        }
                    }
                });
            });
        </script>