基于JAVA SpringBoot和UniAPP的宠物服务预约小程序毕业设计，附源码

实现的功能：

本系统的功能应该包括：用户登录和注册、首页展示、上门服务、宠物社区、后台管理（PC浏览器后台）等功能。

注册、登录：通过获取用户微信昵称,微信账号进行登录。系统允许匿名访问，匿名访问只能浏览界面，不能预约服务；

首页展示：首页主要有养宠宝典可进行信息浏览，收藏。宠物领养功能和宠物寄养功能，可进行详细咨询；

上门服务：为顾客的爱宠提供，提供上门喂养，遛宠服务，专业洗护，基础医疗咨询等4个模块的功能；

宠物社区：主要是可上传宠物照片，分享宠物趣事等；

后台管理：支持管理员对服务预约管理对订单进行添加，删除，修改。宠物社区管理对用户发布的趣事，对违规的信息进行删除。

用到的技术：

后端：java语言的SpringBoot框架、MySql数据库、Maven依赖管理等；

前端：Vue.js语法的UniApp框架。

部分代码展示

<template>
    <view class="wrap">
        <u-navbar :is-back="false" :title="title" title-color="#000">
            <!-- <view class="slot-wrap" @tap="navTo('/pages/pet/city')">    
                <i class="iconfont iconicon-test" :class="'text-' + themeColor.name"/> 
                <view class="city">{{city.title}} <text class="iconfont iconxiajiantou2" /></view>
            </view> -->
        </u-navbar>

        <view class="swiper-adv" v-if="advs.index_top.length">
            <!-- <u-swiper :list="advs.index_top" name="cover" :current="current" field="content" mode="round" height="300" border-radius="15" @click="navToIndex" ></u-swiper> -->

            <uni-swiper-dot :info="advs.index_top" :current="current" field="content" mode="round" :dotsStyles="{ backgroundColor: '#FFF', color: themeColor.color, selectedBackgroundColor: themeColor.color, border: 'none', selectedBorder: 'none' }">
                <swiper class="swiper-box" :current="current" circular autoplay :indicator-dots="false" indicator-color="#FFF" :indicator-active-color="themeColor.color" @animationfinish="animationfinish">
                    <swiper-item v-for="(item, index) in advs.index_top" :key="index" @click="navToIndex">
                        <u-image :src="item.cover" width="100%" height="300" border-radius="15" mode="aspectFill" /> 
                    </swiper-item>
                </swiper>
            </uni-swiper-dot>
        </view>

        <!-- <view class="swiper">
            <view class="swiper-box">
                <rf-swipe-dot :info="advs.index_top" mode="dot" :current="current" field="title">
                    <swiper @change="handleDotChange" autoplay="true">
                        <swiper-item v-for="(item, index) in advs.index_top" @tap="indexTopToDetailPage(item)" :key="index">
                            <view class="swiper-item">
                                <u-image :src="item.cover" width="100%" height="240" border-radius="20" mode="aspectFill" />
                            </view>
                        </swiper-item>
                    </swiper>
                </rf-swipe-dot>
            </view>
        </view>

        <!-- 公告 -->
        <!-- <rf-swiper-slide v-if="notices.length > 0" :list="notices" class="rf-skeleton" @navTo="navTo('/pages/index/notice/notice')">
            <view slot="header" class="swiper-slide-header">
                <text class="iconfont icongonggao" :class="'text-' + themeColor.name"></text>
            </view>
        </rf-swiper-slide> -->

        <!-- 频道 -->
        <swiper :indicator-active-color="themeColor.color" indicator-color="#666" :indicator-dots="false" class="channel-wrap">
            <swiper-item class="channel-list">
                <view class="channel" v-for="(item, index) in channels" :key="index" @tap.stop="navToChannel(index)">
                    <view class="icon-wrap">
                        <!-- <u-image :src="'/static/pet/icon-' + item.key  + '.png'" width="84" height="84" borderRadius="15" mode="aspectFill" /> -->                    <u-icon :name="item.icon" custom-prefix="custom-icon" size="66" :color="themeColor.color" />
                    </view>
                    <view class="text">{{ item.name}}</view>
                </view>
            </swiper-item>
        </swiper>

        <!--列表-->
        <view class="pet-wrap">
            <view class="sticky">
                <view class="sticky-tabs">
                    <u-tabs-swiper ref="tabs" :list="tabList" :current="tabsCurrent" @change="tabsChange" :is-scroll="false" bar-height="6" bar-width="40" :active-color="themeColor.color"></u-tabs-swiper>
                </view>

            </view>

            <view>
                <view class="item" v-for="(item, index) in items" :key="index" @tap="switchTab('/pages/pet/pet-view?id='+item.id)">
                    <view class="left"><u-image :src="getPicUrl(item.pic1)" width="100%" height="220" border-radius="20" mode="aspectFill" /></view>

                    <view class="right">
                        <view class="title u-line-2">{{item.title}}</view>

                        <view class="base" >
                            <view class="tag" v-for="(item2,index2) in splitTag(item.tag)" :key="index2">{{item2}}</view>
                        </view>
                        <!-- 
                        <view class="reward">悬赏￥<text class="money">{{item.money}}</text></view> -->
                        <view class="summary u-line-2">{{item.content}}</view>
                    </view>
                    <view class="bottom">
                        <view class="datetime">{{item.createTime}}</view>
                        <!-- <view class="view">{{item.view}}查看</view>
                        <view class="share">{{item.share}}转发</view> -->
                    </view>
                    <u-line color="info" :hair-line="false" margin="30rpx 0 0 0" />

                </view>

            </view>

            <!-- <swiper :current="swiperCurrent" @transition="swiperTransition" @animationfinish="swiperAnimationfinish" style="height:1150rpx;">
                <swiper-item v-for="(item, tabsIndex) in $mData.types" :key="tabsIndex">
                    <pet-index-mescroll-item ref="mescrollItem" :i="tabsIndex" :index="tabsIndex" :params="params" :items="items"></pet-index-mescroll-item>
                </swiper-item>
            </swiper> -->
        </view>

        <u-gap height="20" />

        <!--备案-->
        <!--#ifdef H5-->
        <view class="copyright" v-if="config.web_site_icp">
            {{ config.copyright_desc }}

            <a href="http://www.beian.miit.gov.cn">{{ config.web_site_icp }}</a>
        </view>
        <!-- #endif -->

        <!--页面加载动画-->
        <rfLoading isFullScreen :active="loading"></rfLoading>
        <!-- <rf-back-top :scrollTop="scrollTop"></rf-back-top> -->
        <!-- <rf-back-home></rf-back-home> -->
    </view>
</template>

演示视频链接

源码展示链接