实习课知识整理4：点击某个商品如何跳转到并展示出商品详情页

项目情景：当我们点击某个商品时，我们需要查看商品的具体的信息并进行购买的操作

简单理解以下就是，当我们点击一个url链接时，该链接需要携带一个参数到后端，一般设为商品的Id，然后后端通过Id从数据库中查找商品的具体的信息，并将信息返回到商品的详情页上。

1. 后端编写根 据id查询的方法

ItemMapper.java

    // 通过itemId查询
    Item getItemById(Integer itemId);

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
    


    
         WHERE ITEM_ID = #{itemId}
    

 

ItemService.java接口 

    // 通过itemId查询
    Item getItemById(Integer itemId);

ItemServiceImpl实现类

    @Override
    public Item getItemById(Integer itemId) {
        return itemMapper.getItemById(itemId);
    }

因为商品的详情页需要哦展示多张的缩略图，而缩略图是以字符串的形式，中间以空格隔开，存在数据库中的 

    @Override
    public Item getItemById(Integer itemId) {
        return itemMapper.getItemById(itemId);
    }

    // 图片地址解析
    @Override
    public List dealItemImageOther(String itemImageOther) {
        if (null == itemImageOther) {
            return null;
        } else {
            itemImageOther = itemImageOther.trim();  // 去掉字符串前后的空格
            String[] imagesUrl = itemImageOther.split(" ");
            List urlList = new ArrayList<>();
            for (String url : imagesUrl) {
                urlList.add(url);
            }
            return urlList;
        }
    }

 

ItemController

    @Autowired
    ItemService itemService;

    @GetMapping("/toItemInfo/{itemId}")
    public ModelAndView toItemInfo(ModelAndView mav, @PathVariable("itemId") Integer itemId) throws Exception {
        Item item = itemService.getItemById(itemId);

        // 缩略图解析
        List urlList = itemService.dealItemImageOther(item.getItemImageOther());

        mav.addObject("item", item);
        mav.addObject("urlList", urlList);

        mav.setViewName("itemInfo");

        return mav;
    }

 

index.html页面需要传递item.id 

 

2. 前端在对应的itemInfo.html页面接收到数据，并进行处理 

        
        

            

                
                
                
                

                    
                
            
            
            

                

                    
                
            
        
        
        

            

                商品名：
            
            

                商品价格：
            
            

                
                
                
                购买数量

                直接购买