1. 创建数据表

1.1在store数据库中创建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;

1.2 插入数据

LOCK TABLES t_product WRITE;
INSERT INTO t_product VALUES (10000001,238,'牛皮纸记事本','广博(GuangBo)10本装40张A5牛皮纸记事本子日记本办公软抄本GBR0731','经典回顾！超值特惠！',23,99999,'/images/portal/00GuangBo1040A5GBR0731/',1,62,'2017-10-25 15:08:55','2017-10-25 15:08:55','admin','admin'),等等等等;
UNLOCK TABLES;

2.创建实体类

/** 商品数据的实体类 */
public class Product extends BaseEntity {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;/*** get,set* equals和hashCode* toString*/
}

3.商品热销排行-持久层

3.1规划SQL语句

select * from t_product ORDER BY priority desc limit 0,4

3.2 编写接口和抽象方法

public interface ProductMapper {/*** 查询排在前四的热销商品* @return list*/List<Product> findHotList();
}

3.3 编写映射文件

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapperPUBLIC "-//mybatis.org//DTD Mapper 3.0//EN""https://mybatis.org/dtd/mybatis-3-mapper.dtd">
<!--命名就是接口的全类名-->
<mapper namespace="com.sdjzu.store.mapper.ProductMapper"><resultMap id="ProductEntiyMap" type="com.sdjzu.store.entity.Product"><id column="id" property="id"/><result column="category_id" property="categoryId"/><result column="item_type" property="itemType"/><result column="sell_point" property="sellPoint"/><result column="created_user" property="createdUser"/><result column="created_time" property="createdTime"/><result column="modified_user" property="modifiedUser"/><result column="modified_time" property="modifiedTime"/></resultMap><select id="findHotList" resultMap="ProductEntiyMap">select * from t_product ORDER BY priority desc limit 0,4</select>
</mapper>

4. 商品热销排行-业务层

4.1编写接口和抽象方法

/*热销商品排行*/
public interface IProductService {/*** 查询排列前四的商品* @return*/List<Product> findHotProduct();
}

4.2编写实现类和抽象方法

@Service
public class ProductServiceImpl implements IProductService {@Autowiredprivate ProductMapper productMapper;@Overridepublic List<Product> findHotProduct() {List<Product> list = productMapper.findHotList();for (Product product : list) {product.setPriority(null);product.setCreatedUser(null);product.setCreatedTime(null);product.setModifiedUser(null);product.setModifiedTime(null);}return list;}
}

5.热销商品排行-控制层

5.1设计请求

1. /products/hot_list
2. GET
3. 不需要请求参数
4. JsonResult<List>

5.2处理请求

@RequestMapping("product")
@RestController
public class ProductController extends BaseController{@Autowiredprivate IProductService iProductService;@RequestMapping("hotProList")public JsonResult<List<Product>> findHotProduct(){List<Product> data = iProductService.findHotProduct();return new JsonResult<List<Product>>(ok, data);}}

6.热销商品排行-前端

<script type="text/javascript">$(document).ready(function() {showHotList();
});function showHotList() {$("#hot-list").empty();$.ajax({url: "/product/hotProList",type: "GET",dataType: "JSON",success: function(json) {var list = json.data;for (var i = 0; i < list.length; i++) {console.log(list[i].title);//调试用var 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(/#{title}/g, list[i].title);html = html.replace(/#{price}/g, list[i].price);html = html.replace(/#{image}/g, list[i].image);$("#hot-list").append(html);}}});
}
</script>