实习课知识整理3：首页商品列表的展示

对于一个购物商城的项目，主体还得是商品，这篇博客主要介绍如何将数据库中的信息渲染到页面上，这边后端是SpringBoot,前端是html配合thymeleaf模板

1. 编写查询数据库的方法

在这边我在页面上需要两部分的信息，一个是所有的商品，另一个是商品热度排名前三的商品信息。所以需要写两个方法

itemMapper.java

    // 查询所有商品列表
    List getItemList();

    // 根据 热度 heart 查询
    List getItemListByHeart();

itemMapper.xml

    
        
        
        
        
        
        
        
        
        
        
        
        
        
        
    


    
        select ITEM_ID, ITEM_NAME, ITEM_PRICE, ITEM_COUNT, ITEM_CREATE_TIME, ITEM_DESC,
               ITEM_TYPE_ID, ITEM_SALE_PRICE, ITEM_STATE, ITEM_IMAGE_MAIN, ITEM_IMAGE_OTHER,
               ITEM_VIDEO_URL, ITEM_HEART FROM shopping.item
    

    
    
        select ITEM_ID, ITEM_NAME, ITEM_PRICE, ITEM_COUNT, ITEM_CREATE_TIME, ITEM_DESC,
        ITEM_TYPE_ID, ITEM_SALE_PRICE, ITEM_STATE, ITEM_IMAGE_MAIN, ITEM_IMAGE_OTHER,
        ITEM_VIDEO_URL, ITEM_HEART from shopping.item
    

    
         ORDER BY ITEM_HEART DESC LIMIT 0,3
    

 

itemService.java接口 

    // 查询所有商品列表
    List getItemList();

    // 根据 热度 heart 查询
    List getItemListByHeart();

itemServiceImpl实现类

    @Resource
    private ItemMapper itemMapper;

    @Override
    public List getItemList() {
        return itemMapper.getItemList();
    }

    @Override
    public List getItemListByHeart() {
        return itemMapper.getItemListByHeart();
    }

indexController

    @RequestMapping("/index")
    public ModelAndView index2(ModelAndView mav)  throws Exception{
        List allItems = itemService.getItemList();
        List itemsByHeart = itemService.getItemListByHeart();

        mav.addObject("allItems",allItems);
        mav.addObject("itemsByHeart",itemsByHeart);

        mav.setViewName("index");
        return mav;
    }

 

 2. 前端拿到后端返回的数据，并渲染到页面上

index.html