SpringBoot+Vue宠物成长记录平台开发实践

1. 项目概述：基于SpringBoot的宠物成长记录平台

作为一名拥有10年Java全栈开发经验的工程师，我最近完成了一个基于SpringBoot的宠物成长记录平台项目。这个系统采用B/S架构，整合了Vue.js前端框架和MySQL数据库，为宠物主人提供了一个全方位的数字化管理工具。

在实际开发过程中，我发现宠物成长记录这类生活服务类应用存在几个关键痛点：数据分散难管理、健康指标缺乏系统跟踪、养宠经验难以沉淀。这个平台正是针对这些问题设计的解决方案，它不仅能记录宠物的日常活动、饮食和健康数据，还能通过数据分析提供养护建议。

2. 系统架构设计

2.1 技术选型与架构设计

系统采用经典的三层架构设计，前后端分离开发模式。技术栈选择上，我基于以下几个考量：

1. 后端框架：SpringBoot 2.7.x

   • 自动配置简化了初始搭建工作
   • 内嵌Tomcat便于部署
   • 丰富的starter依赖简化了集成

2. 前端框架：Vue 3.x + Element Plus

   • 组件化开发提升复用性
   • 响应式设计适配多端
   • 丰富的UI组件库加速开发

3. 持久层：MyBatis-Plus 3.5.x

   • 简化了CRUD操作
   • 内置分页插件
   • 代码生成器提升开发效率

4. 数据库：MySQL 8.0

   • 成熟稳定的关系型数据库
   • 良好的社区支持
   • 完善的ACID特性

技术选型心得：在实际项目中，技术栈的版本匹配非常重要。我建议使用SpringBoot 2.7.x而非最新的3.x系列，因为后者对Java版本要求较高（需要Java17+），而大多数学校环境仍在使用Java8或11。

2.2 数据库设计

数据库设计遵循三范式原则，核心表包括：

1. 用户表(user)：存储用户基本信息
2. 宠物表(pet)：记录宠物档案
3. 成长记录表(growth_record)：跟踪成长指标
4. 健康记录表(health_record)：管理医疗信息
5. 饮食记录表(diet_record)：记录喂养情况

sql复制CREATE TABLE `pet` (
  `id` bigint NOT NULL AUTO_INCREMENT,
  `user_id` bigint NOT NULL,
  `name` varchar(50) NOT NULL,
  `species` varchar(20) NOT NULL,
  `breed` varchar(50) DEFAULT NULL,
  `birthday` date DEFAULT NULL,
  `gender` tinyint DEFAULT '0',
  `weight` decimal(5,2) DEFAULT NULL,
  `avatar` varchar(255) DEFAULT NULL,
  `create_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`),
  KEY `idx_user_id` (`user_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

数据库设计时特别注意了以下几点：

• 所有表都添加了create_time和update_time字段用于审计
• 为常用查询字段添加了索引
• 使用utf8mb4字符集支持emoji
• 数值类型精确到小数点后两位

3. 核心功能实现

3.1 用户认证模块

系统采用JWT(JSON Web Token)进行认证，结合Spring Security实现权限控制。关键实现点：

1. 密码加密：使用BCryptPasswordEncoder，避免明文存储
2. Token生成：包含用户ID和角色信息
3. 拦截器配置：验证Token有效性
4. 权限注解：@PreAuthorize控制方法级访问

java复制@Configuration
@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {
    
    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http.csrf().disable()
            .sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS)
            .and()
            .authorizeRequests()
            .antMatchers("/api/auth/**").permitAll()
            .anyRequest().authenticated()
            .and()
            .addFilter(new JwtAuthenticationFilter(authenticationManager()))
            .addFilter(new JwtAuthorizationFilter(authenticationManager()));
    }
    
    @Bean
    public PasswordEncoder passwordEncoder() {
        return new BCryptPasswordEncoder();
    }
}

安全提示：开发过程中常见的安全漏洞包括SQL注入、XSS攻击等。我建议：

1. 始终使用预编译SQL（MyBatis的#{}语法）
2. 对用户输入进行转义处理
3. 限制上传文件类型
4. 定期更新依赖库版本

3.2 宠物成长记录功能

成长记录是系统的核心功能，主要包括：

1. 数据录入：支持多种数据类型（文本、数字、图片）
2. 时间轴展示：按时间顺序呈现成长历程
3. 统计分析：生成体重变化曲线等图表
4. 提醒功能：疫苗接种、驱虫等提醒

前端采用ECharts实现数据可视化：

javascript复制// 体重变化曲线示例
function initWeightChart(data) {
  const chart = echarts.init(document.getElementById('weight-chart'));
  const option = {
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      data: data.map(item => item.date)
    },
    yAxis: {
      type: 'value',
      name: '体重(kg)'
    },
    series: [{
      data: data.map(item => item.weight),
      type: 'line',
      smooth: true
    }]
  };
  chart.setOption(option);
}

4. 系统部署与优化

4.1 部署方案

项目支持多种部署方式：

1. 传统部署：

   • 打包为war部署到Tomcat
   • 前端静态资源部署到Nginx

2. Docker部署：

   dockerfile复制FROM openjdk:11-jre
   COPY target/pet-growth.jar /app.jar
   EXPOSE 8080
   ENTRYPOINT ["java","-jar","/app.jar"]
   

3. 前后端分离部署：

   • 后端API独立部署
   • 前端使用Vue CLI打包后部署到CDN

4.2 性能优化措施

在实际部署中，我采取了以下优化措施：

1. 缓存策略：

   • 使用Redis缓存热点数据
   • 配置Spring Cache注解

2. 数据库优化：

   • 添加适当的索引
   • 对大表进行分表
   • 使用连接池（HikariCP）

3. 前端优化：

   • 组件懒加载
   • 路由懒加载
   • 图片压缩

5. 常见问题与解决方案

5.1 开发环境问题

问题1：SpringBoot与MyBatis-Plus版本冲突

解决方案：保持版本兼容性，建议使用：

• SpringBoot 2.7.18
• MyBatis-Plus 3.5.3.1

问题2：Vue axios跨域问题

解决方案：配置代理或后端CORS：

java复制@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("*")
                .allowedHeaders("*");
    }
}

5.2 生产环境问题

问题1：图片上传失败

排查步骤：

1. 检查存储目录权限
2. 确认Nginx配置了client_max_body_size
3. 验证文件类型过滤是否过严

问题2：数据库连接泄漏

解决方案：

1. 使用Druid监控SQL执行
2. 配置合理的连接超时时间
3. 添加连接泄漏检测

6. 项目扩展方向

基于现有系统，可以考虑以下扩展方向：

1. 移动端适配：开发微信小程序或React Native应用
2. AI健康分析：集成机器学习模型分析宠物健康状态
3. 社交功能：添加宠物社区分享功能
4. 电商对接：连接宠物用品商城

在实际开发中，我特别推荐使用Git进行版本控制，并建立规范的分支管理策略。例如：

• master：生产环境代码
• develop：开发分支
• feature/xxx：功能开发分支
• hotfix：紧急修复分支

这个宠物成长记录平台项目从技术实现到业务逻辑都具有一定的代表性，涵盖了JavaWeb开发的各个环节。在开发过程中，我最大的体会是：良好的架构设计比编码更重要，合理的分层和模块划分能显著降低后期维护成本。