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

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

文章目录

• Spring Boot + React 全栈开发：闲置物品交易平台实战（集成百度AI）
• • 前言
  • 一、项目背景与需求分析
  • • 1.1 项目背景
    • 1.2 核心需求
  • 二、技术架构设计
  • • 2.1 技术栈选型
    • 2.2 系统架构
    • 2.3 数据库设计
  • 三、核心功能实现
  • • 3.1 AI辅助商品发布
    • • 3.1.1 百度千帆大模型集成
      • 3.1.2 智能标签生成
      • 3.1.3 描述润色功能
    • 3.2 AI智能搜索
    • 3.3 实时聊天系统
    • 3.4 订单流程管理
    • 3.5 审核管理系统
  • 四、前端实现要点
  • • 4.1 AI辅助发布界面
    • 4.2 智能搜索组件
  • 五、技术难点与解决方案
  • • 5.1 百度AI API认证问题
    • 5.2 图片上传与存储
    • 5.3 WebSocket跨域问题
    • 5.4 AI响应时间优化
    • 5.5 数据库查询性能优化
  • 六、项目部署
  • • 6.1 后端部署
    • 6.2 前端部署
    • 6.3 环境配置
  • 七、项目成果与总结
  • • 7.1 技术收获
    • 7.2 项目亮点
    • 7.3 未来优化方向
  • 八、总结

前言

最近接手并完成了一个融合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认证，签名生成复杂，文档不够详细。

解决方案：

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接口调用耗时较长，影响用户体验。

解决方案：

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 技术收获

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

7.2 项目亮点

7.3 未来优化方向

八、总结

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

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

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

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