SpringBoot项目--电脑商城【商品热销排名】

本文链接：https://blog.csdn.net/m0_63077733/article/details/132813347

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;

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.创建商品的实体类

创建Product实体类并使其继承BaseEntity类

@Data
@AllArgsConstructor
@NoArgsConstructor
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;//销售的数量
}

3.持久层[Mapper]

1 规划需要执行的SQL语句

查询热销商品列表的SQL语句

SELECT * FROM t_product WHERE status=1 ORDER BY priority DESC LIMIT 0,4

2 设计接口和抽象方法

在mapper包下创建ProductMapper接口并在接口中添加查询热销商品findHotList()的方法

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

3 编写映射

在main\resources\mapper文件夹下创建ProductMapper.xml文件，并在文件中配置findHotList()方法的映射

<?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.example.mycomputerstore.mapper.ProductMapper">
    <resultMap id="ProductEntityMap" type="com.example.mycomputerstore.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>
    <!--查询热销商品的前四名：List<Product> findHotList()-->
    <select id="findHotList" resultMap="ProductEntityMap">
        select *
        from t_product
        where  status=1
        order by priority desc   LIMIT 0,4
    </select>

</mapper>

4.业务层[Service]

1 规划异常

只要是查询,不涉及到增删改的,都没有异常,无非就是没有该数据然后返回空

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

1.创建IProductService接口，并在接口中添加findHotList()方法

public interface IProductService {
    /**
     * 查询热销商品的前四名
     * @return 热销商品前四名的集合
     */
    List<Product> findHotList();
}

2.在业务层创建ProductServiceImpl类并实现该方法

package com.cy.store.service.impl;
import com.cy.store.entity.Product;
import com.cy.store.mapper.ProductMapper;
import com.cy.store.service.IProductService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;

/** 处理商品数据的业务层实现类 */
@Service
public class ProductServiceImpl implements IProductService {
    @Autowired
    private ProductMapper productMapper;

    @Override
    public List<Product> findHotList() {
        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.控制层【Controller]

1 处理异常

无异常。

2 设计请求

/products/hot_list
GET
不需要请求参数
JsonResult<List<Product>>

3 处理请求

1.创建ProductController类并使其继承BaseController类,在类中编写处理请求的方法

@RestController
@RequestMapping("products")
public class ProductController extends BaseController {
    @Autowired
    private IProductService productService;

    @RequestMapping("hot_list")
    public JsonResult<List<Product>> getHotList() {
        List<Product> data = productService.findHotList();
        return new JsonResult<List<Product>>(OK, data);
    }
}

2.为了能不登录也可以访问该数据,需要将products/**请求添加到白名单中:

在LoginInterceptorConfigure类的addInterceptors方法中添加代码:

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

七、前端页面

1.在index.html页面给“热销排行”列表的div标签设置id属性值

<div id="hot-list" class="panel-body panel-item">
	<!-- ... -->
</div>

2.在index.html页面中添加展示热销排行商品的js代码

<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) {
            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>

注意点：

关于image标签里面的属性src=“…#{image}collect.png” class=“img-responsive”
…代表跳到父文件夹,即index.html的父文件夹static
…后面和collect前面不需要单斜杠,因为数据库中图片地址的数据前面后面加的有
关于a标签里面的href=“product.html?id=#{id}”
这里是为了点击超链接进入商品详情页时可以把商品id传给详情页,使两个页面形成联系