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);// 判断查询结果是否为nullif (product == null) {throw new ProductNotFoundException("尝试访问的商品数据不存在");}// 将查询结果中的部分属性设置为nullproduct.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方法获取商品idvar 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>