基于 Vue 2 与 Spring Boot 3 的宠物寄养系统 PC 用户端与管理后台的设计与实现
本文围绕宠物寄养业务场景,介绍一套包含 PC 用户端、商家后台与管理员后台的宠物寄养系统的设计与实现。
一、项目背景
随着宠物寄养需求的增长,用户需要一个可以浏览寄养套餐、管理宠物档案、在线预约下单、完成真实支付并与商家实时沟通的线上平台。
同时商家需要掌握本店经营数据、处理寄养订单、维护套餐与照料日志、回复用户评价;平台管理员需要对全平台订单、套餐、日志、评价、商家与账号进行统一监管。
本系统面向上述使用场景,解决多端身份隔离、真实支付接入、实时聊天、AI 辅助咨询以及多角色数据范围隔离等问题。
二、功能模块介绍
系统分为 PC 用户端、商家后台和管理员后台三个端。
| 角色 | 所属端 |
|---|---|
| 用户 | PC 用户端 |
| 商家 | 商家后台 |
| 管理员 | 管理员后台 |
三、技术栈说明
前端:Vue 2.6、Vue Router 3、Vuex 3、Element UI 2、Axios、ECharts、QRCode
后端:Java 17、Spring Boot 3、MyBatis-Plus、JWT
数据库与中间件:MySQL,保存用户、店铺、套餐、订单、评价、行为、AI 会话和聊天消息等数据;实时能力采用 WebSocket 聊天与 SSE 大模型流式回答;外部能力对接兼容 OpenAI Chat Completions 协议的大模型服务,以及微信与支付宝支付
四、核心模块介绍
PC 用户端
用户
| 功能模块 | 功能说明 |
|---|---|
| 账号与个人中心 | 注册、登录、退出,查看并修改昵称、手机号、头像等资料,修改密码,PC 用户 Token 与后台 Token 分开保存 |
| 首页与套餐浏览 | 展示平台服务介绍与推荐套餐,按套餐名称、商家等条件查询,查看套餐图片、价格、适用宠物、可预约数量、评分、服务内容与预约须知,查看关联评价并区分匿名评价 |
| 店铺详情 | 查看店铺名称、图片、地址、联系电话、营业状态与店铺介绍,查看该店铺已公开套餐,进入在线咨询建立会话 |
| 宠物档案 | 新增、编辑、删除和查看本人宠物,维护宠物名称、类型、品种、性别、年龄、体重、健康状况与备注,上传真实宠物照片,未上传时使用占位 |
| 预约、订单与真实支付 | 选择套餐、宠物、寄养起止日期并填写联系人和寄养要求,按天数和单价计算金额,查看订单、支付状态、处理进度与照料日志,取消未支付且未确认订单,接入微信 Native 与支付宝 PC 网页支付,复用待支付记录,服务完成后按服务、环境、照料三个维度评分 |
| 在线咨询 | 查看会话列表与历史消息,通过 WebSocket 与商家实时收发消息,支持消息持久化、未读数量、已读状态、心跳、断线重连与幂等去重 |
| AI 寄养助手 | 通过 SSE 流式接收大模型回答,解答寄养流程、宠物照料、套餐选择、订单操作与注意事项等问题,优先依据平台上下文回答 |
界面展示
注册页:填写信息,完成宠物寄养平台用户账号注册
登录页:用户填写账号信息登录宠物寄养系统
首页:展示平台寄养服务介绍和推荐寄养套餐
套餐列表页:展示各类宠物寄养套餐供用户浏览选择
套餐详情页:查看猫咪寄养套餐详情与用户评价
宠物档案页:管理您的宠物档案,可新增编辑删除宠物信息
订单页:查看个人寄养订单的状态和相关信息
订单页:查看个人订单,对待支付订单发起支付
AI寄养助手页:向AI寄养助手咨询宠物寄养相关问题
在线咨询页:查看会话列表,和商家实时聊天咨询
个人资料页:查看并修改个人资料,支持修改账号密码
商家后台
商家
| 功能模块 | 功能说明 |
|---|---|
| 经营分析 | 首页及经营分析页展示本店订单、收入、套餐和服务趋势 |
| 寄养订单 | 只查看本店订单,处理已支付订单,推进确认、服务中和完成等状态 |
| 订单详情 | 查看预约信息、宠物信息、支付信息及服务进度 |
| 套餐管理 | 新增、编辑、上下架和维护本店套餐 |
| 照料日志 | 为本店履约订单记录宠物照料情况 |
| 服务评价 | 查看本店评价并进行商家回复 |
| 在线咨询 | 只查看咨询本店的会话并实时回复用户 |
| 我的店铺 | 维护本店资料、图片、地址、联系方式和营业状态 |
商家数据范围由后端根据当前登录账号绑定的 shopId 决定,不依赖前端自行传入店铺编号。
界面展示
首页:展示本店经营概况与订单相关统计数据
店铺信息管理:商家维护本店对外展示的店铺信息
套餐管理:商家维护本店寄养套餐,支持增删改操作
订单管理页:查看并处理本店所有寄养订单
订单详情页:查看寄养订单详情,可确认或拒绝接单
在线咨询页:商家实时回复用户的寄养咨询需求
服务评价管理:查看本店用户评价,可回复或删除评价
管理员后台
管理员
| 功能模块 | 功能说明 |
|---|---|
| 数据分析 | 查看平台核心业务数据及 ECharts 图形分析 |
| 订单管理 | 查看和监管全平台寄养订单及处理进度 |
| 套餐管理与审核 | 维护套餐并处理套餐审核 |
| 日志管理与审核 | 查看照料日志并执行平台审核 |
| 评价管理与审核 | 查看服务评价并执行审核管理 |
| 宠物管理 | 查看和管理平台宠物档案 |
| 商家与店铺管理 | 管理商家账号、店铺资料和审核状态 |
| 账号管理 | 维护管理员和商家后台账号 |
管理员拥有平台视角,商家后台与管理员后台复用整体布局,但通过角色路由和后端权限校验展示不同菜单及数据范围。
界面展示
登录页:管理员登录宠物寄养管理后台
首页:展示平台核心业务数据与统计分析
数据分析页:展示平台核心业务数据的可视化分析
订单管理页:查看处理全平台待确认的寄养订单
订单管理页:查看监管全平台寄养订单信息与处理进度
套餐管理:查看全平台寄养套餐,支持编辑与上下架管控
日志管理页:管理员浏览平台全部宠物照料日志记录
评价列表页:查看全平台用户评价,可管控显示隐藏状态
宠物管理页:查看并管理平台所有用户的宠物档案
商家列表页:查看平台所有商家账号信息
商家店铺管理:管理员审核管理平台的商家店铺信息
账号管理页:维护管理员与商家后台的登录账号
五、主要业务流程
- 用户注册并登录 PC 用户端,进入个人中心维护个人资料。
- 用户在首页或店铺详情浏览寄养套餐,查看套餐详情与关联评价。
- 用户维护本人宠物档案,上传宠物照片并保存健康信息。
- 用户选择套餐、宠物、寄养起止日期,填写联系人和寄养要求,生成订单并计算金额。
- 用户通过微信 Native 或支付宝 PC 网页支付完成真实支付,系统更新订单支付状态。
- 商家在商家后台查看本店已支付订单,推进确认、服务中和完成状态。
- 商家为履约订单记录照料日志,平台管理员对日志进行审核。
- 用户通过 WebSocket 与商家在线咨询,或通过 AI 寄养助手获取流式回答。
- 服务完成后用户按服务、环境、照料三个维度评分并可选择匿名。
- 商家查看并回复本店评价,管理员对评价执行审核管理。
六、项目拓展性
套餐检索与经营分析可进一步引入更细粒度的统计维度,提升用户筛选与商家运营能力。
在线咨询可扩展图片与文件消息能力,并加强消息推送的稳定性。
AI 寄养助手可在现有兼容 OpenAI Chat Completions 协议的大模型服务基础上,扩展更多平台上下文与多轮对话能力。
支付环节可继续扩展更多支付渠道,并完善订单支付的异常补偿机制。
数据范围隔离机制可沿用到更多业务模块,支撑多商家、多角色的持续扩张。
源码获取说明
本文内容整理自本人项目/毕业设计实践,仅用于学习与技术交流。如需项目功能说明或系统交流,可通过文末微信二维码联系备注:CSDN。