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);
}
});
},