以下是一个基于SpringBoot+Vue的文博系统前后端分离实现与部署的完整方案，包含关键步骤和配置要点：

---

技术栈说明

• 后端：SpringBoot 2.7.x + MyBatis-Plus + MySQL 8.0
• 前端：Vue 3 + Element Plus + Axios
• 部署：Nginx反向代理 + Jar包部署

---

后端实现（SpringBoot）

项目结构

src/
├── main/
│   ├── java/
│   │   └── com/wenbo/
│   │       ├── config/       # 跨域/安全配置
│   │       ├── controller/   # 文物/展览API
│   │       ├── entity/       # 数据库实体
│   │       ├── mapper/       # MyBatis接口
│   │       └── service/      # 业务逻辑
│   └── resources/
│       ├── application.yml   # 多环境配置
│       └── mapper/           # XML映射文件

核心依赖（pom.xml）

<dependency>
    <groupId>com.baomidou</groupId>
    <artifactId>mybatis-plus-boot-starter</artifactId>
    <version>3.5.2</version>
</dependency>
<dependency>
    <groupId>mysql</groupId>
    <artifactId>mysql-connector-java</artifactId>
    <scope>runtime</scope>
</dependency>

MySQL配置（application.yml）

spring:
  datasource:
    url: jdbc:mysql://localhost:3306/wenbo_db?useSSL=false&serverTimezone=UTC
    username: root
    password: 123456
    driver-class-name: com.mysql.cj.jdbc.Driver

跨域配置

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

---

前端实现（Vue3）

项目结构

src/
├── api/            # 接口请求
├── assets/         # 静态资源
├── components/     # 文物展示组件
├── router/         # 路由配置
└── views/          # 页面视图

Axios封装示例

// api/request.js
const service = axios.create({
    baseURL: 'http://localhost:8080/api',
    timeout: 5000
});

// 请求拦截器
service.interceptors.request.use(config => {
    config.headers['Authorization'] = localStorage.getItem('token');
    return config;
});

文物列表组件

<template>
  <el-table :data="relicList">
    <el-table-column prop="name" label="文物名称"/>
    <el-table-column prop="era" label="年代"/>
  </el-table>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { getRelicList } from '@/api/relic';

const relicList = ref([]);

onMounted(async () => {
  const res = await getRelicList();
  relicList.value = res.data;
});
</script>

---

部署流程

后端打包

mvn clean package -DskipTests
# 生成target/wenbo-backend-1.0.0.jar

前端打包

npm run build
# 生成dist静态资源文件夹

Nginx配置

server {
    listen       80;
    server_name  yourdomain.com;

    # 前端部署
    location / {
        root   /var/www/wenbo-frontend/dist;
        index  index.html;
        try_files $uri $uri/ /index.html;
    }

    # 后端代理
    location /api {
        proxy_pass http://localhost:8080;
        proxy_set_header Host $host;
    }
}

MySQL初始化脚本

CREATE DATABASE wenbo_db CHARACTER SET utf8mb4;
CREATE TABLE `cultural_relic` (
  `id` INT NOT NULL AUTO_INCREMENT,
  `name` VARCHAR(100) NOT NULL COMMENT '文物名称',
  `era` VARCHAR(50) COMMENT '年代',
  `material` VARCHAR(50) COMMENT '材质',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

---

关键注意事项

1. 前后端分离开发时需保持接口文档同步（推荐使用Swagger）
2. 生产环境需关闭SpringBoot的Actuator敏感端点
3. Vue路由需使用history模式与后端配合
4. MySQL连接池参数需根据服务器配置调整

完整源码可通过开源平台获取（如GitHub搜索springboot-vue-museum），建议根据实际需求调整文物分类、用户权限等业务模块。部署时需确保服务器开放80（前端）、8080（后端）、3306（MySQL）端口。