技术栈概述

SpringBoot+Vue+MyBatis+MySQL 是典型的现代化前后端分离架构。SpringBoot 提供 RESTful API 接口，Vue 负责前端渲染，MyBatis 处理数据持久化，MySQL 作为关系型数据库存储文博数据。

源码结构解析

后端结构
核心目录通常包含：

• controller/：定义API端点（如文物管理、展览预约等）
• service/：业务逻辑实现层
• mapper/：MyBatis 接口与XML映射文件
• entity/：数据库实体类（如文物Entity包含id、name、era等字段）
• config/：跨域配置、安全认证等

前端结构
Vue项目主要模块：

• src/api/：Axios封装的API请求方法
• src/views/：页面组件（如文物列表、详情页）
• src/router/：Vue Router配置
• src/store/：Vuex状态管理（用户登录态等）

数据库设计要点

典型文博系统表结构示例：

CREATE TABLE `cultural_relic` (
  `id` int NOT NULL AUTO_INCREMENT,
  `name` varchar(100) COLLATE utf8mb4_bin NOT NULL,
  `era` varchar(50) COLLATE utf8mb4_bin DEFAULT NULL,
  `material` varchar(50) COLLATE utf8mb4_bin DEFAULT NULL,
  `museum_id` int DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_bin;

后端关键代码示例

MyBatis动态SQL查询文物：

@Select("<script>" +
        "SELECT * FROM cultural_relic " +
        "<where>" +
        "  <if test='era != null'> AND era = #{era}</if>" +
        "  <if test='material != null'> AND material = #{material}</if>" +
        "</where>" +
        "</script>")
List<CulturalRelic> selectByCondition(CulturalRelicQuery query);

SpringBoot统一响应封装：

@RestControllerAdvice
public class GlobalExceptionHandler {
    @ExceptionHandler(Exception.class)
    public Result<String> handleException(Exception e) {
        return Result.error(e.getMessage());
    }
}

前端交互实现

Vue调用API示例（Axios封装）：

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

Element UI表格绑定：

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

系统部署流程

后端部署

1. 打包SpringBoot应用：mvn clean package -DskipTests
2. 启动JAR包：java -jar target/your-app.jar --spring.profiles.active=prod
3. Nginx配置反向代理（可选）

前端部署

1. 构建生产环境代码：npm run build
2. 将dist目录内容部署至Web服务器（Nginx/Apache）
3. 配置API代理解决跨域（Nginx示例）：

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

常见问题解决方案

跨域问题
后端可添加注解解决：

@CrossOrigin(origins = "*")
@RestController
public class RelicController { ... }

MyBatis懒加载异常
在application.yml中配置：

mybatis:
  configuration:
    lazy-loading-enabled: true
    aggressive-lazy-loading: false

Vue路由History模式404
Nginx需添加重定向规则：

location / {
  try_files $uri $uri/ /index.html;
}

性能优化建议

1. 数据库层面：为高频查询字段添加索引，如era和material
2. 缓存策略：使用Redis缓存热门文物数据
3. 前端优化：启用Vue的异步组件和路由懒加载
4. 静态资源：通过CDN加速图片等大型文件加载