摘要

随着宠物经济的快速发展，宠物主对宠物服务的便捷性、专业性需求日益增长。本研究设计并实现了一套宠物洗护医疗喂养预约服务小程序系统，采用 Java 与 SpringBoot 构建后端服务，结合 Vue 开发管理后台，通过 UniAPP 实现多端适配的用户小程序，旨在为宠物主提供一站式预约服务解决方案，同时优化宠物服务机构的运营效率。系统采用前后端分离架构，后端以 Java 为开发语言，基于 SpringBoot 框架实现业务逻辑，利用 MyBatis-Plus 操作 MySQL 数据库，保障数据持久化与事务管理；前端管理后台采用 Vue.js 结合 Element-UI 组件库，提升管理端的交互体验；用户端通过 UniAPP 开发，实现一次编码同时发布至微信、支付宝等多平台小程序，降低开发与维护成本。系统集成 Redis 缓存提升高并发场景下的响应速度，并通过 JWT 实现安全的用户认证机制。系统涵盖用户端、服务端与管理端三大模块，用户端小程序支持宠物管理、服务预约、订单与评价、资讯与社区等功能，服务端宠物机构可进行服务管理、员工与资源调度、客户管理，管理端后台系统实现机构与用户管理、数据统计与分析、系统配置等操作。

实现的功能

系统分为普通用户和管理员两种角色，普通用户是小程序，管理员是PC网页；

用户端功能：

注册登录与信息管理：支持手机号或微信登录，可编辑个人及宠物信息。

宠物服务浏览预约：展示多种宠物服务，有详情介绍，可筛选、预约并查看订单状态。

宠物用品商城：有各类宠物用品，能搜索、浏览、下单，可选择配送与自提并查物流。

宠物健康知识：发布知识内容，用户可互动交流。

社区互动：用户能发宠物动态，与他人互动并可关注他人，有热门动态推荐。

消息通知：接收各类宠物相关消息。

管理员端：

用户信息管理：审核注册信息，管理用户及宠物资料与消费记录，处理违规用户。

服务项目管理：对服务项目及人员信息进行增删改操作，按需调整。

商品管理：录入编辑商品信息，处理订单，分析销售数据。

预约与订单管理：查看处理预约信息与订单事务，统计分析相关数据。

知识与社区管理：发布审核知识内容，管理社区动态与违规内容，统计知识数据。

用到的技术

后端 Java语言的SpringBoot框架、MySQL数据库、Maven依赖管理等；

前端 小程序是Vue.js语法的UniApp框架，管理员前端是Vue项目结构。

登录界面代码

<template>
	<view>
		<view class="container">
			<!--顶部返回按钮-->
			<text class="back-btn iconfont iconzuo" @tap="navBack"></text>
			<!--插画-->
			<view class="right-top-sign"></view>
			<!-- 设置白色背景防止软键盘把下部绝对定位元素顶上来盖住输入框等 -->
			<view class="wrapper">
				<view class="left-top-sign">LOGIN</view>
				<view class="welcome">
					欢迎回来！
				</view>
				<view class="input-content">
					<!--<view class="btn-group">-->
					<!--<button type="primary" @tap="loginTest('15083980039', '123456')">小明-父</button>-->
					<!--</view>-->
					<view class="input-item">
						<text class="tit">手机号</text>
						<input
							type="number"
							name="mobile"
							v-model="loginParams.phone"
							placeholder="请输入手机号"
							maxlength="11"
							
						/>
					</view>
					<view class="input-item" >
						<text class="tit">密码</text>
						<input
							name="password"
							type="password"
							v-model="loginParams.password"
							placeholder="请输入密码"
							maxlength="20"
						/>
					</view>
		
					
					<button
						class="confirm-btn"
						:class="'bg-' + themeColor.name"
						:disabled="btnLoading"
						:loading="btnLoading"
						@tap="login"
					>
						登录
					</button>
				</view>
			</view>
			<view class="register-section">
				还没有账号?
				<text @tap="navTo('/pages/pet/register/register')">马上注册</text>
				
			</view>
		</view>
	</view>
</template>

演示视频