1. 项目概述与技术栈解析
这个流浪宠物管理系统采用前后端分离架构，后端使用SpringBoot框架搭建RESTful API服务，前端基于Vue3实现响应式界面，数据持久层采用MyBatis操作MySQL数据库。整套系统设计符合现代Web应用开发规范，具有以下技术特点：
- 前后端完全解耦，通过JSON格式进行数据交互
- 采用JWT进行身份认证和权限控制
- 使用MyBatis-Plus增强CRUD操作效率
- Vue3组合式API提升前端开发体验
- 基于Element Plus组件库构建管理后台UI
提示：系统默认使用MySQL 8.0作为数据库，建议生产环境配置主从复制确保数据安全。
1.1 核心功能模块
系统主要包含以下功能模块：
- 宠物信息管理：流浪宠物档案的CRUD操作
- 领养管理：领养申请、审核、状态跟踪
- 志愿者管理：志愿者信息登记与任务分配
- 捐赠管理：捐赠记录与物资追踪
- 数据统计：各类业务数据的可视化展示
2. 开发环境搭建
2.1 后端环境配置
- JDK 17+环境安装：
bash复制# 检查Java版本
java -version
- Maven项目依赖配置（pom.xml关键片段）：
xml复制<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>com.baomidou</groupId>
<artifactId>mybatis-plus-boot-starter</artifactId>
<version>3.5.3</version>
</dependency>
- 数据库连接配置（application.yml）：
yaml复制spring:
datasource:
url: jdbc:mysql://localhost:3306/pet_manage?useSSL=false
username: root
password: 123456
driver-class-name: com.mysql.cj.jdbc.Driver
2.2 前端环境配置
- Node.js 16+环境安装：
bash复制# 检查Node版本
node -v
- Vue CLI项目初始化：
bash复制npm install -g @vue/cli
vue create pet-manage-frontend
- 关键依赖安装：
bash复制npm install element-plus axios vue-router@4 pinia
3. 核心功能实现
3.1 宠物信息管理模块
后端Controller示例：
java复制@RestController
@RequestMapping("/api/pet")
public class PetController {
@Autowired
private PetService petService;
@GetMapping
public Result listPets(@RequestParam Map<String, Object> params) {
PageUtils page = petService.queryPage(params);
return Result.ok().put("page", page);
}
@PostMapping
public Result savePet(@RequestBody PetEntity pet) {
petService.save(pet);
return Result.ok();
}
}
前端Vue3组件关键代码：
javascript复制<script setup>
import { ref } from 'vue'
import { getPetList } from '@/api/pet'
const tableData = ref([])
const loading = ref(false)
const fetchData = async () => {
loading.value = true
try {
const res = await getPetList(params.value)
tableData.value = res.data.list
} finally {
loading.value = false
}
}
</script>
3.2 领养申请流程实现
状态机设计：
java复制public enum AdoptionStatus {
PENDING_REVIEW, // 待审核
APPROVED, // 已通过
REJECTED, // 已拒绝
COMPLETED // 已完成
}
审批逻辑实现：
java复制@Transactional
public void processAdoption(Long applicationId, Boolean approved) {
AdoptionEntity adoption = adoptionMapper.selectById(applicationId);
if(approved) {
adoption.setStatus(AdoptionStatus.APPROVED);
// 触发通知逻辑...
} else {
adoption.setStatus(AdoptionStatus.REJECTED);
}
adoptionMapper.updateById(adoption);
}
4. 系统部署方案
4.1 后端部署
- 打包SpringBoot应用：
bash复制mvn clean package -DskipTests
- Docker容器化部署：
dockerfile复制FROM openjdk:17-jdk-alpine
COPY target/pet-manage.jar app.jar
ENTRYPOINT ["java","-jar","/app.jar"]
4.2 前端部署
- 生产环境构建：
bash复制npm run build
- Nginx配置示例：
nginx复制server {
listen 80;
server_name pet.example.com;
location / {
root /var/www/pet-manage;
try_files $uri $uri/ /index.html;
}
location /api {
proxy_pass http://backend:8080;
}
}
5. 常见问题与解决方案
5.1 跨域问题处理
SpringBoot跨域配置：
java复制@Configuration
public class CorsConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("*")
.allowedMethods("*")
.maxAge(3600);
}
}
5.2 MyBatis常见问题
- 字段映射问题：
java复制@TableField(value = "create_time")
private LocalDateTime createTime;
- 批量插入优化：
java复制@Service
public class PetServiceImpl implements PetService {
@Transactional
public void batchInsert(List<PetEntity> pets) {
SqlSession session = sqlSessionTemplate.getSqlSessionFactory().openSession(ExecutorType.BATCH);
PetMapper mapper = session.getMapper(PetMapper.class);
pets.forEach(mapper::insert);
session.commit();
}
}
5.3 Vue3组合式API技巧
- 封装复用逻辑：
javascript复制// usePagination.js
export function usePagination(fetchMethod) {
const pagination = reactive({
current: 1,
size: 10,
total: 0
})
const handleSizeChange = (val) => {
pagination.size = val
fetchMethod()
}
return { pagination, handleSizeChange }
}
- 组件通信方案：
javascript复制// 父组件
const provideData = reactive({ userInfo })
provide('appContext', provideData)
// 子组件
const appContext = inject('appContext')
6. 性能优化实践
6.1 数据库优化
- 索引设计原则：
sql复制CREATE INDEX idx_pet_status ON t_pet(status);
CREATE INDEX idx_adoption_user ON t_adoption(user_id);
- 查询优化技巧：
java复制@Select("SELECT * FROM t_pet WHERE status = #{status} LIMIT #{limit}")
List<Pet> findPetsByStatus(@Param("status") Integer status, @Param("limit") Integer limit);
6.2 缓存策略
- Redis缓存配置：
java复制@Cacheable(value = "petCache", key = "#id")
public PetEntity getById(Long id) {
return petMapper.selectById(id);
}
- 缓存一致性方案：
java复制@CacheEvict(value = "petCache", key = "#pet.id")
public void updatePet(PetEntity pet) {
petMapper.updateById(pet);
}
7. 安全防护措施
7.1 认证与授权
JWT实现方案：
java复制public class JwtUtil {
private static final String SECRET = "your-secret-key";
public static String generateToken(UserDetails user) {
return Jwts.builder()
.setSubject(user.getUsername())
.setExpiration(new Date(System.currentTimeMillis() + 86400000))
.signWith(SignatureAlgorithm.HS512, SECRET)
.compact();
}
}
7.2 数据安全
- 密码加密存储：
java复制@Bean
public PasswordEncoder passwordEncoder() {
return new BCryptPasswordEncoder();
}
- SQL注入防护：
java复制@Select("SELECT * FROM t_user WHERE username = #{username}")
User findByUsername(@Param("username") String username);
8. 项目扩展方向
- 移动端适配：开发基于Uni-app的跨平台应用
- 智能推荐：基于用户行为的领养推荐算法
- 物联网集成：宠物定位追踪设备接入
- 数据分析：流浪宠物分布热力图生成
- 社交功能：领养者社区互动平台
实际开发中遇到的一个典型问题是Vue3响应式数据在表格组件中的更新延迟，解决方案是使用nextTick确保DOM更新：
javascript复制const handleEdit = async (row) => {
editForm.value = { ...row }
await nextTick()
dialogVisible.value = true
}
另一个实用技巧是在MyBatis中处理复杂查询时，使用@SelectProvider动态构建SQL：
java复制public String getPetsByConditions(Map<String, Object> params) {
return new SQL() {{
SELECT("*");
FROM("t_pet");
if (params.get("status") != null) {
WHERE("status = #{status}");
}
if (params.get("type") != null) {
WHERE("type = #{type}");
}
}}.toString();
}