SpringBoot 小程序 Vue2 MySQLNEW

宠物领养小程序

Name: 宠物领养小程序
Brand: AI源码
SKU: pet-adoption-springboot
Price: 300 CNY
Availability: InStock

这是一个完整的宠物领养平台系统，包含微信小程序端和 PC 管理后台。系统实现了宠物信息发布、领养申请、宠物圈社交、科普知识等核心功能，采用前后端分离架构，适合作为微信小程序全栈开发学习项目或计算机设计参考。

评分:4.8/5.0

销量:22

发布:2026/6/24

难度:L2 进阶级

💬 联系咨询观看视频介绍

✓永久使用权限

✓免费更新维护

✓技术支持服务

项目封面

项目说明

宠物领养小程序

项目简介

这是一个完整的宠物领养平台系统，包含微信小程序端和 PC 管理后台。系统实现了宠物信息发布、领养申请、宠物圈社交、科普知识等核心功能，采用前后端分离架构，适合作为微信小程序全栈开发学习项目或计算机设计参考。

当前版本后端已升级为 Spring Boot（Java），替代原 Node.js + Express 实现；小程序端（min）与管理后台（admin）保持不变，通过 RESTful API 与后端通信。

技术栈

后端技术（Spring Boot）

技术	版本/说明
运行环境	JDK 1.8+
框架	Spring Boot 2.7.18
ORM	Spring Data JPA / Hibernate
数据库	MySQL 5.7+ / 8.0
数据库驱动	mysql-connector-java 8.0.33
身份认证	JWT（jjwt 0.9.1）
微信能力	weixin-java-miniapp 4.5.0（binarywang）
构建工具	Maven
工具库	Lombok、Apache Commons Lang3

管理后台技术

技术	版本/说明
前端框架	Vue 2.6.11
UI 组件库	Element UI 2.15.6
路由管理	Vue Router 3.2.0
状态管理	Vuex 3.4.0
HTTP 请求	Axios 0.24.0
图表库	ECharts 5.3.1
富文本编辑器	Quill 1.3.7
CSS 预处理器	Less

小程序端技术

技术	版本/说明
开发框架	微信小程序原生框架
开发语言	JavaScript (ES6+)
样式语言	WXSS
模板语言	WXML
富文本解析	wxParse

项目特点

前后端分离：后端提供 RESTful API，前端独立开发部署
分层架构：Controller → Service → Repository → Entity，结构清晰
完整业务流程：涵盖宠物发布、领养申请、审核管理等完整流程
社交功能：宠物圈动态发布、收藏、评论
多角色支持：普通用户、管理员角色区分（role=99 为管理员）
微信登录：集成微信小程序 code2Session 登录
数据可视化：管理后台集成 ECharts 图表展示
富文本支持：支持富文本内容编辑和展示

功能模块

小程序端功能

1. 首页模块 (`pages/index`)

轮播图展示
宠物分类导航
热门宠物推荐
最新宠物展示
搜索功能入口

2. 宠物分类模块 (`pages/cate`)

按分类浏览宠物（狗狗、猫咪、其他）
宠物列表展示
筛选和排序功能

3. 宠物详情模块 (`pages/detail`)

宠物图片轮播展示
宠物基本信息（名称、年龄、价格）
健康状态（疫苗、绝育、驱虫）
发布者联系方式
收藏功能
评论功能
领养申请入口

4. 发布模块 (`pages/publish`)

发布宠物领养信息
上传宠物图片
填写宠物详细信息
我的发布列表管理

5. 宠物圈模块 (`pages/shequ`)

动态列表展示（图片/视频）
发布动态
收藏、评论
动态详情查看

6. 领养订单模块

领养申请提交 (pages/order_comfirm)
我的领养订单列表 (pages/order_list)
订单详情查看 (pages/order_detail)
我发布的宠物订单管理 (pages/publish_order_list)

7. 科普知识模块 (`pages/kepu`)

宠物养护知识列表
知识详情阅读

8. 个人中心模块 (`pages/my`)

用户信息展示
我的收藏
我的发布
我的订单
问题反馈

管理后台功能

1. 首页仪表盘 (`Welcome.vue`)

数据统计概览
图表展示

2. 轮播图管理 (`Banner`)

轮播图列表
新增/编辑/删除轮播图

3. 分类管理 (`Cate`)

宠物分类列表
新增/编辑/删除分类

4. 宠物管理 (`Product`)

宠物信息列表
新增/编辑/删除宠物
上下架管理
热门/最新标记

5. 订单管理 (`Order`)

领养订单列表
订单审核（通过/拒绝）
订单详情查看

6. 宠物圈管理 (`Pyq`)

动态列表管理
评论管理
删除违规动态/评论

7. 科普管理 (`Kepu`)

科普文章列表
新增/编辑/删除文章
富文本编辑

8. 用户管理 (`Users`)

用户列表
用户信息查看

9. 问题反馈 (`Question`)

用户反馈列表
回复处理

项目结构

pet-adoption-springboot/
├── springboot/                     # 后端服务（Spring Boot + JPA）
│   ├── src/main/java/com/petadoption/
│   │   ├── config/                 # 配置类
│   │   │   ├── CorsConfig.java     # 跨域配置
│   │   │   ├── WebConfig.java      # 静态资源映射
│   │   │   ├── WechatConfig.java   # 微信配置
│   │   │   └── WxMaConfiguration.java  # 微信小程序 SDK 配置
│   │   ├── controller/             # 管理端控制器
│   │   │   ├── UserController.java
│   │   │   ├── BannerController.java
│   │   │   ├── CateController.java
│   │   │   ├── ProductController.java
│   │   │   ├── OrdersController.java
│   │   │   ├── PyqController.java
│   │   │   ├── KepuController.java
│   │   │   ├── QuestionController.java
│   │   │   ├── StarController.java
│   │   │   ├── AlldataController.java
│   │   │   ├── UploadController.java
│   │   │   └── web/                # 小程序端控制器
│   │   │       ├── WebUserController.java
│   │   │       ├── WebBannerController.java
│   │   │       ├── WebCateController.java
│   │   │       ├── WebProductController.java
│   │   │       ├── WebOrdersController.java
│   │   │       ├── WebPyqController.java
│   │   │       ├── WebKepuController.java
│   │   │       ├── WebStarController.java
│   │   │       └── WebQuestionController.java
│   │   ├── entity/                 # JPA 实体类
│   │   ├── repository/             # 数据访问层
│   │   ├── service/                # 业务逻辑层
│   │   ├── dto/                    # 数据传输对象
│   │   ├── util/                   # 工具类
│   │   └── PetAdoptionApplication.java  # 启动类
│   ├── src/main/resources/
│   │   └── application.yml         # 应用配置
│   ├── public/images/              # 上传图片存储目录
│   └── pom.xml                     # Maven 依赖配置
│
├── admin/                          # 管理后台（Vue2 + Element UI）
│   ├── public/                     # 静态资源
│   ├── src/
│   │   ├── api/                    # API 接口封装
│   │   ├── assets/                 # 静态资源
│   │   ├── components/             # 公共组件
│   │   ├── router/                 # 路由配置
│   │   ├── store/                  # Vuex 状态管理
│   │   ├── views/                  # 页面视图
│   │   │   ├── Banner/             # 轮播图管理
│   │   │   ├── Cate/               # 分类管理
│   │   │   ├── Kepu/               # 科普管理
│   │   │   ├── News/               # 新闻管理
│   │   │   ├── Order/              # 订单管理
│   │   │   ├── Product/            # 宠物管理
│   │   │   ├── Pyq/                # 宠物圈管理
│   │   │   ├── Home.vue            # 主布局
│   │   │   ├── Login.vue           # 登录页
│   │   │   ├── Users.vue           # 用户管理
│   │   │   ├── Question.vue        # 问题反馈
│   │   │   └── Welcome.vue         # 首页仪表盘
│   │   ├── App.vue
│   │   └── main.js
│   ├── package.json
│   └── vue.config.js               # Vue 配置（含 API 代理）
│
├── min/                            # 微信小程序
│   ├── components/                 # 自定义组件
│   │   ├── productItem/            # 宠物列表项组件
│   │   ├── publishItem/            # 发布项组件
│   │   └── wxParse/                # 富文本解析组件
│   ├── images/                     # 图片资源
│   │   └── tabbar/                 # TabBar 图标
│   ├── pages/                      # 页面目录
│   │   ├── index/                  # 首页
│   │   ├── cate/                   # 分类页
│   │   ├── search/                 # 搜索页
│   │   ├── detail/                 # 宠物详情
│   │   ├── comment/                # 评论页
│   │   ├── publish/                # 发布页
│   │   ├── publish_list/           # 我的发布
│   │   ├── shequ/                  # 宠物圈
│   │   ├── shequ_list/             # 宠物圈列表
│   │   ├── shequ_publish/          # 发布动态
│   │   ├── order_comfirm/          # 确认领养
│   │   ├── order_list/             # 我的订单
│   │   ├── order_detail/           # 订单详情
│   │   ├── publish_order_list/     # 发布订单列表
│   │   ├── publish_order_detail/   # 发布订单详情
│   │   ├── kepu/                   # 科普列表
│   │   ├── kepu_detail/            # 科普详情
│   │   ├── news/                   # 新闻列表
│   │   ├── news_detail/            # 新闻详情
│   │   ├── star/                   # 我的收藏
│   │   ├── my/                     # 个人中心
│   │   ├── userInfo/               # 用户信息
│   │   └── question/               # 问题反馈
│   ├── utils/
│   │   ├── api.js                  # API 接口封装
│   │   ├── request.js              # 请求封装
│   │   ├── feedback.js             # 反馈工具
│   │   └── util.js                 # 工具函数
│   ├── app.js                      # 小程序入口
│   ├── app.json                    # 小程序配置
│   ├── app.wxss                    # 全局样式
│   └── project.config.json         # 项目配置
│
├── express/                        # 原 Node.js 后端（已弃用，仅供参考）
├── 图例/                            # 文章/设计图 HTML 示意图
├── petGet.sql                      # 数据库 SQL 文件
├── 项目说明.md                      # 本文档
├── 宠物领养-小程序.mp4              # 小程序演示视频
└── 宠物领养-admin.mp4              # 管理后台演示视频

API 接口说明

后端统一前缀为 /api（由 server.servlet.context-path 配置），接口分为管理端与小程序端两套路由：

路由前缀	说明	示例
`/api/admin/*`	管理后台接口	`POST /api/admin/user/login`
`/api/web/*`	微信小程序接口	`POST /api/web/user/login`
`/api/upload`	文件上传	`POST /api/upload`
`/api/images/**`	静态图片访问	`GET /api/images/xxx.png`

管理端主要接口

模块	接口路径	说明
用户	`/api/admin/user/*`	登录、列表、增删改
轮播图	`/api/admin/banner/*`	列表、增删改
分类	`/api/admin/cate/*`	列表、增删改
宠物	`/api/admin/product/*`	列表、详情、增删改、上下架
订单	`/api/admin/orders/*`	列表、详情、审核
宠物圈	`/api/admin/pyq/*`	动态列表、评论管理
科普	`/api/admin/kepu/*`	列表、详情、增删改
反馈	`/api/admin/question/*`	列表、回复、删除
统计	`/api/admin/alldata/info`	首页数据概览

小程序端主要接口

模块	接口路径	说明
用户	`/api/web/user/*`	微信登录、注册、信息查询与更新
轮播图	`/api/web/banner/list`	轮播图列表
分类	`/api/web/cate/list`	分类列表
宠物	`/api/web/product/*`	热门、分类、详情、发布、上下架
订单	`/api/web/orders/*`	领养申请、订单列表与详情
宠物圈	`/api/web/pyq/*`	动态列表、发布、收藏、评论
收藏	`/api/web/star/*`	收藏列表、添加/取消收藏
科普	`/api/web/kepu/*`	科普列表与详情
反馈	`/api/web/question/*`	提交反馈、列表查询

数据模型

数据表通过 JPA 实体映射，主要实体位于 springboot/src/main/java/com/petadoption/entity/。

用户表 (users)

{
  id: Integer,                // 用户 ID
  phone: String,              // 手机号
  password: String,           // 密码
  username: String,           // 用户名
  sex: String,                // 性别
  nickname: String,           // 昵称
  active: String,             // 活跃状态
  openId: String,             // 微信 OpenID
  avatar: String,             // 头像
  role: Integer,              // 角色 (0 普通用户, 99 管理员)
  createTime: LocalDateTime   // 创建时间
}

宠物表 (product)

{
  id: Integer,                // 宠物 ID
  cateId: Integer,            // 分类 ID
  userId: Integer,            // 发布者 ID
  title: String,              // 宠物名称
  cover: String,              // 封面图
  imgs: String,               // 图集
  price: Double,              // 价格
  content: String,            // 详细介绍
  age: String,                // 年龄
  phone: String,              // 联系方式
  username: String,           // 联系人
  isYimiao: Integer,          // 是否打疫苗 (1 是 2 否)
  isJueyu: Integer,           // 是否绝育 (1 是 2 否)
  isQuchong: Integer,         // 是否驱虫 (1 是 2 否)
  isHot: Integer,             // 是否热门 (1 是 2 否)
  isNew: Integer,             // 是否最新 (1 是 2 否)
  address: String,            // 地址
  status: Integer,            // 状态 (1 上架 2 下架)
  createTime: LocalDateTime,  // 创建时间
  updateTime: LocalDateTime   // 更新时间
}

分类表 (cate)

{
  id: Integer,                // 分类 ID
  title: String,              // 分类名称
  cover: String               // 分类图标
}

订单表 (orders)

{
  id: Integer,                // 订单 ID
  pId: Integer,               // 宠物 ID
  userId: Integer,            // 用户 ID
  username: String,           // 领养人姓名
  phone: String,              // 联系电话
  address: String,            // 地址
  status: Integer,            // 状态 (1 待审核 2 通过 3 拒绝)
  snapshoot: String,          // 商品快照
  createTime: LocalDateTime,  // 创建时间
  updateTime: LocalDateTime   // 更新时间
}

宠物圈动态表 (pyq)

{
  id: Integer,                // 动态 ID
  cover: String,              // 图片/视频 URL
  remark: String,             // 内容
  userId: Integer,            // 发布者 ID
  type: Integer,              // 类型 (0 图片 1 视频)
  createTime: LocalDateTime,  // 创建时间
  updateTime: LocalDateTime   // 更新时间
}

宠物圈评论表 (pyq_comment)

{
  id: Integer,                // 评论 ID
  pyqId: Integer,             // 动态 ID
  userId: Integer,            // 用户 ID
  content: String,            // 评论内容
  createTime: LocalDateTime   // 创建时间
}

宠物圈收藏表 (pyq_collect)

{
  id: Integer,                // 收藏 ID
  pyqId: Integer,             // 动态 ID
  userId: Integer             // 用户 ID
}

评论表 (comment)

{
  id: Integer,                // 评论 ID
  userId: Integer,            // 用户 ID
  productId: Integer,         // 宠物 ID
  content: String,            // 评论内容
  createTime: LocalDateTime   // 创建时间
}

收藏表 (star)

{
  id: Integer,                // 收藏 ID
  userId: Integer,            // 用户 ID
  productId: Integer          // 宠物 ID
}

科普文章表 (kepu)

{
  id: Integer,                // 文章 ID
  title: String,              // 标题
  poster: String,             // 封面图
  content: String,            // 内容
  createTime: LocalDateTime   // 创建时间
}

轮播图表 (banner)

{
  id: Integer,                // 轮播图 ID
  cover: String               // 图片 URL
}

问题反馈表 (question)

{
  id: Integer,                // 反馈 ID
  cover: String,              // 图片
  remark: String,             // 反馈内容
  userId: Integer,            // 用户 ID
  email: String,              // 邮箱
  reply: String,              // 回复内容
  createTime: LocalDateTime,  // 创建时间
  updateTime: LocalDateTime   // 更新时间
}

TabBar 配置

{
  "tabBar": {
    "selectedColor": "#FB6650",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/publish/publish",
        "text": "发布"
      },
      {
        "pagePath": "pages/shequ/shequ",
        "text": "宠物圈"
      },
      {
        "pagePath": "pages/my/my",
        "text": "我的"
      }
    ]
  }
}

运行环境要求

后端环境

JDK 1.8+
Maven 3.6+
MySQL 5.7+ / 8.0

管理后台

Node.js 14.0+
npm 或 yarn
现代浏览器（Chrome、Firefox、Edge 等）

小程序端

微信开发者工具（最新稳定版）
基础库版本 2.19.0+
需要有效的 AppID

快速开始

1. 数据库配置

创建 MySQL 数据库

CREATE DATABASE petGet CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;

导入数据库文件

mysql -u root -p petGet < petGet.sql

修改数据库配置

编辑 springboot/src/main/resources/application.yml：

spring:
  datasource:
    url: jdbc:mysql://localhost:3306/petGet?useUnicode=true&characterEncoding=utf8&zeroDateTimeBehavior=convertToNull&useSSL=true&serverTimezone=GMT%2B8
    username: root # 修改为你的用户名
    password: root # 修改为你的密码

配置微信小程序（可选，用于微信登录）

wechat:
  appId: '你的AppID'
  appSecret: '你的AppSecret'

2. 启动后端服务

# 进入后端目录
cd springboot

# 使用 Maven 编译并运行
mvn clean spring-boot:run

或在 IDE（IntelliJ IDEA / Eclipse）中直接运行 PetAdoptionApplication.java。

后端服务默认运行在 http://localhost:8081，API 前缀为 /api。

3. 启动管理后台

# 进入管理后台目录
cd admin

# 安装依赖
npm install

# 启动开发服务器
npm run dev

管理后台默认运行在 http://localhost:1111，开发环境通过 vue.config.js 将 /api 代理到 http://localhost:8081。

4. 运行小程序

打开微信开发者工具
选择「导入项目」
选择 min 目录
填入 AppID（可使用测试号）
点击「导入」

5. 配置小程序 API 地址

编辑 min/utils/request.js，修改 API 基础地址：

const baseUrl = 'http://localhost:8081'; // 修改为你的后端地址

小程序请求路径已包含 /api 前缀，例如：/api/web/user/login。

默认账号

管理后台

手机号：18715023xxxx
密码：123456

小程序端

支持微信授权登录
或使用手机号登录

预置测试数据

宠物分类

分类名称	说明
狗狗	各类犬种
猫咪	各类猫咪
其他	其他宠物（蜥蜴、蛇等）

示例宠物

名称	分类	年龄	价格	状态
小七	狗狗	一岁半	100	下架
小屋	狗狗	9 个月	0	上架
小喵 1 号	猫咪	3 个月	3	上架
蜥蜴	其他	1 岁	0	上架
小白蛇	其他	1 岁	234	上架

与原 Node.js 版本的差异

对比项	Node.js 版（express）	Java 版（springboot）
运行环境	Node.js 14+	JDK 1.8+
Web 框架	Express 4.x	Spring Boot 2.7.18
数据库操作	原生 SQL / mysql2	Spring Data JPA
依赖管理	npm	Maven
默认端口	5002	8081
API 前缀	无统一前缀	`/api`
管理后台端口	8080	1111
配置方式	`express/config/db.js`	`application.yml`
微信 SDK	手动 HTTP 调用	weixin-java-miniapp

仓库中 express/ 目录保留原 Node.js 后端代码，仅供参考对比，请使用 springboot/ 作为当前后端。

界面预览

项目包含演示视频文件：

宠物领养-小程序.mp4 - 小程序端完整功能演示
宠物领养-admin.mp4 - 管理后台完整功能演示

扩展建议

如需进一步完善项目，可考虑以下扩展：

地图定位：集成地图 API，显示宠物位置
即时通讯：添加用户间聊天功能
支付功能：集成微信支付，支持付费领养
推送通知：订单状态变更推送通知
宠物识别：接入 AI 图像识别，识别宠物品种
数据统计：完善管理后台数据分析功能
评价系统：领养完成后的评价功能
宠物医院：集成附近宠物医院查询
宠物商城：添加宠物用品商城模块
社区活动：线下领养活动发布和报名

注意事项

本项目为学习演示项目，部分数据为模拟数据
生产环境部署需要配置 HTTPS
小程序上线需要完成微信认证和相关资质审核
涉及宠物交易需符合当地法规要求
建议定期备份数据库数据
JPA 默认 ddl-auto: update 会自动更新表结构，生产环境建议改为 validate
文件上传目录默认为 springboot/public/images/，需确保有写入权限

常见问题

Q: 数据库连接失败？

A: 检查 MySQL 服务是否启动，application.yml 中数据库连接信息是否正确。

Q: 图片无法显示？

A: 检查后端服务是否启动，图片是否已上传至 public/images/ 目录，访问路径是否为 http://localhost:8081/api/images/xxx。

Q: 小程序无法请求后端？

A: 检查 request.js 中的 baseUrl 配置；开发时在微信开发者工具中勾选「不校验合法域名」。

Q: 管理后台登录失败？

A: 确认数据库 users 表中有管理员账号（role=99），且后端服务已在 8081 端口正常运行。

Q: Maven 编译失败？

A: 确认已安装 JDK 1.8+ 和 Maven 3.6+，执行 mvn -v 检查环境；首次编译需下载依赖，请保持网络畅通。

Q: 微信登录失败？

A: 检查 application.yml 中 wechat.appId 和 wechat.appSecret 是否与小程序 AppID 一致。

许可证

本项目仅供学习交流使用，请勿用于商业用途。

技术分类

SpringBoot 小程序 Vue2 MySQL

包含内容

✓完整源码

✓项目说明文档

✓演示材料

适用人群

学习参考与二次开发

关于 AI源码

AI源码专注优质项目源码分享，提供完整源码、详细文档与技术支持，助力源码设计与课程作业。

•QQ: 861077046

•邮箱: 861077046@qq.com

•已服务 22+ 位用户

立即咨询

宠物领养小程序

项目封面

项目说明

宠物领养小程序

项目简介

技术栈

后端技术（Spring Boot）

管理后台技术

小程序端技术

项目特点

功能模块

小程序端功能

1. 首页模块 (pages/index)

2. 宠物分类模块 (pages/cate)

3. 宠物详情模块 (pages/detail)

4. 发布模块 (pages/publish)

5. 宠物圈模块 (pages/shequ)

6. 领养订单模块

7. 科普知识模块 (pages/kepu)

8. 个人中心模块 (pages/my)

管理后台功能

1. 首页仪表盘 (Welcome.vue)

2. 轮播图管理 (Banner)

3. 分类管理 (Cate)

4. 宠物管理 (Product)

5. 订单管理 (Order)

6. 宠物圈管理 (Pyq)

7. 科普管理 (Kepu)

8. 用户管理 (Users)

9. 问题反馈 (Question)

项目结构

API 接口说明

管理端主要接口

小程序端主要接口

数据模型

用户表 (users)

宠物表 (product)

分类表 (cate)

订单表 (orders)

宠物圈动态表 (pyq)

宠物圈评论表 (pyq_comment)

宠物圈收藏表 (pyq_collect)

评论表 (comment)

收藏表 (star)

科普文章表 (kepu)

轮播图表 (banner)

问题反馈表 (question)

TabBar 配置

运行环境要求

后端环境

管理后台

小程序端

快速开始

1. 数据库配置

2. 启动后端服务

3. 启动管理后台

4. 运行小程序

5. 配置小程序 API 地址

默认账号

管理后台

小程序端

预置测试数据

宠物分类

示例宠物

与原 Node.js 版本的差异

界面预览

扩展建议

注意事项

常见问题

Q: 数据库连接失败？

Q: 图片无法显示？

Q: 小程序无法请求后端？

Q: 管理后台登录失败？

Q: Maven 编译失败？

Q: 微信登录失败？

许可证

技术分类

包含内容

适用人群

关于 AI源码

1. 首页模块 (`pages/index`)

2. 宠物分类模块 (`pages/cate`)

3. 宠物详情模块 (`pages/detail`)

4. 发布模块 (`pages/publish`)

5. 宠物圈模块 (`pages/shequ`)

7. 科普知识模块 (`pages/kepu`)

8. 个人中心模块 (`pages/my`)

1. 首页仪表盘 (`Welcome.vue`)

2. 轮播图管理 (`Banner`)

3. 分类管理 (`Cate`)

4. 宠物管理 (`Product`)

5. 订单管理 (`Order`)

6. 宠物圈管理 (`Pyq`)

7. 科普管理 (`Kepu`)

8. 用户管理 (`Users`)

9. 问题反馈 (`Question`)