diff --git a/src/assets/css/community/community.css b/src/assets/css/community/community.css index 96cd3f10..9cb0a82d 100644 --- a/src/assets/css/community/community.css +++ b/src/assets/css/community/community.css @@ -1,17 +1,35 @@ +/* 设置进入和离开的过渡效果 */ -/* 离开动画 */ .post-list .fade-leave-active { transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out; } -.post-list .fade-leave-to /* 离开完成后状态 */ -{ +.post-list .fade-enter-active { + transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out; +} + +/* 元素进入时,缩放并渐变 */ +.post-list .fade-leave-to /* .fade-leave-active in Vue 2.x */ { opacity: 0; - transform: translateX(100%) scale(0.5); /* 离开时从右边滑出并缩小 */ + transform: scale(0.5); /* 初始状态为缩小 */ +} +.post-list .fade-enter{ + opacity: 0; + transform: scale(0.5); /* 初始状态为缩小 */ } +/* 元素进入时恢复到原尺寸 */ +.post-list .fade-enter-to { + opacity: 1; + transform: scale(1); /* 变大恢复正常尺寸 */ +} +/* 元素离开时,继续保持缩小状态 */ +.post-list .fade-leave-to { + opacity: 0; + transform: scale(0.5); /* 离开时缩小 */ +} diff --git a/src/utils/axiosConfig.js b/src/utils/axiosConfig.js index be0c8bbe..a6561ad7 100644 --- a/src/utils/axiosConfig.js +++ b/src/utils/axiosConfig.js @@ -4,8 +4,8 @@ import {getToken} from '@/token/auth' // 注意这里使用了解构赋值来导 // 创建axios实例 const service = axios.create({ - // 去vue.config.js文件改baseurl!! - baseURL: '/api', // 注意!! 这里全局统一加上了 '/api' 前缀,但是vue.config.js文件在发送请求时去掉了/api,所以页面的请求接口若有/api还是要携带/api + // baseURL: 'http://47.122.59.26:8080/api', + // baseURL: 'http://10.205.10.22:8081/loveforest/api/', timeout: 5000, // 请求超时时间 }); @@ -13,7 +13,7 @@ const service = axios.create({ service.interceptors.request.use( config => { // 在发送请求之前做些什么 - const token = getToken(); // 获取token + const token = getToken(); // 获取token的方式取决于你的应用 // console.log('请求拦截器的token是:' +token) console.log('Request Config:', config); if (token) { @@ -24,7 +24,7 @@ service.interceptors.request.use( return config; }, error => { - // 请求错误 + // 对请求错误做些什么 console.error('Request Error:', error); return Promise.reject(error); } @@ -33,12 +33,32 @@ service.interceptors.request.use( //响应拦截器 service.interceptors.response.use( response => { + // 对响应数据做点什么 + // !!!注意!!!这里返回已经包含data const res = response.data; + // 你可以根据实际情况在这里添加一些通用的响应处理逻辑 + // 例如,根据返回的状态码判断请求是否成功 + // if (res.code !== 200) { + // 业务错误处理,比如弹窗提示等 + // return Promise.reject(new Error(res.message || 'Error')); + // } else { console.log(res) return res; + // } }, error => { - console.error('响应拦截器errorMessage:', error.message); + // 对响应错误做点什么 + // if (error.response) { + // 请求已发出,但服务器响应的状态码不在2xx的范围 + // console.error('Error status:', error.response.status); + // console.error('Error data:', error.response.data); + // } else if (error.request) { + // 请求已发出,但没有收到响应 + // console.error('Error request:', error.request); + // } else { + // 在设置请求时触发错误 + console.error('响应拦截器errorMessage:', error.message); + // } return Promise.reject(error); } ); diff --git a/src/views/community/PostCard.vue b/src/views/community/PostCard.vue index 28fd35b1..f9fecb2d 100644 --- a/src/views/community/PostCard.vue +++ b/src/views/community/PostCard.vue @@ -1,5 +1,4 @@