某外卖员1. 项目概述
这个宠物商城领养网站项目采用了SpringBoot+Vue的前后端分离架构，旨在打造一个功能完善的线上宠物交易与领养平台。作为一名参与过多个电商系统开发的工程师，我发现这类项目最核心的价值在于解决了传统宠物交易中的三个痛点：信息不对称、流程不透明和后续服务缺失。
平台前端使用Vue3+Element Plus构建响应式界面，后端采用SpringBoot2.7+MyBatis Plus技术栈，数据库选用MySQL8.0并配合Redis缓存。特别值得一提的是，我们针对宠物行业的特殊性，设计了独有的"领养人资质审核"模块和"宠物健康档案"系统，这在常规电商系统中并不常见。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 技术架构设计
2.1 前端技术选型
选择Vue3作为前端框架主要基于以下考虑：
- Composition API更适合复杂业务逻辑组织
- 更好的TypeScript支持
- 更小的打包体积
我们使用的主要技术组件包括：
- Vue-Router4：处理前端路由，实现动态路由权限控制
- Pinia：状态管理，替代传统的Vuex
- Axios：封装了带Token验证的HTTP客户端
- Element Plus：UI组件库，配合SCSS定制主题
提示：在宠物图片展示组件中，我们特别优化了懒加载策略，当用户滚动到可视区域时才加载高清图片，首屏加载时间减少了40%。
2.2 后端技术栈
SpringBoot的选型考虑了企业级应用的需求：
java复制// 典型控制器示例
@RestController
@RequestMapping("/api/pets")
@RequiredArgsConstructor
public class PetController {
private final PetService petService;
@GetMapping
public Result<List<PetVO>> listPets(@Valid PetQueryDTO dto) {
return Result.success(petService.queryPets(dto));
}
}
关键后端组件：
- Spring Security：JWT身份认证
- MyBatis Plus：增强的ORM框架
- Hutool：工具类库
- Knife4j：API文档生成
- Redis：缓存热点数据
数据库设计特别注意了宠物特有的字段：
sql复制CREATE TABLE `pet` (
`id` bigint NOT NULL AUTO_INCREMENT,
`name` varchar(50) NOT NULL,
`category_id` int NOT NULL COMMENT '猫/狗/其他',
`breed` varchar(100) DEFAULT NULL COMMENT '品种',
`age` decimal(5,1) DEFAULT NULL COMMENT '年龄(年)',
`health_status` tinyint DEFAULT '1' COMMENT '健康状态1-5',
`vaccination` json DEFAULT NULL COMMENT '疫苗接种记录',
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
3. 核心功能实现
3.1 宠物信息管理
采用富文本编辑器（WangEditor）处理宠物详情描述，支持图文混排。关键实现点：
- 图片上传单独封装组件：
vue复制<template>
<el-upload
action="/api/upload"
:before-upload="checkFile"
@success="handleSuccess">
<el-button type="primary">上传照片</el-button>
</el-upload>
</template>
<script setup>
const checkFile = (file) => {
const isImage = file.type.startsWith('image/')
if(!isImage) {
ElMessage.error('请上传图片文件')
return false
}
return true
}
</script>
- 健康状态可视化展示：
javascript复制// 使用ECharts生成健康雷达图
const initHealthChart = () => {
const chart = echarts.init(document.getElementById('health-chart'))
chart.setOption({
radar: {
indicator: [
{ name: '饮食', max: 5 },
{ name: '活力', max: 5 },
{ name: '毛发', max: 5 }
]
},
series: [{
data: [{ value: [4, 3, 5] }]
}]
})
}
3.2 领养申请流程
独创的三阶段审核机制：
- 基础信息审核（自动）
- 居住环境评估（人工）
- 最终面谈确认
状态机设计：
java复制public enum AdoptionStatus {
INIT(0, "待审核"),
BASIC_PASS(1, "基础审核通过"),
ENV_PASS(2, "环境评估通过"),
FINAL_APPROVED(3, "领养成功"),
REJECTED(-1, "已拒绝");
// 状态转换校验逻辑
public static boolean canTransfer(AdoptionStatus from, AdoptionStatus to) {
// 省略具体实现
}
}
4. 特色功能开发
4.1 智能匹配系统
基于用户填写的问卷结果，推荐最适合的宠物：
- 使用Elasticsearch实现多条件搜索
- 权重计算公式：
code复制匹配度 = 0.4*居住环境分 + 0.3*养宠经验分 + 0.2*时间投入分 + 0.1*偏好分
4.2 宠物健康档案
区块链存证方案：
- 疫苗接种记录上链
- 使用Hyperledger Fabric私有链
- 关键数据结构：
go复制type HealthRecord struct {
PetID string `json:"petId"`
Vaccine string `json:"vaccine"`
Date string `json:"date"`
Hospital string `json:"hospital"`
Doctor string `json:"doctor"`
TxHash string `json:"txHash"`
}
5. 性能优化实践
5.1 缓存策略
采用多级缓存架构：
- 本地缓存（Caffeine）：高频访问的基础数据
- Redis集群：热点业务数据
- MySQL：持久化存储
缓存击穿解决方案：
java复制public PetDetail getPetDetail(Long id) {
String key = "pet:" + id;
// 1. 先查缓存
PetDetail detail = redisTemplate.opsForValue().get(key);
if(detail != null) {
return detail;
}
// 2. 获取分布式锁
RLock lock = redissonClient.getLock("lock:pet:"+id);
try {
lock.lock();
// 3. 二次检查
detail = redisTemplate.opsForValue().get(key);
if(detail != null) {
return detail;
}
// 4. 查数据库
detail = petMapper.selectDetailById(id);
if(detail != null) {
redisTemplate.opsForValue().set(key, detail, 30, TimeUnit.MINUTES);
}
} finally {
lock.unlock();
}
return detail;
}
5.2 图片处理优化
- 使用WebP格式替代JPEG，体积减少30%
- 实现渐进式加载：
javascript复制const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if(entry.isIntersecting) {
const img = entry.target
img.src = img.dataset.src
observer.unobserve(img)
}
})
})
document.querySelectorAll('.lazy-img').forEach(img => {
observer.observe(img)
})
6. 安全防护措施
6.1 防XSS攻击
- 前端使用DOMPurify过滤富文本
- 后端统一处理：
java复制@ControllerAdvice
public class XssAdvice implements ResponseBodyAdvice<Object> {
@Override
public Object beforeBodyWrite(Object body, MethodParameter returnType,
MediaType selectedContentType, Class<? extends HttpMessageConverter<?>> selectedConverterType,
ServerHttpRequest request, ServerHttpResponse response) {
// 使用Antisamy进行XSS过滤
return XssFilterUtils.filter(body);
}
}
6.2 接口防刷
采用令牌桶算法限流：
java复制@RateLimiter(value = 10, key = "#userId")
@PostMapping("/adoption/apply")
public Result applyAdoption(@RequestBody AdoptionApplyDTO dto) {
// 业务逻辑
}
7. 部署方案
7.1 CI/CD流程
GitLab Runner自动化部署：
yaml复制stages:
- build
- deploy
build-frontend:
stage: build
script:
- npm install
- npm run build
artifacts:
paths:
- dist/
deploy-prod:
stage: deploy
script:
- scp -r dist/* user@server:/var/www/petmall
- ssh user@server "systemctl restart nginx"
7.2 监控体系
- Prometheus + Grafana监控JVM指标
- ELK收集业务日志
- 关键监控项：
- 接口响应时间P99 < 500ms
- 错误率 < 0.5%
- 系统负载 < 70%
8. 踩坑实录
8.1 Vue路由缓存问题
发现路由切换时组件状态异常，解决方案：
vue复制<router-view v-slot="{ Component }">
<keep-alive :include="['PetList']">
<component :is="Component" :key="$route.fullPath" />
</keep-alive>
</router-view>
8.2 MyBatis批量插入性能
优化前：逐条插入，1000条数据需要8s
优化后：
xml复制<insert id="batchInsert" useGeneratedKeys="true" keyProperty="id">
INSERT INTO pet (...) VALUES
<foreach collection="list" item="item" separator=",">
(#{item.name}, #{item.age}, ...)
</foreach>
</insert>
性能提升至0.5s
9. 扩展方向
- 宠物社交功能：添加动态分享
- 智能硬件对接：连接宠物智能设备
- AR试养：通过手机摄像头模拟宠物在家中的效果
这个项目让我深刻体会到，特定垂直领域的电商系统需要深入理解行业特性。比如宠物领养必须考虑动物福利问题，这比普通商品交易复杂得多。我们在后续迭代中计划引入宠物行为评估系统，帮助领养人更好地了解宠物性格特点。