宠物领养小程序

项目简介

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

技术栈

后端技术

技术	版本/说明
运行环境	Node.js
Web框架	Express 4.16.1
数据库	MySQL 5.7+
数据库驱动	mysql / mysql2
身份认证	jsonwebtoken (JWT)
文件上传	multer
跨域处理	cors
热重载	nodemon

管理后台技术

技术	版本/说明
前端框架	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，前端独立开发部署
• 完整业务流程：涵盖宠物发布、领养申请、审核管理等完整流程
• 社交功能：宠物圈动态发布、点赞、评论、收藏
• 多角色支持：普通用户、管理员角色区分
• 数据可视化：管理后台集成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-mini-program/
├── admin/                          # 管理后台（Vue2 + Element UI）
│   ├── public/                     # 静态资源
│   ├── src/
│   │   ├── api/                    # API接口封装
│   │   ├── assets/                 # 静态资源
│   │   ├── components/             # 公共组件
│   │   ├── filters/                # 过滤器
│   │   ├── 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配置
│
├── express/                        # 后端服务（Express + MySQL）
│   ├── bin/
│   │   └── www                     # 启动入口
│   ├── config/
│   │   ├── db.js                   # 数据库配置
│   │   └── index.js                # 全局配置
│   ├── controllers/                # 控制器
│   ├── public/
│   │   └── images/                 # 上传图片存储
│   ├── routes/
│   │   ├── admin/                  # 管理端API
│   │   │   ├── banner.js           # 轮播图接口
│   │   │   ├── cate.js             # 分类接口
│   │   │   ├── kepu.js             # 科普接口
│   │   │   ├── orders.js           # 订单接口
│   │   │   ├── product.js          # 宠物接口
│   │   │   ├── pyq.js              # 宠物圈接口
│   │   │   ├── question.js         # 问题反馈接口
│   │   │   └── user.js             # 用户接口
│   │   ├── web/                    # 小程序端API
│   │   │   ├── banner.js           # 轮播图接口
│   │   │   ├── cate.js             # 分类接口
│   │   │   ├── comment.js          # 评论接口
│   │   │   ├── kepu.js             # 科普接口
│   │   │   ├── orders.js           # 订单接口
│   │   │   ├── product.js          # 宠物接口
│   │   │   ├── pyq.js              # 宠物圈接口
│   │   │   ├── star.js             # 收藏接口
│   │   │   └── user.js             # 用户接口
│   │   ├── index.js                # 路由入口
│   │   └── upload.js               # 文件上传
│   ├── services/                   # 业务逻辑层
│   ├── util/
│   │   ├── index.js                # 工具函数
│   │   └── wechat.js               # 微信相关工具
│   ├── app.js                      # Express应用配置
│   └── package.json
│
├── 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         # 项目配置
│
├── 图片资源/                        # 项目图片资源
├── petGet.sql                      # 数据库SQL文件
├── mysql.sh                        # MySQL脚本
├── mysql操作手册.md                 # MySQL操作说明
├── 数据库创建方法.md                # 数据库创建说明
├── 新 - 运行必读.docx              # 运行说明文档
├── 宠物领养-小程序.mp4              # 小程序演示视频
└── 宠物领养-admin.mp4              # 管理后台演示视频

数据模型

用户表 (users)

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

宠物表 (product)

{
  id: int,                    // 宠物ID
  cate_id: int,               // 分类ID
  user_id: int,               // 发布者ID
  title: varchar(255),        // 宠物名称
  cover: varchar(255),        // 封面图
  imgs: varchar(10000),       // 图集
  price: int,                 // 价格
  content: longtext,          // 详细介绍
  age: varchar(100),          // 年龄
  phone: varchar(100),        // 联系方式
  username: varchar(100),     // 联系人
  is_yimiao: int,             // 是否打疫苗 (1是 2否)
  is_jueyu: int,              // 是否绝育 (1是 2否)
  is_quchong: int,            // 是否驱虫 (1是 2否)
  is_hot: int,                // 是否热门 (1是 2否)
  is_new: int,                // 是否最新 (1是 2否)
  address: varchar(255),      // 地址
  status: int,                // 状态 (1上架 2下架)
  create_time: timestamp,     // 创建时间
  update_time: timestamp      // 更新时间
}

分类表 (cate)

{
  id: int,                    // 分类ID
  title: varchar(255),        // 分类名称
  cover: varchar(255)         // 分类图标
}

订单表 (orders)

{
  id: int,                    // 订单ID
  p_id: int,                  // 宠物ID
  user_id: int,               // 用户ID
  username: varchar(255),     // 领养人姓名
  phone: varchar(255),        // 联系电话
  address: varchar(255),      // 地址
  status: int,                // 状态 (1待审核 2通过 3拒绝)
  snapshoot: longtext,        // 商品快照
  create_time: timestamp,     // 创建时间
  update_time: timestamp      // 更新时间
}

宠物圈动态表 (pyq)

{
  id: int,                    // 动态ID
  cover: varchar(2000),       // 图片/视频URL
  remark: varchar(1000),      // 内容
  user_id: int,               // 发布者ID
  type: int,                  // 类型 (0图片 1视频)
  create_time: timestamp,     // 创建时间
  update_time: timestamp      // 更新时间
}

评论表 (comment)

{
  id: int,                    // 评论ID
  user_id: int,               // 用户ID
  product_id: int,            // 宠物ID
  content: longtext,          // 评论内容
  create_time: timestamp      // 创建时间
}

收藏表 (star)

{
  id: int,                    // 收藏ID
  user_id: int,               // 用户ID
  product_id: int             // 宠物ID
}

科普文章表 (kepu)

{
  id: int,                    // 文章ID
  title: varchar(255),        // 标题
  poster: varchar(255),       // 封面图
  content: longtext,          // 内容
  create_time: timestamp      // 创建时间
}

轮播图表 (banner)

{
  id: int,                    // 轮播图ID
  cover: varchar(255)         // 图片URL
}

问题反馈表 (question)

{
  id: int,                    // 反馈ID
  cover: varchar(2000),       // 图片
  remark: varchar(1000),      // 反馈内容
  user_id: int,               // 用户ID
  email: varchar(100),        // 邮箱
  reply: varchar(1000),       // 回复内容
  create_time: timestamp,     // 创建时间
  update_time: timestamp      // 更新时间
}

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": "我的"
      }
    ]
  }
}

运行环境要求

后端环境

• Node.js 14.0+
• MySQL 5.7+
• npm 或 yarn

管理后台

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

小程序端

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

快速开始

1. 数据库配置

1. 创建MySQL数据库

CREATE DATABASE petGet CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;

2. 导入数据库文件

mysql -u root -p petGet < petGet.sql

3. 修改数据库配置 编辑 express/config/db.js：

var db = mysql.createConnection({
  database: 'petGet', // 数据库名称
  port: '3306', // 端口号
  host: 'localhost', // 主机地址
  user: 'root', // 用户名
  password: 'root', // 密码（修改为你的密码）
});

2. 启动后端服务

# 进入后端目录
cd express

# 安装依赖
npm install

# 启动服务（开发模式）
npm run dev

后端服务默认运行在 http://localhost:5002

3. 启动管理后台

# 进入管理后台目录
cd admin

# 安装依赖
npm install

# 启动开发服务器
npm run dev

管理后台默认运行在 http://localhost:8080

4. 运行小程序

1. 打开微信开发者工具
2. 选择"导入项目"
3. 选择 min 目录
4. 填入AppID（可使用测试号）
5. 点击"导入"

5. 配置小程序API地址

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

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

默认账号

管理后台

• 手机号：18715023xxxx
• 密码：123456

小程序端

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

预置测试数据

宠物分类

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

示例宠物

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

界面预览

项目包含演示视频文件：

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

扩展建议

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

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

注意事项

1. 本项目为学习演示项目，部分数据为模拟数据
2. 生产环境部署需要配置HTTPS
3. 小程序上线需要完成微信认证和相关资质审核
4. 涉及宠物交易需符合当地法规要求
5. 建议定期备份数据库数据

常见问题

Q: 数据库连接失败？

A: 检查MySQL服务是否启动，数据库配置是否正确

Q: 图片无法显示？

A: 检查后端服务是否启动，图片路径配置是否正确

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

A: 检查request.js中的baseUrl配置，开发时需在微信开发者工具中关闭"不校验合法域名"

Q: 管理后台登录失败？

A: 确认数据库中users表有管理员账号（role=99）

许可证

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