前后端分离文博资源库系统：SpringBoot+Vue+MyBatis+MySQL 完整搭建教程附源码-优快云博客

以下是基于SpringBoot+Vue+MyBatis+MySQL的文博资源库系统完整搭建指南，包含关键配置和源码结构说明：

后端搭建（SpringBoot+MyBatis）

环境准备

JDK 1.8+
Maven 3.6+
MySQL 5.7+
IDE（IntelliJ IDEA或Eclipse）

项目结构

src/
├── main/
│   ├── java/
│   │   └── com/example/museum/
│   │       ├── controller/  # 控制器层
│   │       ├── dao/         # MyBatis Mapper接口
│   │       ├── entity/      # 数据实体
│   │       ├── service/     # 业务逻辑层
│   │       └── MuseumApplication.java  # 启动类
│   └── resources/
│       ├── mapper/          # MyBatis XML映射文件
│       ├── application.yml  # 配置文件
│       └── static/          # 静态资源

核心配置

application.yml 数据库配置示例：

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

mybatis:
  mapper-locations: classpath:mapper/*.xml

实体类示例（文物藏品）：

@Entity
@Table(name = "cultural_relic")
public class CulturalRelic {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    private String name;
    private String era;
    private String material;
    // getters/setters...
}

Controller示例：

@RestController
@RequestMapping("/api/relics")
public class RelicController {
    @Autowired
    private RelicService relicService;

    @GetMapping
    public List<CulturalRelic> getAll() {
        return relicService.findAll();
    }
}

前端搭建（Vue3）

项目初始化

npm init vue@latest museum-frontend
cd museum-frontend
npm install axios vue-router pinia

核心结构

src/
├── api/          # 接口请求
├── assets/       # 静态资源
├── components/   # 通用组件
├── router/       # 路由配置
├── stores/       # Pinia状态管理
├── views/        # 页面组件
└── App.vue       # 根组件

关键配置

API请求示例（axios）：

// api/relic.js
import axios from 'axios'

export const getRelics = () => {
  return axios.get('http://localhost:8080/api/relics')
}

路由配置示例：

// router/index.js
const routes = [
  {
    path: '/',
    component: () => import('../views/RelicList.vue')
  }
]

页面组件示例：

<template>
  <div v-for="relic in relics" :key="relic.id">
    <h3>{{ relic.name }}</h3>
    <p>{{ relic.era }}</p>
  </div>
</template>

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

const relics = ref([])
onMounted(async () => {
  relics.value = (await getRelics()).data
})
</script>

数据库设计（MySQL）

主要表结构

CREATE TABLE `cultural_relic` (
  `id` bigint NOT NULL AUTO_INCREMENT,
  `name` varchar(100) NOT NULL COMMENT '文物名称',
  `era` varchar(50) COMMENT '年代',
  `material` varchar(50) COMMENT '材质',
  `description` text COMMENT '详细描述',
  `image_url` varchar(255) COMMENT '图片路径',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

前后端联调

解决跨域问题（SpringBoot配置）：

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("http://localhost:5173")
                .allowedMethods("*");
    }
}

前端代理配置（vite）：

// vite.config.js
export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true
      }
    }
  }
})

源码获取

完整项目代码可通过以下方式获取：

GitHub仓库：搜索「museum-management-system」相关开源项目
Gitee镜像：查找「文博资源库SpringBoot+Vue」关键词
技术社区：优快云/掘金等平台搜索完整搭建教程

部署建议

后端打包：mvn clean package
前端构建：npm run build
部署环境：Nginx反向代理+VPS服务器
数据库备份：定期执行MySQL dump

系统可实现文物信息CRUD管理、分类检索、图片上传等功能，适合中小型博物馆数字化管理需求。