SpringBoot+Vue 打造文博资源库：MyBatis+MySQL 全流程实现及部署教程（附源码）-优快云博客

技术栈简介

SpringBoot作为后端框架提供RESTful API，Vue.js构建前端交互界面，MyBatis实现ORM映射，MySQL存储数据。该组合适合快速开发轻量级文博资源管理系统，具备前后端分离、易扩展的特点。

后端实现步骤

SpringBoot项目搭建

使用Spring Initializr创建项目，勾选Web/MyBatis/MySQL依赖
配置application.yml：

spring:
  datasource:
    url: jdbc:mysql://localhost:3306/museum_db?useSSL=false
    username: root
    password: yourpassword
    driver-class-name: com.mysql.cj.jdbc.Driver
mybatis:
  mapper-locations: classpath:mapper/*.xml

实体类设计

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

前端开发流程

Vue项目初始化

vue create museum-frontend
vue add router
vue add axios

API调用示例

axios.get('/api/relics')
  .then(response => {
    this.relicList = response.data
  })

数据库设计

典型文博资源表结构：

CREATE TABLE `cultural_relic` (
  `id` bigint NOT NULL AUTO_INCREMENT,
  `name` varchar(100) NOT NULL,
  `era` varchar(50) DEFAULT NULL,
  `material` varchar(50) DEFAULT NULL,
  `description` text,
  `image_url` varchar(255) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

部署方案

后端部署

打包SpringBoot应用：mvn clean package
使用Docker运行：

FROM openjdk:8-jdk-alpine
ARG JAR_FILE=target/*.jar
COPY ${JAR_FILE} app.jar
ENTRYPOINT ["java","-jar","/app.jar"]

前端部署

构建生产环境代码：npm run build
Nginx配置示例：

server {
    listen       80;
    server_name  yourdomain.com;
    location / {
        root   /var/www/museum-frontend/dist;
        try_files $uri $uri/ /index.html;
    }
}

关键功能实现

文物检索接口

@GetMapping("/search")
public List<CulturalRelic> searchRelics(@RequestParam String keyword) {
    return relicMapper.searchByNameOrEra(keyword);
}

MyBatis动态SQL

<select id="searchByNameOrEra" resultType="CulturalRelic">
    SELECT * FROM cultural_relic
    <where>
        <if test="keyword != null">
            name LIKE CONCAT('%',#{keyword},'%') OR era LIKE CONCAT('%',#{keyword},'%')
        </if>
    </where>
</select>

源码结构说明

完整项目通常包含以下模块：

backend/：SpringBoot工程
- src/main/java/com/example/controller/ 控制器层
- src/main/resources/mapper/ MyBatis映射文件
frontend/：Vue工程
- src/views/ 页面组件
- src/api/ 接口封装

常见问题解决

跨域配置 SpringBoot中添加配置类：

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

文件上传处理 Vue前端：

let formData = new FormData();
formData.append('file', this.file);
axios.post('/api/upload', formData)

SpringBoot后端：

@PostMapping("/upload")
public String handleUpload(@RequestParam("file") MultipartFile file) {
    String fileName = file.getOriginalFilename();
    file.transferTo(new File("/uploads/" + fileName));
    return fileName;
}