SSH框架网上商城项目第8战之查询和删除商品类别功能实现

SSH框架网上商城项目第8战之查询和删除商品类别功能实现

一、实现查询商品类别功能

1. 在商品类别管理页面上添加查询按钮，点击查询按钮后会向后端发送一个AJAX请求，请求返回后，在页面上展示查询到的商品类别列表。

代码实现步骤如下：

• 在商品类别管理页面上添加查询按钮

  html
<button id="search-btn" class="btn btn-primary">查询</button>

• 注册查询按钮的点击事件，获取查询条件（如类别名称），发送AJAX请求。

  js
$('#search-btn').click(function() {
var categoryName = $('#category-name-input').val();
$.ajax({
url: '/category/search',
method: 'POST',
dataType: 'json',
data: { categoryName: categoryName },
success: function(response) {
// 在页面上展示查询到的商品类别列表
},
error: function(xhr, status, error) {
// 处理查询失败的情况
}
});
});

• 在后端实现查询商品类别的逻辑，返回查询到的商品类别列表。

  java
@PostMapping("/search")
@ResponseBody
public List<Category> search(@RequestParam String categoryName) {
return categoryService.search(categoryName);
}

二、实现删除商品类别功能

1. 在商品类别管理页面上添加删除按钮，点击删除按钮后会弹出确认框，确认后会向后端发送一个AJAX请求，请求返回后在页面上删除对应的商品类别。

代码实现步骤如下：

• 在商品类别列表中添加删除按钮

  html
<td>
<a href="#" class="delete-btn" data-category-id="1">删除</a>
</td>

• 注册删除按钮的点击事件，弹出确认框，并在确认删除后发送AJAX请求。

  js
$('.delete-btn').click(function() {
var categoryId = $(this).data('category-id');
if (confirm('确定要删除该商品类别吗?')) {
$.ajax({
url: '/category/delete/' + categoryId,
method: 'POST',
dataType: 'json',
success: function(response) {
// 在页面上删除对应的商品类别
},
error: function(xhr, status, error) {
// 处理删除失败的情况
}
});
}
});

• 在后端实现删除商品类别的逻辑，处理删除请求，返回删除成功的结果。

  java
@PostMapping("/delete/{id}")
@ResponseBody
public Result delete(@PathVariable Long id) {
categoryService.delete(id);
return Result.success();
}

示例说明1：用户在商品类别管理页面上点击查询按钮，输入类别名称“电子产品”，页面展示查询结果为包含关键字“电子产品”的所有商品类别，如“电子产品1”，“电子产品2”。

示例说明2：用户在商品类别管理页面上点击删除按钮，确认从列表中删除名称为“家居用品”的商品类别。删除成功后，页面上的商品类别列表将不再包含“家居用品”这个类别。