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

解决冲突

Browse Source
main
helloworld180 1 month ago
parent ca3c0fc5fe 347411d9cf
commit eaa18468ad
9 changed files with 502 additions and 169 deletions
Show Stats Download Patch File Download Diff File

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

@ -1,35 +1,17 @@
/* 设置进入和离开的过渡效果 */
/* 离开动画 */
.post-list .fade-leave-active {
transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}
.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: scale(0.5); /* 初始状态为缩小 */
}
.post-list .fade-enter{
.post-list .fade-leave-to /* 离开完成后状态 */
{
opacity: 0;
transform: scale(0.5); /* 初始状态为缩小 */
transform: translateX(100%) scale(0.5); /* 离开时从右边滑出并缩小 */
}
/* 元素进入时恢复到原尺寸 */
.post-list .fade-enter-to {
opacity: 1;
transform: scale(1); /* 变大恢复正常尺寸 */
}
/* 元素离开时，继续保持缩小状态 */
.post-list .fade-leave-to {
opacity: 0;
transform: scale(0.5); /* 离开时缩小 */
}

19
src/token/auth.js
Unescape View File

@ -13,6 +13,23 @@ export function getToken() {
export function removeToken() {
localStorage.removeItem('authToken');
}
// 存储、获取、删除用户登录后的个人ID
// 定义 setUserId 函数，用于将 UserId 存储到 localStorage
export function setUserId(id) {
localStorage.setItem('UserId', id);
}
// 定义 getUserId 函数，用于从 localStorage 获取 UserId
export function getUserId() {
return localStorage.getItem('UserId');
}
// 定义 removeUserId 函数，用于从 localStorage 删除 UserId
export function removeUserId() {
localStorage.removeItem('UserId');
}

26
src/views/chat/ChatList.vue
Unescape View File

@ -1,9 +1,10 @@
<template>
<div ref="scrollDiv" class="container" :style="{height: containerHeight}" @scroll="scroll_event">
<div class="list" :style="{top: listTop}">
<slot :show_list="getShowList" :show_height="one_height" @chatWithEvent="chatWithHandle"></slot>
<slot :show_list="getShowList" :show_height="one_height"></slot>
<div :style="{height: barHeight}"></div>
</div>
</div>
</template>
@ -37,7 +38,10 @@ export default{
return this.items.slice(this.start,this.end)
},
barHeight(){
return this.one_height * (this.items.length-this.start-this.shownum+1) + 'px'
if((this.items.length-this.start-this.shownum+1) <= 0)
return 0 + 'px'
else
return this.one_height * (this.items.length-this.start-this.shownum+1) + 'px'
},
listTop(){
// console.log(this.items,this.shownum,this.one_height)
@ -49,24 +53,24 @@ export default{
const top = e.target.scrollTop
this.start = Math.floor(top / this.one_height)
this.end = this.start + this.shownum
// e.target.scrollTop = e.target.scrollHeight
// this.end = this.items.length
// this.start = this.end - this.shownum
},
chatWithHandle(){
console.log(1)
if(this.status == true){
let scrollElem = this.$refs.scrollDiv
scrollElem.scrollTop = scrollElem.scrollHeight
console.log(scrollElem.scrollHeight,scrollElem.scrollTop)
this.end = this.items.length
// console.log(this.end)
this.start = this.end - this.shownum
if(this.start < 0 ){
if(this.start<0)
this.start = 0
}else{
let scrollElem = this.$refs.scrollDiv
scrollElem.scrollTo({top: scrollElem
,behavior: 'smooth'})
console.log(1)
}
}
}
},
expose: ['chatWithHandle'],
watch:{
status(){
console.log(1)

1
src/views/chat/HonneyBtn.vue
Unescape View File

@ -21,6 +21,7 @@ export default{
props:{
Status:Boolean,
cnt:String,
userId1: Number,
ReviseStatus2Father: Function
// Status2:String
},

313
src/views/chat/chat.vue
Unescape View File

@ -17,14 +17,16 @@
<p id="chatFriendName">{{ item.name }}</p>
<p id="chatFriendMsg">{{ getLatestNew(item) }}</p>
</div>
<p id="chatTime">{{ item.chatHistory[item.chatHistory.length - 1].time.split(' ')[1] }}</p>
<p id="chatTime" v-if="item.chatHistory.length != 0">{{ item.chatHistory[item.chatHistory.length - 1].time.split(' ')[1] }}</p>
<p id="chatTime" v-else>00:00</p>
<label v-if="item.unreading_num != 0" style="position: relative;bottom:25%;background-color: red;color: white;border-radius: 50%;font-weight: 400;font-size: 8px;text-align: center;height: 15px;width: 15px;line-height: 180%;">{{ item.unreading_num }}</label>
</div>
</ChatList>
</div>
</div>
<div class="chat-middlelayout">
<ChatList v-if="chatWith == '' ? false : true" :shownum="Number(5)" :items="getFriendObject.chatHistory" :one_height="Number(100)" :status="true" v-slot="a">
<ChatList ref="chatHandle" v-if="chatWith == '' ? false : true" :shownum="Number(5)" :items="getFriendObject.chatHistory" :one_height="Number(100)" :status="true" v-slot="a">
<div v-for="(item,index) of a.show_list" :key="index">
<ChatCard :your_icon="getFriendObject.icon" :my_icon="userInfo.icon" :name="item.name" :yours="chatWith" :content="historyContentHandle(item.content)"></ChatCard>
</div>
@ -50,7 +52,7 @@
<p style="color: #f85096;">他的主页</p>
</div>
<div class="chat-home-tree-btn">
<button class="chat-tree-btn"></button>
<button class="chat-tree-btn" @click="cliTreeBtn"></button>
<p style="color: #a75efb;">族谱树</p>
</div>
</div>
@ -84,14 +86,17 @@
import HonneyBtn from './HonneyBtn.vue';
import ChatCard from './ChatCard.vue';
import ChatList from './ChatList.vue';
import {getToken,getUserId} from '@/token/auth'
import axios from 'axios';
export default {
name: 'chatIndex', // 添加组件名称
data(){
return{
searchName: '',
new_msg_nums: 1,
new_msg_nums: 0,
chatWith:'',
userInfo:{
id: Number(),
name:'我',
icon:'/icon/abc.jpg'
},
@ -101,62 +106,62 @@ export default {
// 由于编译后文件夹名称会发生改变，所以把icon图片单独放到服务器的文件夹下面以此来跳过编译（public文件夹）
// 这里文件路径命名是相对于public的绝对路径
friendsInfoList: [
{name:'潇潇',icon:'/icon/icon.png',position:'london',birth:'2004-1-1',concern_status:false,black_status:true,beeing_friends_time: 302,
chatHistory:[
{name:'我',content:'早重中之重做做做做做做做做做做做做做做做做做做做战争之子战争之子做做做做',time:'2024-11-24 1:24'},
{name:'潇潇',content:'中',time:'2024-11-24 2:11'},
{name:'我',content:'晚',time:'2024-11-24 3:24'},
]},
{name:'小刚','icon':'/icon/UserIcon.png',position:'china',birth:'2003-3-4',concern_status:false,black_status:false,beeing_friends_time: 2,
chatHistory:[
{name:'我',content:'you are',time:'2024-11-24 22:24'},
{name:'小刚',content:'hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh',time:'2024-11-25 22:11'},
]},
{name:'吴伟',icon:'/icon/icon.png',position:'endland',birth:'2004-5-2',concern_status:false,black_status:false,beeing_friends_time: 32,
chatHistory:[
{name:'我',content:'早上好',time:'2024-11-24 22:25'},
{name:'吴伟',content:'iii',time:'2024-11-24 23:11'},
]},
{name:'小闽','icon':'/icon/UserIcon.png',position:'china',birth:'2003-3-4',concern_status:false,black_status:false,beeing_friends_time: 1,
chatHistory:[
{name:'我',content:'you are',time:'2024-11-24 22:24'},
{name:'小闽',content:'h',time:'2024-11-25 22:11'},
]},
{name:'小','icon':'/icon/UserIcon.png',position:'china',birth:'2003-3-4',concern_status:false,black_status:false,beeing_friends_time: 1,
chatHistory:[
{name:'我',content:'you are',time:'2024-11-24 22:24'},
{name:'小',content:'h',time:'2024-11-25 22:11'},
]},
{name:'闽','icon':'/icon/UserIcon.png',position:'china',birth:'2003-3-4',concern_status:false,black_status:false,beeing_friends_time: 1,
chatHistory:[
{name:'我',content:'you are',time:'2024-11-24 22:24'},
{name:'闽',content:'h',time:'2024-11-25 22:11'},
]},
{name:'哈哈','icon':'/icon/UserIcon.png',position:'china',birth:'2003-3-4',concern_status:false,black_status:false,beeing_friends_time: 1,
chatHistory:[
{name:'我',content:'you are',time:'2024-11-24 22:24'},
{name:'哈哈',content:'h',time:'2024-11-25 22:11'},
]},
{name:'kk','icon':'/icon/UserIcon.png',position:'china',birth:'2003-3-4',concern_status:false,black_status:false,beeing_friends_time: 1,
chatHistory:[
{name:'我',content:'you are',time:'2024-11-24 22:24'},
{name:'kk',content:'h',time:'2024-11-25 22:11'},
]},
{name:'44','icon':'/icon/UserIcon.png',position:'china',birth:'2003-3-4',concern_status:false,black_status:false,beeing_friends_time: 1,
chatHistory:[
{name:'我',content:'you are',time:'2024-11-24 22:24'},
{name:'44',content:'h',time:'2024-11-25 22:11'},
]},
{name:'77','icon':'/icon/UserIcon.png',position:'china',birth:'2003-3-4',concern_status:false,black_status:false,beeing_friends_time: 1,
chatHistory:[
{name:'我',content:'you are',time:'2024-11-24 22:24'},
{name:'77',content:'h',time:'2024-11-25 22:11'},
]},
{name:'88','icon':'/icon/UserIcon.png',position:'china',birth:'2003-3-4',concern_status:false,black_status:false,beeing_friends_time: 1,
chatHistory:[
{name:'我',content:'you are',time:'2024-11-24 22:24'},
{name:'88',content:'h',time:'2024-11-25 22:11'},
]},
// {name:'潇潇',icon:'/icon/icon.png',position:'london',birth:'2004-1-1',concern_status:false,black_status:true,beeing_friends_time: 302,
// chatHistory:[
// {name:'我',content:'早重中之重做做做做做做做做做做做做做做做做做做做战争之子战争之子做做做做',time:'2024-11-24 1:24'},
// {name:'潇潇',content:'中',time:'2024-11-24 2:11'},
// {name:'我',content:'晚',time:'2024-11-24 3:24'},
// ]},
// {name:'小刚',icon:'/icon/UserIcon.png',position:'china',birth:'2003-3-4',concern_status:false,black_status:false,beeing_friends_time: 2,
// chatHistory:[
// {name:'我',content:'you are',time:'2024-11-24 22:24'},
// {name:'小刚',content:'hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh',time:'2024-11-25 22:11'},
// ]},
// {name:'吴伟',icon:'/icon/icon.png',position:'endland',birth:'2004-5-2',concern_status:false,black_status:false,beeing_friends_time: 32,
// chatHistory:[
// {name:'我',content:'早上好',time:'2024-11-24 22:25'},
// {name:'吴伟',content:'iii',time:'2024-11-24 23:11'},
// ]},
// {name:'小闽',icon:'/icon/UserIcon.png',position:'china',birth:'2003-3-4',concern_status:false,black_status:false,beeing_friends_time: 1,
// chatHistory:[
// {name:'我',content:'you are',time:'2024-11-24 22:24'},
// {name:'小闽',content:'h',time:'2024-11-25 22:11'},
// ]},
// {name:'小',icon:'/icon/UserIcon.png',position:'china',birth:'2003-3-4',concern_status:false,black_status:false,beeing_friends_time: 1,
// chatHistory:[
// {name:'我',content:'you are',time:'2024-11-24 22:24'},
// {name:'小',content:'h',time:'2024-11-25 22:11'},
// ]},
// {name:'闽',icon:'/icon/UserIcon.png',position:'china',birth:'2003-3-4',concern_status:false,black_status:false,beeing_friends_time: 1,
// chatHistory:[
// {name:'我',content:'you are',time:'2024-11-24 22:24'},
// {name:'闽',content:'h',time:'2024-11-25 22:11'},
// ]},
// {name:'哈哈',icon:'/icon/UserIcon.png',position:'china',birth:'2003-3-4',concern_status:false,black_status:false,beeing_friends_time: 1,
// chatHistory:[
// {name:'我',content:'you are',time:'2024-11-24 22:24'},
// {name:'哈哈',content:'h',time:'2024-11-25 22:11'},
// ]},
// {name:'kk',icon:'/icon/UserIcon.png',position:'china',birth:'2003-3-4',concern_status:false,black_status:false,beeing_friends_time: 1,
// chatHistory:[
// {name:'我',content:'you are',time:'2024-11-24 22:24'},
// {name:'kk',content:'h',time:'2024-11-25 22:11'},
// ]},
// {name:'44',icon:'/icon/UserIcon.png',position:'china',birth:'2003-3-4',concern_status:false,black_status:false,beeing_friends_time: 1,
// chatHistory:[
// {name:'我',content:'you are',time:'2024-11-24 22:24'},
// {name:'44',content:'h',time:'2024-11-25 22:11'},
// ]},
// {name:'77',icon:'/icon/UserIcon.png',position:'china',birth:'2003-3-4',concern_status:false,black_status:false,beeing_friends_time: 1,
// chatHistory:[
// {name:'我',content:'you are',time:'2024-11-24 22:24'},
// {name:'77',content:'h',time:'2024-11-25 22:11'},
// ]},
// {name:'88',icon:'/icon/UserIcon.png',position:'china',birth:'2003-3-4',concern_status:false,black_status:false,beeing_friends_time: 1,
// chatHistory:[
// {name:'我',content:'you are',time:'2024-11-24 22:24'},
// {name:'88',content:'h',time:'2024-11-25 22:11'},
// ]},
],
showSearchList: [],
recomendList: [
@ -169,6 +174,8 @@ export default {
mounted(){
if(this.searchName == '')
this.showSearchList = this.friendsInfoList
this.get_friendsInfoList()
},
components:{
HonneyBtn,
@ -177,33 +184,190 @@ export default {
ChatList
},
methods:{
async revise_honneyBtn_status(userId1,userId2,status){
//向后端发送是出于好友状态还是黑名单状态
try{
const response = await axios.post('/relationships',{
userId1: userId1,
userId2: userId2,
status: status
},{
headers:{Authorization : 'Bearer '+getToken()}
})
console.log(response.data)
}catch(error){
alert('好友状态修改失败',error)
}
},
async revise_reading(senderId,receiverId){
//向后端传输信息标记是否已读（一个axios
try{
const response = await axios.post(`/messages/mark-as-read/${senderId}/${receiverId}`,{},{
headers:{Authorization : 'Bearer '+getToken()}
})
console.log(response.data)
}catch(error){
alert('消息已读失败',error)
}
},
async save_chat_message(senderId,receiverId,content){
//向后端发送消息（一个axios
try{
const response = await axios.post('/messages/send',{
senderId: senderId,
receiverId: receiverId,
content: content
},{
headers:{Authorization : 'Bearer '+getToken()}
})
console.log(response.data)
}catch(error){
alert('消息保存失败',error)
}
},
async get_friendsInfoList(){
//向后端获取好友列表和聊天记录（两个axios
try{
// const tempt_chat = {name:'',content:'',time:''}
const UserId = getUserId()
const token = 'Bearer '+getToken()
console.log(UserId,token)
const response1 =await axios.get(`/relationships/${UserId}`,{
headers:{Authorization : token}
})
const data = response1.data
console.log(data)
for(let i = 0;i< data.length;i++)
{
let tempt_data = {id:Number(),name:'',icon:'/icon/UserIcon.png',position:'DEFAULT',birth:'',concern_status:false,black_status:false,beeing_friends_time: 0,unreading_num: 0,
chatHistory:[]}
// {name:'我',content:'you are',time:'2024-11-24 22:24'},
let response2
if(data[i].userId1 == UserId){
tempt_data.id = data[i].userId2
response2 = await axios.get(`/messages/chat/${UserId}/${data[i].userId2}`,{
headers:{Authorization : token}
})
}else if(data[i].userId2 == UserId){
tempt_data.id = data[i].userId1
response2 = await axios.get(`/messages/chat/${UserId}/${data[i].userId1}`,{
headers:{Authorization : token}
})
}
let chat_history = response2.data
console.log(chat_history)
if(chat_history.length != 0){
for(let j = 0;j < chat_history.length ; j++){
let tempt_chat = {name:'',content:'',time:''}
if(chat_history[j].senderId == UserId){
tempt_chat.name = data[i].myNickname
}else{
tempt_chat.name = data[i].otherUserNickname
}
tempt_chat.content = chat_history[j].content
tempt_chat.time = chat_history[j].timestamp.replace('T',' ')
// console.log(tempt_chat)
tempt_data.chatHistory.push(tempt_chat)
if(chat_history[j].read == false && chat_history[j].receiverId == UserId){
tempt_data.unreading_num += 1
}
}
}
tempt_data.name = data[i].otherUserNickname
tempt_data.birth = data[i].otherUserBirthday
tempt_data.position = data[i].otherUserAddress
tempt_data.beeing_friends_time = data[i].daysSinceCreated
if(data[i].status == 'friend'){
tempt_data.concern_status = true
tempt_data.black_status = false
}else if(data[i].status == 'black'){
tempt_data.concern_status = false
tempt_data.black_status = true
}else if(data[i].status == 'normal'){
tempt_data.concern_status = false
tempt_data.black_status = false
}
this.friendsInfoList.push(tempt_data)
this.new_msg_nums += tempt_data.unreading_num
this.userInfo.name = data[i].myNickname
}
this.userInfo.id = UserId
console.log(this.friendsInfoList,this.userInfo)
}catch(error){
alert('获取好友信息失败',error)
}
},
clickFriendList(item){
//更新chatWith
let who = item.name
if(this.chatWith != who){
this.sendingMsg = ''
}
this.chatWith = item.name
// console.log(this.chatWith)
//更新是否已读
this.revise_reading(this.userInfo.id,item.id)
this.new_msg_nums -= item.unreading_num
item.unreading_num = 0
//将列表下拉到最下面
this.$nextTick(() =>{
console.log(this.$refs.chatHandle)
this.$refs.chatHandle.chatWithHandle()
})
},
cliTreeBtn(){
this.$router.push('/main/familyTree')
},
sendMsg(){
const dayjs = require('dayjs')
const formattedTime = dayjs().format('YYYY-MM-DD HH:mm');
console.log(formattedTime)
for(let i=0;i<this.friendsInfoList.length;i++){
if(this.friendsInfoList[i].name == this.chatWith && this.sendingMsg != ''){
this.friendsInfoList[i].chatHistory.push({name:this.userInfo.name,content:this.sendingMsg,time:formattedTime})
// console.log(this.friendsInfoList[i].chatHistory)
break
if(this.chatWith != ''){
const dayjs = require('dayjs')
const formattedTime = dayjs().format('YYYY-MM-DD HH:mm');
console.log(formattedTime)
let i = 0
for(i=0;i<this.friendsInfoList.length;i++){
if(this.friendsInfoList[i].name == this.chatWith && this.sendingMsg != ''){
this.friendsInfoList[i].chatHistory.push({name:this.userInfo.name,content:this.sendingMsg,time:formattedTime})
// console.log(this.friendsInfoList[i].chatHistory)
break
}
}
this.save_chat_message(this.userInfo.id,this.friendsInfoList[i].id,this.sendingMsg)
this.sendingMsg = ''
this.$nextTick(() =>{
console.log(this.$refs.chatHandle)
this.$refs.chatHandle.chatWithHandle()
})
}
this.sendingMsg = ''
},
concernStatusRevise(data){
this.getFriendObject.concern_status = data
// console.log(this.userInfo.id,this.getFriendObject.id)
if(data == true){
this.revise_honneyBtn_status(this.userInfo.id,this.getFriendObject.id,'friend')
this.getFriendObject.black_status = false
}else if(this.getFriendObject.black_status == false && this.getFriendObject.concern_status == false){
this.revise_honneyBtn_status(this.userInfo.id,this.getFriendObject.id,'normal')
}
},
blackStatusRevise(data){
this.getFriendObject.black_status = data
if(data == true){
this.revise_honneyBtn_status(this.userInfo.id,this.getFriendObject.id,'black')
this.getFriendObject.concern_status = false
}else if(this.getFriendObject.black_status == false && this.getFriendObject.concern_status == false){
this.revise_honneyBtn_status(this.userInfo.id,this.getFriendObject.id,'normal')
}
},
historyContentHandle(content){
let char_sizeof = 0
@ -222,9 +386,12 @@ export default {
return new_content
},
getLatestNew(object){
let latest_new = object.chatHistory[object.chatHistory.length - 1].content
if(latest_new.length > 14){
latest_new= latest_new.slice(0,13) + '...'
let latest_new = ''
if(object.chatHistory.length != 0){
latest_new = object.chatHistory[object.chatHistory.length - 1].content
if(latest_new.length > 14){
latest_new= latest_new.slice(0,13) + '...'
}
}
return latest_new
},

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

@ -1,4 +1,5 @@
<template>
<div class="post-card">
<div class="post-header">
<img :src="avatarUrl" alt="avatar" class="avatar" />
@ -15,11 +16,31 @@
</div>
</button>
<span>{{ timestamp }}</span>
</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">
<span>
家族故事
@ -51,7 +72,8 @@
<transition name="fade" @before-enter="beforeEnter" @enter="enter" @leave="leave">
<div v-if="isCommentsVisible" class="comments-section">
<div v-for="(comment, index) in comments" :key="index" class="comment">
<p><strong>{{ comment.userid}}:</strong> {{ comment.content }}</p>
<p><strong>{{ comment.userid}}:</strong> {{ comment.content }} <button v-if="comment.userid==this.userid" style="color:#FE4E96;"
@click="deletecomment(comment.commentid)">删除</button> </p>
</div>
<!-- 发布评论 -->
@ -63,7 +85,7 @@
<script>
import CommentInput from './CommentInput.vue';
import axios from 'axios';
import axios from '@/utils/axiosConfig';
export default {
@ -94,11 +116,11 @@
},
created() {
if (this.userlikelist.some(follow => follow.postid === this.postid)) {
if (this.userlikelist.some(follow => follow.postid === this.postid)) {//是否已经点赞判断 查找列表中是否有当前postid
this.isLiked = true;
}
if (this.myfollows.some(follow => follow.myfollowid === this.postuserid)) {
if (this.myfollows.some(follow => follow.myfollowid === this.postuserid)) {//是否已经关注判断 查找列表中是否有当前postuserid
this.followsbuttonActive = true;
}
@ -112,6 +134,7 @@
},
data() {
return {
showModal: false,
isActive: false,
isLiked: false,
isClicked: false,
@ -120,7 +143,56 @@
};
},
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() {//关注按钮
// 设置为 active，触发动画
const useride = this.userid;
@ -128,14 +200,14 @@
if (this.followsbuttonActive == false) {
try {
const response = await axios.post(`http://localhost:8082/loveforest/Myfollows/userid=${useride}/myfollowid=${this.postuserid}`);
if (response.data === "关注成功！") {
const response = await axios.post(`/Myfollows/userid=${useride}/myfollowid=${this.postuserid}`);
if (response === "关注成功！") {
this.$message.success(response.data);
this.$message.success(response);
this.followsbuttonActive = true;
}
else {
this.$message.error(response.data);
this.$message.error(response);
}
} catch (error) {
@ -149,14 +221,14 @@
else {
try {
const response = await axios.delete(`http://localhost:8082/loveforest/Myfollows/userid=${useride}/myfollowid=${this.postuserid}`);
if (response.data === "取消关注成功！") {
this.$message.success(response.data);
const response = await axios.delete(`/Myfollows/userid=${useride}/myfollowid=${this.postuserid}`);
if (response === "取消关注成功！") {
this.$message.success(response);
this.followsbuttonActive = false;
}
else {
this.$message.error(response.data);
this.$message.error(response);
}
} catch (error) {
@ -180,15 +252,15 @@
async increaseLikeCount() {//点赞按钮
if (!this.isLiked) {//假如没点赞
try {
const response = await axios.post(`http://localhost:8082/loveforest/likes/userid=${this.userid}/postid=${this.postid}`);
if (response.data === "点赞成功！") {
this.$message.success(response.data);
const response = await axios.post(`/likes/userid=${this.userid}/postid=${this.postid}`);
if (response === "点赞成功！") {
this.$message.success(response);
this.$emit('updateLikeCount', this.likeCount + 1);
this.isLiked = !this.isLiked;
}
else {
this.$message.error(response.data);
this.$message.error(response);
}
} catch (error) {
@ -198,16 +270,16 @@
}
else {//假如已经点赞
try {
const response = await axios.delete(`http://localhost:8082/loveforest/likes/userid=${this.userid}/postid=${this.postid}`);
if (response.data === "取消点赞成功！") {
const response = await axios.delete(`/likes/userid=${this.userid}/postid=${this.postid}`);
if (response === "取消点赞成功！") {
this.$message.error("取消点赞成功");
this.$message.success("取消点赞成功");
this.$emit('updateLikeCount', this.likeCount - 1);
this.isLiked = !this.isLiked;
}
else {
this.$message.error(response.data);
this.$message.error(response);
}
} catch (error) {
@ -245,6 +317,80 @@
</script>
<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 {
max-width: 600px;
max-height: 600px;
@ -348,12 +494,12 @@
}
.post-card {
opacity: 0.95;
opacity: 0.9;
margin: 20px;
border: 1px solid #ddd;
padding: 15px;
border-radius: 8px;
background-color: #fff;
border-radius: 15px;
background-color: #FFFBFB;
}
.post-header {

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

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

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

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

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

@ -177,7 +177,7 @@
// eslint-disable-next-line no-unused-vars
import {Axios as request} from "axios";
import axios from '@/utils/axiosConfig';
import {setToken} from '@/token/auth'
import {setToken,getToken,setUserId,getUserId} from '@/token/auth'
export default {
name:'loginIndex',
data(){
@ -235,10 +235,13 @@ export default {
console.log('登录成功', response)
// 假设token在响应的data字段中
// !!存疑！!
const token = response.token;
const token = response.jwt;
const userId = response.userId
// console.log(token)
// 存储token
setToken(token);
// console.log( 'token是：' + getToken() )
setUserId(userId)
console.log( 'token是：' + getToken() + '\n' + '拿到的userId是：' + getUserId() )
// 登录成功后的操作，比如跳转到主页
this.$router.push('/main');
} catch (error) {

Write Preview
Loading…
Cancel
Save