冯正华1. 项目概述
这个古建筑推荐与模型商城系统是一个融合了文化传承与现代技术的全栈项目。作为一名长期从事文化遗产数字化工作的开发者，我发现市场上缺乏一个能够同时满足古建筑知识普及和模型收藏需求的平台。这个系统正是为了解决这个问题而设计的。
系统采用前后端分离架构，后端使用SpringBoot提供稳定的数据服务，前端通过Vue.js构建交互友好的用户界面，Node.js则作为中间层处理一些特殊的业务逻辑。这种技术组合既保证了系统的性能，又能提供流畅的用户体验。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 技术架构设计
2.1 后端技术选型
SpringBoot作为后端框架有几个明显优势：
- 自动配置减少了大量样板代码
- 内嵌Tomcat简化了部署流程
- 丰富的starter依赖让集成各种组件变得简单
我们使用Spring Data JPA进行数据库操作，因为它提供了：
- 自动化的CRUD操作
- 方法名查询自动生成
- 分页和排序支持
对于复杂的查询场景，我们结合使用@Query注解编写自定义JPQL语句。例如获取某个朝代的古建筑列表：
java复制@Query("SELECT a FROM Architecture a WHERE a.dynasty = :dynasty ORDER BY a.popularity DESC")
List<Architecture> findByDynasty(@Param("dynasty") String dynasty);
2.2 前端技术方案
Vue.js的组件化开发模式非常适合这个项目：
- 首页、详情页、购物车等都可以拆分为独立组件
- Vuex管理全局状态（如用户登录状态、购物车数据）
- Vue Router实现无缝的页面跳转
我们选择Element UI作为UI框架，因为它：
- 提供了丰富的现成组件
- 文档完善，社区支持好
- 主题定制方便
2.3 数据库设计
系统主要包含以下几张核心表：
| 表名 | 主要字段 | 说明 |
|---|---|---|
| architecture | id,name,dynasty,location,description,images | 古建筑基本信息 |
| model_product | id,name,price,scale,material,3d_model_url | 模型商品信息 |
| user | id,username,password,email,avatar | 用户账户信息 |
| order | id,user_id,product_id,status,create_time | 订单记录 |
3. 核心功能实现
3.1 古建筑推荐算法
我们实现了两种推荐策略：
- 基于内容的推荐：分析用户浏览和收藏记录，推荐相似风格的建筑
- 协同过滤：发现与当前用户兴趣相似的其他用户喜欢的建筑
推荐服务的核心代码结构：
java复制@Service
public class RecommendationService {
@Autowired
private UserBehaviorRepository behaviorRepo;
public List<Architecture> recommendForUser(Long userId) {
// 获取用户历史行为
List<UserBehavior> behaviors = behaviorRepo.findByUserId(userId);
// 实现推荐逻辑
if(behaviors.size() > 5) {
return collaborativeFiltering(userId);
} else {
return contentBasedRecommendation(behaviors);
}
}
}
3.2 3D模型展示
在前端使用Three.js展示古建筑模型的要点：
- 模型准备：
- 使用Blender等工具创建GLTF格式的模型
- 优化模型面数以保证性能
- 添加适当的纹理和材质
- 前端集成：
javascript复制import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
export default {
mounted() {
this.init3DViewer();
},
methods: {
init3DViewer() {
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
const loader = new GLTFLoader();
loader.load('models/ancient_building.gltf', (gltf) => {
scene.add(gltf.scene);
this.animate();
});
},
animate() {
requestAnimationFrame(this.animate);
renderer.render(scene, camera);
}
}
}
4. 开发中的关键问题与解决方案
4.1 跨域问题处理
前后端分离架构下，跨域是必须解决的问题。我们在SpringBoot中配置CORS：
java复制@Configuration
public class CorsConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/api/**")
.allowedOrigins("http://localhost:8080")
.allowedMethods("GET", "POST", "PUT", "DELETE")
.allowCredentials(true)
.maxAge(3600);
}
}
4.2 文件上传与存储
古建筑和模型需要存储大量图片和3D模型文件。我们采用以下方案：
- 小文件（<10MB）：直接存储在服务器文件系统
- 大文件：使用阿里云OSS对象存储
- 文件上传接口：
java复制@PostMapping("/upload")
public ResponseEntity<String> uploadFile(@RequestParam("file") MultipartFile file) {
if (file.isEmpty()) {
return ResponseEntity.badRequest().body("请选择文件");
}
try {
String fileName = UUID.randomUUID() + "_" + file.getOriginalFilename();
Path path = Paths.get(uploadDir, fileName);
Files.copy(file.getInputStream(), path, StandardCopyOption.REPLACE_EXISTING);
return ResponseEntity.ok("/uploads/" + fileName);
} catch (IOException e) {
return ResponseEntity.status(500).body("上传失败");
}
}
5. 部署与性能优化
5.1 系统部署方案
我们采用Docker容器化部署，docker-compose.yml配置示例：
yaml复制version: '3'
services:
db:
image: mysql:8.0
environment:
MYSQL_ROOT_PASSWORD: rootpass
MYSQL_DATABASE: ancient_architecture
volumes:
- mysql_data:/var/lib/mysql
backend:
build: ./backend
ports:
- "8080:8080"
depends_on:
- db
frontend:
build: ./frontend
ports:
- "80:80"
5.2 性能优化措施
- 缓存策略：
- 使用Redis缓存热门古建筑数据
- 配置HTTP缓存头减少重复请求
- 数据库优化：
- 为常用查询字段添加索引
- 对大表进行分表处理
- 前端优化：
- 图片懒加载
- 路由懒加载
- 组件按需引入
6. 项目扩展方向
在实际开发中，我们发现还可以进一步扩展以下功能：
- AR展示：通过WebXR技术实现古建筑模型的增强现实展示
- 社交功能：增加用户评论、收藏分享功能
- 教育模块：开发古建筑知识问答和在线课程
- 3D打印支持：提供可直接用于3D打印的模型文件下载
一个特别实用的扩展是开发微信小程序版本，让用户能更方便地浏览和购买古建筑模型。我们使用uni-app框架实现了这个需求，可以一套代码同时生成小程序和H5版本。