目录
一、界面效果
二、前端代码
三、后端代码（redis+blacklist）
3.1 ProducatController
3.2 ProductService
3.3 ProductDao
3.4 映射文件
一、界面效果
二、前端代码
商品详情前端代码
<template>
<van-nav-bar
title="商品详情"
left-text="返回"
right-text="分享"
left-arrow
@click-left="onClickLeft"
@click-right="onClickRight"
/>
<van-swipe :autoplay="3000" lazy-render>
<van-swipe-item v-for="image in product.img" :key="image">
<img :src="image" style="width: 100%; height: 250px" @click="show" />
</van-swipe-item>
</van-swipe>
<div class="Detail">
<div class="price">
<div>
到手价￥<span>{{ product.price }}</span>
</div>
</div>
<h4>{{ product.name }}</h4>
<van-text-ellipsis
rows="1"
:content="product.subName"
expand-text="展开"
collapse-text="收起"
/>
</div>
<div class="warp">
<van-tabs v-model:active="active" swipeable>
<van-tab title="商品介绍">
<div v-html="product.brief"></div>
</van-tab>
<van-tab title="规格参数"> 3333 </van-tab>
<van-tab title="售后保障">
<div>
<div class="mod_tit_line">
<h3>权利声明</h3>
</div>
京东商城上的所有商品信息、客户评价、商品咨询、网友讨论等内容，是京东商城重要的经营资源，未经许可，禁止非法转载使用。
<div class="for_separator"></div>
<p>
<b>注：</b
>本站商品信息均来自于厂商，其真实性、准确性和合法性由信息拥有者（厂商）负责。本站不提供任何保证，并不承担任何法律责任。
</p>
</div>
</van-tab>
</van-tabs>
</div>
<van-action-bar>
<van-action-bar-icon icon="chat-o" text="客服" color="#ee0a24" />
<van-action-bar-icon icon="cart-o" text="购物车" />
<van-action-bar-icon icon="star" text="已收藏" color="#ff5000" />
<van-action-bar-button type="warning" text="加入购物车" />
<van-action-bar-button type="danger" text="立即购买" />
</van-action-bar>
<van-share-sheet
v-model:show="showShare"
title="立即分享给好友"
:options="options"
@select="onSelect"
/>
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue";
import { showToast } from "vant";
import { useRoute, useRouter } from "vue-router";
import { productApi } from "@/api/index";
import { showImagePreview } from "vant";
const onClickLeft = () => history.back();
const onClickRight = () => {
showShare.value = true;
};
const active = ref(0);
const route = useRoute();
onMounted(() => {
callDetail();
});
const showShare = ref(false);
const options = [
{ name: "微信", icon: "wechat" },
{ name: "微博", icon: "weibo" },
{ name: "复制链接", icon: "link" },
{ name: "分享海报", icon: "poster" },
{ name: "二维码", icon: "qrcode" },
];
const onSelect = (option) => {
showToast(option.name);
showShare.value = false;
};
const show = () => {
showImagePreview({
images: product.value.img.split(","),
});
};
const callDetail = () => {
productApi.selectById.call({ id: route.query.id }).then((res: any) => {
console.log(res);
product.value = res;
product.value.img=res.img.split(',')
});
};
const product: any = ref({
});
</script>
<style>
.warp img {
width: 100%;
}
</style>
<style scoped>
.van-action-bar {
z-index: 50;
}
.price {
color: red;
font-size: 14px;
}
.price span {
font-size: 20px;
}
.Detail {
background-color: #fff;
padding: 5px;
border-radius: 0 0 10px 10px;
}
.Detail h4 {
margin: 5px 0;
}
.Detail p {
font-size: 15px;
}
.warp {
margin-top: 10px;
background-color: #fff;
padding: 5px;
border-radius: 10px 10px 0 0;
}
</style>
三、后端代码（redis+blacklist）
3.1 ProducatController
/**
* 商品详情
* @param id
* @return
*/
@GetMapping("/detail")
public Product detail(Integer id) {
int a=10;
return productService.detail(id);
}3.2 ProductService
package com.beimao.service;
import cn.hutool.core.date.DateUtil;
import cn.hutool.core.util.ObjectUtil;
import cn.hutool.core.util.RandomUtil;
import cn.smart.core.exception.BizException;
import com.beimao.common.model.Product;
import com.beimao.dao.ProductDao;
import com.beimao.dao.ProductMapper;
import com.beimao.model.EsProduct;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.redis.core.HashOperations;
import org.springframework.data.redis.core.ValueOperations;
import org.springframework.stereotype.Service;
import javax.annotation.Resource;
import java.util.List;
import java.util.concurrent.TimeUnit;
@Service
@Slf4j
public class ProductService {
/**
* redis黑名单解决击穿问题
*/
@Autowired
private ProductDao productDao;
@Resource(name = "redisTemplate")
private HashOperations<String,String,String> hashOperations;
@Resource(name = "redisTemplate")
private ValueOperations<String, Product> valueOperations;
// 黑名单key
public static final String BLACKLIST_KEY = "product.hei";
// 商品详情key
public static final String ProductDetail_KEY = "product.detail";
/**
* 根据商品id 给商品详情
* 先从redis中查询，如果redis中没有，则从数据库中查询
*
* @param id
* @return
*/
public Product detail(Integer id) {
/**
* 先验证商品id是否合法
*/
if (id <= 0) {
log.debug("商品id=》{}不合法", id);
throw new BizException(100, "商品id不合法");
}
/**
* 从redis里先检查 黑名单里是否有该商品
* 如果有，抛出异常
*/
Boolean b = hashOperations.hasKey(BLACKLIST_KEY, id.toString());
if (b) {
log.debug("商品不存在，商品在黑名单里，商品id=>{}", id);
throw new BizException(101, "商品不存在");
}
/**
* 黑名单没有
* 直接从redis里查询是否有该商品
* 有就返回，没有就查数据库
*/
Product product = valueOperations.get(ProductDetail_KEY+id);
if (ObjectUtil.isNotEmpty(product)) {
log.debug("商品id=>{}，从redis里查询到商品", id);
return product;
}
/**
* redis里面没有 就从数据库里面查
* 数据库有就加入redis里面，没有就加入黑名单
*/
product = productDao.detail(id);
if (ObjectUtil.isEmpty(product)) {
// 数据库查不到就加入黑名单
hashOperations.put(BLACKLIST_KEY, id.toString(), DateUtil.now());
log.debug("数据库里没有该商品，商品id=>{}加入黑名单", id);
}
// 数据库里面有就将该商品存到redis里面,设置ttl 一天
/**
* 错峰解决redis里的雪崩问题
*/
int expire= RandomUtil.randomInt(-60 , 60);
valueOperations.set(ProductDetail_KEY+id, product,24*60+expire, TimeUnit.MINUTES);
return product;
}
}
3.3 ProductDao
/**
* 根据商品id查询商品详情
* @param id
* @return
*/
Product detail(Integer id);3.4 映射文件
<!-- 根据id查询商品详情-->
<select id="detail" resultType="com.beimao.common.model.Product">
select id,subName,status,price,seq,tags,`name`,categoryId,img,brief
from 205_product where id = #{id}
</select>
