Spring Boot + React 全栈开发：闲置物品交易平台实战（集成百度AI）

前言

最近接手并完成了一个融合AI技术的闲置物品交易平台项目。该项目不仅实现了传统二手交易平台的核心功能，还创新性地集成了百度千帆大模型和图像识别技术，为用户提供智能化的发布、搜索和推荐体验。本文将详细记录项目的需求分析、技术选型、核心功能实现以及遇到的技术难点。

一、项目背景与需求分析

1.1 项目背景

随着共享经济的发展，闲置物品交易市场日益繁荣。然而传统二手交易平台存在以下痛点：

• 商品信息填写繁琐，用户体验差
• 搜索功能简单，难以精准匹配需求
• 缺乏智能推荐，用户发现成本高
• 公益捐赠与商业交易混杂，缺乏专门管理

1.2 核心需求

开发一个集成AI能力的闲置物品交易平台，主要功能包括：

用户端功能：

• 用户注册登录（支持普通用户和公益组织）
• AI辅助商品发布（智能标签生成、描述润色）
• AI智能搜索与推荐
• 商品浏览、收藏、购买
• 在线聊天沟通
• 订单管理与评价
• 社区讨论功能

管理端功能：

• 商品审核（普通商品、捐赠物品）
• 帖子审核
• 用户管理

公益组织功能：

• 发布捐赠物品
• 管理捐赠订单

二、技术架构设计

2.1 技术栈选型

后端技术栈：

• Spring Boot 3.5.6（核心框架）
• Spring Security（安全认证）
• Spring Data JPA（数据持久化）
• WebSocket（实时通信）
• MySQL 8.0（数据库）
• OkHttp（HTTP客户端）
• Lombok（简化代码）

前端技术栈：

• React 18.2.0（UI框架）
• React Router 6.20.0（路由管理）
• Material-UI 5.14.20（组件库）
• Axios（HTTP请求）

AI服务：

• 百度千帆大模型（文心一言）- 文本生成与理解
• 百度图像识别API - 商品图片识别

2.2 系统架构

┌─────────────────────────────────────────────┐
│              前端 React 应用                  │
│  (商品发布、搜索、聊天、社区讨论等)              │
└──────────────────┬──────────────────────────┘
                   │ HTTP/WebSocket
┌──────────────────▼──────────────────────────┐
│           Spring Boot 后端服务                │
│  ┌──────────┬──────────┬──────────────────┐ │
│  │Controller│ Service  │   Repository     │ │
│  └──────────┴──────────┴──────────────────┘ │
└──────────────────┬──────────────────────────┘
                   │
        ┌──────────┼──────────┐
        │          │          │
┌───────▼────┐ ┌──▼────┐ ┌──▼──────────┐
│   MySQL    │ │百度AI │ │文件存储系统 │
│   数据库    │ │ API   │ │  (uploads)  │
└────────────┘ └───────┘ └─────────────┘

2.3 数据库设计

项目包含11张核心数据表：

• user（用户表）
• item（商品表）
• item_image（商品图片表）
• item_tag（商品标签关联表）
• tag（标签表）
• orders（订单表）
• address（收货地址表）
• favorite（收藏表）
• chat_message（聊天消息表）
• discussion_post（讨论帖子表）
• discussion_reply（帖子回复表）

三、核心功能实现

3.1 AI辅助商品发布

这是项目的核心创新点之一。传统发布流程需要用户手动填写大量信息，而我们通过AI技术大幅简化了这一过程。

3.1.1 百度千帆大模型集成

首先实现了千帆大模型的IAM认证调用：

@Service
public class QianfanService {
    @Value("${baidu.qianfan.api.key}")
    private String accessKey;
    
    @Value("${baidu.qianfan.secret.key}")
    private String secretKey;

    public String chat(String prompt) {
        // 1. 生成UTC时间戳
        String timestamp = getUTCTimestamp();
        
        // 2. 构建认证字符串
        String authString = "bce-auth-v1/" + accessKey + "/" + 
                           timestamp + "/" + expirationInSeconds;
        
        // 3. 生成签名密钥
        String signingKey = sha256Hex(secretKey, authString);
        
        // 4. 构建规范请求
        String canonicalRequest = "POST\n" + canonicalUri + "\n" + 
                                 canonicalQueryString + "\n" + canonicalHeaders;
        
        // 5. 生成签名
        String signature = sha256Hex(signingKey, canonicalRequest);
        
        // 6. 发送请求
        Request request = new Request.Builder()
            .url("https://aip.baidubce.com" + canonicalUri)
            .addHeader("Authorization", authorization)
            .post(body)
            .build();
            
        // 7. 解析响应
        return json.get("result").getAsString();
    }
}

技术难点：

• IAM认证需要严格按照百度规范生成签名
• 时间戳必须使用UTC格式
• HMAC-SHA256签名算法的正确实现

3.1.2 智能标签生成

结合图像识别和大模型，实现智能标签生成：

@Service
public class AiTaggingService {
    public List<String> generateComprehensiveTags(
            String title, String description, 
            String price, Boolean isFreeShipping, 
            List<String> imageBase64List) {
        
        // 1. 图片识别获取初步标签
        List<String> imageTags = new ArrayList<>();
        if (imageBase64List != null && !imageBase64List.isEmpty()) {
            byte[] imageBytes = Base64.getDecoder()
                .decode(imageBase64List.get(0));
            imageTags = getTagsForImage(imageBytes);
        }
        
        // 2. 构建AI提示词
        String prompt = "请根据以下信息生成精确的商品标签（8-15个）：\n\n";
        prompt += "商品标题：" + title + "\n";
        prompt += "商品描述：" + description + "\n";
        prompt += "图片识别结果：" + String.join("、", imageTags) + "\n";
        prompt += "价格：" + price + "元";
        
        // 3. 调用大模型生成标签
        String result = qianfanService.chat(prompt);
        
        // 4. 解析并返回标签列表
        String[] tagArray = result.split("[,，、]");
        return Arrays.stream(tagArray)
            .map(String::trim)
            .filter(tag -> !tag.isEmpty() && tag.length() < 20)
            .collect(Collectors.toList());
    }
}

实现亮点：

• 多模态信息融合（图片+文本）
• 智能提示词工程，确保生成质量
• 标签去重和长度过滤

3.1.3 描述润色功能

@PostMapping("/polish-description")
public ResponseEntity<?> polishDescription(@RequestBody Map<String, String> request) {
    String title = request.get("title");
    String description = request.get("description");
    Boolean isDonation = Boolean.parseBoolean(
        request.getOrDefault("isDonation", "false"));
    
    String prompt;
    if (isDonation) {
        prompt = "请生成一段温暖、真诚且富有爱心的捐赠物品描述，" +
                "强调物品将帮助有需要的人，控制在150字以内：\n";
    } else {
        prompt = "请生成一段吸引人、专业且易读的商品描述，" +
                "控制在150字以内：\n";
    }
    
    prompt += "商品标题：" + title + "\n";
    prompt += "原始描述：" + description;
    
    String response = qianfanService.chat(prompt);
    return ResponseEntity.ok(Map.of("description", response));
}

3.2 AI智能搜索

传统关键词搜索往往无法理解用户真实意图，我实现了基于AI的语义搜索：

@Service
public class SearchService {
    public List<Item> intelligentSearch(String query) {
        // 1. 获取所有在售商品
        List<Item> allItems = itemRepository.findByStatusWithTags(ItemStatus.ON_SALE);
        
        // 2. 计算每个商品的匹配分数
        Map<Item, Integer> scoreMap = new HashMap<>();
        for (Item item : allItems) {
            int score = calculateScore(item, query);
            if (score > 0) {
                scoreMap.put(item, score);
            }
        }
        
        // 3. 按分数排序返回
        return scoreMap.entrySet().stream()
            .sorted((e1, e2) -> e2.getValue().compareTo(e1.getValue()))
            .map(Map.Entry::getKey)
            .collect(Collectors.toList());
    }
    
    private int calculateScore(Item item, String query) {
        int score = 0;
        
        // 1. 标题匹配（最高30分）
        if (item.getTitle().toLowerCase().contains(query.toLowerCase())) {
            score += 20;
        }
        
        // 2. 标签匹配（最高25分）
        for (Tag tag : item.getTags()) {
            if (tag.getName().toLowerCase().contains(query.toLowerCase())) {
                score += 5;
            }
        }
        
        // 3. 描述匹配（最高15分）
        if (item.getDescription().toLowerCase().contains(query.toLowerCase())) {
            score += 15;
        }
        
        // 4. AI语义理解增强（最高10分）
        score += aiSemanticBoost(item, query);
        
        return score;
    }
    
    private int aiSemanticBoost(Item item, String query) {
        String prompt = String.format(
            "用户搜索：'%s'，商品标题：'%s'，商品描述：'%s'。" +
            "请判断商品与搜索的相关度，只回答0-10之间的数字。",
            query, item.getTitle(), item.getDescription()
        );
        
        String result = qianfanService.chat(prompt);
        return Integer.parseInt(result.trim().replaceAll("[^0-9]", ""));
    }
}

搜索算法设计：

• 多维度评分机制（标题、标签、描述、AI语义）
• 权重分配：标题30% > 标签25% > 描述15% > AI语义10%
• AI作为辅助增强，避免过度依赖导致性能问题

3.3 实时聊天系统

使用WebSocket实现买卖双方实时沟通：

@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {
    @Autowired
    private ChatWebSocketHandler chatWebSocketHandler;

    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
        registry.addHandler(chatWebSocketHandler, "/ws/chat")
                .setAllowedOrigins("*");
    }
}

@Component
public class ChatWebSocketHandler extends TextWebSocketHandler {
    private final Map<String, WebSocketSession> sessions = new ConcurrentHashMap<>();
    
    @Override
    public void afterConnectionEstablished(WebSocketSession session) {
        String username = extractUsername(session);
        sessions.put(username, session);
    }
    
    @Override
    protected void handleTextMessage(WebSocketSession session, TextMessage message) {
        // 解析消息
        ChatMessage chatMessage = parseMessage(message.getPayload());
        
        // 保存到数据库
        chatService.saveMessage(chatMessage);
        
        // 转发给接收者
        WebSocketSession receiverSession = sessions.get(chatMessage.getReceiver());
        if (receiverSession != null && receiverSession.isOpen()) {
            receiverSession.sendMessage(message);
        }
    }
}

3.4 订单流程管理

实现了完整的订单状态流转：

public enum OrderStatus {
    PENDING_PAYMENT,    // 待支付
    PENDING_SHIPMENT,   // 待发货
    SHIPPED,            // 已发货
    COMPLETED,          // 已完成
    CANCELLED           // 已取消
}

@Service
public class OrderService {
    @Transactional
    public Order createOrder(Long itemId, Long addressId, String username) {
        // 1. 检查商品状态
        Item item = itemRepository.findById(itemId)
            .orElseThrow(() -> new RuntimeException("商品不存在"));
        
        if (item.getStatus() != ItemStatus.ON_SALE) {
            throw new RuntimeException("商品已下架");
        }
        
        // 2. 创建订单
        Order order = new Order();
        order.setBuyer(user);
        order.setSeller(item.getSeller());
        order.setItem(item);
        order.setFinalAmount(item.getPrice());
        order.setStatus(OrderStatus.PENDING_PAYMENT);
        
        // 3. 更新商品状态
        item.setStatus(ItemStatus.SOLD);
        
        return orderRepository.save(order);
    }
}

3.5 审核管理系统

管理员可以审核商品、捐赠和帖子：

@RestController
@RequestMapping("/api/admin")
public class AdminController {
    @PostMapping("/items/{id}/approve")
    public ResponseEntity<?> approveItem(@PathVariable Long id) {
        Item item = itemService.updateItemStatus(id, ItemStatus.ON_SALE);
        return ResponseEntity.ok(Map.of("success", true, "message", "审核通过"));
    }
    
    @PostMapping("/items/{id}/reject")
    public ResponseEntity<?> rejectItem(
            @PathVariable Long id, 
            @RequestBody Map<String, String> request) {
        String reason = request.get("reason");
        itemService.rejectItem(id, reason);
        return ResponseEntity.ok(Map.of("success", true, "message", "已拒绝"));
    }
}

四、前端实现要点

4.1 AI辅助发布界面

const PublishItem = () => {
  const [formData, setFormData] = useState({
    title: '',
    description: '',
    price: '',
    isFreeShipping: false,
    images: []
  });

  // AI生成标签
  const handleGenerateTags = async () => {
    const response = await api.post('/api/ai/generate-tags', {
      title: formData.title,
      description: formData.description,
      price: formData.price,
      images: formData.images
    });
    setTags(response.data.tags);
  };

  // AI润色描述
  const handlePolishDescription = async () => {
    const response = await api.post('/api/ai/polish-description', {
      title: formData.title,
      description: formData.description
    });
    setFormData({...formData, description: response.data.description});
  };

  return (
    <Box>
      <TextField label="商品标题" value={formData.title} />
      <TextField label="商品描述" multiline rows={4} />
      <Button onClick={handlePolishDescription}>AI润色</Button>
      <Button onClick={handleGenerateTags}>AI生成标签</Button>
      <Button onClick={handleSubmit}>发布商品</Button>
    </Box>
  );
};

4.2 智能搜索组件

const AISearchBar = () => {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);

  const handleSearch = async () => {
    const response = await api.get('/api/items/search', {
      params: { query }
    });
    setResults(response.data);
  };

  return (
    <Box>
      <TextField 
        placeholder="试试AI智能搜索：描述你想要的商品"
        value={query}
        onChange={(e) => setQuery(e.target.value)}
      />
      <Button onClick={handleSearch}>搜索</Button>
      <Grid container>
        {results.map(item => (
          <ItemCard key={item.id} item={item} />
        ))}
      </Grid>
    </Box>
  );
};

五、技术难点与解决方案

5.1 百度AI API认证问题

问题： 百度千帆大模型使用IAM认证，签名生成复杂，文档不够详细。

解决方案：

1. 仔细研究百度BCE认证规范
2. 使用HMAC-SHA256算法生成签名
3. 确保时间戳格式为UTC标准格式
4. 添加详细日志排查签名错误

5.2 图片上传与存储

问题： 商品图片需要支持多图上传，且要在前后端之间传输。

解决方案：

@Service
public class FileStorageService {
    @Value("${file.upload-dir}")
    private String uploadDir;

    public String storeFile(MultipartFile file) {
        // 1. 生成唯一文件名
        String fileName = UUID.randomUUID().toString() + 
                         getFileExtension(file.getOriginalFilename());
        
        // 2. 创建上传目录
        Path uploadPath = Paths.get(uploadDir);
        if (!Files.exists(uploadPath)) {
            Files.createDirectories(uploadPath);
        }
        
        // 3. 保存文件
        Path filePath = uploadPath.resolve(fileName);
        Files.copy(file.getInputStream(), filePath);
        
        return fileName;
    }
}

5.3 WebSocket跨域问题

问题： 前后端分离导致WebSocket连接跨域失败。

解决方案：

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("http://localhost:3000")
                .allowedMethods("*")
                .allowCredentials(true);
    }
}

5.4 AI响应时间优化

问题： AI接口调用耗时较长，影响用户体验。

解决方案：

1. 设置合理的超时时间（60秒）
2. 前端添加加载动画提示
3. 对于搜索场景，AI仅作为辅助评分，不阻塞主流程
4. 考虑使用异步处理和缓存机制

5.5 数据库查询性能优化

问题： 商品列表查询包含多表关联，性能较差。

解决方案：

public interface ItemRepository extends JpaRepository<Item, Long> {
    @Query("SELECT DISTINCT i FROM Item i " +
           "LEFT JOIN FETCH i.tags " +
           "LEFT JOIN FETCH i.images " +
           "WHERE i.status = :status")
    List<Item> findByStatusWithTags(@Param("status") ItemStatus status);
}

使用JOIN FETCH避免N+1查询问题，添加索引优化查询速度。

六、项目部署

6.1 后端部署

# 1. 打包项目
mvn clean package

# 2. 运行jar包
java -jar target/idle-ai-platform-0.0.1-SNAPSHOT.jar

# 3. 配置数据库
# 修改application.properties中的数据库连接信息

6.2 前端部署

# 1. 安装依赖
cd frontend
npm install

# 2. 构建生产版本
npm run build

# 3. 部署到服务器
# 将build目录部署到Nginx或其他Web服务器

6.3 环境配置

需要配置以下环境变量：

• MySQL数据库（端口3306）
• 百度AI API密钥
• 文件上传目录

七、项目成果与总结

7.1 技术收获

通过这个项目，我深入实践了：

1. Spring Boot全栈开发：从零搭建企业级后端服务
2. AI技术集成：百度千帆大模型、图像识别API的实战应用
3. 前后端分离架构：React + Spring Boot的协同开发
4. 实时通信技术：WebSocket的实现与应用
5. 数据库设计：多表关联、索引优化、事务管理
6. 安全认证：Spring Security的配置与使用
7. RESTful API设计：规范的接口设计与文档编写

7.2 项目亮点

1. AI技术深度融合：不是简单调用API，而是结合业务场景设计了智能标签生成、语义搜索等创新功能
2. 用户体验优化：AI辅助发布大幅降低用户操作成本
3. 完整的业务闭环：从发布、搜索、沟通到交易的完整流程
4. 公益与商业结合：支持公益组织发布捐赠物品，体现社会价值

7.3 未来优化方向

1. 性能优化：引入Redis缓存、消息队列处理异步任务
2. AI能力增强：接入更多AI模型，如商品价格评估、图片质量检测
3. 推荐算法：基于用户行为的协同过滤推荐
4. 移动端适配：开发微信小程序或App
5. 支付集成：接入支付宝、微信支付

八、总结

作为一名应届毕业生，这次项目经历积累了宝贵的全栈开发经验，从需求分析、技术选型、编码实现到问题解决。希望这篇文章能够帮助到同样在学习AI应用开发的朋友们。

如果你对项目有任何疑问或建议，欢迎在评论区交流讨论！

---

项目技术栈： Spring Boot | React | MySQL | 百度千帆大模型 | WebSocket | Spring Security

---

本文为原创技术文章，记录了真实的项目开发过程。如果觉得有帮助，欢迎点赞收藏！