一.知识回顾
【0.三高商城系统的专题专栏都帮你整理好了,请点击这里!】
【1-系统架构演进过程】
【2-微服务系统架构需求】
【3-高性能、高并发、高可用的三高商城系统项目介绍】
【4-Linux云服务器上安装Docker】
【5-Docker安装部署MySQL和Redis服务】
【6-Git安装与配置过程、Gitee码云上创建项目、IDEA关联克隆的项目】
【7-创建商城系统的子模块并将修改后的信息使用Git提交到Gitee上】
【8-数据库表结构的创建&后台管理系统的搭建】
【9-前端项目的搭建部署、Node安装、VSCode安装】
【10-Node的安装以及全局环境变量的相关配置&解决启动报错的问题(1.Error: Cannot find module ‘fs/promises)(2.npm安装node-sass报错)】
【11-导入人人generator项目并自动生成相关的文件&商品子模块的调试&公共模块common子模块的抽离与实现&Lombok插件的安装】
【12-商品子模块整合MyBatisPlus技术&其它模块通过generator的自动生成与补充完善】
【13-项目中微服务组件的学习-SpringCloudAlibaba微服务生态体系的学习&SpringCloudAlibaba的依赖管理&项目中SpringBoot和SpringCloud版本的统一】
【14-微服务的注册中心与配置中心Nacos&Windows操作系统上安装Nacos和Linux操作系统上用Docker中安装Nacos&每个子项目模块使用Nacos进行服务注册与发现】
【15-项目中服务的远程调用之OpenFeign&订单模块与商品模块集成使用OpenFeign的案例】
【16-配置中心之Nacos的基本使用&Nacos服务之命令空间、Nacos服务之配置组、Nacos服务之配置拆分】
【17-微服务网关之Spring Cloud Gateway&Spring Cloud Gateway网关服务搭建】
【18-业务开发-基础业务-商品模块-分类管理-前后端管理系统的启动-为分类管理表增加数据-Json插件的下载-返回具有层级目录、父子关系结构的数据】
【19-业务开发-基础业务-商品模块-分类管理-管理系统新建菜单-后端项目renren注册到Nacos注册中心和配置中心去-项目gateway网关模块的搭建-浏览器的同源策略与解决跨域问题实操案例】
【20-业务开发-基础业务-商品模块-分类管理-前端展示后端具有层级关系的目录数据-商品系统三级分类的逻辑删除前后端代码实现】
【21-业务开发-基础业务-商品模块-分类管理-商品系统三级分类的新增类别前后端代码实现-商品系统三级分类的更新类别前后端代码实现-之前错误的Bug修正】
【22-业务开发-基础业务-商品模块-分类管理-商品系统三级分类拖拽页面的功能-前后端代码的逻辑实现-访问测试-拖拽开关的开启和关系-批量更新拖拽数据-批量删除选定数据】
【23-业务开发-基础业务-品牌管理-品牌管理项目搭建-品牌管理实现的增删改查操作测试-后端数据显示状态使用前端组件开关按钮展示-以及数据处理以及测试】
【24-业务开发-基础业务-品牌管理-图片管理-阿里云OSS服务开通和使用-阿里云OSS服务API使用-SpringCloudAlibaba OSS服务的使用】
【25-业务开发-基础业务-品牌管理-图片管理-图片上传方式的三种实现方式-第三方公共服务模块集成到项目中-服务端生成签名实战】
【26-业务开发-基础业务-品牌管理-图片管理-上传图片功能实现-基于阿里云OSS服务-解决跨域问题-设置跨域规则-修改ACL权限为公共读】
【27-业务开发-基础业务-品牌管理-图片管理-添加修改品牌信息并显示图片-前端数据校验-后端数据JSR303校验实现-统一异常处理-自定义响应编码规则-分组校验-自定义校验注解-项目Bug解决】
【28-业务开发-基础业务-属性管理-SKU和SPU基本概念-SKU和SPU关联关系-属性实体之间的关联关系-批量菜单创建】
【29-业务开发-基础业务-属性管理-属性组业务逻辑开发-页面布局-三级分类组件功能-属性组表单-父子组件传值-属性组数据展示-属性组数据添加-属性组数据修改-前后端项目整合交互测试】
【30-业务开发-基础业务-品牌管理-分类维护-解决分类维护业务开发中的一个Bug-品牌管理-分页插件-分页功能的逻辑实现-品牌管理-检索条件模糊查询品牌管理-增加更新操作中排序字段检验还是存在问题】
【31-业务开发-基础业务-品牌管理-级联类别信息业务功能实现-品牌管理和商品分类管理俩者业务关联出现数据冗余,导致数据不同步的问题-开启事务-项目测试】
【32-业务开发-基础业务-规格参数-保存数据-查询数据-更新操作之数据回显展示-更新操作-前后端项目交互整合与测试-总结收获】
【33-业务开发-基础业务-规格参数-销售属性-多表之间的关联增删改查操作-前后端项目交互整合与测试-Cannot read property ‘publish‘ of undefined】
【34-业务开发-基础业务-属性组和基本属性-属性组和基本属性建立关联-属性组和基本属性解除关联-未关联属性查询-确认新增】
【35-业务开发-基础业务-商品服务-新增商品-会员模块服务-mall-member-会员模块数据维护-规格参数维护-前端项目Bug解决-PubSub依赖缺失】
【36-业务开发-基础业务-商品服务SPU-前后端处理商品数据Json-发布商品前后端业务逻辑-feign服务远程调用-DTO数据传输对象-商品服务的检索-商品管理的检索项目中修改更正完善逻辑操作】
【37-业务开发-基础业务-库存管理- 仓库模块Nacos注册中心的配置-Gateway网关配置-仓库维护的增删改查-商品库存管理-采购流程-采购需求维护-采购需求合并-领取采购单完成采购操作】
【插入------>ElasticSearch专栏相关的知识内容都整理好了,在这里哟!】
【38-商品上架功能结合ElasticSearch全文检索的流程-商品ES关系映射模型&Docker安装ik分词器-实现上架功能复杂的逻辑实现-Postman+Kibana访问测试】
【39-商品整合thymeleaf模板引擎-商城用户端的实现逻辑-部署devtools工具依赖-商品后台-三级分类逻辑分析实现-Docker 安装部署Nginx-Nginx对网关实现反向代理负载均衡】
【40-系统性能压力测试基本概念-相关性能指标HPS&TPS&QPS&RT-安装Jmeter教程-JMeter测试流程-线程组-取样器-监视器-测试商城首页-JMeter Address 占用的问题】
【41-系统性能压力测试优化-JVM知识回顾-jconsole和jvisualvm-jvisualvm安装Visual GC插件-Nginx压力测试- 网关gateway压测-Nginx实现动静分离】
【42-缓存的基本概念-是否使用缓存的场景-本地缓存-分布式缓存-项目中整合Redis-修改三级分类逻辑代码+加入缓存-三级分类加入缓存后压力测试-缓存穿透-缓存雪崩-缓存击穿】
【43-本地锁-分布式锁概念原理-分布式锁解决方案-Redis实现分布式锁-Redisson分布式锁-项目整合Redisson-缓存数据一致性问题-解决缓存一致性的方案-SpringCache缓存】
【44-商城检索服务的搭建-页面跳转调整-elasticsearch检索服务前后端响应的VO对象-检索服务前后端逻辑实现-构建SearchRequest、SearchResponse对象】
【45-线程的实现方式-线程池的创建方式-线程池的执行顺序-CompletableFutrue异步处理】
二.商品详情页-服务搭建
2.1 商品详情页结构图

2.2 配置host文件
我们的商品详情服务是一个独立的服务,我们需要在客户端的host中来配置映射

2.3 在Nginx中配置
我们需要在Nginx中配置商品详情服务的反向代理和静态资源的管理,首先看反向代理的配置

然后就是静态资源的管理,我们在es和商城首页的资源的同级目录下创建一个item目录,其中保存的就是商品详情页中的资源

上传商品详情页面的信息到linux操作系统中

查看是否上传成功

2.4 网关服务路由
当Nginx方向代理到了网关服务后,网关服务得跟进host路由到商品服务,我们得修改对应的配置信息

2.5 商品服务处理
到请求到了商品服务中我们需要接收请求,并且跳转到商品详情页中。
/**
* 商品详情的控制器
*/
@Controller
public class ItemController {
@GetMapping("/{skuId}.html")
public String item(@PathVariable Long skuId){
System.out.println(skuId);
return "item";
}
}
item.html页面中的内容在给大家的资源中有,拷贝进去即可,注意要修改相关的资源的路径

2.6 检索服务跳转
商品详情服务搭建好了之后,我们需要通过商品的检索服务调整过来,那么我们需要修改跳转的地址信息

最终的商品详情页的展示效果

三.前后端商品响应详情数据
3.1 响应VO封装
根据skuid查询对应的商品详情信息,我们需要把对应的信息封装到对应的VO中,我们需要自己来封装该对象。
商品详情页的数据对象SpuItemVO
@Data
public class SpuItemVO {
// 1.sku的基本信息 pms_sku_info
SkuInfoEntity info;
// 2.sku的图片信息pms_sku_images
List<SkuImagesEntity> images;
// 3.获取spu中的销售属性的组合
List<SkuItemSaleAttrVo> saleAttrs;
// 4.获取SPU的介绍
SpuInfoDescEntity desc;
// 5.获取SPU的规格参数
List<SpuItemGroupAttrVo> baseAttrs;
}
销售属性的SkuItemSaleAttrVo
属性组相关的SpuItemGroupAttrVo

Attr是之前就创建的VO对象

四.商品详情后端逻辑处理
4.1 sku的基本信息
直接通过封装好的getById方法查询数据

4.2 sku的图片信息
定义获取商品详情的图片信息

SkuImagesService逻辑层定义查询接口

具体实现层实现上面的接口,并重写getImagesBySkuId具体逻辑方法
4.3 Spu的规格参数
Spu的规格参数,根据 SPU编号和CatalogId类别编号要查询出所有的属性组及其属性信息
# `pms_attr_group`
# 根据 SPU编号和CatalogId类别编号 要查询出所有的属性组及其属性信息
SELECT t1.attr_group_id
,t1.attr_group_name
,t2.attr_id
,t3.attr_name
,t4.attr_value
FROM `pms_attr_group` t1
LEFT JOIN `pms_attr_attrgroup_relation` t2 ON t1.attr_group_id = t2.attr_group_id
LEFT JOIN `pms_attr` t3 ON t2.attr_id = t3.attr_id
LEFT JOIN `pms_product_attr_value` t4 ON t4.attr_id = t2.attr_id
WHERE t1.catelog_id = '225' AND t4.spu_id = 6
获取商品详细信息逻辑中获取spu的规格参数

AttrGroupService属性组逻辑接口层定义查询接口

AttrGroupServiceImpl逻辑实现层,实现上述接口,重写getAttrgroupWithSpuId逻辑方法

Dao层接口逻辑

xml文件实现逻辑

4.4 spu的商品详情信息介绍
spu详细的信息直接通过封装好的方法查询即可

4.5 销售属性
销售属性的信息是根据SPU找到所有的SKU下的对应的属性信息,首先写出对应的SQL
## 根据SPU编号找到所有的SKU编号 然后进而找到所有的销售属性信息
SELECT
# psi.sku_id,
pssav.attr_id,
pssav.attr_name,
GROUP_CONCAT( DISTINCT pssav.attr_value)
FROM `pms_sku_info` psi
LEFT JOIN `pms_sku_sale_attr_value` pssav
ON psi.sku_id = pssav.sku_id
WHERE psi.spu_id = 6
GROUP BY pssav.attr_id,pssav.attr_name
业务逻辑层获取spu中的销售属性的实现逻辑

SkuSaleAttrValueService接口层定义接口方法

逻辑实现层实现上述的接口,并重写其中的方法

SkuSaleAttrValueDao数据交互层定义与Mapper.xml文件中对应的接口方法

与dao数据持久层对应的Mapper映射

五.商品详情页前端渲染逻辑
5.1 基本页面修改

5.2 SKU标题


5.3 图片展示


5.4 价格显示与格式化和有货显示



5.5 销售属性
销售属性是当前SKU对应的SPU下所有的销售属性的组合。

5.6 SPU详情

5.7 规格参数

页面展示

六.异步处理
然后我们就可以在商品详细信息查询的位置实现CompletableFuture的异步编排处理。

先定义线程池

具体的编排处理

好了,关于【46-商品详情页服务搭建架构图-前后端商品响应详情VO对象-商品详情后端逻辑处理-商品详情页前端渲染逻辑-CompletableFuture的异步编排处理】就先学习到这里,更多的内容持续学习中。
本文详细介绍商品详情页服务的搭建过程,包括前后端商品响应详情VO对象的设计、后端逻辑处理、前端渲染逻辑及利用CompletableFuture进行异步处理等关键技术点。

被折叠的 条评论
为什么被折叠?



