如何在Node、Express、EJS中保留搜索参数并追加分类筛选URL？

1. 动态生成带参数的分类链接（EJS模板修改） #

把原来的静态分类链接改成动态拼接当前URL中的search_string参数，确保搜索状态下点击分类时不会丢失关键词。

假设后端已将search_string变量传入EJS模板，修改单条分类链接如下：

<% if (search_string) { %>
  <a href="/search?search_string=<%= encodeURIComponent(search_string) %>&category=xxx">Category</a>
<% } else { %>
  <a href="/category?category=xxx">Category</a>
<% } %>

如果有多个分类，建议循环渲染分类列表，用URL对象安全拼接参数（避免手动编码出错）：

<% categories.forEach(category => { %>
  <% const url = new URL('/search', 'http://localhost:1337');
     if (search_string) url.searchParams.append('search_string', search_string);
     url.searchParams.append('category', category.id); %>
  <a href="<%= url.toString() %>"><%= category.name %></a>
<% }) %>

2. 统一后端路由逻辑，支持多参数组合查询 #

原来的/search和/category路由是独立处理的，现在需要让它们同时支持search_string和category参数，实现组合筛选。

以Express为例，修改路由代码：

// 合并搜索与筛选逻辑，处理所有参数组合
app.get('/search', (req, res) => {
  const { search_string, category } = req.query;
  let queryCondition = {};

  // 添加搜索模糊匹配条件（假设按产品名称搜索）
  if (search_string) {
    queryCondition.name = { $regex: search_string, $options: 'i' };
  }

  // 添加分类筛选条件
  if (category) {
    queryCondition.category = category;
  }

  // 查询数据库并渲染页面
  Product.find(queryCondition)
    .then(products => {
      res.render('products', {
        products,
        search_string: search_string || '',
        categories: [] // 传入分类列表用于渲染链接
      });
    })
    .catch(err => console.error(err));
});

// 兼容原有/category路由，有搜索参数时重定向到/search路由
app.get('/category', (req, res) => {
  const { category, search_string } = req.query;
  if (search_string) {
    res.redirect(`/search?search_string=${encodeURIComponent(search_string)}&category=${category}`);
  } else {
    Product.find({ category })
      .then(products => {
        res.render('products', { products, search_string: '', categories: [] });
      })
      .catch(err => console.error(err));
  }
});

3. 首页渲染时传入空的search_string #

首页展示全部产品时，渲染模板要传入search_string: ''，确保分类链接生成正确的无搜索参数URL：

app.get('/', (req, res) => {
  Product.find({})
    .then(products => {
      res.render('products', {
        products,
        search_string: '',
        categories: []
      });
    })
    .catch(err => console.error(err));
});

这样就能实现：

• 无搜索状态下，点击分类直接筛选全部产品中的对应分类
• 搜索后点击分类，会保留搜索关键词并追加分类参数，URL变为/search?search_string=abc&category=xxx

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