十三、热销商品和商品详情

热销商品

1 实体类

@Data
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;
}

2 持久层

1. 规划SQL语句

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

2. 设计接口和抽象方法

   List<Product> getProduct();
   

3. 编写xml映射语句

   <?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">
   <!--namespaces属性 用于指定当前映射文件与哪一个mapper接口进行映射，需要指定包完整路径-->
   <mapper namespace="com.cy.store.mapper.ProductMapper">
       <resultMap id="product" type="com.cy.store.entity.Product">
           <id column="id" property="id"/>
           <result column="category_id" property="categoryId"></result>
           <result column="item_type" property="itemType"></result>
           <result column="sell_point" property="sellPoint"></result>
           <result column="created_user" property="createdUser"></result>
           <result column="created_time" property="createdTime"></result>
           <result column="modified_user" property="modifiedUser"></result>
           <result column="modified_time" property="modifiedTime"></result>
       </resultMap>
     <select id="getProduct" resultMap="product">
         select * from t_product where status=1 order by priority DESC limit 0,4
     </select>
   </mapper>
   

3 业务层

1. 设计接口和抽象方法

   List<Product> getProduct();
   

2. 实现接口和抽象方法

   @Service
   public class ProductServiceImpl implements IProductService {
   
       @Autowired
       private ProductMapper productMapper;
   
       @Override
       public List<Product> getProduct() {
           List<Product> product = productMapper.getProduct();
           for (Product product1 : product) {
               product1.setPriority(null);
               product1.setCreatedTime(null);
               product1.setCreatedUser(null);
               product1.setModifiedTime(null);
               product1.setModifiedUser(null);
           }
           return product;
       }
   }
   

4 控制层

1. 设计请求

   /products/hot_list
   psot
   JsonResult<List<Product>>
   

2. 实现请求

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

5 前端页面

<script type="text/javascript">
    $(document).ready(function () {
   
    showHotList();
});
function showHotList(){
   
    //清除列表
    $("#hot-list").empty();
    $.ajax({
   
        url: "/products/hot_list",
        type: "GET",
        dataType: "JSON",
        success: function (json) {
   
            if (json.state == 200){
   
                let list = json.data;
                console.log("count="+list.length);
                for (let i = 0;i < list.length;i++){
   
                    console.log(list[i].title);
                    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>\n' +
                        '<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 =