基于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><script>
import rfSwipeDot from '@/components/rf-swipe-dot';
import rfSwiperSlide from '@/components/rf-swiper-slide';
import { mapMutations } from 'vuex';
import PetIndexMescrollItem from '../pet/mescroll-item/pet-index-mescroll-item';
// import { indexList } from '@/api/product';
// import { petIndex, petList } from '@/api/pet';
import appRequest from "@/common/appRequestUrl.js";
// const QQMapWX = require('@/common/qqmap-wx-jssdk.min.js');export default {components: {rfSwipeDot,rfSwiperSlide,PetIndexMescrollItem,},data() {return {userInfo:{},items:[],$mData: this.$mData,appName: this.$mSettingConfig.appName,path: '/pages/index/index',title: this.$mSettingConfig.appName + '',qqmapsdk: null,city: { id: 0,title: '全国'},current: 0, // 轮播图indexadvs: {index_top: []}, // 广告图notices: [],channels: [{key: 'find',icon: 'pet',name: '领养寄养',route: '/pages/pet/list',type: 'switchTab'},{key: 'mall',icon: 'ask',name: '养宠宝典',route: '/pages/pet/ask',type: 'switchTab'},{key: 'blocklist',icon: 'forum',name: '分享社区',route: '/pages/pet/forum',type: 'push'},],tabsCurrent: 0, // tabs组件的current值,表示当前活动的tab选项swiperCurrent: 0, // swiper组件的current值,表示当前那个swiper-item是活动的config: {}, // 配置loading: true,scrollTop: 0,kefuShow: true,loadingType: 'more',newsBg: this.$mAssetsPath.newsBg,errorImage: this.$mAssetsPath.errorImage,pages: [1, 1, 1, 1],// type: 1,// cate: 0,moneySymbol: this.moneySymbol,genders: ['不限', '男孩', '女孩'],ages: ['不限', '幼年', '成年', '老年'],sizes: ['不限', '小型', '中型', '大型'],hairs: ['不限', '长毛', '短毛', '无毛'],states: ['不限', '已免疫', '已绝育', '已驱虫'],activeStyle: {background: '#FFCE0C',color: '#01040A'},filterShow: false,params: {},tabList:[{ key: 1, name: '领养', title: '领养', content: 'Ta的故事', tips: '为小可爱找新家' },{ key: 3, name: '寄养', title: '拾得', content: '宠物详情', tips: '为小可爱寻找原主人' },{ key: 4, name: '养宠宝典', title: '拾得', content: '宠物详情', tips: '为小可爱寻找原主人' }]};},onLoad() {// this.qqmapsdk = new QQMapWX({// 	key: this.$mData.maps[0].key// });//this.initData();this.getData(0);this.advs = {index_top:[{"cover": "/static/tab/banner01.png"},{"cover": "/static/tab/banner02.png"},{"cover": "/static/tab/banner03.png"},]}this.loading = false;},onShow() {let userInfo = appRequest.getUserInfo();if(!userInfo){}else{this.userInfo = userInfo;}// let city = uni.getStorageSync('city');// if (city && this.city.id != city.id) {// 	this.city = city;// 	this.$nextTick(() => {// 		for (let tab of this.$mData.types) {// 			this.getMescroll(tab.key-1).triggerDownScroll();// 		}// 	});// }},onPageScroll(e) {this.scrollTop = e.scrollTop;},/* onReachBottom() {this.mescroll && this.mescroll.onReachBottom();},onPageScroll(e) {this.mescroll && this.mescroll.onPageScroll(e);}, */onPullDownRefresh() {// this.getIndexList('refresh');},onShareAppMessage(res) {return { title: this.title,path: this.path};},computed: {statusBar() {const e = uni.getSystemInfoSync();return e.statusBarHeight;},bottom() {let bottom = 0;/*  #ifdef H5  */bottom = 90;/*  #endif */return bottom;}},methods: {splitTag(text){return text.split(" ");},getPicUrl(info) {if(info){if( info.length > 10 ){return info;}else {return appRequest.urlMap.getPicById + info;}}else {return "";}},getData(type){var _this = this;appRequest.request({method: "POST",url: appRequest.urlMap.findNmArticleList,data:{validFlag:1,type:type},success: function(res) {if (res.data.code == 200) {let obj = res.data.data;_this.items = obj;}else{uni.showToast({title:"获取失败",icon:"none"})}},fail: function(res) {uni.showToast({title:"网络异常",icon:"none"})}})},// 数据初始化initData() {this.getCity();this.getIndexList();},// 监听轮播图切换handleDotChange(e) {this.current = e.detail.current;},// 通用跳转navTo(route) {this.$mRouter.push({ route });},// Tabbar跳转switchTab(route) {uni.navigateTo({url:route})//this.$mRouter.switchTab({ route });},navToChannel(index) {if(index==2){uni.navigateTo({url:"/pages/pet/public"})}else{index = index == 1 ? 2:index;this.swiperCurrent = index;this.tabsCurrent = index;let jump = index == 2 ? 3 :index;this.getData(jump);}},navToIndex() {switch (this.current) {case 0:this.navTo(`/pages/index/notice/notice`);break;case 1:this.switchTab(`/pages/pet/list`);break;case 2:this.switchTab(`/pages/pet/forum`);break;default:break;}},// 跳至广告图指定页面indexTopToDetailPage(item) {this.$mHelper.handleBannerNavTo(item.jump_type, item.jump_link, item.id);},// 获取主页数据async getIndexList(refresh) {// await this.$http.get(`${indexList}`, {}).then(async r => {// 	uni.setNavigationBarTitle({ title: this.appName });// 	if (refresh === 'refresh') uni.stopPullDownRefresh();// 	this.initIndexData(r.data);// 	this.loading = false;// }).catch(() => {// 	this.loading = false;// 	if (refresh === 'refresh') uni.stopPullDownRefresh();// });},// 首页参数赋值initIndexData(data) {this.advs = {index_top:[{"cover": "/static/tab/banner01.png"},{"cover": "/static/tab/banner02.png"},{"cover": "/static/tab/banner03.png"},]}this.notices = data.announce;this.config = data.config;this.$mHelper.handleWxH5Share(this.share.share_title || this.appName, this.share.share_desc || `欢迎来到${this.appName}`, this.share.share_link || this.$mConfig.hostUrl, this.share.share_cover || this.$mSettingConfig.appLogo);},// 跳转至商品详情页navToDetailPage(data) {const { id } = data;if (!id) return;this.navTo(`/pages/pet/view?id=${id}`);},animationfinish(e) {this.current = e.detail.current;},// tabs通知swiper切换tabsChange(index) {this.swiperCurrent = index;this.tabsCurrent = index;let jump = index == 2 ? 3 :index;this.getData(jump);},// swiper-item左右移动,通知tabs的滑块跟随移动swiperTransition(e) {let dx = e.detail.dx;this.$refs.tabs.setDx(dx);},// 由于swiper的内部机制问题,快速切换swiper不会触发dx的连续变化,需要在结束时重置状态// swiper滑动结束,分别设置tabs和swiper的状态swiperAnimationfinish(e) {let tabsCurrent = e.detail.current;this.$refs.tabs.setFinishCurrent(tabsCurrent);this.swiperCurrent = tabsCurrent;this.tabsCurrent = tabsCurrent;this.cate = tabsCurrent;},getMescroll(i) {let mescrollItems = this.$refs.mescrollItem;if (mescrollItems) {let item = mescrollItems[i];if (item) return item.mescroll;}return null;},getCity() {let city = uni.getStorageSync('city');if (city) {this.city = city;} else {let _this = this;// #ifdef MPuni.authorize({scope: 'scope.userLocation',success() {// #endifuni.getLocation({type: 'gcj02',geocode: true,success(res) {_this.qqmapsdk.reverseGeocoder({location: {latitude: res.latitude,longitude: res.longitude},success(res) {let city = {id: res.result.ad_info.city_code - 156000000,title: res.result.ad_info.city}uni.setStorageSync('city', city);_this.city = city;_this.getMescroll(_this.swiperCurrent).triggerDownScroll();},fail(error) {console.error(error);}});},fail(error) {console.error(error);}});// #ifdef MP}});// #endif}}}
};
</script>

基于SpringBoot和UniAPP宠物服务预约小程序

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/104844.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vue若依导出word文件,简单的实现

首先前端导包,注意exportDocx的导包位置要修改成你自己的 import {exportDocx} from /utils/docUtil/docutil.js; import {addDays} from date-fns; import {listGongyi} from "/api/system/detail";然后新建一个测试按钮 <el-col :span"1.5"><…

<c++开发>通信工具 -之-SOME/IP移植部署 第一篇文章

&#xff1c;c开发&#xff1e;通信工具 -之-SOME/IP移植ubuntu部署 第一篇文章 一 前言 SOME/IP (Scalable service-Oriented MiddlewarE over IP) 是一种通信协议&#xff0c;主要用于嵌入式系统和车载网络中的服务导向通信。SOME/IP是AUTOSAR&#xff08;AUTomotive Open …

Docker安装ES+kibana8.9.1

参考&#xff1a;基于Docker安装Elasticsearch【保姆级教程、内含图解】_docker elasticsearch_Acloasia的博客-CSDN博客 创建网络 docker network create es-net 基于Docker安装Elasticsearch 拉取镜像 docker pull elasticsearch:8.9.1 挂载文件 mkdir -p /usr/local/e…

如何最简单、通俗地理解什么是机器学习?

那就究竟什么是学习呢?诺贝尔经济学奖和图灵奖双料得主、卡耐基梅隆大学的赫伯特 西蒙 (Herbert Simon) 教授是这样定义的&#xff1a;“学习是系统通过经验提升性能的过程”。可以看到&#xff0c;学习是一个过程&#xff0c;并且这里有3个关键词&#xff0c;即经验、提升和…

SQL执行顺序

注意&#xff1a; 本文案例采用 PostgreSQL 作为案例&#xff0c;与 MySQL 语法有些许不同。 目录 1. SQL 完整查询语句2. SQL 执行顺序3. 案例 1. SQL 完整查询语句 SELECT [ALL | DISTINCT] {* | table.* | [table.field1[as alias1][,table.field2[as alias2]][,...]]} FRO…

stm32 无刷电机 V/F控制(无刷电机变频控制)以及与foc(矢量控制)的区别

无刷电机有三种控制方式&#xff0c;方波控制&#xff0c;foc控制以及变频控制&#xff0c;前两章我们讲解了方波和foc的控制方法&#xff0c;今天我们一起来讲一讲什么是无刷电机的变频控制&#xff08;VF&#xff09;以及变频控制的优势是什么。 实验用的硬件还是KY_Motor的无…

【集合学习HashMap】HashMap集合详细分析

HashMap集合详细分析 一、HashMap简介 HashMap 主要用来存放键值对&#xff08;key-value的形式&#xff09;&#xff0c;它基于哈希表的 Map 接口实现&#xff0c;是常用的 Java 集合之一&#xff0c;是非线程安全的。 HashMap 可以存储 null 的 key 和 value&#xff0c;但 …

Kali Linux 2023.3 发布

Offective Security 发布了 Kali Linux 2023.3&#xff0c;这是其渗透测试和数字取证平台的最新版本。 Kali Linux 2023.3 中的新工具 除了对当前工具的更新之外&#xff0c;新版本的 Kali 通常还会引入新的工具。 这次&#xff0c;他们是&#xff1a; Calico – 云原生网络…

NGINX的速率限制(限流)

NGINX 的速率限制&#xff08;限流&#xff09; NGINX最有用但经常被误解和配置错误的功能之一是限流。它允许您限制用户在给定时间段内可以发出的HTTP请求量。 限流可以用于安全目的&#xff0c;例如减慢暴力破解密码的攻击。它可以通过限制请求速率为真实用户的典型值来帮助…

动物体外受精手术VR模拟仿真培训系统保证学生及标本的安全

奶牛是养殖业主要的资源&#xff0c;因此保证奶牛的健康对养殖业的成功和可持续发展具有重要已用&#xff0c;奶牛有一些常见易发病&#xff0c;一旦处理不当&#xff0c;对奶牛业都会造成较大的经济损失&#xff0c;传统的奶牛手术培训实操难度大、风险高且花费大&#xff0c;…

打家劫舍00

题目链接 打家劫舍 题目描述 注意点 如果两间相邻的房屋在同一晚上被小偷闯入&#xff0c;系统会自动报警0 < nums[i] < 400 解答思路 最初想的是使用深度优先遍历&#xff0c;到达任意一个位置时&#xff0c;小偷想要偷窃最高金额&#xff0c;一定要选择后面第2个房…

WEB APIs day5

一、window对象 BOM属于window对象 1.BOM&#xff08;浏览器对象模型&#xff09; bom里面包含着dom,只不过bom我们平时用得比较少&#xff0c;我们经常使用的是dom操作&#xff0c;因为我们页面中的这些标签都是在dom中取的&#xff0c;所以我们操作dom多一点。 window对象…

[Go版]算法通关村第十三关青铜——数字数学问题之统计问题、溢出问题、进制问题

这里写自定义目录标题 数字统计专题题目&#xff1a;数组元素积的符号思路分析&#xff1a;无需真计算&#xff0c;只需判断负数个数是奇是偶复杂度&#xff1a;时间复杂度 O ( n ) O(n) O(n)、空间复杂度 O ( 1 ) O(1) O(1)Go代码 题目&#xff1a;阶乘尾数0的个数思路分析&am…

CPU、MCU、MPU、SOC、SOCPC、概念解释之在嵌入式领域常听到的名词含义

CPU、MCU、MPU、SOC等几个在嵌入式领域学习过程中会涉及到的几个名词。我们来学习一下&#xff0c;资料从网上搜集的&#xff0c;有错的地方可以指出。。。 CPU、MCU、MPU、SOC、SOCPC、 1. CPU2. MPU3.MCUMPU和MCU的区别&#xff1a;4.SOC5. SoPC 1. CPU CPU&#xff0c;即中…

iis站点备份以及端口号查找

文件地址 %windir%\system32\inetsrv\config

iOS 17 及 Xcode 15.0 Beta7 问题记录

1、iOS 17 真机调试问题 iOS 17之后&#xff0c;真机调试Beta版本必须使用Beta版本的Xcode来调试&#xff0c;用以前复制DeviceSupport 方式无法调试&#xff0c;新的Beta版本Xcode中&#xff0c;已经不包含 iOS 17目录。如下图&#xff1a; 解决方案&#xff1a; 1&#x…

Nodejs-nrm:快速切换npm源 / npm官方源和其他自定义源之间切换

一、理解 Nodejs nrm Nodejs nrm 是一个管理 npm 源的工具。由于 npm 在国内的速度较慢&#xff0c;很多开发者会使用淘宝的 npm 镜像源&#xff0c;但是也会遇到一些问题&#xff0c;例如某些包在淘宝镜像源中不存在&#xff0c;或者淘宝镜像源本身也会有问题。 Nodejs nrm …

SpringCloud教程 | 第六篇: 分布式配置中心(Spring Cloud Config)

在上一篇文章讲述zuul的时候&#xff0c;已经提到过&#xff0c;使用配置服务来保存各个服务的配置文件。它就是Spring Cloud Config。 一、简介 在分布式系统中&#xff0c;由于服务数量巨多&#xff0c;为了方便服务配置文件统一管理&#xff0c;实时更新&#xff0c;所以需…

根据源码,模拟实现 RabbitMQ - 虚拟主机设计(5)

目录 一、虚拟主机设计 1.1、需求分析 1.1.1、核心 API 1.1.2、虚拟主机的是用来干什么的&#xff1f; 1.1.3、如何表示 交换机和虚拟主机 之间的从属关系&#xff1f; 二、实现 VirtualHost 类 2.1、属性 2.2、锁对象 2.3、公开实例 2.4、虚拟主机构造方法 2.5、交…

语言、习俗与成功:海外网红营销的文化敏感性

随着全球互联网的普及和社交媒体的兴起&#xff0c;海外网红营销正成为越来越多品牌和企业的选择。然而&#xff0c;要在海外市场取得成功&#xff0c;单纯的翻译内容和机械式的推广已经远远不够&#xff0c;文化敏感性成为海外网红营销的关键。本文Nox聚星将深入探讨语言、习俗…