以下是一个关于 SpringBoot + Vue 文博系统开发的详细方案，涵盖前后端分离架构的核心内容、源码结构及部署要点：

---

技术栈说明

后端

• Spring Boot 2.7.x（提供 RESTful API）
• MyBatis-Plus（简化数据库操作）
• MySQL 8.0（数据存储）
• Redis（缓存高频访问的文物数据）

前端

• Vue 3 + Composition API
• Element Plus（UI组件库）
• Axios（HTTP请求）
• Vue Router（前端路由）

---

源码结构

后端目录

src/
├── main/
│   ├── java/
│   │   └── com/wenbo/
│   │       ├── config/       # 跨域、Redis等配置
│   │       ├── controller/   # 文物管理、用户权限等接口
│   │       ├── entity/       # 数据库实体类
│   │       ├── mapper/       # MyBatis映射文件
│   │       └── service/      # 业务逻辑层
│   └── resources/
│       ├── application.yml   # 多环境配置
│       └── mapper/*.xml      # MyBatis SQL文件

前端目录

src/
├── api/          # 后端接口封装
├── assets/       # 静态资源
├── components/   # 文物展示卡片等组件
├── router/       # 路由配置
├── store/        # Pinia状态管理
└── views/        # 文物列表、详情页

---

关键功能实现

文物信息管理接口示例

@RestController
@RequestMapping("/api/artifact")
public class ArtifactController {
    @Autowired
    private ArtifactService artifactService;

    @GetMapping("/list")
    public Result list(@RequestParam(required = false) String keyword) {
        return Result.success(artifactService.search(keyword));
    }
}

前端调用示例（Vue + Axios）

import { ref } from 'vue';
import { getArtifactList } from '@/api/artifact';

const artifacts = ref([]);
const loadData = async (keyword = '') => {
  const res = await getArtifactList({ keyword });
  artifacts.value = res.data;
};

---

部署流程

后端部署

1. 打包：mvn clean package -DskipTests
2. 上传 target/*.jar 至服务器
3. 启动：nohup java -jar wenbo-backend.jar &

前端部署

1. 构建：npm run build
2. 将 dist 目录上传至Nginx
3. 配置Nginx代理API请求：

   location /api {
       proxy_pass http://backend-server:8080;
   }
   

---

常见问题解决

跨域问题
后端需添加配置类：

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("GET", "POST");
    }
}

MyBatis-Plus 分页查询
需配置分页插件：

@Bean
public MybatisPlusInterceptor paginationInterceptor() {
    MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();
    interceptor.addInnerInterceptor(new PaginationInnerInterceptor());
    return interceptor;
}

---

扩展建议

• 增加Elasticsearch实现文物全文检索
• 使用OAuth2.0实现第三方登录
• 部署Prometheus监控系统性能

（注：实际源码需根据具体业务需求调整，以上为通用框架示例）