电商比较模块开发实战：从Redis存储到前端动态对比

在业务系统开发中，比较模块往往是“看着简单，做起来细碎”的功能。用户希望把两三件商品放在一起并排查看参数差异，运营希望快速判断哪款商品更适合推广位，这类需求在电商、保险、汽车选配、数据报表系统中都非常常见。真正实现时，却会面临参数项不一致、比较列表状态不同步、前后端字段难对齐等一系列问题。本文围绕系统中编号为 6.4 的比较模块，完整梳理从需求拆分、数据结构设计、后端接口开发到前端渲染的落地全过程，并整理高频报错与工程最佳实践，适合正在做电商功能、选型系统或数据对比类功能的后端和全栈开发者参考。

1. 背景与核心概念

1.1 什么是比较模块

比较模块，通俗来说就是让用户从列表或详情页中挑选多个对象，然后系统把这些对象的属性参数并排展示，帮助用户快速判断差异的功能模块。它通常是一个独立的功能单元，在系统中可能被编号为类似“6.4 比较模块”的子模块。

从专业角度定义，比较模块是业务系统中承担“多对象属性差异化展示”的组件。它需要解决三个核心问题：

• 收集用户意图：用户选了什么对象进行比较。
• 维护比较集合：比较列表是临时性的，还是需要持久化到用户账户。
• 渲染对比视图：如何把多个对象的属性按统一维度排列，并且对差异项做突出展示。

比较模块的价值在于降低用户的决策成本。一个商品列表页可能有几十个 SKU，用户逐个查看详情效率很低，而并排比较能让差异一目了然。类似地，在保险产品、云服务器套餐、课程报名等场景中，比较模块都能显著提升用户决策效率。

1.2 典型应用场景

比较模块在真实项目中有很多落地形态：

本文以电商商品对比作为主场景展开，但设计思路可以平滑迁移到其他业务中。后端接口和前端展示层做适当的抽象后，换一套参数维度和业务对象即可复用。

1.3 与搜索、筛选模块的边界

比较模块容易和搜索、筛选模块混淆。三者的定位分别是：

• 搜索：通过关键词缩小数据范围。
• 筛选：通过条件过滤满足阈值的数据。
• 比较：在已筛选出的数据中，选择多个对象查看维度差异。

筛选是“找符合条件的对象”，比较是“看选中的对象差在哪”。实际系统中，比较模块通常依赖搜索和筛选结果作为数据来源。如果用户没有先筛选，比较列表就没有意义。因此在设计时，比较模块需要和列表查询接口解耦，比较接口只负责接收对象 ID 列表并返回维度化数据。

2. 需求分析与功能拆分

2.1 功能清单

在动手写代码之前，我们需要把比较模块拆成可落地的功能点。以下是一份典型的电商比较模块需求清单：

P0 是首期必须实现的功能，P1 是优化体验的功能，P2 可以放到二期迭代。实际项目中也可以根据自己的业务体量调整优先级。

2.2 核心交互流程

比较模块的用户操作流程可以拆成以下几步：

1. 用户在商品列表页点击商品卡片上的“加入对比”按钮。
2. 前端把商品 ID 发送到后端比较列表接口。
3. 后端校验比较数量上限，并把商品 ID 写入存储。
4. 用户点击页面右上角“对比”按钮，进入比较页。
5. 前端调用比较详情接口，传入商品 ID 列表。
6. 后端根据商品 ID 查询商品主数据和属性数据，按统一维度组装返回。
7. 前端把返回数据渲染成对比表格，对差异项高亮显示。

这个流程里，第 3 步如何存储比较列表是关键决策点。如果项目没有登录体系，可以用浏览器本地存储；如果有登录体系但用户可能不登录浏览，则需要支持“游客本地 + 登录后合并”的两级存储。本文的主流程以 Redis + 本地存储结合的方式实现，兼顾登录和未登录场景。

2.3 技术选型说明

本文示例采用以下技术栈：

• 后端框架：Spring Boot（以常见稳定版本为例，版本号需要根据项目实际调整）
• ORM 框架：MyBatis-Plus
• 缓存中间件：Redis
• 数据库：MySQL 5.7 或 8.0
• 前端框架：Vue 3 + Element Plus
• HTTP 客户端：Axios

为什么不直接把比较列表存在 MySQL？因为比较列表是高频读写、低频持久化的数据。每次添加或移除都比较轻量，用 Redis 可以降低数据库压力，而且天然支持过期时间，游客数据不占长期存储。如果业务需要登录后跨设备同步，再把 Redis 数据异步落库到 MySQL。

3. 数据结构设计与核心配置

3.1 数据库表设计

比较模块本身不一定需要建表，因为比较列表是临时性的。但如果要求登录用户持久化比较项，就需要一张“用户比较记录表”。这里给出商品维度的设计示例。

商品表结构以简化视角给出：

CREATE TABLE `product` ( `id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '商品ID', `name` varchar(200) NOT NULL COMMENT '商品名称', `price` decimal(10,2) NOT NULL COMMENT '价格', `brand` varchar(100) DEFAULT NULL COMMENT '品牌', `category_id` bigint(20) DEFAULT NULL COMMENT '分类ID', `status` tinyint(4) NOT NULL DEFAULT '1' COMMENT '状态：1上架 0下架', `create_time` datetime DEFAULT NULL COMMENT '创建时间', `update_time` datetime DEFAULT NULL COMMENT '更新时间', PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='商品表';

用户比较记录表：

CREATE TABLE `user_compare_record` ( `id` bigint(20) NOT NULL AUTO_INCREMENT, `user_id` bigint(20) NOT NULL COMMENT '用户ID', `product_id` bigint(20) NOT NULL COMMENT '商品ID', `create_time` datetime DEFAULT NULL COMMENT '加入时间', PRIMARY KEY (`id`), UNIQUE KEY `uk_user_product` (`user_id`, `product_id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='用户比较记录表';

这条表的唯一索引保证了同一用户不会重复添加同一个商品。查询时按用户 ID 和创建时间倒序取商品列表即可。

3.2 Redis Key 设计

对于游客用户，比较列表需要用设备标识或者前端生成的临时 ID 作为维度存储。Redis Key 设计如下：

compare:list:{userId} -> 存储商品 ID 列表（有序） compare:detail:{productId} -> 缓存商品属性详情

其中userId在登录态下是用户主键，在游客态下可以是前端生成的 UUID。每次添加商品时，通过 Lua 脚本判断商品 ID 是否已存在，同时限制列表长度，避免并发操作导致数据不一致。

3.3 项目配置

在 Spring Boot 的application.yml中加入 Redis 和数据库相关配置：

server: port: 8080 spring: datasource: url: jdbc:mysql://localhost:3306/mall?useUnicode=true&characterEncoding=utf8&useSSL=false&serverTimezone=Asia/Shanghai username: root password: 你的密码 driver-class-name: com.mysql.cj.jdbc.Driver redis: host: localhost port: 6379 password: database: 0 mybatis-plus: mapper-locations: classpath*:mapper/**/*.xml configuration: log-impl: org.apache.ibatis.logging.stdout.StdOutImpl map-underscore-to-camel-case: true

需要注意的是，map-underscore-to-camel-case开启后，数据库字段create_time会自动映射到 Java 属性createTime，减少手写映射的工作量。

4. 后端核心代码实现

4.1 实体类与 DTO

创建商品实体类：

package com.example.mall.entity; import com.baomidou.mybatisplus.annotation.IdType; import com.baomidou.mybatisplus.annotation.TableId; import com.baomidou.mybatisplus.annotation.TableName; import lombok.Data; import java.math.BigDecimal; import java.time.LocalDateTime; @Data @TableName("product") public class Product { @TableId(type = IdType.AUTO) private Long id; private String name; private BigDecimal price; private String brand; private Long categoryId; private Integer status; private LocalDateTime createTime; private LocalDateTime updateTime; }

这里使用 Lombok 的@Data注解简化 getter/setter。@TableName指定表名，MyBatis-Plus 会根据实体类自动生成基础 CRUD SQL。

同时定义比较项的 DTO：

package com.example.mall.dto; import lombok.Data; import java.math.BigDecimal; import java.util.Map; @Data public class CompareItemDTO { private Long productId; private String productName; private BigDecimal price; private String brand; /** * 动态属性集合：key 为属性名，value 为属性值 */ private Map<String, Object> attributes; }

动态属性用 Map 存储是比较模块的关键设计。因为不同商品的属性维度可能不同，比如手机有“屏幕尺寸”，衣服有“材质”，如果为每个属性建字段，扩展性会很差。用 Map 可以让后端保持稳定，前端根据 Map 的 key 动态渲染表格列。

4.2 比较列表 Service 实现

比较列表的存取可以采用 Redis 的 List 类型实现。添加商品时比较核心的步骤是：

1. 校验商品是否存在且上架。
2. 判断列表长度是否达到上限。
3. 判断商品是否已在列表中。
4. 将商品 ID 添加到列表尾部。

代码如下：

package com.example.mall.service.impl; import com.example.mall.dto.CompareItemDTO; import com.example.mall.entity.Product; import com.example.mall.service.CompareService; import com.example.mall.service.ProductService; import org.springframework.data.redis.core.RedisTemplate; import org.springframework.stereotype.Service; import javax.annotation.Resource; import java.util.ArrayList; import java.util.List; import java.util.Map; @Service public class CompareServiceImpl implements CompareService { private static final String COMPARE_LIST_KEY_PREFIX = "compare:list:"; private static final int MAX_COMPARE_SIZE = 4; @Resource private RedisTemplate<String, Object> redisTemplate; @Resource private ProductService productService; @Override public boolean addCompareItem(String userId, Long productId) { Product product = productService.getById(productId); if (product == null || product.getStatus() == 0) { throw new RuntimeException("商品不存在或已下架"); } String key = COMPARE_LIST_KEY_PREFIX + userId; Long size = redisTemplate.opsForList().size(key); if (size != null && size >= MAX_COMPARE_SIZE) { throw new RuntimeException("最多只能比较 " + MAX_COMPARE_SIZE + " 件商品"); } List<Object> items = redisTemplate.opsForList().range(key, 0, -1); if (items != null && items.contains(productId.toString())) { throw new RuntimeException("该商品已在比较列表中"); } redisTemplate.opsForList().rightPush(key, productId.toString()); return true; } @Override public boolean removeCompareItem(String userId, Long productId) { String key = COMPARE_LIST_KEY_PREFIX + userId; redisTemplate.opsForList().remove(key, 0, productId.toString()); return true; } @Override public boolean clearCompareList(String userId) { String key = COMPARE_LIST_KEY_PREFIX + userId; redisTemplate.delete(key); return true; } @Override public List<CompareItemDTO> getCompareList(String userId) { String key = COMPARE_LIST_KEY_PREFIX + userId; List<Object> productIds = redisTemplate.opsForList().range(key, 0, -1); List<CompareItemDTO> result = new ArrayList<>(); if (productIds == null || productIds.isEmpty()) { return result; } for (Object obj : productIds) { Long productId = Long.valueOf(obj.toString()); Product product = productService.getById(productId); if (product == null) { continue; } CompareItemDTO dto = new CompareItemDTO(); dto.setProductId(product.getId()); dto.setProductName(product.getName()); dto.setPrice(product.getPrice()); dto.setBrand(product.getBrand()); // 实际项目中，这里可以查询商品属性表，组装成 Map 返回 dto.setAttributes(queryProductAttributes(productId)); result.add(dto); } return result; } private Map<String, Object> queryProductAttributes(Long productId) { // 简化处理，实际项目中应从商品属性表查询 return Map.of(); } }

这里有几个细节值得说明：

• RedisTemplate 存的是字符串形式的商品 ID，因此取出后需要转换成String再转Long。
• 添加时使用range查询已有列表，数据量较小（最多 4 个），性能不是瓶颈。
• 更严格的并发场景下，可以使用 Lua 脚本保证“判断长度 + 添加商品”的原子性。初学者先用普通 Redis 操作理解流程，再考虑并发优化。

4.3 参数对比算法实现

比较模块的核心价值在于“对比”，而对比不只是把数据并排展示，还需要判断哪些维度存在差异。下面实现一个简单的差异化对比逻辑：

package com.example.mall.service.impl; import java.util.HashMap; import java.util.List; import java.util.Map; import java.util.Objects; public class CompareAnalyzer { /** * 分析多个商品的属性差异 * * @param items 商品比较列表 * @return key 为属性名，value 为该属性下不同值的集合 */ public static Map<String, Map<Long, Object>> analyzeDifferences(List<CompareItemDTO> items) { Map<String, Map<Long, Object>> diffMap = new HashMap<>(); if (items == null || items.size() < 2) { return diffMap; } // 收集所有属性名 List<String> allAttrNames = items.stream() .flatMap(item -> item.getAttributes().keySet().stream()) .distinct() .toList(); for (String attrName : allAttrNames) { Map<Long, Object> attrValueMap = new HashMap<>(); for (CompareItemDTO item : items) { attrValueMap.put(item.getProductId(), item.getAttributes().get(attrName)); } // 判断该属性不同值的数量是否大于 1 long distinctCount = attrValueMap.values().stream() .filter(Objects::nonNull) .distinct() .count(); if (distinctCount > 1) { diffMap.put(attrName, attrValueMap); } } return diffMap; } }

这个方法把“每个商品在每个属性下的值”铺平，然后统计不同值的数量。如果大于 1，说明该属性存在差异，可以交给前端做高亮展示。

在实际项目中，属性值可能是空字符串、null 或不同类型的值，建议在比较前做标准化处理，例如统一转成字符串再比较，避免"100"和100被误判为不同值。

4.4 Controller 接口层

创建CompareController，提供添加、移除、清空、查询四个接口：

package com.example.mall.controller; import com.example.mall.common.ApiResponse; import com.example.mall.dto.CompareItemDTO; import com.example.mall.service.CompareService; import org.springframework.web.bind.annotation.*; import javax.annotation.Resource; import java.util.List; @RestController @RequestMapping("/api/compare") public class CompareController { @Resource private CompareService compareService; /** * 添加商品到比较列表 */ @PostMapping("/add") public ApiResponse<Boolean> add(@RequestParam String userId, @RequestParam Long productId) { compareService.addCompareItem(userId, productId); return ApiResponse.success(true); } /** * 移除比较项 */ @PostMapping("/remove") public ApiResponse<Boolean> remove(@RequestParam String userId, @RequestParam Long productId) { compareService.removeCompareItem(userId, productId); return ApiResponse.success(true); } /** * 清空比较列表 */ @PostMapping("/clear") public ApiResponse<Boolean> clear(@RequestParam String userId) { compareService.clearCompareList(userId); return ApiResponse.success(true); } /** * 查询比较列表 */ @GetMapping("/list") public ApiResponse<List<CompareItemDTO>> list(@RequestParam String userId) { return ApiResponse.success(compareService.getCompareList(userId)); } }

ApiResponse是统一响应体，通常情况下包含code、message、data三个字段。这里略去实现细节，实际项目中可以把它放在 common 包中统一维护。

注意：接口里的userId在生产项目中不应该由前端直接传，而是从登录态中解析。示例代码为了简化演示，直接通过参数接收。读者在落地时，请使用 Spring Security 或类似框架从认证上下文中获取真实用户 ID。

5. 前端实现与页面渲染

5.1 前端项目结构

前端项目使用 Vue 3 和 Element Plus 搭建，目录结构大致如下：

src/ ├── api/ │ └── compare.js ├── views/ │ ├── product/ │ │ └── ProductList.vue │ └── compare/ │ └── ComparePage.vue ├── utils/ │ └── request.js └── App.vue

api/compare.js负责封装后端接口，views/compare/ComparePage.vue是比较页面的核心组件。

5.2 添加比较入口

在商品列表页的每个商品卡片上增加“加入对比”按钮。核心逻辑是调用后端添加接口，同时更新页面状态：

<template> <div> <el-button v-for="product in productList" :key="product.id" @click="addCompare(product)" > 加入对比 </el-button> </div> </template> <script setup> import { ref } from 'vue' import { ElMessage } from 'element-plus' import { addCompareItem } from '@/api/compare' const productList = ref([]) const userId = 'user-123' // 实际项目中从登录态获取 const addCompare = async (product) => { try { await addCompareItem(userId, product.id) ElMessage.success('已加入比较列表') } catch (error) { ElMessage.error(error.message || '添加失败') } } </script>

这里把userId写死是为了演示，真实项目中应该从pinia或vuex中读取当前登录用户信息。未登录的游客场景，可以生成一个 UUID 存到localStorage，请求时带在请求头或参数中。

5.3 比较页表格渲染

比较页的难点在于动态表格渲染。后端返回的属性集合是 Map，前端无法预先知道列名，因此需要用el-table的动态列能力来实现。

示例代码：

<template> <div> <el-button @click="clearList">清空比较列表</el-button> <el-table :data="compareItems" border> <el-table-column label="商品信息" width="150"> <template #default="{ row }"> {{ row.productName }} </template> </el-table-column> <el-table-column v-for="attr in attrNames" :key="attr" :label="attr" > <template #default="{ row }"> <span :class="{ 'diff-cell': diffAttrs.includes(attr) && isDifferent(row, attr) }"> {{ row.attributes[attr] }} </span> </template> </el-table-column> </el-table> </div> </template> <script setup> import { computed, onMounted, ref } from 'vue' import { ElMessage } from 'element-plus' import { getCompareList, clearCompareList } from '@/api/compare' const userId = 'user-123' const compareItems = ref([]) const diffAttrs = ref([]) const attrNames = computed(() => { const nameSet = new Set() compareItems.value.forEach(item => { Object.keys(item.attributes || {}).forEach(key => nameSet.add(key)) }) return Array.from(nameSet) }) const loadList = async () => { const res = await getCompareList(userId) compareItems.value = res.data // 调用后端的差异分析接口，或者复用后端返回的 diffAttrs diffAttrs.value = analyzeDiff(res.data) } const isDifferent = (row, attr) => { const values = compareItems.value.map(item => item.attributes[attr]) return new Set(values.map(v => String(v))).size > 1 } const analyzeDiff = (items) => { const diff = new Set() const names = new Set() items.forEach(item => Object.keys(item.attributes || {}).forEach(key => names.add(key))) names.forEach(name => { const values = items.map(item => String(item.attributes[name] ?? '')) if (new Set(values).size > 1) { diff.add(name) } }) return Array.from(diff) } const clearList = async () => { await clearCompareList(userId) compareItems.value = [] ElMessage.success('已清空') } onMounted(loadList) </script> <style scoped> .diff-cell { color: #f56c6c; font-weight: bold; } </style>

这段代码的关键点有两个：一是通过attrNames动态生成列，二是通过isDifferent判断当前单元格的值是否和其他商品不一样。这样用户一眼就能看出哪些属性存在差异。

这里的前端分析逻辑和后端的CompareAnalyzer功能重复了。实际项目中，推荐以后端返回的差异字段为准，前端只做样式渲染，这样可以保证多个端（Web、小程序、App）差异判断逻辑一致。

6. 运行验证与结果说明

6.1 启动后端服务

运行 Spring Boot 启动类，控制台出现以下日志表示启动成功：

Tomcat started on port(s): 8080 (http) with context path '' Started MallApplication in 3.2 seconds

6.2 接口测试

使用 curl 模拟添加商品：

curl -X POST "http://localhost:8080/api/compare/add?userId=user-123&productId=1" curl -X POST "http://localhost:8080/api/compare/add?userId=user-123&productId=2" curl -X POST "http://localhost:8080/api/compare/add?userId=user-123&productId=3"

查询比较列表：

curl "http://localhost:8080/api/compare/list?userId=user-123"

预期返回 JSON 结构如下：

{ "code": 200, "message": "success", "data": [ { "productId": 1, "productName": "商品A", "price": 199.00, "brand": "品牌X", "attributes": { "颜色": "黑色", "内存": "128GB" } }, { "productId": 2, "productName": "商品B", "price": 259.00, "brand": "品牌Y", "attributes": { "颜色": "白色", "内存": "256GB" } } ] }

6.3 页面效果说明

前端页面加载后，会渲染出一个多列表格。表格第一列固定显示商品名和价格，后续列根据属性名动态生成。存在差异的属性列文字标红加粗，相同的属性保持默认样式。

这里可能有人会问：如果两个商品的属性维度完全不同怎么办？比如商品 A 有“屏幕尺寸”，商品 B 没有这个属性。我们的动态列方案会正常显示：商品 B 在该列显示为空。此时建议在前端将空值渲染为“-”，避免用户误以为数据缺失，同时文案上可以提示“该商品不支持此参数”。

7. 常见问题与排查思路

比较模块在开发中经常遇到下面几类问题。我整理了一个排查表格，遇到报错时可以按顺序排查。

这些问题的根因大多集中在对 Redis 数据结构理解不深、前端动态列处理不严谨、业务边界定义不清晰三个方面。建议在编码前先画清楚比较模块的状态流转图，明确比较列表的存储位置和过滤规则。

8. 最佳实践与工程建议

8.1 存储方案要按场景选择

比较列表的存储不应该一刀切选择 Redis 或 MySQL。如果业务量小、并发低，直接用 MySQL 表存用户比较记录也可以，省去缓存一致性维护成本。如果业务量中等且用户对实时性要求高，Redis 是最合适的。如果用户量极大，且比较功能只是辅助决策，那么完全可以用前端localStorage存储，服务端只提供一个批量查询商品详情和属性接口。存储方案的选择要基于业务复杂度，不要为了技术炫技而引入不必要的组件。

8.2 接口设计要面向复用

比较模块的接口设计要预留复用空间。不要只写“比较列表专用”的接口，可以把“根据 ID 列表批量查询商品维度信息”做成通用接口。后续如果要做收藏夹、购物车、批量导出，都可以复用这套数据查询逻辑。后端接口参数建议使用 POST 请求体传 JSON，而不是把多个 ID 拼在 URL 里，避免 URL 长度超限。

8.3 动态属性的扩展性设计

动态属性是比较模块最容易踩坑的地方。最直接的做法是在商品表加多个字段，比如color、memory、size，但这种方式在业务扩展后很难维护。推荐两种方案：

• 方案一：商品属性表product_attribute，每行记录一个商品的某一个属性，通过product_id + attr_name唯一索引。
• 方案二：在商品表中加一个 JSON 类型字段，存储整个属性 Map。MySQL 5.7 以上支持 JSON 类型，查询时可用JSON_EXTRACT提取。

方案一适合属性需要被检索、筛选、排序的业务；方案二适合只需要展示、对比的业务。比较模块属于后者，用 JSON 字段更简洁，查询少一次关联。

8.4 安全与权限边界

比较模块虽然看起来是只读功能，但也要注意安全边界：

• 用户 ID 必须从服务端会话或 Token 中解析，不能轻信前端传参。
• 商品查询要过滤下架、删除状态，避免把无效数据展示给用户。
• 如果比较功能需要登录后才能使用，后端要在拦截器中做登录校验。
• 批量查询接口要考虑参数数量限制，防止一次传入上万 ID 导致数据库压力过大。

8.5 性能优化

比较模块的性能优化主要集中在两点：商品列表查询和属性查询。如果每次查询都比对 MySQL 查一次，4 个商品就是 4 次查询。可以改成SELECT * FROM product WHERE id IN (...) AND status = 1一次查出所有商品。属性数据也同理，一次查询出多个商品的属性再按商品分组。对于热点商品，可以使用 Redis 缓存商品详情，缓存过期时间建议 30 分钟到 1 小时，既保证数据新鲜度，又能降低数据库压力。

8.6 日志与监控

比较模块虽然是辅助功能，但仍需要在关键路径上打印日志。建议至少记录：

• 谁在什么时候添加/移除了哪些商品。
• 比较列表数量达到上限时，用户尝试添加的操作。
• 查询商品详情失败或超时的情况。

日志级别可以使用info记录常规操作，使用warn记录异常情况。生产环境开启慢查询日志，如果批量查询接口响应时间超过 500ms，就要检查 SQL 索引是否生效。

9. 总结与后续扩展

本文围绕编号为 6.4 的比较模块，走了一遍从需求分析、数据设计、后端接口开发到前端渲染的完整流程。核心知识点包括比较列表的 Redis 存储方案、动态属性的 Map 结构设计、前后端差异属性高亮方案，以及常见的并发、序列化、扩展性问题。对于初学者来说，重点理解“比较列表是临时数据”这个前提，然后围绕这个前提去设计缓存结构和接口，思路就不会跑偏。对于有经验的开发者，可以把注意力放在动态属性的扩展性、批量查询性能、安全边界这些容易被忽略的工程细节上。

后续如果要继续扩展，可以尝试以下几个方向：

• 比较列表持久化：将 Redis 数据定期同步到 MySQL，支持多端同步。
• 比较历史记录：记录用户每次比较的结果，方便后续做个性化推荐。
• 分享比较结果：生成带商品 ID 参数的链接，别人点开即可看到同样的对比页面。
• 接入推荐系统：根据比较行为为用户推荐同类商品。

希望这篇文章能帮你少踩一些坑。如果你在实现比较模块时遇到过其他奇怪的问题，欢迎在评论区分享你的排查经验。代码只是起点，真正有价值的，是你在项目中沉淀下来的那些判断和决策。