# Pet-home 宠物收养交流平台

**Repository Path**: zzzPython/pet-home

## Basic Information

- **Project Name**: Pet-home 宠物收养交流平台
- **Description**: 这是一个宠物收养交流平台web应用，主要分为“宠物信息展示”和“即时通讯”两个板块进行开发。在应用中可以查看其他人的宠物信息，也可以将自己的宠物信息上传，并且可以与他人在线交流宠物收养问题。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: https://gitee.com/wzw678/pet-home
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 8
- **Created**: 2023-04-04
- **Last Updated**: 2023-04-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Pet-home 宠物收养交流平台
实现用户登录注册，主页宠物展示，用户宠物信息录入修改，用户收藏宠物，宠物详情查看，在线聊天等功能。
## 一、相关技术栈
- `Vue3、vue-router` ：搭建前端用户界面，实现SPA单页应用；
- `Koa` ：编写服务端应用程序、后端接口，调度Mysql数据库对用户数据持久化；
- `axios` ：基于 promise 的网络请求库，是前端向后端获取数据的请求工具；
- `pinia` ：更加轻量级的 Vue 存储库；
- `flexible` ：移动端适配解决方案；
- `vant` ：轻量、可靠的移动端组件库；
- `json web token (JWT)` ：token验证登录；
- `ali-oss` ：阿里云OSS对象存储服务；

## 二、在线演示
 - 用户名：张三（或李四）  密码：123  (或自行注册)
 - 在线地址：http://47.115.220.120:8080/login
 - 请使用微信扫码：![本地路径](/pet-home.png)

## 三、css过渡动画
### 1. 页面跳转前的项目点击涟漪效果
- `custom.less` 中的 `button-ripple` 函数放置在想要点击效果的外层容器的样式里。
### 2. 收藏爱心动态效果
- 使用`::before` 伪元素和 `animation` 动画来实现。在想要动画效果的外层容器样式上添加 `fill`。
### 3. 页面切换过渡动画
- 使用`transition` 标签，并结合vue动画属性：`enter-active`、`enter-to`、`enter-from`、`leave-active`、`leave-from`、`leave-to` 来实现效果。
### 4. 聊天列表以及聊天记录出现和消失动画
- 使用`TransitionGroup`标签，并结合vue动画属性（上面有提到）来实现。主要用于对 v-for 列表中的元素或组件的插入、移除和顺序改变添加动画效果。需要注意的是：列表中的每个元素都必须有一个独一无二的 key，不可以使用 index作为key。



## 四、问题！！！
1. 刷新页面，会导致页面白屏。
- 原因：在`router` 配置文件中 `createWebHistory` 函数开启`history` 模式在刷新页面的时候，如果没有相应的路由或资源，就会刷出 404。
在 `vue.config.js` 里的 `publicPath` 配置是 `publicPath`:  '. / '，`hash `模式时，项目的根目录是不变的，而在 `history` 模式时，以 / 开头的嵌套路径会被当做根路径。
- 解决：将 `publicPath` 配置进行注释掉，或者按照下面的写法 (把 './' 改成 '/' )

2. 退出登录时，将vuex中的数据进行清理。

3. 页面切换时出现空白闪屏
- 原因：每次切换的时候，由于原页面占着主页面的位置，其余页面，由于页面div本身是block元素，所以其他block元素会另起一行，所以每次切换页面时相当于从下面调出新页面，所以会有一瞬的空白是从下面调出下一页到主页面的平行页的过程，再执行动画过渡命令。
- 解决：
(1) 给页面CSS添加设置“position:absolute;”，此时页面脱离文档流，不占空间，这样就不会把下一页挤下去，完成平滑过渡。可能也存在一定的弊端，会导致页面样式的混乱。
(2)