查询接口实现总结

项目概述

本项目为 fake-srm 微服务系统添加了完整的查询接口，并实现了前端与后端的联通。

已完成的工作

1. fake-product 服务（产品服务）

新增接口

接口参数说明

分页查询产品列表 (GET /product/list)

• page (可选, 默认1): 页码，从1开始
• size (可选, 默认10): 每页数量
• name (可选): 产品名称，支持模糊查询

创建产品 (POST /product)

{  
  "productName": "产品名称",  
  "stock": 100,  "price": 99.99}  

更新产品 (PUT /product/{id})

{  
  "productName": "更新产品名称",  
  "stock": 50,  "price": 199.99}  

代码修改

1. ProductController.java - 添加了5个新的REST接口
2. ProductService.java - 添加了对应的业务方法
3. ProductRepository.java - 继承了 JpaSpecificationExecutor 以支持动态查询

2. fake-order 服务（订单服务）

新增接口

接口参数说明

分页查询订单列表 (GET /order/list)

• page (可选, 默认1): 页码，从1开始
• size (可选, 默认10): 每页数量
• status (可选): 订单状态（PENDING, COMPLETED, CANCELLED）
• orderNum (可选): 订单编号，支持模糊查询

代码修改

1. OrderController.java - 添加了4个新的REST接口
2. OrderService.java - 添加了对应的业务方法
3. OrderRepository.java - 继承了 JpaSpecificationExecutor 以支持动态查询

3. fake-srm-front 前端项目

新增文件

services/api.ts - API服务层

• productApi: 产品相关API

  • listProducts(page, size, name): 获取产品列表
  • getProduct(id): 获取产品详情
  • createProduct(data): 创建产品
  • updateProduct(id, data): 更新产品
  • deleteProduct(id): 删除产品
  • deductStock(productId, quantity): 扣减库存

• orderApi: 订单相关API

  • listOrders(page, size, status, orderNum): 获取订单列表
  • getOrder(id): 获取订单详情
  • createOrder(productId, quantity): 创建订单
  • cancelOrder(id): 取消订单
  • completeOrder(id): 完成订单

修改的文件

types.ts - TypeScript类型定义

• 添加了 BackendProduct 和 BackendOrder 接口，用于定义后端返回的数据结构

InventoryView.tsx - 库存管理页面

• 连接产品查询接口，实时获取产品数据
• 添加搜索功能，支持按产品名称模糊查询
• 添加分页功能，支持翻页
• 连接下单接口，创建订单后自动刷新产品列表

OrdersView.tsx - 订单管理页面

• 连接订单查询接口，实时获取订单数据
• 添加搜索功能，支持按订单编号模糊查询
• 添加状态筛选功能（全部、待处理、已完成、已取消）
• 添加分页功能，支持翻页

SummaryBar.tsx - 下单汇总栏

• 连接下单接口，支持批量创建订单
• 添加加载状态和错误处理
• 下单成功后自动重置选择状态并刷新产品列表

技术实现细节

1. 数据转换

前端将后端返回的数据格式转换为前端需要的格式：

// 后端数据格式  
{  
  productId: number;  productName: string;  stock: number;  price: number;  // ...}  
  
// 前端数据格式  
{  
  id: string;  name: string;  sku: string;  price: number;  stock: number;  status: ProductStatus;}  

2. 分页查询

使用 Spring Data JPA 的 Page 对象进行分页查询：

Pageable pageable = PageRequest.of(page - 1, size, Sort.by(Sort.Direction.DESC, "createdTime"));  
Specification<Product> specification = ...;  
return productRepository.findAll(specification, pageable);  

3. 动态查询

使用 JPA Specification 实现动态查询条件：

Specification<Order> specification = (root, query, criteriaBuilder) -> {  
    List<Predicate> predicates = new ArrayList<>();  
    if (StringUtils.hasText(status)) {        predicates.add(criteriaBuilder.equal(root.get("orderStatus"), status));    }  
    if (StringUtils.hasText(orderNum)) {        predicates.add(criteriaBuilder.like(root.get("orderNum"), "%" + orderNum + "%"));    }  
    return criteriaBuilder.and(predicates.toArray(new Predicate[0]));};  

4. 搜索防抖

前端使用防抖技术优化搜索体验：

useEffect(() => {  
  const timer = setTimeout(() => {    setPage(1); // 搜索时重置到第一页  
  }, 500);  return () => clearTimeout(timer);}, [searchKeyword]);  

使用说明

启动后端服务

1. 启动 Eureka Server
2. 启动 fake-product 服务（默认端口：8082）
3. 启动 fake-order 服务（默认端口：8081）

启动前端项目

cd /Users/li/WorkSpace/year26/spring-cloud-demo-26/fake-srm/fake-srm-frontpnpm installpnpm dev```  
  
### API 地址  
  
- **产品服务**: http://localhost:8082  
- **订单服务**: http://localhost:8081  
- **前端**: http://localhost:5173 (默认)  
  
## 注意事项  
  
1. **CORS 配置**: 如果前端和后端不在同一个域名下，需要配置 CORS  
2. **数据库连接**: 确保数据库服务已启动并配置正确  
3. **Eureka 注册**: 确保 Eureka Server 已启动，服务能正常注册  
  
## 后续优化建议  
  
1. 添加更完善的参数校验  
2. 添加单元测试和集成测试  
3. 优化前端 UI/UX  
4. 添加数据权限控制  
5. 添加操作日志记录  
6. 优化数据库查询性能（添加索引）