就是玩具-付可1. 项目概述：前后端分离宠物领养系统的技术架构
这个宠物领养系统采用了典型的现代化Web应用架构，前端使用Vue.js框架构建用户界面，后端基于SpringBoot提供RESTful API服务，数据持久层采用MyBatis操作MySQL数据库。这种架构选择在当前互联网产品开发中具有显著优势：前后端完全解耦，允许团队并行开发；Vue的响应式特性能够提供流畅的用户体验；SpringBoot的约定优于配置原则大幅减少了样板代码；MyBatis的灵活性则便于处理复杂SQL查询。
系统核心功能模块包括：
- 宠物信息管理（CRUD操作、分类筛选、搜索）
- 用户认证与权限控制（注册/登录、角色区分）
- 领养申请流程（申请提交、状态跟踪）
- 后台管理系统（数据统计、内容审核）
- 消息通知系统（申请状态变更提醒）
提示：在实际开发中，建议将图片等静态资源存储在OSS等专业存储服务而非数据库，可显著提升系统性能并降低服务器负载。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 开发环境准备与工具链配置
2.1 后端开发环境搭建
对于SpringBoot后端，需要配置以下环境：
- JDK 1.8+（推荐Amazon Corretto 11）
- Maven 3.6+（依赖管理工具）
- IntelliJ IDEA（或Eclipse with Spring Tools插件）
- MySQL 8.0（配置字符集为utf8mb4以支持emoji）
关键Maven依赖包括：
xml复制<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.mybatis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter</artifactId>
<version>2.2.0</version>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<scope>runtime</scope>
</dependency>
2.2 前端开发环境配置
Vue前端开发需要：
- Node.js 14+（包含npm）
- Vue CLI 4.5+
- VS Code（推荐安装Vetur、ESLint插件）
创建Vue项目的基本命令：
bash复制npm install -g @vue/cli
vue create pet-adoption-frontend
cd pet-adoption-frontend
npm install axios vue-router vuex --save
2.3 数据库设计与初始化
宠物表核心字段设计示例：
sql复制CREATE TABLE `pet` (
`id` bigint NOT NULL AUTO_INCREMENT,
`name` varchar(50) NOT NULL,
`category` enum('DOG','CAT','OTHER') NOT NULL,
`age` int DEFAULT NULL,
`gender` enum('MALE','FEMALE') DEFAULT NULL,
`health_status` varchar(20) DEFAULT NULL,
`description` text,
`adoption_status` enum('AVAILABLE','PENDING','ADOPTED') DEFAULT 'AVAILABLE',
`create_time` datetime DEFAULT CURRENT_TIMESTAMP,
`update_time` datetime DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
3. 核心功能模块实现细节
3.1 前后端数据交互设计
采用RESTful API规范设计接口，示例宠物列表接口：
- 请求：GET /api/pets?page=1&size=10&category=DOG
- 响应：
json复制{
"code": 200,
"data": {
"list": [
{
"id": 1,
"name": "豆豆",
"category": "DOG",
"age": 2,
"mainPhoto": "/photos/1.jpg"
}
],
"total": 15
}
}
SpringBoot控制器示例：
java复制@RestController
@RequestMapping("/api/pets")
public class PetController {
@Autowired
private PetService petService;
@GetMapping
public Result<PageInfo<PetVO>> listPets(
@RequestParam(defaultValue = "1") Integer page,
@RequestParam(defaultValue = "10") Integer size,
@RequestParam(required = false) String category) {
PetQuery query = new PetQuery();
query.setCategory(category);
return Result.success(petService.queryPets(query, page, size));
}
}
Vue前端调用示例：
javascript复制// store/modules/pet.js
const actions = {
async fetchPetList({ commit }, params) {
try {
const res = await axios.get('/api/pets', { params })
commit('SET_PET_LIST', res.data.data.list)
return res.data.data
} catch (error) {
throw error.response.data
}
}
}
3.2 文件上传与存储方案
对于宠物图片上传，推荐两种实现方案：
方案一：Base64编码直接上传
javascript复制// Vue组件
handleFileChange(e) {
const file = e.target.files[0]
const reader = new FileReader()
reader.onload = () => {
this.formData.photo = reader.result.split(',')[1]
}
reader.readAsDataURL(file)
}
方案二：分片上传（适合大文件）
java复制// SpringBoot控制器
@PostMapping("/upload")
public Result<String> upload(@RequestParam MultipartFile file) {
if (file.isEmpty()) {
return Result.error("请选择文件");
}
String filename = UUID.randomUUID() +
file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf("."));
Path path = Paths.get(uploadPath, filename);
Files.copy(file.getInputStream(), path, StandardCopyOption.REPLACE_EXISTING);
return Result.success("/uploads/" + filename);
}
注意：生产环境务必添加文件类型校验（检查Magic Number而非扩展名）、大小限制和病毒扫描，避免安全风险。
4. 系统安全与性能优化
4.1 安全防护措施
- 认证与授权：采用JWT实现无状态认证
java复制// Spring Security配置
@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()));
}
- SQL注入防护：MyBatis全部使用#{}参数绑定
xml复制<!-- 错误示范：存在SQL注入风险 -->
<select id="findByName" resultType="Pet">
SELECT * FROM pet WHERE name LIKE '%${name}%'
</select>
<!-- 正确做法 -->
<select id="findByName" resultType="Pet">
SELECT * FROM pet WHERE name LIKE CONCAT('%', #{name}, '%')
</select>
- XSS防护：前端使用vue-sanitize过滤HTML输入
4.2 性能优化策略
数据库层面：
- 为常用查询字段添加索引（如category, adoption_status）
- 使用连接池（HikariCP默认已集成）
- 复杂查询考虑添加缓存（Redis）
后端层面：
- 启用Gzip压缩
properties复制# application.properties
server.compression.enabled=true
server.compression.mime-types=text/html,text/xml,text/plain,text/css,text/javascript,application/javascript,application/json
前端层面：
- 路由懒加载
javascript复制const PetDetail = () => import('./views/PetDetail.vue')
- 图片懒加载（使用vue-lazyload）
- API请求节流（特别是滚动加载场景）
5. 系统部署实战指南
5.1 后端部署方案
传统JAR部署：
bash复制mvn clean package
java -jar target/pet-adoption-backend.jar --spring.profiles.active=prod
Docker化部署：
dockerfile复制FROM openjdk:11-jre
ARG JAR_FILE=target/*.jar
COPY ${JAR_FILE} app.jar
ENTRYPOINT ["java","-jar","/app.jar"]
5.2 前端部署方案
- 构建生产环境代码：
bash复制npm run build
- Nginx配置示例：
nginx复制server {
listen 80;
server_name yourdomain.com;
location / {
root /var/www/pet-adoption-frontend/dist;
try_files $uri $uri/ /index.html;
}
location /api {
proxy_pass http://localhost:8080;
proxy_set_header Host $host;
}
}
5.3 数据库迁移与备份
Flyway数据库迁移：
- 添加依赖：
xml复制<dependency>
<groupId>org.flywaydb</groupId>
<artifactId>flyway-core</artifactId>
</dependency>
- 创建迁移脚本（src/main/resources/db/migration/V1__Initial_schema.sql）
定时备份脚本：
bash复制#!/bin/bash
DATE=$(date +%Y%m%d%H%M)
mysqldump -u root -p pet_adoption > /backups/pet_adoption_$DATE.sql
find /backups -type f -mtime +7 -delete
6. 常见问题排查与调试技巧
6.1 跨域问题解决方案
开发环境常见跨域错误处理：
java复制@Configuration
public class CorsConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("*")
.allowedMethods("*")
.allowedHeaders("*");
}
}
生产环境建议通过Nginx反向代理解决跨域，避免直接开放所有来源。
6.2 MyBatis日志打印配置
查看实际执行的SQL语句：
properties复制# application.properties
logging.level.org.mybatis=debug
logging.level.com.yourpackage.mapper=debug
或者使用P6Spy进行SQL拦截：
xml复制<dependency>
<groupId>p6spy</groupId>
<artifactId>p6spy</artifactId>
<version>3.9.1</version>
</dependency>
6.3 Vue路由模式问题
处理HTML5 History模式下的404问题：
javascript复制const router = new VueRouter({
mode: 'history',
routes: [...]
})
对应Nginx配置：
nginx复制location / {
try_files $uri $uri/ /index.html;
}
7. 项目扩展与进阶方向
7.1 微服务化改造
当系统规模扩大时，可考虑：
- 将用户服务、宠物服务、申请服务拆分为独立微服务
- 使用Spring Cloud Alibaba体系：
- Nacos服务发现
- Sentinel流量控制
- Seata分布式事务
7.2 大数据分析扩展
利用ELK Stack实现：
- 收集用户行为日志
- 分析热门宠物特征
- 预测领养成功率
7.3 移动端适配方案
- 响应式布局：使用Vuetify或Element Plus的移动端适配组件
- PWA支持：通过workbox实现离线访问
- 原生封装：使用Capacitor将Web应用打包为原生APP
在实际开发中，我特别推荐使用Docker Compose来管理开发环境，可以一键启动MySQL、Redis等依赖服务。另外，对于宠物图片处理，可以考虑集成Thumbnailator库自动生成缩略图，这对移动端用户尤其友好。