商品详情页实现

1.直接上效果图
2.数据库设计




3.封装VO(因为JSONResult.ok()只能传一个参数，而需求查询是有四个对象参数)
注意VO的封装属性要与前端的赋值属性要相同

/**
 * 商品详情VO
 */
public class ItemInfoVO {
    private  Items item;
    private List<ItemsImg> itemImgList;
    private List<ItemsSpec> itemSpecList;
    private ItemsParam itemParams ;
    省略get和set方法......
}

4.编写Service

public interface ItemService {
    /**
     * 根据商品id查询
     * @param id
     * @return
     */
    public Items queryItemById(String  id);

    /**
     * 根据商品id查询商品图片
     * @param itemId
     * @return
     */
    public List<ItemsImg> queryItemImgList(String itemId);

    /**
     * 根据商品id查询商品规格
     * @param itemId
     * @return
     */
    public List<ItemsSpec> queryItemSpecList(String itemId);

    /**
     * 根据商品id查询商品参数
     * @param itemId
     * @return
     */
    public ItemsParam queryItemParam(String itemId);
}

5.编写Service实现类
注意事务是否添加，@Service注解是否加上

@Service
public class ItemServiceImpl implements ItemService {
    @Autowired
    private ItemsMapper itemsMapper;
    @Autowired
    private ItemsImgMapper itemsImgMapper;
    @Autowired
    private ItemsSpecMapper itemsSpecMapper;
    @Autowired
    private ItemsParamMapper  itemsParamMapper;
    @Transactional(propagation = Propagation.SUPPORTS)
    @Override
    public Items queryItemById(String id) {
        return itemsMapper.selectByPrimaryKey(id);
    }
    @Transactional(propagation = Propagation.SUPPORTS)
    @Override
    public List<ItemsImg> queryItemImgList(String itemId) {
        Example example = new Example(ItemsImg.class);
        Example.Criteria criteria = example.createCriteria();
        criteria.andEqualTo("itemId",itemId);
        return itemsImgMapper.selectByExample(example);
    }
    @Transactional(propagation = Propagation.SUPPORTS)
    @Override
    public List<ItemsSpec> queryItemSpecList(String itemId) {
        Example example = new Example(ItemsSpec.class);
        Example.Criteria criteria = example.createCriteria();
        criteria.andEqualTo("itemId",itemId);
        return itemsSpecMapper.selectByExample(example);
    }
    @Transactional(propagation = Propagation.SUPPORTS)
    @Override
    public ItemsParam queryItemParam(String itemId) {
        Example example = new Example(ItemsParam.class);
        Example.Criteria criteria = example.createCriteria();
        criteria.andEqualTo("itemId",itemId);
        return itemsParamMapper.selectOneByExample(example);
    }
}

6.编写Controller方法
注意映射路径和值的传递

@Api(value = "商品接口",tags = "商品展示的相关接口")
@RestController
@RequestMapping("items")
public class ItemsController {
    @Autowired
    private ItemService itemService;

    @ApiOperation(value = "查询商品详情",notes = "查询商品详情",httpMethod = "GET")
    @GetMapping("/info/{itemId}")
    public JSONResult info(
            @ApiParam(name = "itemId",value ="商品Id",required = true)
            @PathVariable String itemId){
        if (StringUtils.isBlank(itemId)) {
            return JSONResult.errorMsg(null);
        }
        System.out.println("itemId=========="+itemId);
        Items items = itemService.queryItemById(itemId);
        List<ItemsImg> itemsImgs = itemService.queryItemImgList(itemId);
        List<ItemsSpec> itemsSpecs = itemService.queryItemSpecList(itemId);
        ItemsParam itemsParam = itemService.queryItemParam(itemId);

        ItemInfoVO itemInfoVO = new ItemInfoVO();
        itemInfoVO.setItem(items);
        itemInfoVO.setItemImgList(itemsImgs);
        itemInfoVO.setItemSpecList(itemsSpecs);
        itemInfoVO.setItemParams(itemsParam);
        return JSONResult.ok(itemInfoVO);
    }
}

7.前端部分代码块

created() {
				// var me = this;
				// 通过cookie判断用户是否登录
				this.judgeUserLoginStatus();

				// 渲染商品信息
				var itemId = app.getUrlParam("itemId");
				// 如果itemId为空，跳转到错误页面
				if (itemId == null || itemId == undefined || itemId == '') {
					window.location.href = "http://www.imooc.com/error/noexists";
					return;
				}
				this.itemId = itemId;
				this.renderItemInfo(itemId);

				// 从购物车中拿到商品的数量
				this.shopcartItemCounts = app.getShopcartItemCounts();


				// 渲染商品评价列表内容
				this.renderComments(itemId, this.level, this.page, this.pageSize);
				this.renderCommentLevelCounts(itemId);

			},

获取后台数据进行赋值

// 渲染商品信息
				renderItemInfo(itemId) {
					var serverUrl = app.serverUrl;
					axios.get(serverUrl + '/items/info/' + itemId, {})
						.then(res => {
							if (res.data.status == 200) {
								var itemInfo = res.data.data;
								var item = itemInfo.item;
								// 如果item为空，则商品不存在，跳转错误页面
								if (item == null || item == undefined || item == '') {
									window.location.href = "http://www.imooc.com/error/noexists";
								}

								// console.log(itemInfo);
								this.item = item;

								// 商品图片放大镜效果实现
								var itemImgListTemp = itemInfo.itemImgList;
								this.renderZoomItemImgs(itemImgListTemp);

								// 商品规格实现
								var itemSpecListTemp = itemInfo.itemSpecList;
								this.itemSpecList = itemSpecListTemp;
								var selectedSku = itemSpecListTemp[0];
								this.selectedSku = selectedSku;

								this.itemParams = itemInfo.itemParams;

								// console.log(this.itemImgList);

							} else if (res.data.status == 500) {
								alert(res.data.msg);
							}
						});
				},