倩Sur1. 项目概述
这个古建筑推荐与模型商城系统是一个典型的全栈Web应用，采用前后端分离架构。后端基于Spring Boot框架提供RESTful API服务，前端使用Vue.js构建用户界面，Node.js则作为前端构建工具和中间层服务。系统主要包含两大核心功能模块：古建筑文化推荐系统和古建筑模型电商平台。
在实际开发中，我们选择了MySQL作为主数据库，用于存储结构化数据如用户信息、订单记录等；同时使用MongoDB存储非结构化的古建筑详情数据，这种混合数据库架构能够充分发挥各自优势。系统还集成了Three.js用于3D模型展示，让用户可以360度查看古建筑模型的细节。
提示：选择混合数据库架构时，需要考虑数据一致性问题。我们通过Spring Data的跨库事务管理模块来解决这个问题。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 技术栈选型解析
2.1 后端技术栈
Spring Boot 2.7.x作为后端框架，主要基于以下考虑：
- 自动配置特性大幅减少XML配置
- 内嵌Tomcat服务器简化部署
- 丰富的Starter依赖（如spring-boot-starter-data-jpa）
- 完善的生态系统和社区支持
数据库访问层采用Spring Data JPA + QueryDSL组合：
java复制// 古建筑仓库接口示例
public interface ArchitectureRepository extends JpaRepository<Architecture, Long>,
QuerydslPredicateExecutor<Architecture> {
@Query("SELECT a FROM Architecture a WHERE a.dynasty = :dynasty")
List<Architecture> findByDynasty(@Param("dynasty") String dynasty);
}
2.2 前端技术栈
Vue 3.x + TypeScript的组合提供了更好的类型检查和代码提示。UI组件库选用Element Plus，主要因为：
- 丰富的预制组件（表格、表单、通知等）
- 良好的TypeScript支持
- 活跃的中文社区
前端工程化配置：
bash复制# 项目创建
npm init vue@latest ancient-architecture-web
# 主要依赖
npm install element-plus axios vue-router pinia three
2.3 辅助技术
Node.js主要承担两个角色：
- 前端构建工具（Vite）
- 中间层服务（处理文件上传、3D模型转换等）
3D展示方案采用Three.js + GLTF格式：
javascript复制// Three.js模型加载示例
const initModelViewer = async (container, modelUrl) => {
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, container.offsetWidth / container.offsetHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: true });
const loader = new GLTFLoader();
const gltf = await loader.loadAsync(modelUrl);
scene.add(gltf.scene);
// 渲染循环
const animate = () => {
requestAnimationFrame(animate);
renderer.render(scene, camera);
};
animate();
};
3. 核心功能实现
3.1 古建筑推荐系统
推荐算法采用混合策略：
- 基于内容的推荐：分析用户浏览/收藏的古建筑特征（朝代、地域、类型）
- 协同过滤：发现相似用户群体的偏好
java复制// 推荐服务实现片段
@Service
public class RecommendationServiceImpl implements RecommendationService {
@Autowired
private UserBehaviorRepository behaviorRepo;
@Override
public List<Architecture> recommendForUser(Long userId) {
// 获取用户历史行为
List<UserBehavior> behaviors = behaviorRepo.findByUserId(userId);
// 特征提取
Set<String> likedDynasties = behaviors.stream()
.map(b -> b.getArchitecture().getDynasty())
.collect(Collectors.toSet());
// 混合推荐逻辑
return architectureRepo.findByDynastyIn(likedDynasties)
.stream()
.sorted(Comparator.comparingDouble(a -> calculateScore(a, behaviors)))
.limit(10)
.collect(Collectors.toList());
}
}
3.2 模型商城系统
商城核心业务流程：
- 商品管理（CRUD）
- 购物车服务
- 订单流程
- 支付集成
数据库设计关键表：
sql复制CREATE TABLE model_product (
id BIGINT PRIMARY KEY AUTO_INCREMENT,
name VARCHAR(100) NOT NULL,
description TEXT,
price DECIMAL(10,2) NOT NULL,
stock INT DEFAULT 0,
model_url VARCHAR(255), -- GLTF模型文件路径
preview_images JSON -- 预览图数组
);
CREATE TABLE shopping_cart (
id BIGINT PRIMARY KEY AUTO_INCREMENT,
user_id BIGINT NOT NULL,
product_id BIGINT NOT NULL,
quantity INT DEFAULT 1,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);
4. 系统架构设计
4.1 整体架构
系统采用分层架构：
- 表现层：Vue SPA
- API网关：Spring Cloud Gateway
- 业务服务：
- 用户服务
- 推荐服务
- 订单服务
- 数据层：
- MySQL
- MongoDB
- Redis缓存
4.2 微服务拆分
虽然使用Spring Boot单体应用也能实现，但考虑到未来扩展性，我们采用微服务架构：
| 服务名称 | 职责 | 技术实现 |
|---|---|---|
| user-service | 用户认证、个人信息管理 | Spring Security + JWT |
| rec-service | 推荐算法计算 | Spring Data + Spark ML |
| order-service | 订单创建、支付流程 | Spring Transaction |
| product-service | 商品管理 | Spring Data REST |
4.3 接口设计规范
RESTful API设计遵循以下原则：
- 资源命名使用复数形式
- HTTP方法明确操作意图
- 状态码准确反映结果
示例接口：
code复制GET /api/architectures - 获取古建筑列表
POST /api/architectures - 创建新古建筑记录
GET /api/architectures/{id} - 获取特定古建筑详情
PUT /api/architectures/{id} - 更新古建筑信息
DELETE /api/architectures/{id} - 删除记录
5. 关键问题与解决方案
5.1 3D模型性能优化
问题：大型GLTF模型导致页面卡顿
解决方案：
- 模型轻量化处理
- 分层次加载（LOD）
- WebWorker异步加载
javascript复制// WebWorker加载模型
const modelWorker = new Worker('model-loader.js');
modelWorker.onmessage = (e) => {
const { modelData } = e.data;
scene.add(parseModel(modelData));
};
// model-loader.js
self.onmessage = async (e) => {
const { modelUrl } = e.data;
const loader = new GLTFLoader();
const gltf = await loader.loadAsync(modelUrl);
self.postMessage({ modelData: gltfToJson(gltf) });
};
5.2 推荐算法冷启动
问题：新用户缺乏行为数据
解决方案：
- 基于地域的默认推荐
- 热门排行榜
- 引导式兴趣选择
java复制// 冷启动处理逻辑
public List<Architecture> handleColdStart(User user) {
// 尝试根据注册信息获取地域偏好
if (user.getRegion() != null) {
return architectureRepo.findByRegion(user.getRegion());
}
// 返回综合热门榜单
return architectureRepo.findTop10ByOrderByViewCountDesc();
}
5.3 支付安全
问题：支付接口安全性
解决方案：
- 接口签名验证
- 敏感数据加密
- 支付状态回调验证
java复制@RestController
@RequestMapping("/api/payment")
public class PaymentController {
@PostMapping("/notify")
public ResponseEntity<?> handleNotify(
@RequestBody String encryptedData,
@RequestHeader("X-Signature") String signature) {
// 验证签名
if (!signatureService.verify(encryptedData, signature)) {
throw new SecurityException("Invalid signature");
}
// 解密数据
PaymentNotify notify = decryptService.decrypt(encryptedData);
// 处理支付结果
orderService.processPayment(notify);
return ResponseEntity.ok().build();
}
}
6. 部署与运维
6.1 容器化部署
使用Docker Compose编排服务：
yaml复制version: '3.8'
services:
backend:
build: ./backend
ports:
- "8080:8080"
depends_on:
- mysql
- redis
frontend:
build: ./frontend
ports:
- "80:80"
mysql:
image: mysql:8.0
environment:
MYSQL_ROOT_PASSWORD: rootpass
MYSQL_DATABASE: architecture_db
redis:
image: redis:6
6.2 监控方案
- Spring Boot Actuator提供健康检查
- Prometheus + Grafana监控指标
- ELK日志收集系统
关键监控指标：
- API响应时间
- 推荐算法计算耗时
- 3D模型加载成功率
- 支付流程转化率
6.3 CI/CD流程
GitHub Actions自动化部署：
yaml复制name: Backend CI/CD
on:
push:
branches: [ main ]
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- name: Set up JDK 11
uses: actions/setup-java@v2
with:
java-version: '11'
distribution: 'adopt'
- name: Build with Maven
run: mvn -B package --file pom.xml
- name: Docker build and push
uses: docker/build-push-action@v2
with:
context: ./backend
push: true
tags: user/architecture-backend:latest
7. 扩展优化方向
7.1 性能优化
- 引入CDN加速静态资源
- 实现服务端渲染(SSR)提升首屏速度
- 数据库读写分离
7.2 功能扩展
- AR/VR展示：通过WebXR API实现
- 社交功能：用户生成内容(UGC)
- 智能导览：集成NLP聊天机器人
7.3 架构演进
- 服务网格化：引入Istio
- 事件驱动架构：使用Kafka
- 无服务器化：部分功能迁移到云函数
在实现这个系统的过程中，最大的挑战是3D模型在Web端的性能优化。我们最终采用的解决方案是：
- 使用Draco压缩算法减小模型体积
- 实现按需加载机制
- 在Node.js中间层进行模型预处理
这种组合方案使得平均模型加载时间从最初的8秒降低到了1.5秒以内，大幅提升了用户体验。