技术架构概述

SpringBoot + Vue 构建的文博资源库采用前后端分离架构，后端使用 SpringBoot 提供 RESTful API，前端通过 Vue.js 实现动态交互。MySQL 作为核心数据库存储文博资源数据（如文物信息、分类、图片等）。

---

MySQL 数据库部署流程

环境准备

• 安装 MySQL 5.7+ 或 MariaDB 10.3+，推荐使用 Docker 快速部署：

  docker run --name mysql-br -p 3306:3306 -e MYSQL_ROOT_PASSWORD=yourpassword -d mysql:5.7
  

• 创建文博资源库专用数据库：

  CREATE DATABASE museum_resource DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
  

表结构设计

核心表示例（文物信息表）：

CREATE TABLE `cultural_relic` (
  `id` BIGINT NOT NULL AUTO_INCREMENT,
  `name` VARCHAR(100) NOT NULL COMMENT '文物名称',
  `category_id` INT COMMENT '分类ID',
  `era` VARCHAR(50) COMMENT '年代',
  `material` VARCHAR(50) COMMENT '材质',
  `description` TEXT COMMENT '详细描述',
  `image_url` VARCHAR(255) COMMENT '图片路径',
  `create_time` DATETIME DEFAULT CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

---

SpringBoot 后端关键配置

数据库连接配置

在 application.yml 中配置 MySQL 连接与连接池（以 HikariCP 为例）：

spring:
  datasource:
    url: jdbc:mysql://localhost:3306/museum_resource?useSSL=false&serverTimezone=UTC
    username: root
    password: yourpassword
    driver-class-name: com.mysql.cj.jdbc.Driver
    hikari:
      maximum-pool-size: 10
      connection-timeout: 5000

MyBatis-Plus 集成

1. 添加依赖（pom.xml）：

<dependency>
  <groupId>com.baomidou</groupId>
  <artifactId>mybatis-plus-boot-starter</artifactId>
  <version>3.5.3</version>
</dependency>

1. 实体类映射（使用注解）：

@Data
@TableName("cultural_relic")
public class CulturalRelic {
  @TableId(type = IdType.AUTO)
  private Long id;
  private String name;
  private Integer categoryId;
  private String era;
  private String material;
  private String description;
  private String imageUrl;
  private LocalDateTime createTime;
}

---

Vue 前端对接 API

接口调用示例

通过 Axios 调用 SpringBoot 后端接口（文物列表查询）：

import axios from 'axios';

export function getRelicList(params) {
  return axios.get('/api/relic/list', { params });
}

跨域解决方案

在 SpringBoot 中配置全局跨域支持：

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

---

源码结构解析

后端目录结构

src/main/java/
├── config/        # 配置类（安全、跨域等）
├── controller/    # RESTful API 入口
├── entity/        # 数据库实体
├── mapper/        # MyBatis 映射接口
├── service/       # 业务逻辑层
└── MuseumApplication.java  # 启动类

前端目录结构（Vue 3）

src/
├── api/           # 接口定义
├── assets/        # 静态资源
├── components/    # 通用组件
├── views/         # 页面组件
└── router/        # 路由配置

---

常见问题与优化

性能优化

• MySQL 索引：为高频查询字段（如 category_id）添加索引。
• 文件存储：文物图片建议使用 OSS（如阿里云OSS）减轻服务器负载。

安全建议

• 数据库密码加密：使用 Jasypt 加密 application.yml 中的敏感信息。
• API 鉴权：集成 Spring Security 或 JWT 实现接口权限控制。