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
• 请使用微信扫码：

三、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)