在products.html中添加一个查询条件，可按商品名称查询商品列表。如果不输入查询条件，则默认搜索所有商品

好的，要在 products.html 中添加一个查询条件，可按商品名称查询商品列表，可以按照以下步骤进行：

1. 在 products.html 页面上添加一个输入框和一个按钮，用于输入查询条件和触发查询操作。

<div>
  <input type="text" id="search-input" placeholder="请输入商品名称">
  <button id="search-btn">搜索</button>
</div>

2. 在 JavaScript 中添加一个事件监听函数，用于处理查询操作。首先获取输入框中的值，然后将其作为查询条件发送到后端接口。如果没有输入查询条件，则默认搜索所有商品。

const searchBtn = document.getElementById('search-btn');
searchBtn.addEventListener('click', () => {
  const searchInput = document.getElementById('search-input');
  let searchValue = searchInput.value.trim();
  if (!searchValue) {
    searchValue = 'all';
  }
  window.location.href = `http://localhost:8083/products?search=${searchValue}`;
});

3. 在后端代码中，解析查询条件并使用它来过滤商品列表。如果查询条件为 "all"，则返回所有商品。

@GetMapping("/products")
public String getProducts(@RequestParam(value = "search", defaultValue = "all") String search, Model model) {
  List<Product> productList = productService.getProducts();
  if (!search.equals("all")) {
    productList = productList.stream()
        .filter(product -> product.getName().toLowerCase().contains(search.toLowerCase()))
        .collect(Collectors.toList());
  }
  model.addAttribute("products", productList);
  return "products";
}

希望这些步骤能够帮助你添加查询功能。如有其他问题，可以继续问我。