目录

写在前面

预览

实现

图片部分

详情部分

代码

源码地址

总结

写在前面

笔者不是上一个月毕业了么？找工作没找到，准备在家躺平两个月。正好整理一下当时的毕业设计，是一个商城系统。还是写篇文章记录下吧

预览

商品图片切换显示

sku规格切换

文章主要描述左侧图片组件，右侧sku的切换实现

在阅读本篇文章之前，你需要了解的是SPU和SKU是什么。

实现

图片部分

图片部分组件代码

注：

1. 父组件需要控制这个图片组件的渲染时机，最好保证图片数据获取到了之后再加载组件。虽然，子组件已经监听了prop的数据，但是为了避免问题，还是尽量数据获取之后再加载组件
2. 需要监听父组件传递的图片路径数据变化，当sku变化的时候，父组件会传递的图片路径也会变化。

详情部分

详情部分思路比较多，我之前周实训也是写的商城，那个时候的思路是页面显示SKU的属性名称。每点击一个SKU销售属性值，就将当前选中的SKU销售属性值发送给后端，然后后端去数据库中查找哪个SKU具有这两个属性值（后端计算）。然后再返回这个sku的信息。当时是以SPU为主。即首页展示的商品信息都是SPU。点击SPU后获取这个SPU下的所有SKU的属性组合，并随机获取一个SKU的信息用于初始展示。（如果读者想了解我之前的写法的话，请回复评论，我可以去找找，毕竟有将近两年了）

这次参考谷粒商城的方式后，采用的是以SKU为主，即首页展示的商品列表都是SKU。点击一个SKU后查询SPU的所有SKU属性值。当用户点击属性时，然后前端需要计算当前选中的是哪一个sku，然后再请求后端获取数据

代码

老样子先粘代码，再解读

下面是后端响应的VO模型

将SKU的销售属性值组合封装起来

这个方式后端要轻松一点。后端只需要获取获取前端传递的skuId返回这个VO即可。

前端就比较麻烦了，需要在点击不同的销售属性值时，计算出这个组合的SKU是哪一个。

我们来看一下

当页面点击一个属性值的时候，怎么才能计算出他的SKU？这个还是有一定难度的，因为这个

是一个不固定长度的数组，有可能是一个，有可能是两个，有可能是三个、四个都有可能。虽然大多数情况只有两个，比如说手机就有两个：颜色，版本。假设再添加几个属性（分期、保修服务）就更多了。你可能问这有什么关系呢？计算sku需要用到吗？

别急，我们先看看这个销售属性值下面的skuIds是什么：他表示的是当前的属性值哪几个SKU具有！也就是说我们在计算sku的时候用的就是他来计算的！

当页面点击属性值的同时就能获取到这个skuIds值了，然后将其存起来。以供计算

比如当前只有两个属性，那么就会有两个skuIds数组。很简单，我们只需要计算这两个skuIds数组元素的交集即可。如果有三个属性，那么就会有三个skuIds数组，计算他们的交集。听起来很简单？我当时想了一会，没弄出来，最后丢给文心一言实现了（文心一言都错了三四次哈哈）。代码如下

说实话我现在也没懂，对算法这一块还处于文盲状态。不过能实现就行！

源码地址

毕业设计：轻松购: 使用vue3+springboot构建的商城系统，集前台用户和后台管理于一体，本项目已经部署在云服务器上， 访问地址： 前台系统：123.207.205.51 后台系统：123.207.205.51:8080 (gitee.com)https://gitee.com/zfb12345/my-graduation-project

总结

sku计算那里，是这个详情页面唯一的难点，其他的部分我就不多说了。如果读者觉得有哪些部分不全，或者想要了解其他部分，随时评论。