pwfnlmjh2
/
frontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

.

Browse Source
main
xuan 1 month ago
parent eaa18468ad
commit 5a1dc46cc1
7 changed files with 141 additions and 241 deletions
Show Stats Download Patch File Download Diff File

26
src/assets/css/community/community.css
Unescape View File

@ -1,17 +1,35 @@
/* 设置进入和离开的过渡效果 */
/* 离开动画 */
.post-list .fade-leave-active { .post-list .fade-leave-active {
transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out; 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; 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); /* 离开时缩小 */
}

28
src/utils/axiosConfig.js
Unescape View File

@ -4,8 +4,8 @@ import {getToken} from '@/token/auth' // 注意这里使用了解构赋值来导
// 创建axios实例 // 创建axios实例
const service = axios.create({ const service = axios.create({
// 去vue.config.js文件改baseurl！！ // baseURL: 'http://47.122.59.26:8080/api',
baseURL: '/api', // 注意！！ 这里全局统一加上了 '/api' 前缀，但是vue.config.js文件在发送请求时去掉了/api，所以页面的请求接口若有/api还是要携带/api // baseURL: 'http://10.205.10.22:8081/loveforest/api/',
timeout: 5000, // 请求超时时间 timeout: 5000, // 请求超时时间
}); });
@ -13,7 +13,7 @@ const service = axios.create({
service.interceptors.request.use( service.interceptors.request.use(
config => { config => {
// 在发送请求之前做些什么 // 在发送请求之前做些什么
const token = getToken(); // 获取token const token = getToken(); // 获取token的方式取决于你的应用
// console.log('请求拦截器的token是：' +token) // console.log('请求拦截器的token是：' +token)
console.log('Request Config:', config); console.log('Request Config:', config);
if (token) { if (token) {
@ -24,7 +24,7 @@ service.interceptors.request.use(
return config; return config;
}, },
error => { error => {
// 请求错误 // 对请求错误做些什么
console.error('Request Error:', error); console.error('Request Error:', error);
return Promise.reject(error); return Promise.reject(error);
} }
@ -33,12 +33,32 @@ service.interceptors.request.use(
//响应拦截器 //响应拦截器
service.interceptors.response.use( service.interceptors.response.use(
response => { response => {
// 对响应数据做点什么
// ！！！注意！！！这里返回已经包含data
const res = response.data; const res = response.data;
// 你可以根据实际情况在这里添加一些通用的响应处理逻辑
// 例如，根据返回的状态码判断请求是否成功
// if (res.code !== 200) {
// 业务错误处理，比如弹窗提示等
// return Promise.reject(new Error(res.message || 'Error'));
// } else {
console.log(res) console.log(res)
return res; return res;
// }
}, },
error => { error => {
// 对响应错误做点什么
// 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); console.error('响应拦截器errorMessage:', error.message);
// }
return Promise.reject(error); return Promise.reject(error);
} }
); );

192
src/views/community/PostCard.vue
Unescape View File

@ -1,5 +1,4 @@
<template> <template>
<div class="post-card"> <div class="post-card">
<div class="post-header"> <div class="post-header">
<img :src="avatarUrl" alt="avatar" class="avatar" /> <img :src="avatarUrl" alt="avatar" class="avatar" />
@ -16,31 +15,11 @@
</div> </div>
</button> </button>
<span>{{ timestamp }}</span> <span>{{ timestamp }}</span>
</div> </div>
<div style="right: -50%;position: relative;">
<button class="deletebutto" @click="openModal" v-if="this.userid===this.postuserid&&!showModal">
×
删除
</button>
<transition name="fade" @before-enter="beforeEnter" @enter="enter" @leave="leave">
<div v-if="showModal">
<button @click="deletebutton" class="deletebutto">确定</button>
<button @click="cancelDelete" class="deletebutto">取消</button>
</div>
</transition>
</div>
<div v-if="isfamilystory" class="ribbon-8"> <div v-if="isfamilystory" class="ribbon-8">
<span> <span>
家族故事 家族故事
@ -72,8 +51,7 @@
<transition name="fade" @before-enter="beforeEnter" @enter="enter" @leave="leave"> <transition name="fade" @before-enter="beforeEnter" @enter="enter" @leave="leave">
<div v-if="isCommentsVisible" class="comments-section"> <div v-if="isCommentsVisible" class="comments-section">
<div v-for="(comment, index) in comments" :key="index" class="comment"> <div v-for="(comment, index) in comments" :key="index" class="comment">
<p><strong>{{ comment.userid}}:</strong> {{ comment.content }} <button v-if="comment.userid==this.userid" style="color:#FE4E96;" <p><strong>{{ comment.userid}}:</strong> {{ comment.content }}</p>
@click="deletecomment(comment.commentid)">删除</button> </p>
</div> </div>
<!-- 发布评论 --> <!-- 发布评论 -->
@ -85,7 +63,7 @@
<script> <script>
import CommentInput from './CommentInput.vue'; import CommentInput from './CommentInput.vue';
import axios from '@/utils/axiosConfig'; import axios from 'axios';
export default { export default {
@ -116,11 +94,11 @@
}, },
created() { created() {
if (this.userlikelist.some(follow => follow.postid === this.postid)) {//是否已经点赞判断 查找列表中是否有当前postid if (this.userlikelist.some(follow => follow.postid === this.postid)) {
this.isLiked = true; this.isLiked = true;
} }
if (this.myfollows.some(follow => follow.myfollowid === this.postuserid)) {//是否已经关注判断 查找列表中是否有当前postuserid if (this.myfollows.some(follow => follow.myfollowid === this.postuserid)) {
this.followsbuttonActive = true; this.followsbuttonActive = true;
} }
@ -134,7 +112,6 @@
}, },
data() { data() {
return { return {
showModal: false,
isActive: false, isActive: false,
isLiked: false, isLiked: false,
isClicked: false, isClicked: false,
@ -143,56 +120,7 @@
}; };
}, },
methods: { methods: {
async deletecomment(commentid) {
try {
const response = await axios.delete(`/comments/commentid=${commentid}`);
if (response === "删除评论成功!!") {
this.$message.success("删除评论成功!!可刷新后查看");
}
else {
this.$message.error(response);
}
} catch (error) {
this.$message.error("删除评论失败");
console.log(error);
}
},
cancelDelete() {
// 取消删除，隐藏弹窗
this.showModal = false;
},
openModal() {
this.showModal = true;
},
async deletebutton() {
try {
const response = await axios.delete(`/posts/postid=${this.postid}`);
if (response === "删除动态成功 ！！") {
this.$message.success("删除动态成功 ！！可刷新后查看");
}
else {
this.$message.error(response);
}
} catch (error) {
this.$message.error("删除动态失败");
console.log(error);
}
this.showModal = false;
},
async followsbutton() {//关注按钮 async followsbutton() {//关注按钮
// 设置为 active，触发动画 // 设置为 active，触发动画
const useride = this.userid; const useride = this.userid;
@ -200,14 +128,14 @@
if (this.followsbuttonActive == false) { if (this.followsbuttonActive == false) {
try { try {
const response = await axios.post(`/Myfollows/userid=${useride}/myfollowid=${this.postuserid}`); const response = await axios.post(`http://localhost:8082/loveforest/Myfollows/userid=${useride}/myfollowid=${this.postuserid}`);
if (response === "关注成功！") { if (response.data === "关注成功！") {
this.$message.success(response); this.$message.success(response.data);
this.followsbuttonActive = true; this.followsbuttonActive = true;
} }
else { else {
this.$message.error(response); this.$message.error(response.data);
} }
} catch (error) { } catch (error) {
@ -221,14 +149,14 @@
else { else {
try { try {
const response = await axios.delete(`/Myfollows/userid=${useride}/myfollowid=${this.postuserid}`); const response = await axios.delete(`http://localhost:8082/loveforest/Myfollows/userid=${useride}/myfollowid=${this.postuserid}`);
if (response === "取消关注成功！") { if (response.data === "取消关注成功！") {
this.$message.success(response); this.$message.success(response.data);
this.followsbuttonActive = false; this.followsbuttonActive = false;
} }
else { else {
this.$message.error(response); this.$message.error(response.data);
} }
} catch (error) { } catch (error) {
@ -252,15 +180,15 @@
async increaseLikeCount() {//点赞按钮 async increaseLikeCount() {//点赞按钮
if (!this.isLiked) {//假如没点赞 if (!this.isLiked) {//假如没点赞
try { try {
const response = await axios.post(`/likes/userid=${this.userid}/postid=${this.postid}`); const response = await axios.post(`http://localhost:8082/loveforest/likes/userid=${this.userid}/postid=${this.postid}`);
if (response === "点赞成功！") { if (response.data === "点赞成功！") {
this.$message.success(response); this.$message.success(response.data);
this.$emit('updateLikeCount', this.likeCount + 1); this.$emit('updateLikeCount', this.likeCount + 1);
this.isLiked = !this.isLiked; this.isLiked = !this.isLiked;
} }
else { else {
this.$message.error(response); this.$message.error(response.data);
} }
} catch (error) { } catch (error) {
@ -270,16 +198,16 @@
} }
else {//假如已经点赞 else {//假如已经点赞
try { try {
const response = await axios.delete(`/likes/userid=${this.userid}/postid=${this.postid}`); const response = await axios.delete(`http://localhost:8082/loveforest/likes/userid=${this.userid}/postid=${this.postid}`);
if (response === "取消点赞成功！") { if (response.data === "取消点赞成功！") {
this.$message.success("取消点赞成功"); this.$message.error("取消点赞成功");
this.$emit('updateLikeCount', this.likeCount - 1); this.$emit('updateLikeCount', this.likeCount - 1);
this.isLiked = !this.isLiked; this.isLiked = !this.isLiked;
} }
else { else {
this.$message.error(response); this.$message.error(response.data);
} }
} catch (error) { } catch (error) {
@ -317,80 +245,6 @@
</script> </script>
<style scoped> <style scoped>
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.5s ease-in-out;
/* 渐变动画 */
}
.fade-enter,
.fade-leave-to {
opacity: 0;
/* 初始透明度 */
}
/* 可选：按钮在进入时的缩放效果 */
.fade-enter {
transform: scale(0.8);
}
.fade-enter-active {
transition: opacity 0.3s ease, transform 0.3s ease;
}
.fade-leave-active {
transition: opacity 0.3s ease, transform 0.3s ease;
}
.fade-leave-to {
opacity: 0;
transform: scale(0.8);
}
/* 控制显示时的定位变化 */
.fade-enter-to {
transform: translateY(0);
}
.fade-leave-to {
transform: translateY(-10px);
}
.modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0);
display: flex;
justify-content: center;
align-items: center;
z-index: 999;
}
.deletebutto {
margin-left: 10px;
margin-right: 10px;
position: relative;
width: 70px;
height: 30px;
line-height: 30px;
/* 修改 line-height 为与高度一致 */
border: none;
border-radius: 30px;
background: #FE4E96;
color: #fff;
text-align: center;
cursor: pointer;
font-size: 14px;
}
.postimage { .postimage {
max-width: 600px; max-width: 600px;
max-height: 600px; max-height: 600px;
@ -494,12 +348,12 @@
} }
.post-card { .post-card {
opacity: 0.9; opacity: 0.95;
margin: 20px; margin: 20px;
border: 1px solid #ddd; border: 1px solid #ddd;
padding: 15px; padding: 15px;
border-radius: 15px; border-radius: 8px;
background-color: #FFFBFB; background-color: #fff;
} }
.post-header { .post-header {

6
src/views/community/Postform.vue
Unescape View File

@ -126,6 +126,7 @@
return; return;
} }
const newPost = { const newPost = {
userid:1, userid:1,
username: '用户', username: '用户',
avatarurl: 'https://via.placeholder.com/50', avatarurl: 'https://via.placeholder.com/50',
@ -233,9 +234,8 @@
} }
.animate-card__layer { .animate-card__layer {
height: 16px; height: 5%;
width: 7%; width: 5%;
font-size: 14px;
background-color: #FE4E96; background-color: #FE4E96;
border: none; border: none;
} }

79
src/views/community/trends.vue
Unescape View File

@ -76,7 +76,7 @@
</div> </div>
<div class=heatlist style="margin-top:20px;display: flex;flex-direction:row;"> <div class=heatlist style="margin-top:20px;display: flex;flex-direction:row;">
<div <div
style="position:relative; display: flex;flex-direction:column; color: white; font-weight: bold;margin-left: 20px ;gap:51px;margin-top:10px"> style="position:relative; display: flex;flex-direction:column; color: white; font-weight: bold;margin-left: 20px ;gap:51px">
<div class=Hotsearchnum style="background-color:red;">1</div> <div class=Hotsearchnum style="background-color:red;">1</div>
<div class=Hotsearchnum style="background-color:#ff8e51;">2</div> <div class=Hotsearchnum style="background-color:#ff8e51;">2</div>
<div class=Hotsearchnum style="background-color:#ffc74fd2;">3</div> <div class=Hotsearchnum style="background-color:#ffc74fd2;">3</div>
@ -85,16 +85,16 @@
</div> </div>
<div <div
style="font-size: 14px; font-weight: 500; margin-left: 20px; display: flex; flex-direction: column; gap: 17px;width: 100%; "> style="font-size: 14px; font-weight: 500; margin-left: 30px; display: flex; flex-direction: column; gap: 17px;width: 100%;">
<div <div
style="overflow: hidden; list-style-type: none; width: 90%; height: 20%;max-height: 60px; background-color: rgba(255, 225, 240, 0.7); border-radius: 10%; position: relative; cursor: pointer;" style="overflow: hidden; list-style-type: none; width: 90%; height: 20%; background-color: rgba(255, 225, 240, 0.7); border-radius: 10%; position: relative; cursor: pointer;"
v-for="(Hotsearch, index) in HotsearchList" :key="index" @click="checkbypostid(Hotsearch.postid)"> v-for="(Hotsearch, index) in HotsearchList" :key="index" @click="checkbypostid(Hotsearch.postid)">
<div style=" font-weight: bold; margin-left: 10%; margin-top: 1%; ">{{ Hotsearch.username }}:</div> <div style=" font-weight: bold; margin-left: 10%; margin-top: 1%; ">{{ Hotsearch.username }}:</div>
<div style="left:10%;width: 70%; font-size: 12px;position: relative;">{{ Hotsearch.content}}</div> <div style="left:10%;width: 70%; font-size: 12px;position: relative;">{{ Hotsearch.content}}</div>
<svg width="20" height="20" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg" id="fire-station" <svg width="20" height="20" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg" id="fire-station"
style="position: absolute;right:5.8% ;top:20%;fill:red "> style="position: absolute;right:7% ;top:20%;fill:red ">
<path <path
d="M7.5 14C11.0899 14 14 11 14 7.50003C14 4.5 11.5 2 11.5 2L10.5 5.5L7.5 1L4.5 5.5L3.5 2C3.5 2 1 4.5 1 7.50003C1 11 3.91015 14 7.5 14ZM7.5 12.5C6.11929 12.5 5 11.3807 5 10C5 8.61929 7.5 5.5 7.5 5.5C7.5 5.5 10 8.61929 10 10C10 11.3807 8.88071 12.5 7.5 12.5Z" /> d="M7.5 14C11.0899 14 14 11 14 7.50003C14 4.5 11.5 2 11.5 2L10.5 5.5L7.5 1L4.5 5.5L3.5 2C3.5 2 1 4.5 1 7.50003C1 11 3.91015 14 7.5 14ZM7.5 12.5C6.11929 12.5 5 11.3807 5 10C5 8.61929 7.5 5.5 7.5 5.5C7.5 5.5 10 8.61929 10 10C10 11.3807 8.88071 12.5 7.5 12.5Z" />
</svg> </svg>
@ -123,8 +123,8 @@
</div> </div>
<div class="familystorelist" <div class="familystorelist"
style="margin-top: 20px; display: flex; justify-content: center; flex-direction: column; gap: 10px;margin-left: 20px;"> style="margin-top: 20px; display: flex; justify-content: center; flex-direction: column; gap: 10px;">
<div v-for="(story, index) in checkfamilystories" :key="index" class="familystore" <div v-for="(story, index) in familystories" :key="index" class="familystore"
style="width: 95%; height: 70px; background-color: rgba(255, 225, 240, 0.7); border-radius: 10%; position: relative;cursor: pointer;" style="width: 95%; height: 70px; background-color: rgba(255, 225, 240, 0.7); border-radius: 10%; position: relative;cursor: pointer;"
@click="checkbypostid(story.postid)"> @click="checkbypostid(story.postid)">
<img class="touxiang" src="../../assets/pictures/touxiang.png" /> <img class="touxiang" src="../../assets/pictures/touxiang.png" />
@ -142,8 +142,7 @@
<script> <script>
import PostCard from './PostCard.vue'; import PostCard from './PostCard.vue';
import PostForm from './Postform.vue'; import PostForm from './Postform.vue';
import axios from '@/utils/axiosConfig'; import axios from 'axios';
// import {getToken} from '@/token/auth'
export default { export default {
name: 'CommunityIndex', // 添加组件名称 name: 'CommunityIndex', // 添加组件名称
components: { PostCard, PostForm }, components: { PostCard, PostForm },
@ -157,13 +156,12 @@
hoverIndex: -1, hoverIndex: -1,
selectedIndex: -1, selectedIndex: -1,
isloading: false, isloading: false,
loaddone: 0,
checkPostsindex: 0, checkPostsindex: 0,
checkPosts: [], checkPosts: [],
page: 1, page: 1,
userid: 1, userid: 1,
totalPages: 1, totalPages: 1,
familystoriespage:0,
checkfamilystories:[],
posts: [ posts: [
{ {
@ -209,14 +207,14 @@
async fllowlist() { async fllowlist() {
const userid = this.userid;//获取用户id const userid = this.userid;//获取用户id
axios.get(`/Myfollows/userid=${userid}`) axios.get(`http://localhost:8082/loveforest/Myfollows/userid=${userid}`)
.then(response => { .then(response => {
this.myfollows.splice(0, this.myfollows.length); this.myfollows.splice(0, this.myfollows.length);
this.myfollows.push(...response); this.myfollows.push(...response.data);
return response; return response.data;
}) })
.catch(error => { .catch(error => {
console.error('Error:', error); console.error('Error:', error);
@ -225,20 +223,20 @@
}, },
submitPost(newpost) {//发布帖子后，本地显示帖子 submitPost(newpost) {//发布帖子后，本地显示帖子
this.checkPosts.unshift(newpost); this.checkPosts = [newpost, ...this.checkPosts];
}, },
async load() {//加载帖子函数 async load() {//加载帖子函数
if (this.isloading) { if (this.isloading) {
try { try {
const response = await axios.get(`/posts`, { const response = await axios.get(`http://localhost:8082/loveforest/posts`, {
params: { params: {
page: this.page, page: this.page,
size: 5, size: 5,
}, },
}); });
const filteredPostsList = response.records; const filteredPostsList = response.data.records;
this.$message("动态加载中page" + this.page); this.$message("动态加载中page" + this.page);
@ -255,16 +253,14 @@
try { try {
const response = await axios.get(`/posts/postid=${postid}`); const response = await axios.get(`http://localhost:8082/loveforest/posts/postid=${postid}`);
this.isloading = false; this.isloading = false;
console.error('动态动态！！！！：',response);
this.checkPosts.splice(0, this.checkPosts.length); this.checkPosts.splice(0, this.checkPosts.length);
this.checkPosts.push(response); this.checkPosts.push(response.data);
} catch (error) { } catch (error) {
console.error('动态获取失败', error); console.error('动态获取失败', error);
} }
@ -272,13 +268,13 @@
async loaduserlikes() {//加载user点赞列表 并会传入每个帖子做是否已经点赞的判断 async loaduserlikes() {//加载user点赞列表 并会传入每个帖子做是否已经点赞的判断
const userid = this.userid;//获取用户id const userid = this.userid;//获取用户id
axios.get(`/likes/userid=${userid}`) axios.get(`http://localhost:8082/loveforest/likes/userid=${userid}`)
.then(response => { .then(response => {
this.userlikelist.splice(0, this.userlikelist.length); this.userlikelist.splice(0, this.myfollows.length);
this.userlikelist.push(...response); this.userlikelist.push(...response.data);
return response; return response.data;
}) })
.catch(error => { .catch(error => {
console.error('Error:', error); console.error('Error:', error);
@ -297,9 +293,9 @@
}, },
async loadhotpost() {//加载热门动态 async loadhotpost() {//加载热门动态
try { try {
const response = await axios.get(`/posts/topposts`); const response = await axios.get(`http://localhost:8082/loveforest/posts/topposts`);
this.HotsearchList.push(...response); this.HotsearchList.push(...response.data);
console.log(response.data);
} catch (error) { } catch (error) {
this.$message.error("热门动态获取失败"); this.$message.error("热门动态获取失败");
@ -310,9 +306,8 @@
async loadhotfamilystory() {//加载热门家族故事 async loadhotfamilystory() {//加载热门家族故事
try { try {
const response = await axios.get(`/posts/topfamilystory`); const response = await axios.get(`http://localhost:8082/loveforest/posts/topfamilystory`);
this.familystories.push(...response); this.familystories.push(...response.data);
this.checkfamilystories.push(...response.slice(0, 4));
} catch (error) { } catch (error) {
@ -328,12 +323,12 @@
this.selectedIndex = index; // 点击后设置选中的项 this.selectedIndex = index; // 点击后设置选中的项
try { try {
const response = await axios.get(`/posts/userid=${userid}`); const response = await axios.get(`http://localhost:8082/loveforest/posts/userid=${userid}`);
this.isloading = false; this.isloading = false;
this.checkPosts.splice(0, this.checkPosts.length); this.checkPosts.splice(0, this.checkPosts.length);
this.checkPosts.push(...response); this.checkPosts.push(...response.data);
if (response.length === 0) { if (response.data.length === 0) {
this.$message("对方还没有发过动态哦"); this.$message("对方还没有发过动态哦");
} }
@ -355,8 +350,8 @@
async toggleCommentsVisibility(index, postid) {//展开评论以及获取评论列表 async toggleCommentsVisibility(index, postid) {//展开评论以及获取评论列表
this.$message("评论区展开" + index); this.$message("评论区展开" + index);
try { try {
const response = await axios.get(`/comments/postid=${postid}`); const response = await axios.get(`http://localhost:8082/loveforest/comments/postid=${postid}`);
this.checkPosts[index].comments = response; this.checkPosts[index].comments = response.data;
//等待获取user名字接口 //等待获取user名字接口
this.checkPosts[index].isCommentsVisible = !this.checkPosts[index].isCommentsVisible; this.checkPosts[index].isCommentsVisible = !this.checkPosts[index].isCommentsVisible;
@ -370,7 +365,7 @@
async addComment(index, commentText, postid) {//发送评论 async addComment(index, commentText, postid) {//发送评论
try { try {
const response = await axios.post('/comments/addcomments', { const response = await axios.post('http://localhost:8082/loveforest/comments/addcomments', {
userid: this.userid, userid: this.userid,
postid: postid, postid: postid,
content: commentText content: commentText
@ -380,7 +375,7 @@
'Accept': 'application/json' 'Accept': 'application/json'
} }
}); });
if (response=== "评论成功！") { if (response.data === "评论成功！") {
this.$message.success("评论成功！"); this.$message.success("评论成功！");
this.checkPosts[index].comments.push({ this.checkPosts[index].comments.push({
username: '用户名',//等待user接口 username: '用户名',//等待user接口
@ -391,7 +386,7 @@
this.checkPosts[index].commentCount += 1; this.checkPosts[index].commentCount += 1;
} }
else { else {
this.$message.error(response); this.$message.error(response.data);
} }
} catch (error) { } catch (error) {
@ -405,14 +400,6 @@
refresh() {//热门家族故事刷新换一批按钮 refresh() {//热门家族故事刷新换一批按钮
// 点击后触发的刷新动作 // 点击后触发的刷新动作
console.log('Refreshing...'); console.log('Refreshing...');
this.familystoriespage+=4;
if(this.familystoriespage>12){
this.familystoriespage=0;
}
this.checkfamilystories.splice(0, this.checkfamilystories.length);
this.checkfamilystories.push(...this.familystories.slice(this.familystoriespage, this.familystoriespage+4));
this.triggerAnimation(); this.triggerAnimation();
}, },

12
src/views/login/login.vue
Unescape View File

@ -246,7 +246,7 @@ export default {
this.$router.push('/main'); this.$router.push('/main');
} catch (error) { } catch (error) {
// 处理登录错误 // 处理登录错误
console.error('登录错误:', error); alert('登录错误:', error);
} }
}else{ }else{
alert("验证码错误") alert("验证码错误")
@ -262,18 +262,16 @@ export default {
} }
try { try {
// 这里调用后端注册接口 // 这里调用后端注册接口
const response = await axios.post('', null, { const response = await axios.post('/auth/register', {
params:{
username: this.regUser.regUsername, username: this.regUser.regUsername,
password: this.regUser.regPwd, password: this.regUser.regPwd
} }, {});
});
// 处理注册成功逻辑 // 处理注册成功逻辑
alert('注册成功'); alert('注册成功');
console.log('注册成功', response); console.log('注册成功', response);
} catch (error) { } catch (error) {
// 处理注册失败逻辑 // 处理注册失败逻辑
console.error('注册失败', error); alert('注册失败'+ error);
} }
} }
}, },

35
vue.config.js
Unescape View File

@ -5,12 +5,35 @@ module.exports = defineConfig({
port: 8080, port: 8080,
https: false, https: false,
proxy:{ proxy:{
'/api': { //设置拦截器 拦截器格式 斜杠+拦截器名字，名字可以自己定 //登录接口
target: 'http://47.122.59.26:8083', //代理的目标地址 '/auth/login':{
changeOrigin: true, //是否设置同源，输入是的 target : 'https://911fb0525ms3.vicp.fun/loveforest/api',
pathRewrite: { //路径重写 changeOrigin : true,
'^/api': '' //选择忽略拦截器里面的内容 },
} //注册接口
'/auth/register':{
target : 'https://911fb0525ms3.vicp.fun/loveforest/api',
changeOrigin : true,
},
//获取好友列表接口
'/relationships':{
target : 'https://911fb0525ms3.vicp.fun/loveforest/api',
changeOrigin : true
},
//获取相应的聊天记录的接口
'/messages/chat':{
target : 'https://911fb0525ms3.vicp.fun/loveforest/api',
changeOrigin : true
},
//保存聊天的一条消息接口
'/messages/send':{
target : 'https://911fb0525ms3.vicp.fun/loveforest/api',
changeOrigin : true
},
//新消息是否被已读的接口
'/messages/mark-as-read':{
target : 'https://911fb0525ms3.vicp.fun/loveforest/api',
changeOrigin : true
} }
} }
}, },

Write Preview
Loading…
Cancel
Save