以下是基于SpringBoot+Vue+MyBatis+MySQL的文博资源库系统开发与部署实战指南，包含关键步骤和源码结构说明：

---

技术栈说明

• 后端：SpringBoot 2.7.x + MyBatis-Plus + MySQL 8.0
• 前端：Vue 3 + Element Plus + Axios
• 构建工具：Maven 3.6 + Node.js 16.x

---

后端开发（SpringBoot）

数据库设计 创建MySQL数据库cultural_db，核心表示例：

CREATE TABLE `artifact` (
  `id` INT PRIMARY KEY AUTO_INCREMENT,
  `name` VARCHAR(100) NOT NULL COMMENT '文物名称',
  `category` VARCHAR(50) COMMENT '文物类别',
  `era` VARCHAR(30) COMMENT '所属年代',
  `image_url` VARCHAR(255) COMMENT '图片路径'
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

实体类与Mapper

// Artifact.java
@Data
@TableName("artifact")
public class Artifact {
    @TableId(type = IdType.AUTO)
    private Integer id;
    private String name;
    private String category;
    private String era;
    private String imageUrl;
}

// ArtifactMapper.java
@Mapper
public interface ArtifactMapper extends BaseMapper<Artifact> {}

服务层实现

@Service
public class ArtifactServiceImpl implements ArtifactService {
    @Autowired
    private ArtifactMapper artifactMapper;

    @Override
    public List<Artifact> listByEra(String era) {
        QueryWrapper<Artifact> wrapper = new QueryWrapper<>();
        wrapper.eq("era", era);
        return artifactMapper.selectList(wrapper);
    }
}

---

前端开发（Vue3）

API接口调用

// api/artifact.js
import request from '@/utils/request'

export function listArtifacts(params) {
  return request({
    url: '/api/artifact/list',
    method: 'get',
    params
  })
}

页面组件示例

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

<script setup>
import { ref, onMounted } from 'vue'
import { listArtifacts } from '@/api/artifact'

const artifactList = ref([])

onMounted(async () => {
  const res = await listArtifacts({ era: '唐代' })
  artifactList.value = res.data
})
</script>

---

系统部署

后端打包

mvn clean package -DskipTests
# 生成target/cultural-system-0.0.1-SNAPSHOT.jar

前端构建

npm run build
# 生成dist静态资源目录

Docker部署示例

# 后端Dockerfile
FROM openjdk:11-jre
COPY target/*.jar /app.jar
ENTRYPOINT ["java","-jar","/app.jar"]

Nginx配置

server {
    listen 80;
    server_name example.com;
    
    location / {
        root /path/to/dist;
        try_files $uri /index.html;
    }

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

---

源码结构说明

cultural-system/
├── backend/            # SpringBoot工程
│   ├── src/
│   │   ├── main/
│   │   │   ├── java/com/example/
│   │   │   │   ├── controller/
│   │   │   │   ├── entity/
│   │   │   │   ├── mapper/
│   │   │   │   └── service/
│   │   │   └── resources/
│   │   │       ├── application.yml
│   │   │       └── mapper/*.xml
├── frontend/           # Vue工程
│   ├── public/
│   ├── src/
│   │   ├── api/
│   │   ├── assets/
│   │   ├── components/
│   │   └── views/
└── sql/                # 数据库脚本
    ├── init.sql
    └── data.sql

---

注意事项

1. 跨域问题需在SpringBoot中配置@CrossOrigin或通过Nginx反向代理解决
2. 文件上传需配置具体存储路径（本地存储或OSS）
3. 生产环境建议使用Redis缓存高频访问数据

完整源码可通过GitHub仓库获取（需替换为实际仓库地址）。部署时注意修改application.yml中的数据库连接配置和前端API基础路径。