Express搭建电商商品筛选功能时路由臃肿该如何优化？

结论先行 #

你提到的拆分独立筛选路由的方案完全可行，而且是解决当前路由臃肿、代码耦合问题的最优实践。

现有实现的核心问题 #

• 路由职责不单一，分类参数匹配、商品查询、筛选逻辑全部耦合在同一个路由内，后续新增颜色、尺码、品牌等筛选条件时，代码会越来越难维护
• 表单提交需要手动拼接多级路径参数，一旦路由规则调整，前端EJS模板和JS提交逻辑都要同步修改，维护成本极高
• 全量查询商品后再做内存筛选，数据量上来后性能会大幅下降

具体改造步骤 #

1. 新增独立筛选路由 #

将筛选逻辑从原有分类路由中抽离，所有参数统一通过查询参数传递，不需要再拼接路径参数。示例代码如下：

// 独立的商品筛选路由
router.get('/products/filter', async (req, res) => {
  // 统一从查询参数中获取所有筛选维度，包括原来的路径参数
  const { category, subCategory, productID, price, color, size } = req.query;
  // 建议把筛选条件组装逻辑抽成独立函数，放到单独的service层文件维护
  const filterCondition = buildFilterCondition({ category, subCategory, productID, price, color, size });
  // 直接把筛选条件传给MongoDB查询，不要查全量后再过滤，大幅提升性能
  const productList = await Products.find(filterCondition);
  // 渲染原有的EJS页面，参数传递规则保持不变
  res.render('myEjsPage', {
    products: productList,
    mainCategory: { id: category },
    currentSubCategory: subCategory,
    productId: productID,
    sliderValue: price,
    minPrice,
    maxPrice
    // 其他页面需要的参数保持原有逻辑
  });
});

2. 调整EJS表单逻辑 #

不需要再手动拼接action路径的动态参数，把原来的路径参数改成隐藏表单域传递：

<form id="slider-form" action="/products/filter" method="get">
  <!-- 原有路径参数转为隐藏域传递，不用再拼在action路径里 -->
  <input type="hidden" name="category" value="<%=mainCategory.id%>">
  <input type="hidden" name="subCategory" value="<%=currentSubCategory%>">
  <input type="hidden" name="productId" value="<%=productId%>">
  <input type="range" name="price" id="price-slider" min="<%=minPrice%>" max="<%=maxPrice%>" value="<%=sliderValue%>">
</form>

3. 可选进阶优化 #

• 把buildFilterCondition函数抽离到独立的/services/productFilter.js文件，后续新增筛选条件只要修改这个文件即可，不需要改动路由逻辑
• 如果需要优化用户体验，可以把筛选路由改造为返回JSON格式，前端通过AJAX请求后局部更新商品列表，不需要整页刷新
• 可以给筛选参数加合法性校验，避免非法参数导致数据库查询报错

内容的提问来源于stack exchange，提问作者cUser