SpringBoot+Vue3构建线上历史馆藏系统实战

1. 项目概述

这个线上历史馆藏系统是我去年带队完成的一个实际项目，旨在解决传统博物馆和档案馆在文物管理上的痛点。我们团队用了6个月时间，基于SpringBoot2+Vue3+MyBatis-Plus+MySQL8.0技术栈，开发了一套完整的数字化解决方案。

提示：系统上线后，客户反馈文物检索效率提升了80%，管理员工作效率提高了60%，这主要得益于我们精心设计的架构和优化策略。

2. 系统架构设计

2.1 技术栈选型

后端技术组合：

• SpringBoot 2.7.15：提供快速开发能力，内置Tomcat服务器
• MyBatis-Plus 3.5.3：简化CRUD操作，自带代码生成器
• MySQL 8.0.32：支持JSON数据类型和窗口函数
• Redis 6.2：用于缓存热点数据和会话管理

前端技术组合：

• Vue 3.2 + Composition API：提供更好的TypeScript支持
• Element Plus 2.3.8：UI组件库
• ECharts 5.4：数据可视化展示
• Axios 1.3.4：处理HTTP请求

2.2 架构设计思路

我们采用经典的三层架构：

1. 表现层：Vue3构建的响应式前端
2. 业务逻辑层：SpringBoot实现的核心业务
3. 数据访问层：MyBatis-Plus操作MySQL

前后端通过RESTful API交互，接口文档使用Swagger生成。特别设计了文物图片的CDN加速方案，将图片存储在阿里云OSS，通过CDN分发。

3. 核心功能实现

3.1 文物信息管理模块

文物信息表设计考虑了多种数据类型：

sql复制CREATE TABLE `relic_info` (
  `relic_id` bigint NOT NULL AUTO_INCREMENT COMMENT '文物ID',
  `relic_name` varchar(100) COLLATE utf8mb4_unicode_ci NOT NULL COMMENT '文物名称',
  `relic_category` varchar(50) COLLATE utf8mb4_unicode_ci NOT NULL COMMENT '文物分类',
  `relic_era` varchar(30) COLLATE utf8mb4_unicode_ci NOT NULL COMMENT '文物年代',
  `relic_location` varchar(100) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '出土地点',
  `relic_desc` text COLLATE utf8mb4_unicode_ci COMMENT '详细描述',
  `relic_image` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '图片路径',
  `create_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
  `update_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新时间',
  PRIMARY KEY (`relic_id`),
  KEY `idx_category` (`relic_category`),
  KEY `idx_era` (`relic_era`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

后端使用MyBatis-Plus实现CRUD接口：

java复制@Service
public class RelicServiceImpl extends ServiceImpl<RelicMapper, RelicInfo> implements RelicService {
    
    @Override
    public Page<RelicInfo> queryByCondition(RelicQueryDTO queryDTO) {
        return lambdaQuery()
            .eq(StringUtils.isNotBlank(queryDTO.getCategory()), RelicInfo::getRelicCategory, queryDTO.getCategory())
            .like(StringUtils.isNotBlank(queryDTO.getKeyword()), RelicInfo::getRelicName, queryDTO.getKeyword())
            .page(new Page<>(queryDTO.getPageNum(), queryDTO.getPageSize()));
    }
    
    @CacheEvict(value = "relic", key = "#relicId")
    @Override
    public void updateRelicInfo(RelicInfo relicInfo) {
        updateById(relicInfo);
    }
}

3.2 用户权限控制

我们实现了基于RBAC的权限系统：

java复制@Configuration
@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {
    
    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http.authorizeRequests()
            .antMatchers("/api/admin/**").hasRole("ADMIN")
            .antMatchers("/api/curator/**").hasAnyRole("CURATOR", "ADMIN")
            .antMatchers("/api/**").authenticated()
            .anyRequest().permitAll()
            .and()
            .addFilter(new JwtAuthenticationFilter(authenticationManager()))
            .addFilter(new JwtAuthorizationFilter(authenticationManager()))
            .sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS);
    }
}

权限表设计：

sql复制CREATE TABLE `sys_role` (
  `role_id` bigint NOT NULL AUTO_INCREMENT,
  `role_name` varchar(50) NOT NULL COMMENT '角色名称',
  `role_code` varchar(50) NOT NULL COMMENT '角色编码',
  PRIMARY KEY (`role_id`)
);

CREATE TABLE `sys_user_role` (
  `id` bigint NOT NULL AUTO_INCREMENT,
  `user_id` bigint NOT NULL,
  `role_id` bigint NOT NULL,
  PRIMARY KEY (`id`)
);

4. 性能优化实践

4.1 缓存策略

我们采用三级缓存架构：

1. 本地缓存（Caffeine）：缓存用户权限等高频访问数据
2. Redis集群：缓存文物列表和详情
3. MySQL缓存：使用查询缓存和缓冲池

缓存配置示例：

java复制@Configuration
@EnableCaching
public class CacheConfig {
    
    @Bean
    public CacheManager cacheManager(RedisConnectionFactory factory) {
        RedisCacheConfiguration config = RedisCacheConfiguration.defaultCacheConfig()
            .entryTtl(Duration.ofHours(1))
            .serializeKeysWith(RedisSerializationContext.SerializationPair.fromSerializer(new StringRedisSerializer()))
            .serializeValuesWith(RedisSerializationContext.SerializationPair.fromSerializer(new GenericJackson2JsonRedisSerializer()));
        
        return RedisCacheManager.builder(factory)
            .cacheDefaults(config)
            .transactionAware()
            .build();
    }
}

4.2 数据库优化

针对文物查询做了以下优化：

1. 为分类和年代字段建立复合索引
2. 对大文本字段使用垂直分表
3. 配置MySQL连接池参数：

yaml复制spring:
  datasource:
    hikari:
      maximum-pool-size: 20
      minimum-idle: 5
      connection-timeout: 30000
      idle-timeout: 600000
      max-lifetime: 1800000

5. 部署与运维

5.1 容器化部署

我们使用Docker Compose编排服务：

yaml复制version: '3.8'

services:
  mysql:
    image: mysql:8.0
    environment:
      MYSQL_ROOT_PASSWORD: ${DB_PASSWORD}
    volumes:
      - mysql_data:/var/lib/mysql
    ports:
      - "3306:3306"
    
  redis:
    image: redis:6.2
    ports:
      - "6379:6379"
    
  backend:
    build: ./backend
    ports:
      - "8080:8080"
    depends_on:
      - mysql
      - redis
    
  frontend:
    build: ./frontend
    ports:
      - "80:80"

5.2 监控方案

1. Spring Boot Admin监控应用健康状态
2. Prometheus + Grafana监控系统指标
3. ELK收集和分析日志

关键监控指标包括：

• 接口响应时间
• 数据库查询性能
• JVM内存使用情况
• Redis命中率

6. 开发经验分享

6.1 踩坑记录

1. MyBatis-Plus逻辑删除问题：
   默认逻辑删除值需要与数据库设计一致，我们遇到的问题是前端传0/1，数据库用Y/N，解决方案：

   yaml复制mybatis-plus:
     global-config:
       db-config:
         logic-delete-value: 1
         logic-not-delete-value: 0
   

2. Vue3响应式丢失问题：
   使用reactive包装的对象在解构后会失去响应性，应该使用toRefs：

   javascript复制const state = reactive({ count: 0 })
   return { ...toRefs(state) } // 正确
   

6.2 实用技巧

1. 接口文档生成：
   使用Knife4j增强Swagger文档：

   java复制@Bean
   public Docket createRestApi() {
       return new Docket(DocumentationType.SWAGGER_2)
           .apiInfo(apiInfo())
           .select()
           .apis(RequestHandlerSelectors.basePackage("com.example.controller"))
           .paths(PathSelectors.any())
           .build();
   }
   

2. 前端性能优化：

   • 使用v-lazy实现图片懒加载
   • 路由懒加载组件
   • 使用keep-alive缓存页面状态

这个项目让我深刻体会到，一个好的系统不仅需要强大的技术支撑，更需要从用户角度出发的设计思考。比如我们在文物检索功能中，除了常规的关键词搜索，还增加了"相似文物推荐"功能，通过分析文物特征向量实现智能推荐，这个功能获得了用户的高度评价。