SpringBoot项目实战（下）

13.商品热销排行

---

13.1 商品-创建数据表

DROP TABLE IF EXISTS t_product;

CREATE TABLE t_product (
  id int(20) NOT NULL COMMENT '商品id',
  category_id int(20) DEFAULT NULL COMMENT '分类id',
  item_type varchar(100) DEFAULT NULL COMMENT '商品系列',
  title varchar(100) DEFAULT NULL COMMENT '商品标题',
  sell_point varchar(150) DEFAULT NULL COMMENT '商品卖点',
  price bigint(20) DEFAULT NULL COMMENT '商品单价',
  num int(10) DEFAULT NULL COMMENT '库存数量',
  image varchar(500) DEFAULT NULL COMMENT '图片路径',
  status int(1) DEFAULT '1' COMMENT '商品状态  1：上架   2：下架   3：删除',
  priority int(10) DEFAULT NULL COMMENT '显示优先级',
  created_time datetime DEFAULT NULL COMMENT '创建时间',
  modified_time datetime DEFAULT NULL COMMENT '最后修改时间',
  created_user varchar(50) DEFAULT NULL COMMENT '创建人',
  modified_user varchar(50) DEFAULT NULL COMMENT '最后修改人',
  PRIMARY KEY (id)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

DROP TABLE IF EXISTS t_product_category;

CREATE TABLE t_product_category (
  id int(20) NOT NULL COMMENT '主键',
  parent_id bigint(20) DEFAULT NULL COMMENT '父分类id',
  name varchar(150) DEFAULT NULL COMMENT '名称',
  status int(1) DEFAULT '1' COMMENT '状态   1：正常   0：删除',
  sort_order int(4) DEFAULT NULL COMMENT '排序号',
  is_parent int(1) DEFAULT NULL COMMENT '是否是父分类   1：是  0：否',
  created_time datetime DEFAULT NULL COMMENT '创建时间',
  modified_time datetime DEFAULT NULL COMMENT '最后修改时间',
  created_user varchar(50) DEFAULT NULL COMMENT '创建人',
  modified_user varchar(50) DEFAULT NULL COMMENT '最后修改人',
  PRIMARY KEY (id)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

13.2 创建实体类

创建Product.java实体类

@Data
@AllArgsConstructor
@NoArgsConstructor
public class Product extends BaseEntity implements Serializable {
   
	  private Integer id;
	  private Integer categoryId;
	  private String itemType;
	  private String title;
	  private String sellPoint;
	  private Long price;
	  private Integer num;
	  private String image;
	  private Integer status;
	  private Integer priority;
}

13.3 商品-热销排行-持久层

13.3.1 分析SQL语句

select * from t_product where status=1 order by priority desc limit 0,4;

13.3.2 接口与抽象方法

创建ProductMapper接口并在接口中添加查询热销商品findHotProductList()方法。

/** 处理商品数据持久层接口 */
public interface ProductMapper {
   
	/**
	 * 查询热销商品前四
	 * @return
	 */
	List<Product> findHotList();
}

13.3.3 Mapper映射文件

创建ProductMapper.xml文件并添加查询热销商品findHotProductList()方法对应的sql语句。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.company.store.mapper.ProductMapper">

	<select id="findHotList" resultType="Product">
		SELECT * FROM t_product WHERE status=1 ORDER BY priority DESC LIMIT 0,4
	</select>
</mapper>

13.3.4 单元测试

在ProductMapperTest测试类中添加测试代码。

@SpringBootTest
public class ProtuctMapperTest {
   
	@Autowired
	ProductMapper productMapper;
	
	@Test
	public void getByParent() {
   
		List<Product> list = productMapper.findHotList();
		for(Product district:list) {
   
			System.out.println(district);
		}
	}
	
}

13.4 商品-热销排行-业务层

13.4.1 规划异常

无

13.4.2 接口与抽象方法

创建IProductService接口并在接口中添加查询热销商品findHotProductList()方法。

/** 处理商品数据的业务层接口 */
public interface IProductService {
   
	
	/**
	 * 查询热销商品前四
	 * @return
	 */
	List<Product> findHotProductList();
}

13.4.3 实现类

在ProductServiceImpl实现类中添加查询热销商品findHotProductList()方法。

@Service
public class ProductServiceImpl implements IProductService {
   
	@Autowired
	private ProductMapper productMapper;
	@Override
	public List<Product> findHotProductList() {
   

		List<Product> list = productMapper.findHotList();
		for(Product product:list) {
   
			product.setPriority(null);
			product.setModifiedTime(null);
			product.setModifiedUser(null);
			product.setCreatedTime(null);
			product.setCreatedUser(null);
		}
		return list;
	}

}

13.5 商品-热销排行-控制层

13.5.1 规划异常

无

13.5.2 设计请求

• 设计用户提交请求。并设计响应方式

• 在LoginInterceptorConfig添加白名单

patterns.add("/product/**");

13.5.3 处理请求

• 创建ProductController类。

@RestController
@RequestMapping("product")
public class ProductController extends BaseController {
   
	@Autowired
	private IProductService productService;
	
	@RequestMapping("hot_list")
	public JsonResult<List<Product>> getHotList(){
   
		List<Product> data=productService.findHotProductList();
		return new JsonResult<List<Product>>(OK,data);
	}
}

13.5.4 测试请求

• 直接访问: http://localhost:8080/product/hot_list

13.6 商品-商品详情-前端页面

• 在index.html添加

<script type="text/javascript">
$(document).ready(function(){
   
$.ajax({
   
	url:"/product/hot_list",
	type:"GET",
	dataType:"JSON",
	success:function(res){
   
		let list=res.data;
		console.log("count:"+list.length);
		for(let i=0;i<list.length;i++){
   
			let html=
			'<div class="col-md-12">'+
			'<div class="col-md-7 text-row-2">'+
			'<a href="product.html?id=#{id}">#{title}</a>'+
			'</div>'+
			'<div class="col-md-2">¥#{price}</div>'+
			'<div class="col-md-3">'+
			'<img src="..#{image}/collect.png" class="img-responsive" />'+
			'</div>'+
			'</div>';
			html=html.replace(/#{id}/g,list[i].id);
			html=html.replace(/#{price}/g,list[i].price);
			html=html.replace(/#{image}/g,list[i].image);
			html=html.replace(/#{title}/g,list[i].title);
			$("#hot-list").append(html);
		}
	}
});
});
</script>

14.显示商品详情

---

14.1 商品-商品详情-持久层

14.1.1 规划执行sql语句

根据商品id返回商品详情

select * from t_product where id=?

14.1.2 接口与抽象方法

• ProductMapper

/**
* 根据商品id查询商品详情
* @param id
* @return
*/
Product findById(Integer id);  

• 在ProductMapper.xml中添加映射

<select id="findById" resultType="Product">
	SELECT * FROM t_product WHERE id=#{id}
</select>

14.2 商品-商品详情-业务层

14.2.1 规划异常

• 根据id没有找到商品的异常，在service.ex新建ProductNotFoundException继承ServiceException

14.2.2 接口和抽象方法

• 在IProductService中添加抽象方法

/**
* 根据商品id查询商品详情
* @param id
* @return
*/
Product findById(Integer id);

14.2.3 抽象方法实现

• 在ProductServiceImpl中实现抽象方法

@Override
public Product findById(Integer id) {
   
	Product product = productMapper.findById(id);
	if(product==null) {
   
		throw new ProductNotFoundException("尝试访问的商品数据不存在");
	}
	product.setPriority(null);
	product.setModifiedTime(null);
	product.setModifiedUser(null);
	product.setCreatedTime(null);
	product.setCreatedUser(null);
	return product;
}

14.3 商品-商品详情-控制层

14.3.1 规划异常

• 在BaseController添加

else if(e instanceof ProductNotFoundException) {
   
			result.setState(4006);
		}

14.3.2 设计请求

14.3.3 处理请求

• 在ProductController中添加方法

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

• 尝试访问 http://localhost:8080/product/10000017/detail 进行测试、

14.4 商品-商品详情-前端

<script type="text/javascript" src="../js/jquery-getUrlParam.js"></script>
<script type="text/javascript">
	let id=$.getUrlParam("id");
	console.log("id="+id);
	$(document).ready(function(){
   
		$.get
		$.ajax({
   
			url:"/product/"+id+"/detail",
			type:"GET",
			contentType:"application/json",
			success:function(res){
   
				if(res.state==200){
   
					console.log("title="+res.data.title);
					$("#product-title").html(res.data.title);
					$("#product-sell-point").html(res.data.sell.point);
					$("#product-price").html(res.data.price);
					for(let i=0;i<=5;i++){
   
						$("#product-image-"+i+"-big"