尧图网页设计 
在业务系统开发中比较模块往往是“看着简单做起来细碎”的功能。用户希望把两三件商品放在一起并排查看参数差异运营希望快速判断哪款商品更适合推广位这类需求在电商、保险、汽车选配、数据报表系统中都非常常见。真正实现时却会面临参数项不一致、比较列表状态不同步、前后端字段难对齐等一系列问题。本文围绕系统中编号为 6.4 的比较模块完整梳理从需求拆分、数据结构设计、后端接口开发到前端渲染的落地全过程并整理高频报错与工程最佳实践适合正在做电商功能、选型系统或数据对比类功能的后端和全栈开发者参考。1. 背景与核心概念1.1 什么是比较模块比较模块通俗来说就是让用户从列表或详情页中挑选多个对象然后系统把这些对象的属性参数并排展示帮助用户快速判断差异的功能模块。它通常是一个独立的功能单元在系统中可能被编号为类似“6.4 比较模块”的子模块。从专业角度定义比较模块是业务系统中承担“多对象属性差异化展示”的组件。它需要解决三个核心问题收集用户意图用户选了什么对象进行比较。维护比较集合比较列表是临时性的还是需要持久化到用户账户。渲染对比视图如何把多个对象的属性按统一维度排列并且对差异项做突出展示。比较模块的价值在于降低用户的决策成本。一个商品列表页可能有几十个 SKU用户逐个查看详情效率很低而并排比较能让差异一目了然。类似地在保险产品、云服务器套餐、课程报名等场景中比较模块都能显著提升用户决策效率。1.2 典型应用场景比较模块在真实项目中有很多落地形态场景比较对象展示维度业务目标电商商品对比商品 SKU价格、参数、评价、库存辅助下单决策汽车配置对比车型配置动力、安全、舒适配置引导到店或试驾保险产品对比保险计划保额、保费、保障范围促成投保转化云服务选型云主机套餐CPU、内存、带宽、价格提升套餐购买率数据报表对比多日/多渠道数据指标项、趋势、占比支持运营分析决策本文以电商商品对比作为主场景展开但设计思路可以平滑迁移到其他业务中。后端接口和前端展示层做适当的抽象后换一套参数维度和业务对象即可复用。1.3 与搜索、筛选模块的边界比较模块容易和搜索、筛选模块混淆。三者的定位分别是搜索通过关键词缩小数据范围。筛选通过条件过滤满足阈值的数据。比较在已筛选出的数据中选择多个对象查看维度差异。筛选是“找符合条件的对象”比较是“看选中的对象差在哪”。实际系统中比较模块通常依赖搜索和筛选结果作为数据来源。如果用户没有先筛选比较列表就没有意义。因此在设计时比较模块需要和列表查询接口解耦比较接口只负责接收对象 ID 列表并返回维度化数据。2. 需求分析与功能拆分2.1 功能清单在动手写代码之前我们需要把比较模块拆成可落地的功能点。以下是一份典型的电商比较模块需求清单功能编号功能名称描述优先级6.4.1添加比较项从商品列表或详情页将商品加入比较列表P06.4.2移除比较项从比较列表移除指定商品P06.4.3查看比较列表获取当前比较列表中的商品信息P06.4.4清空比较列表一键清空所有比较项P16.4.5限制最大比较数防止比较项过多导致页面混乱P06.4.6高亮差异属性对属性值不同的位置做视觉提醒P16.4.7持久化比较列表登录用户刷新页面后仍保留比较项P2P0 是首期必须实现的功能P1 是优化体验的功能P2 可以放到二期迭代。实际项目中也可以根据自己的业务体量调整优先级。2.2 核心交互流程比较模块的用户操作流程可以拆成以下几步用户在商品列表页点击商品卡片上的“加入对比”按钮。前端把商品 ID 发送到后端比较列表接口。后端校验比较数量上限并把商品 ID 写入存储。用户点击页面右上角“对比”按钮进入比较页。前端调用比较详情接口传入商品 ID 列表。后端根据商品 ID 查询商品主数据和属性数据按统一维度组装返回。前端把返回数据渲染成对比表格对差异项高亮显示。这个流程里第 3 步如何存储比较列表是关键决策点。如果项目没有登录体系可以用浏览器本地存储如果有登录体系但用户可能不登录浏览则需要支持“游客本地 登录后合并”的两级存储。本文的主流程以 Redis 本地存储结合的方式实现兼顾登录和未登录场景。2.3 技术选型说明本文示例采用以下技术栈后端框架Spring Boot以常见稳定版本为例版本号需要根据项目实际调整ORM 框架MyBatis-Plus缓存中间件Redis数据库MySQL 5.7 或 8.0前端框架Vue 3 Element PlusHTTP 客户端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) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4 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) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4 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?useUnicodetruecharacterEncodingutf8useSSLfalseserverTimezoneAsia/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。同时定义比较项的 DTOpackage 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 MapString, Object attributes; }动态属性用 Map 存储是比较模块的关键设计。因为不同商品的属性维度可能不同比如手机有“屏幕尺寸”衣服有“材质”如果为每个属性建字段扩展性会很差。用 Map 可以让后端保持稳定前端根据 Map 的 key 动态渲染表格列。4.2 比较列表 Service 实现比较列表的存取可以采用 Redis 的 List 类型实现。添加商品时比较核心的步骤是校验商品是否存在且上架。判断列表长度是否达到上限。判断商品是否已在列表中。将商品 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 RedisTemplateString, 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 件商品); } ListObject 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 ListCompareItemDTO getCompareList(String userId) { String key COMPARE_LIST_KEY_PREFIX userId; ListObject productIds redisTemplate.opsForList().range(key, 0, -1); ListCompareItemDTO 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 MapString, 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 MapString, MapLong, Object analyzeDifferences(ListCompareItemDTO items) { MapString, MapLong, Object diffMap new HashMap(); if (items null || items.size() 2) { return diffMap; } // 收集所有属性名 ListString allAttrNames items.stream() .flatMap(item - item.getAttributes().keySet().stream()) .distinct() .toList(); for (String attrName : allAttrNames) { MapLong, 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 ApiResponseBoolean add(RequestParam String userId, RequestParam Long productId) { compareService.addCompareItem(userId, productId); return ApiResponse.success(true); } /** * 移除比较项 */ PostMapping(/remove) public ApiResponseBoolean remove(RequestParam String userId, RequestParam Long productId) { compareService.removeCompareItem(userId, productId); return ApiResponse.success(true); } /** * 清空比较列表 */ PostMapping(/clear) public ApiResponseBoolean clear(RequestParam String userId) { compareService.clearCompareList(userId); return ApiResponse.success(true); } /** * 查询比较列表 */ GetMapping(/list) public ApiResponseListCompareItemDTO 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.vueapi/compare.js负责封装后端接口views/compare/ComparePage.vue是比较页面的核心组件。5.2 添加比较入口在商品列表页的每个商品卡片上增加“加入对比”按钮。核心逻辑是调用后端添加接口同时更新页面状态template div el-button v-forproduct in productList :keyproduct.id clickaddCompare(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 clickclearList清空比较列表/el-button el-table :datacompareItems border el-table-column label商品信息 width150 template #default{ row } {{ row.productName }} /template /el-table-column el-table-column v-forattr in attrNames :keyattr :labelattr 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 seconds6.2 接口测试使用 curl 模拟添加商品curl -X POST http://localhost:8080/api/compare/add?userIduser-123productId1 curl -X POST http://localhost:8080/api/compare/add?userIduser-123productId2 curl -X POST http://localhost:8080/api/compare/add?userIduser-123productId3查询比较列表curl http://localhost:8080/api/compare/list?userIduser-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 中没有数据RedisTemplate 序列化配置不正确检查 RedisTemplate 的 key 和 value 序列化器建议统一为 String 序列化列表中有重复商品添加前没有判断商品是否已存在在 add 接口中增加 contains 判断或使用 Redis Set 结构比较数量没有限制住并发请求同时通过长度校验使用 Lua 脚本保证校验和添加的原子性动态表格列顺序不稳定前端使用 Set 或 Object 收集属性名顺序不固定后端返回属性名列表前端按该顺序渲染属性值类型不一致导致误判差异数据库存字符串接口返回时被转成数字在分析差异前统一转为 String 比较游客和登录用户比较列表不互通游客和登录态使用不同的用户维度存储登录后将本地比较列表合并到服务端 Redis商品下架后仍在比较列表中查询比较列表时没有过滤商品状态查询时校验status字段下架商品自动过滤这些问题的根因大多集中在对 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 参数的链接别人点开即可看到同样的对比页面。接入推荐系统根据比较行为为用户推荐同类商品。希望这篇文章能帮你少踩一些坑。如果你在实现比较模块时遇到过其他奇怪的问题欢迎在评论区分享你的排查经验。代码只是起点真正有价值的是你在项目中沉淀下来的那些判断和决策。 电商比较模块开发实战：从Redis存储到前端动态对比
在业务系统开发中比较模块往往是“看着简单做起来细碎”的功能。用户希望把两三件商品放在一起并排查看参数差异运营希望快速判断哪款商品更适合推广位这类需求在电商、保险、汽车选配、数据报表系统中都非常常见。真正实现时却会面临参数项不一致、比较列表状态不同步、前后端字段难对齐等一系列问题。本文围绕系统中编号为 6.4 的比较模块完整梳理从需求拆分、数据结构设计、后端接口开发到前端渲染的落地全过程并整理高频报错与工程最佳实践适合正在做电商功能、选型系统或数据对比类功能的后端和全栈开发者参考。1. 背景与核心概念1.1 什么是比较模块比较模块通俗来说就是让用户从列表或详情页中挑选多个对象然后系统把这些对象的属性参数并排展示帮助用户快速判断差异的功能模块。它通常是一个独立的功能单元在系统中可能被编号为类似“6.4 比较模块”的子模块。从专业角度定义比较模块是业务系统中承担“多对象属性差异化展示”的组件。它需要解决三个核心问题收集用户意图用户选了什么对象进行比较。维护比较集合比较列表是临时性的还是需要持久化到用户账户。渲染对比视图如何把多个对象的属性按统一维度排列并且对差异项做突出展示。比较模块的价值在于降低用户的决策成本。一个商品列表页可能有几十个 SKU用户逐个查看详情效率很低而并排比较能让差异一目了然。类似地在保险产品、云服务器套餐、课程报名等场景中比较模块都能显著提升用户决策效率。1.2 典型应用场景比较模块在真实项目中有很多落地形态场景比较对象展示维度业务目标电商商品对比商品 SKU价格、参数、评价、库存辅助下单决策汽车配置对比车型配置动力、安全、舒适配置引导到店或试驾保险产品对比保险计划保额、保费、保障范围促成投保转化云服务选型云主机套餐CPU、内存、带宽、价格提升套餐购买率数据报表对比多日/多渠道数据指标项、趋势、占比支持运营分析决策本文以电商商品对比作为主场景展开但设计思路可以平滑迁移到其他业务中。后端接口和前端展示层做适当的抽象后换一套参数维度和业务对象即可复用。1.3 与搜索、筛选模块的边界比较模块容易和搜索、筛选模块混淆。三者的定位分别是搜索通过关键词缩小数据范围。筛选通过条件过滤满足阈值的数据。比较在已筛选出的数据中选择多个对象查看维度差异。筛选是“找符合条件的对象”比较是“看选中的对象差在哪”。实际系统中比较模块通常依赖搜索和筛选结果作为数据来源。如果用户没有先筛选比较列表就没有意义。因此在设计时比较模块需要和列表查询接口解耦比较接口只负责接收对象 ID 列表并返回维度化数据。2. 需求分析与功能拆分2.1 功能清单在动手写代码之前我们需要把比较模块拆成可落地的功能点。以下是一份典型的电商比较模块需求清单功能编号功能名称描述优先级6.4.1添加比较项从商品列表或详情页将商品加入比较列表P06.4.2移除比较项从比较列表移除指定商品P06.4.3查看比较列表获取当前比较列表中的商品信息P06.4.4清空比较列表一键清空所有比较项P16.4.5限制最大比较数防止比较项过多导致页面混乱P06.4.6高亮差异属性对属性值不同的位置做视觉提醒P16.4.7持久化比较列表登录用户刷新页面后仍保留比较项P2P0 是首期必须实现的功能P1 是优化体验的功能P2 可以放到二期迭代。实际项目中也可以根据自己的业务体量调整优先级。2.2 核心交互流程比较模块的用户操作流程可以拆成以下几步用户在商品列表页点击商品卡片上的“加入对比”按钮。前端把商品 ID 发送到后端比较列表接口。后端校验比较数量上限并把商品 ID 写入存储。用户点击页面右上角“对比”按钮进入比较页。前端调用比较详情接口传入商品 ID 列表。后端根据商品 ID 查询商品主数据和属性数据按统一维度组装返回。前端把返回数据渲染成对比表格对差异项高亮显示。这个流程里第 3 步如何存储比较列表是关键决策点。如果项目没有登录体系可以用浏览器本地存储如果有登录体系但用户可能不登录浏览则需要支持“游客本地 登录后合并”的两级存储。本文的主流程以 Redis 本地存储结合的方式实现兼顾登录和未登录场景。2.3 技术选型说明本文示例采用以下技术栈后端框架Spring Boot以常见稳定版本为例版本号需要根据项目实际调整ORM 框架MyBatis-Plus缓存中间件Redis数据库MySQL 5.7 或 8.0前端框架Vue 3 Element PlusHTTP 客户端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) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4 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) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4 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?useUnicodetruecharacterEncodingutf8useSSLfalseserverTimezoneAsia/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。同时定义比较项的 DTOpackage 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 MapString, Object attributes; }动态属性用 Map 存储是比较模块的关键设计。因为不同商品的属性维度可能不同比如手机有“屏幕尺寸”衣服有“材质”如果为每个属性建字段扩展性会很差。用 Map 可以让后端保持稳定前端根据 Map 的 key 动态渲染表格列。4.2 比较列表 Service 实现比较列表的存取可以采用 Redis 的 List 类型实现。添加商品时比较核心的步骤是校验商品是否存在且上架。判断列表长度是否达到上限。判断商品是否已在列表中。将商品 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 RedisTemplateString, 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 件商品); } ListObject 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 ListCompareItemDTO getCompareList(String userId) { String key COMPARE_LIST_KEY_PREFIX userId; ListObject productIds redisTemplate.opsForList().range(key, 0, -1); ListCompareItemDTO 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 MapString, 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 MapString, MapLong, Object analyzeDifferences(ListCompareItemDTO items) { MapString, MapLong, Object diffMap new HashMap(); if (items null || items.size() 2) { return diffMap; } // 收集所有属性名 ListString allAttrNames items.stream() .flatMap(item - item.getAttributes().keySet().stream()) .distinct() .toList(); for (String attrName : allAttrNames) { MapLong, 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 ApiResponseBoolean add(RequestParam String userId, RequestParam Long productId) { compareService.addCompareItem(userId, productId); return ApiResponse.success(true); } /** * 移除比较项 */ PostMapping(/remove) public ApiResponseBoolean remove(RequestParam String userId, RequestParam Long productId) { compareService.removeCompareItem(userId, productId); return ApiResponse.success(true); } /** * 清空比较列表 */ PostMapping(/clear) public ApiResponseBoolean clear(RequestParam String userId) { compareService.clearCompareList(userId); return ApiResponse.success(true); } /** * 查询比较列表 */ GetMapping(/list) public ApiResponseListCompareItemDTO 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.vueapi/compare.js负责封装后端接口views/compare/ComparePage.vue是比较页面的核心组件。5.2 添加比较入口在商品列表页的每个商品卡片上增加“加入对比”按钮。核心逻辑是调用后端添加接口同时更新页面状态template div el-button v-forproduct in productList :keyproduct.id clickaddCompare(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 clickclearList清空比较列表/el-button el-table :datacompareItems border el-table-column label商品信息 width150 template #default{ row } {{ row.productName }} /template /el-table-column el-table-column v-forattr in attrNames :keyattr :labelattr 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 seconds6.2 接口测试使用 curl 模拟添加商品curl -X POST http://localhost:8080/api/compare/add?userIduser-123productId1 curl -X POST http://localhost:8080/api/compare/add?userIduser-123productId2 curl -X POST http://localhost:8080/api/compare/add?userIduser-123productId3查询比较列表curl http://localhost:8080/api/compare/list?userIduser-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 中没有数据RedisTemplate 序列化配置不正确检查 RedisTemplate 的 key 和 value 序列化器建议统一为 String 序列化列表中有重复商品添加前没有判断商品是否已存在在 add 接口中增加 contains 判断或使用 Redis Set 结构比较数量没有限制住并发请求同时通过长度校验使用 Lua 脚本保证校验和添加的原子性动态表格列顺序不稳定前端使用 Set 或 Object 收集属性名顺序不固定后端返回属性名列表前端按该顺序渲染属性值类型不一致导致误判差异数据库存字符串接口返回时被转成数字在分析差异前统一转为 String 比较游客和登录用户比较列表不互通游客和登录态使用不同的用户维度存储登录后将本地比较列表合并到服务端 Redis商品下架后仍在比较列表中查询比较列表时没有过滤商品状态查询时校验status字段下架商品自动过滤这些问题的根因大多集中在对 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 参数的链接别人点开即可看到同样的对比页面。接入推荐系统根据比较行为为用户推荐同类商品。希望这篇文章能帮你少踩一些坑。如果你在实现比较模块时遇到过其他奇怪的问题欢迎在评论区分享你的排查经验。代码只是起点真正有价值的是你在项目中沉淀下来的那些判断和决策。