董云舟1. 项目概述
这个基于SpringBoot2+Vue3+MyBatis-Plus+MySQL8.0的宠物猫认养系统，是一个典型的Java Web全栈项目。我在实际开发过程中发现，这类系统特别适合作为全栈开发的练手项目，因为它涵盖了从后端API到前端展示的完整流程，同时业务逻辑清晰但又不失复杂度。
系统核心功能包括猫咪信息管理、用户注册登录、认养申请处理、后台管理等模块。采用前后端分离架构，后端使用SpringBoot2提供RESTful API，前端用Vue3构建用户界面，数据库选用MySQL8.0，ORM框架则是MyBatis-Plus。这种技术组合在当前企业级开发中非常主流，掌握这套技术栈对Java开发者职业发展很有帮助。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 技术栈选型解析
2.1 为什么选择SpringBoot2
SpringBoot2作为后端框架的首选，主要考虑其快速开发特性和丰富的starter依赖。在实际项目中，我们特别依赖了以下几个关键特性：
- 自动配置：减少了大量XML配置，通过application.yml就能完成大部分配置
- 内嵌Tomcat：简化了部署流程，开发阶段直接运行main方法即可启动
- Actuator端点：方便监控应用健康状态
- 与MyBatis-Plus的无缝集成
注意：SpringBoot2.7.x是目前长期支持版本(LTS)，建议新项目直接使用这个版本而非最新的3.x系列，以避免一些兼容性问题。
2.2 Vue3的优势与应用
前端选择Vue3而非React或Angular，主要基于以下考量：
- 组合式API：相比Vue2的选项式API，组合式API更适合复杂组件的逻辑组织
- 更好的TypeScript支持：这对大型项目维护特别重要
- 性能提升：编译时优化使打包体积更小，运行更快
在项目中，我们特别利用了Vue3的这些新特性：
- 使用
<script setup>语法糖简化组件代码 - 采用Pinia替代Vuex进行状态管理
- 使用Composition API封装可复用的业务逻辑
2.3 MyBatis-Plus的实际价值
MyBatis-Plus在标准MyBatis基础上提供了诸多便利：
- 通用Mapper：基本CRUD操作无需编写SQL
- 强大的条件构造器：简化复杂查询编写
- 代码生成器：一键生成Entity、Mapper、Service等基础代码
在宠物猫认养系统中，我们主要用到了这些功能：
java复制// 示例：使用Lambda表达式构建查询条件
List<Cat> cats = catMapper.selectList(Wrappers.<Cat>lambdaQuery()
.eq(Cat::getStatus, CatStatus.AVAILABLE)
.between(Cat::getAge, 1, 3)
.orderByAsc(Cat::getCreateTime));
2.4 MySQL8.0的关键特性
选择MySQL8.0而非5.7版本，主要利用了以下新特性：
- 窗口函数：简化复杂报表查询
- CTE(Common Table Expressions)：提高SQL可读性
- JSON增强：更好地处理半结构化数据
- 性能提升：特别是高并发场景下的表现
在数据库设计时，我们特别注意：
- 使用utf8mb4字符集以支持完整Unicode（包括emoji）
- 合理设置索引，特别是对经常查询的字段如猫咪品种、年龄等
- 利用JSON类型存储猫咪的额外属性（如花色、性格特点等）
3. 系统核心功能实现
3.1 猫咪信息管理模块
这是系统的核心模块，主要功能包括猫咪信息的CRUD、图片上传、状态管理等。技术实现上有几个关键点：
- 图片处理：
- 使用阿里云OSS存储猫咪图片
- 前端实现图片裁剪和压缩上传
- 后端生成不同尺寸的缩略图
- 信息展示：
- 实现分页查询与筛选功能
- 支持多种排序方式（最新、最受欢迎等）
- 使用Elasticsearch实现全文检索（可选）
- 状态流转：
mermaid复制stateDiagram
[*] --> 待领养
待领养 --> 已被申请
已被申请 --> 审核中
审核中 --> 已领养
审核中 --> 待领养(审核不通过)
已领养 --> [*](领养结束)
3.2 用户认证与授权
采用JWT实现无状态认证，关键实现细节：
- 安全考虑：
- 使用HTTPS传输
- JWT设置合理过期时间（如2小时）
- 实现refresh token机制
- 权限控制：
- 基于RBAC模型设计权限系统
- 使用Spring Security实现方法级权限控制
- 前端根据权限动态渲染菜单
- 关键代码示例（Spring Security配置）：
java复制@Configuration
@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {
@Override
protected void configure(HttpSecurity http) throws Exception {
http.csrf().disable()
.authorizeRequests()
.antMatchers("/api/auth/**").permitAll()
.antMatchers("/api/admin/**").hasRole("ADMIN")
.anyRequest().authenticated()
.and()
.addFilter(new JwtAuthenticationFilter(authenticationManager()))
.addFilter(new JwtAuthorizationFilter(authenticationManager()));
}
}
3.3 认养申请流程
认养流程是业务核心，我们实现了完整的申请-审核-签约流程：
- 申请提交：
- 前端表单验证
- 防止重复提交
- 自动发送通知邮件
- 后台审核：
- 审核记录留痕
- 支持批量操作
- 审核结果通知
- 电子签约：
- 集成第三方电子签名服务
- 合同模板管理
- 签约记录存档
4. 开发环境搭建与配置
4.1 后端开发环境
- JDK选择：
- 推荐使用Amazon Corretto 11
- 配置JVM参数（开发环境可适当调大内存）
- IDE配置：
- IntelliJ IDEA安装Lombok插件
- 配置Live Template提高编码效率
- 推荐插件：MyBatisX, Alibaba Java Coding Guidelines
- 应用配置：
yaml复制spring:
datasource:
url: jdbc:mysql://localhost:3306/cat_adoption?useSSL=false&serverTimezone=Asia/Shanghai
username: root
password: 123456
driver-class-name: com.mysql.cj.jdbc.Driver
jackson:
date-format: yyyy-MM-dd HH:mm:ss
time-zone: GMT+8
4.2 前端开发环境
- Node.js版本：
- 推荐使用16.x LTS版本
- 配置npm/yarn镜像源
- VSCode推荐插件：
- Volar（Vue3官方推荐）
- ESLint
- Prettier
- Vue VSCode Snippets
- 项目结构：
code复制src/
├── api/ # API请求封装
├── assets/ # 静态资源
├── components/ # 公共组件
├── composables/ # 组合式函数
├── router/ # 路由配置
├── stores/ # Pinia状态管理
├── styles/ # 全局样式
├── utils/ # 工具函数
└── views/ # 页面组件
5. 部署方案与性能优化
5.1 后端部署
- 打包：
- 使用SpringBoot的Maven插件生成可执行jar
- 配置prod环境的application-prod.yml
- 服务器要求：
- 至少2核4G配置
- 推荐使用Docker部署
- 配置合理的JVM参数
- Dockerfile示例：
dockerfile复制FROM amazoncorretto:11
VOLUME /tmp
COPY target/cat-adoption-backend-0.0.1-SNAPSHOT.jar app.jar
ENTRYPOINT ["java","-jar","/app.jar"]
5.2 前端部署
- 构建优化：
- 配置vite.config.js中的build选项
- 启用gzip压缩
- 使用CDN加载第三方库
- Nginx配置要点：
code复制server {
listen 80;
server_name yourdomain.com;
gzip on;
gzip_types text/plain application/xml application/javascript;
location / {
root /usr/share/nginx/html;
try_files $uri $uri/ /index.html;
}
location /api {
proxy_pass http://backend:8080;
}
}
5.3 性能优化技巧
- 数据库层面：
- 合理设计索引
- 使用连接池（HikariCP）
- 慢查询监控
- 缓存策略：
- 使用Redis缓存热点数据
- 实现多级缓存
- 合理设置缓存过期时间
- 前端优化：
- 组件懒加载
- 路由懒加载
- 图片懒加载
6. 常见问题与解决方案
6.1 跨域问题
开发阶段常见跨域问题，解决方案：
- 后端配置：
java复制@Configuration
public class CorsConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("*")
.allowedMethods("*")
.allowedHeaders("*");
}
}
- 前端代理配置（vite）：
javascript复制export default defineConfig({
server: {
proxy: {
'/api': {
target: 'http://localhost:8080',
changeOrigin: true,
rewrite: path => path.replace(/^\/api/, '')
}
}
}
})
6.2 MyBatis-Plus主键策略
常见的主键生成问题：
- 自增主键配置：
java复制@TableId(type = IdType.AUTO)
private Long id;
- 分布式ID生成：
java复制@TableId(type = IdType.ASSIGN_ID)
private Long id;
6.3 Vue3组件通信
几种常用的组件通信方式：
- Props/Emits：父子组件通信
- provide/inject：跨层级组件通信
- Pinia：全局状态管理
- Event Bus：使用mitt库实现
6.4 日期时间处理
前后端日期处理的常见坑：
- 后端统一返回字符串：
java复制@JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")
private LocalDateTime createTime;
- 前端使用day.js处理：
javascript复制import dayjs from 'dayjs'
const formatted = dayjs(dateStr).format('YYYY-MM-DD HH:mm:ss')
7. 项目扩展方向
这个基础项目可以进一步扩展：
- 移动端适配：
- 开发微信小程序版本
- 使用uniapp跨平台方案
- 智能推荐：
- 基于用户行为推荐合适猫咪
- 使用协同过滤算法
- 社区功能：
- 添加养猫经验分享
- 猫咪成长记录
- 物联网集成：
- 智能猫窝数据接入
- 健康监测设备对接
在实际开发中，我发现最难的不是技术实现，而是业务逻辑的合理抽象和模块划分。建议新手在开发类似项目时，先花足够时间设计数据库和API接口，这能避免后期的很多重构工作。另外，一定要编写单元测试和接口测试，特别是核心业务逻辑，这能为项目维护节省大量时间。