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


    1.创建数据表

    1.在store数据库中创建t_product数据表

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

    2.向该表插入数据

    1. LOCK TABLES t_product WRITE;
    2. 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'),等等等等;
    3. UNLOCK TABLES;

    2.创建商品的实体类

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

    1. @Data
    2. @AllArgsConstructor
    3. @NoArgsConstructor
    4. public class Product extends BaseEntity {
    5. private Integer id;
    6. private Integer categoryId;
    7. private String itemType;
    8. private String title;
    9. private String sellPoint;
    10. private Long price;
    11. private Integer num;
    12. private String image;
    13. private Integer status;
    14. private Integer priority;//销售的数量
    15. }

    3.持久层[Mapper]

    1 规划需要执行的SQL语句

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

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

    2 设计接口和抽象方法

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

    1. public interface ProductMapper {
    2. /**
    3. * 查询热销商品的前四名
    4. * @return 热销商品前四名的集合
    5. */
    6. List findHotList();
    7. }

    3 编写映射

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

    1. "1.0" encoding="UTF-8" ?>
    2. mapper
    3. PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
    4. "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
    5. <mapper namespace="com.example.mycomputerstore.mapper.ProductMapper">
    6. <resultMap id="ProductEntityMap" type="com.example.mycomputerstore.entity.Product">
    7. <id column = "id" property = "id"/>
    8. <result column = "category_id" property = "categoryId" />
    9. <result column = "item_type" property = "itemType" />
    10. <result column = "sell_point" property = "sellPoint" />
    11. <result column = "created_user" property = "createdUser" />
    12. <result column = "created_time" property = "createdTime" />
    13. <result column = "modified_user" property = "modifiedUser"/>
    14. <result column = "modified_time" property = "modifiedTime"/>
    15. resultMap>
    16. <select id="findHotList" resultMap="ProductEntityMap">
    17. select *
    18. from t_product
    19. where status=1
    20. order by priority desc LIMIT 0,4
    21. select>
    22. mapper>

    4.业务层[Service]

    1 规划异常

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

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

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

    1. public interface IProductService {
    2. /**
    3. * 查询热销商品的前四名
    4. * @return 热销商品前四名的集合
    5. */
    6. List findHotList();
    7. }

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

    1. package com.cy.store.service.impl;
    2. import com.cy.store.entity.Product;
    3. import com.cy.store.mapper.ProductMapper;
    4. import com.cy.store.service.IProductService;
    5. import org.springframework.beans.factory.annotation.Autowired;
    6. import org.springframework.stereotype.Service;
    7. import java.util.List;
    8. /** 处理商品数据的业务层实现类 */
    9. @Service
    10. public class ProductServiceImpl implements IProductService {
    11. @Autowired
    12. private ProductMapper productMapper;
    13. @Override
    14. public List findHotList() {
    15. List list = productMapper.findHotList();
    16. for (Product product : list) {
    17. product.setPriority(null);
    18. product.setCreatedUser(null);
    19. product.setCreatedTime(null);
    20. product.setModifiedUser(null);
    21. product.setModifiedTime(null);
    22. }
    23. return list;
    24. }
    25. }

    5.控制层【Controller]

    1 处理异常

    无异常。

    2 设计请求

    • /products/hot_list
    • GET
    • 不需要请求参数
    • JsonResult>

    3 处理请求

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

    1. @RestController
    2. @RequestMapping("products")
    3. public class ProductController extends BaseController {
    4. @Autowired
    5. private IProductService productService;
    6. @RequestMapping("hot_list")
    7. public JsonResult> getHotList() {
    8. List data = productService.findHotList();
    9. return new JsonResult>(OK, data);
    10. }
    11. }

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

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

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

    七、前端页面

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

    1. "hot-list" class="panel-body panel-item">
  • 2.在index.html页面中添加展示热销排行商品的js代码

    注意点:

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

  • 相关阅读:
    JAVAScript模块化设计
    【Vue】同一个页面多次复用同一个组件数据相互干扰问题
    6.6.4 PCS创建Oracle 资源及资源组
    【数据结构】:二叉树与堆排序的实现
    淘宝获得商品详情接口调用展示
    【MYSQL】5.7版本出错 this is incompatible with sql_mode=only_full_group_by
    【HTTP协议】HTTP协议初体验,深入浅出网络协议
    C++基础语法
    Reggie外卖项目 —— 移动端小程序之手机验证码登录
    力扣刷题day48|583两个字符串的删除操作、72编辑距离
  • 原文地址:https://blog.csdn.net/m0_63077733/article/details/132813347