# **宠物派**

## 简介

本网站的开发使用的是Vue框架，包含的技术栈有**Vue、Vue Router、Vuex、Axios、Vant、Element-UI、Node.js、Express、Nodemailer、MySQL、高德地图**等技术。

**网站描述：**

-  “宠物派”是一个移动端的宠物寄养平台，分为“前台子系统”和“后台管理子系统“两部分。满足爱宠人士对 宠物寄养的需求

-  前台主要功能有用户注册登录、寄养商家浏览、伴宠日记浏览、宠物信息管理、订单功能等；

-   后台主要功能有商家管理、伴宠日记管理、用户管理、订单管理等。

-  前台使用Vant-UI相关组件进行设计开发,后台界面使用Element-UI相关组件设计开发

-  前端注册功能使用Nodemailer进行邮箱验证

-  使用Axios发送异步请求获取页面数据,设置Axios请求拦截器和响应拦截器，拦截特定请求携带token实现用户验证

-  使用Vue-Router前置路由守卫,根据sessionStorage验证用户登录状态

-  使用Vuex实现组件间共享数据,并配合sessionStorage存储用户登录信息

-  后端使用Node.js及Express框架并结合MySQL数据库搭建完成,编写了符合RESTful API规范的API接口

-  使用CORS实现跨源资源共享(跨域)

-  使用高德地图JSAPI实现商家店铺定位并自动添加点标记功能

-  使用rem单位解决移动端适配问题

## 网站功能介绍

### 前台

用户进入“宠物派”需要通过邮箱注册账号，使用Nodemailer发送验证码，验证成功后方可注册。用户在登录后会携带token，将token和用户id存入sessionStorage用于保持登录状态。

用户可以浏览版宠专员发布的伴宠日记，查看来自他人的分享，以帮助自己选择寄养的店铺。

用户可以浏览寄养商家店铺，店铺详情页面有商家提供的寄养条件，有商家地址的地图导航，用户选择立即预定之后会跳转到预定信息表单填写界面，可以新增和编辑联系人和联系电话，选择自己要寄养的宠物，若是没有添加宠物可以在此页面新增宠物（也可以到“我的”页面新增宠物信息），之后选择寄养的日期，系统会自动生成订单总价格，成功支付后便完成了下单。

用户进入订单页面，可以查询自己的所有订单信息，也可以查询不同状态的订单。用户选择点击某一个订单卡片后可以进入对应订单的详情页面，可以更改订单的状态，分为进行中、已完成、已取消三个状态，用户也可以选择删除订单。

### 后台

进入后台管理系统需要先登录验证管理员账号和密码，验证成功后才能够进入后台管理系统，使用全局路由守卫防止恶意进入。

成功登录后，管理员可以对“宠物派”的信息数据进行管理操作，包括商家管理、订单管理、用户管理、伴宠日记管理。

注：如有不足以及缺陷之处望请谅解。作者会持续完善更新网站。如有侵权可联系作者删除.

服务端及数据库文件加Q联系作者获取

QQ:434956409

## 前台效果图

![1](ReadMe.assets/1.png)

![2](ReadMe.assets/2.png)

![3](ReadMe.assets/3.png)

## 后台效果图

![image-20220605215644177](ReadMe.assets/image-20220605215644177.png)

翟创辉/宠物寄养H5前台Vue2+Vant2-宠物寄养后台管理系统Vue2+Element Ui

简介

发行版

贡献者

近期动态

翟创辉/宠物寄养H5前台Vue2+Vant2-宠物寄养后台管理系统Vue2+Element Ui .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

翟创辉/宠物寄养H5前台Vue2+Vant2-宠物寄养后台管理系统Vue2+Element Ui