基于 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。