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

Merge branch 'main' of https://bdgit.educoder.net/pwfnlmjh2/dazuoye

Browse Source
main
QMZ 1 month ago
parent 415a44db30 4d650512b0
commit 347411d9cf
8 changed files with 450 additions and 144 deletions
Show Stats Download Patch File Download Diff File

17
src/token/auth.js
Unescape View File

@ -15,4 +15,21 @@ export function removeToken() {
} }
// 存储、获取、删除用户登录后的个人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');
}

2
src/utils/axiosConfig.js
Unescape View File

@ -4,7 +4,7 @@ import {getToken} from '@/token/auth' // 注意这里使用了解构赋值来导
// 创建axios实例 // 创建axios实例
const service = axios.create({ const service = axios.create({
// baseURL: 'http://47.122.59.26:8080/api', // 配置基础URL 如果服务器域名发生变化统一可以去.env文件修改 // baseURL: 'http://47.122.59.26:8080/api',
// baseURL: 'http://10.205.10.22:8081/loveforest/api/', // baseURL: 'http://10.205.10.22:8081/loveforest/api/',
// baseURL: 'http://10.133.13.52:8082/loveforest', // baseURL: 'http://10.133.13.52:8082/loveforest',
timeout: 5000, // 请求超时时间 timeout: 5000, // 请求超时时间

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

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

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

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

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

@ -17,14 +17,16 @@
<p id="chatFriendName">{{ item.name }}</p> <p id="chatFriendName">{{ item.name }}</p>
<p id="chatFriendMsg">{{ getLatestNew(item) }}</p> <p id="chatFriendMsg">{{ getLatestNew(item) }}</p>
</div> </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> </div>
</ChatList> </ChatList>
</div> </div>
</div> </div>
<div class="chat-middlelayout"> <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"> <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> <ChatCard :your_icon="getFriendObject.icon" :my_icon="userInfo.icon" :name="item.name" :yours="chatWith" :content="historyContentHandle(item.content)"></ChatCard>
</div> </div>
@ -50,7 +52,7 @@
<p style="color: #f85096;">他的主页</p> <p style="color: #f85096;">他的主页</p>
</div> </div>
<div class="chat-home-tree-btn"> <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> <p style="color: #a75efb;">族谱树</p>
</div> </div>
</div> </div>
@ -84,14 +86,17 @@
import HonneyBtn from './HonneyBtn.vue'; import HonneyBtn from './HonneyBtn.vue';
import ChatCard from './ChatCard.vue'; import ChatCard from './ChatCard.vue';
import ChatList from './ChatList.vue'; import ChatList from './ChatList.vue';
import {getToken,getUserId} from '@/token/auth'
import axios from 'axios';
export default { export default {
name: 'chatIndex', // 添加组件名称 name: 'chatIndex', // 添加组件名称
data(){ data(){
return{ return{
searchName: '', searchName: '',
new_msg_nums: 1, new_msg_nums: 0,
chatWith:'', chatWith:'',
userInfo:{ userInfo:{
id: Number(),
name:'我', name:'我',
icon:'/icon/abc.jpg' icon:'/icon/abc.jpg'
}, },
@ -101,62 +106,62 @@ export default {
// 由于编译后文件夹名称会发生改变，所以把icon图片单独放到服务器的文件夹下面以此来跳过编译（public文件夹） // 由于编译后文件夹名称会发生改变，所以把icon图片单独放到服务器的文件夹下面以此来跳过编译（public文件夹）
// 这里文件路径命名是相对于public的绝对路径 // 这里文件路径命名是相对于public的绝对路径
friendsInfoList: [ friendsInfoList: [
{name:'潇潇',icon:'/icon/icon.png',position:'london',birth:'2004-1-1',concern_status:false,black_status:true,beeing_friends_time: 302, // {name:'潇潇',icon:'/icon/icon.png',position:'london',birth:'2004-1-1',concern_status:false,black_status:true,beeing_friends_time: 302,
chatHistory:[ // chatHistory:[
{name:'我',content:'早重中之重做做做做做做做做做做做做做做做做做做做战争之子战争之子做做做做',time:'2024-11-24 1:24'}, // {name:'我',content:'早重中之重做做做做做做做做做做做做做做做做做做做战争之子战争之子做做做做',time:'2024-11-24 1:24'},
{name:'潇潇',content:'中',time:'2024-11-24 2:11'}, // {name:'潇潇',content:'中',time:'2024-11-24 2:11'},
{name:'我',content:'晚',time:'2024-11-24 3:24'}, // {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, // {name:'小刚',icon:'/icon/UserIcon.png',position:'china',birth:'2003-3-4',concern_status:false,black_status:false,beeing_friends_time: 2,
chatHistory:[ // chatHistory:[
{name:'我',content:'you are',time:'2024-11-24 22:24'}, // {name:'我',content:'you are',time:'2024-11-24 22:24'},
{name:'小刚',content:'hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh',time:'2024-11-25 22:11'}, // {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, // {name:'吴伟',icon:'/icon/icon.png',position:'endland',birth:'2004-5-2',concern_status:false,black_status:false,beeing_friends_time: 32,
chatHistory:[ // chatHistory:[
{name:'我',content:'早上好',time:'2024-11-24 22:25'}, // {name:'我',content:'早上好',time:'2024-11-24 22:25'},
{name:'吴伟',content:'iii',time:'2024-11-24 23:11'}, // {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, // {name:'小闽',icon:'/icon/UserIcon.png',position:'china',birth:'2003-3-4',concern_status:false,black_status:false,beeing_friends_time: 1,
chatHistory:[ // chatHistory:[
{name:'我',content:'you are',time:'2024-11-24 22:24'}, // {name:'我',content:'you are',time:'2024-11-24 22:24'},
{name:'小闽',content:'h',time:'2024-11-25 22:11'}, // {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, // {name:'小',icon:'/icon/UserIcon.png',position:'china',birth:'2003-3-4',concern_status:false,black_status:false,beeing_friends_time: 1,
chatHistory:[ // chatHistory:[
{name:'我',content:'you are',time:'2024-11-24 22:24'}, // {name:'我',content:'you are',time:'2024-11-24 22:24'},
{name:'小',content:'h',time:'2024-11-25 22:11'}, // {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, // {name:'闽',icon:'/icon/UserIcon.png',position:'china',birth:'2003-3-4',concern_status:false,black_status:false,beeing_friends_time: 1,
chatHistory:[ // chatHistory:[
{name:'我',content:'you are',time:'2024-11-24 22:24'}, // {name:'我',content:'you are',time:'2024-11-24 22:24'},
{name:'闽',content:'h',time:'2024-11-25 22:11'}, // {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, // {name:'哈哈',icon:'/icon/UserIcon.png',position:'china',birth:'2003-3-4',concern_status:false,black_status:false,beeing_friends_time: 1,
chatHistory:[ // chatHistory:[
{name:'我',content:'you are',time:'2024-11-24 22:24'}, // {name:'我',content:'you are',time:'2024-11-24 22:24'},
{name:'哈哈',content:'h',time:'2024-11-25 22:11'}, // {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, // {name:'kk',icon:'/icon/UserIcon.png',position:'china',birth:'2003-3-4',concern_status:false,black_status:false,beeing_friends_time: 1,
chatHistory:[ // chatHistory:[
{name:'我',content:'you are',time:'2024-11-24 22:24'}, // {name:'我',content:'you are',time:'2024-11-24 22:24'},
{name:'kk',content:'h',time:'2024-11-25 22:11'}, // {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, // {name:'44',icon:'/icon/UserIcon.png',position:'china',birth:'2003-3-4',concern_status:false,black_status:false,beeing_friends_time: 1,
chatHistory:[ // chatHistory:[
{name:'我',content:'you are',time:'2024-11-24 22:24'}, // {name:'我',content:'you are',time:'2024-11-24 22:24'},
{name:'44',content:'h',time:'2024-11-25 22:11'}, // {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, // {name:'77',icon:'/icon/UserIcon.png',position:'china',birth:'2003-3-4',concern_status:false,black_status:false,beeing_friends_time: 1,
chatHistory:[ // chatHistory:[
{name:'我',content:'you are',time:'2024-11-24 22:24'}, // {name:'我',content:'you are',time:'2024-11-24 22:24'},
{name:'77',content:'h',time:'2024-11-25 22:11'}, // {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, // {name:'88',icon:'/icon/UserIcon.png',position:'china',birth:'2003-3-4',concern_status:false,black_status:false,beeing_friends_time: 1,
chatHistory:[ // chatHistory:[
{name:'我',content:'you are',time:'2024-11-24 22:24'}, // {name:'我',content:'you are',time:'2024-11-24 22:24'},
{name:'88',content:'h',time:'2024-11-25 22:11'}, // {name:'88',content:'h',time:'2024-11-25 22:11'},
]}, // ]},
], ],
showSearchList: [], showSearchList: [],
recomendList: [ recomendList: [
@ -169,6 +174,8 @@ export default {
mounted(){ mounted(){
if(this.searchName == '') if(this.searchName == '')
this.showSearchList = this.friendsInfoList this.showSearchList = this.friendsInfoList
this.get_friendsInfoList()
}, },
components:{ components:{
HonneyBtn, HonneyBtn,
@ -177,33 +184,190 @@ export default {
ChatList ChatList
}, },
methods:{ 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){ clickFriendList(item){
//更新chatWith
let who = item.name let who = item.name
if(this.chatWith != who){ if(this.chatWith != who){
this.sendingMsg = '' this.sendingMsg = ''
} }
this.chatWith = item.name this.chatWith = item.name
// console.log(this.chatWith) // 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(){ sendMsg(){
const dayjs = require('dayjs') if(this.chatWith != ''){
const formattedTime = dayjs().format('YYYY-MM-DD HH:mm'); const dayjs = require('dayjs')
console.log(formattedTime) const formattedTime = dayjs().format('YYYY-MM-DD HH:mm');
for(let i=0;i<this.friendsInfoList.length;i++){ console.log(formattedTime)
if(this.friendsInfoList[i].name == this.chatWith && this.sendingMsg != ''){ let i = 0
this.friendsInfoList[i].chatHistory.push({name:this.userInfo.name,content:this.sendingMsg,time:formattedTime}) for(i=0;i<this.friendsInfoList.length;i++){
// console.log(this.friendsInfoList[i].chatHistory) if(this.friendsInfoList[i].name == this.chatWith && this.sendingMsg != ''){
break 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){ concernStatusRevise(data){
this.getFriendObject.concern_status = 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){ blackStatusRevise(data){
this.getFriendObject.black_status = 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){ historyContentHandle(content){
let char_sizeof = 0 let char_sizeof = 0
@ -222,9 +386,12 @@ export default {
return new_content return new_content
}, },
getLatestNew(object){ getLatestNew(object){
let latest_new = object.chatHistory[object.chatHistory.length - 1].content let latest_new = ''
if(latest_new.length > 14){ if(object.chatHistory.length != 0){
latest_new= latest_new.slice(0,13) + '...' latest_new = object.chatHistory[object.chatHistory.length - 1].content
if(latest_new.length > 14){
latest_new= latest_new.slice(0,13) + '...'
}
} }
return latest_new return latest_new
}, },

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

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

203
src/views/space/space.vue
Unescape View File

@ -67,36 +67,37 @@
<div class="post-container"> <div class="post-container">
<div class="post" v-for="post in posts" :key="post.id"> <div class="post" v-for="post in posts" :key="post.id">
<div class="post-header"> <div class="post-header">
<img src="../../assets/pictures/space/post1.png" alt="" /> <img :src="post.avatarurl" alt="" />
<div class="post-info"> <div class="post-info">
<h2>{{ post.name || "哈哈哈"}}</h2> <h2>{{ post.name }}</h2>
<h3>{{ post.date || "2024-01-01" }}</h3> <h3>{{ post.date }}</h3>
<p>{{ post.text || "测试测试"}}</p> <p>{{ post.text }}</p>
</div> </div>
</div> </div>
<div class="post-img">
<img :src="post.postImageUrl || defaultImage " alt="" /> <div class="post-img" v-if="post.postImageUrl">
<img :src="post.postImageUrl" alt="" />
</div> </div>
<div class="post-footer"> <div class="post-footer">
<div class="reactions"> <div class="reactions">
<div class="Like"> <div class="Like">
<span @click="increaseCount('like')" :class="{'liked': isLiked}"> <span @click="handleLike(post)" :class="{'liked': post.isLiked}">
<span v-if="isLiked">❤️</span> <span v-if="post.isLiked">❤️</span>
<span v-else>🤍</span> <span v-else>🤍</span>
</span> </span>
{{ likeCount }} {{ post.likeCount }}
</div> </div>
<div class="comment"> <div class="comment">
<span @click="increaseCount('comment')"> <span>💬</span>
💬 {{ post.commentCount }}
</span>
{{ commentCount }}
</div> </div>
</div> </div>
<div class="comments"> <div class="comments">
<!-- 评论内容可以在这里渲染 --> <!-- 评论内容可以在这里渲染 -->
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
@ -109,10 +110,9 @@
name:'spaceIndex', name:'spaceIndex',
data() { data() {
return { return {
likeCount: 0, userId: 1,
isLiked:false, userlikelist:[],
commentCount:0, // myfollows: [],
defaultImage:require("../../assets/pictures/space/post2.png"),
userInfo: { userInfo: {
name: "", // 用户姓名 name: "", // 用户姓名
avatar:"", avatar:"",
@ -122,34 +122,118 @@
expectation: "", // 择偶期望 expectation: "", // 择偶期望
career: "", // 职业 career: "", // 职业
}, },
posts:{ posts:[
name:"掌声", {
date:"2024-01-01", id: 0,
text:"测试文本", avatarurl:require("../../assets/pictures/space/post1.png"),
postImageUrl:"", name:"掌声",
}, date:"2024-01-01",
text:"测试文本",
postImageUrl:"../../assets/pictures/space/post1.png",
likeCount: 0,
commentCount: 0,
isLiked:false,
},
{
id: 1,
avatarurl:require("../../assets/pictures/space/post1.png"),
name:"掌声",
date:"2024-12-01",
text:"我好开心",
postImageUrl:"",
likeCount: 0,
commentCount: 5,
isLiked:false,
},
{
id: 2,
avatarurl:require("../../assets/pictures/space/post1.png"),
name:"掌声",
date:"2024-01-01",
text:"测试文本",
postImageUrl:"../../assets/pictures/space/post1.png",
likeCount: 8,
commentCount: 0,
isLiked:false,
},
],
defaultAvatar: "https://via.placeholder.com/150", // 默认头像占位符 defaultAvatar: "https://via.placeholder.com/150", // 默认头像占位符
}; };
}, },
methods: { methods: {
increaseCount(type){ async loaduserlikes() {//加载user点赞列表 并会传入每个帖子做是否已经点赞的判断
if(type === 'like'){ const userid = this.userId;//获取用户id
if(this.isLiked){ try {
this.likeCount--; const response = await axios.get(`/likes/userid=${userid}`);
}else{ this.userlikelist = response; // Store the liked post IDs
this.likeCount++;
// Update isLiked status for all posts
this.posts = this.posts.map(post => ({
...post,
isLiked: this.userlikelist.some(like => like.postid === post.id)
}));
} catch (error) {
console.error('Error:', error);
}
axios.get(`/likes/userid=${userid}`)
.then(response => {
// this.userlikelist.splice(0, this.myfollows.length);
this.userlikelist.push(...response);
return response;
})
.catch(error => {
console.error('Error:', error);
});
if (this.userlikelist.some(follow => follow.postid === this.postid)) {
this.isLiked = true;
}
},
async handleLike(post) {//点赞按钮
if (!post.isLiked) {//假如没点赞
try {
const response = await axios.post(`/likes/userid=${this.userId}/postid=${post.id}`);
if (response === "点赞成功！") {
// this.$message.success(response);
// this.$emit('updateLikeCount', this.likeCount + 1);
post.isLiked = !post.isLiked;
post.likeCount = post.likeCount + 1 ;
}
else {
this.$message.error(response);
}
} catch (error) {
this.$message.error("点赞失败");
console.log(error);
}
}
else {//假如已经点赞
try {
const response = await axios.delete(`/likes/userid=${this.userId}/postid=${post.id}`);
if (response === "取消点赞成功！") {
// this.$message.success("取消点赞成功");
// this.$emit('updateLikeCount', this.likeCount - 1);
post.isLiked = !post.isLiked;
post.likeCount = post.likeCount - 1;
}
else {
this.$message.error(response);
}
} catch (error) {
this.$message.error("取消点赞失败");
console.log("取消点赞失败:",error);
} }
this.isLiked=!this.isLiked;
}else if(type === 'comment'){
this.commentCount++;
} }
}, },
async fetchUserInfo() { async fetchUserInfo() {
await this.loaduserlikes();
try { try {
// 调用后端接口获取用户信息 // 调用后端接口获取用户信息
const response = await axios.get("/api/getUserInfo", { const response = await axios.get("/api/getUserInfo", {
params: { params: {
userId: "12345", // 假设传递用户 ID，需根据实际情况调整 userId: this.userId, // 假设传递用户 ID，需根据实际情况调整
}, },
}); });
@ -178,27 +262,29 @@
} }
}, },
async fetchPostInfo() { async fetchPostInfo() {
try { try {
// 调用后端接口获取帖子日期信息 // const userId = this.userId; // 需要从用户状态或其他地方获取
const postResponse = await axios.get("/api/getPostDate", { const postResponse = await axios.get(`/posts/userid=${this.userId}`, {
params: { // params: {
postId: "POST_ID_HERE", // 传递帖子 ID // userId: userId
}, // }
}); });
this.postDate = postResponse.data.date; // 假设后端返回的数据中包含了用户是否对每个帖子点赞的信息
this.postText = postResponse.data.text; this.posts = postResponse.map(post => ({
this.postImgUrl = postResponse.data.imageUrl; id: post.postid,
} catch (error) { avatarurl:post.avatarurl,
console.error("获取帖子信息失败:", error); name: post.username,
// 可以在这里添加一些提示用户的逻辑，比如弹出提示框告知获取信息失败等 date: post.timestamp,
} text: post.content,
postImageUrl: post.imageurl,
likeCount: post.likecount,
commentCount: post.commentcount,
isLiked: this.userlikelist.some(like => like.postid === post.postid)
}));
} catch (error) {
console.error("获取帖子信息失败:", error);
}
}, },
selectTab(tab) {
this.selectedTab = tab;
},
showMoreInfo() {
},
showFamilyTree() { showFamilyTree() {
this.$router.push('/main/familyTree'); this.$router.push('/main/familyTree');
@ -213,6 +299,7 @@
mounted() { mounted() {
// 加载用户信息 // 加载用户信息
this.fetchUserInfo(); this.fetchUserInfo();
this.fetchPostInfo();
}, },
}; };
</script> </script>
@ -382,6 +469,8 @@
width: 680px; width: 680px;
position: relative; /* 使得子元素可以相对移动 */ position: relative; /* 使得子元素可以相对移动 */
margin-bottom: 70px; margin-bottom: 70px;
padding: 0 20px;
/* border-bottom: 2px solid #d1cccc; */
} }
.post-header { .post-header {
@ -399,7 +488,7 @@
top: -10px; /* 调整横线的位置 */ top: -10px; /* 调整横线的位置 */
width: calc(100% - 60px); /* 横线宽度，减去左右边距 */ width: calc(100% - 60px); /* 横线宽度，减去左右边距 */
height: 1px; /* 横线的高度 */ height: 1px; /* 横线的高度 */
background-color: #d1cccc; /* 横线颜色 */ /* background-color: #d1cccc; 横线颜色 */
} }
.post-header img { .post-header img {
@ -442,6 +531,10 @@
.post-footer { .post-footer {
padding: 10px; padding: 10px;
left: 30px; /* 根据需要调整左侧位置 */
top: -10px; /* 调整横线的位置 */
width: calc(100% - 60px); /* 横线宽度，减去左右边距 */
border-bottom: 1.5px solid #d1cccc;
} }
/* 图标的样式 */ /* 图标的样式 */
@ -461,7 +554,7 @@
/* 图标悬停时的效果 */ /* 图标悬停时的效果 */
.reactions span:hover { .reactions span:hover {
transform: scale(1.1); /* 悬停时稍微放大 */ /* transform: scale(1.1); 悬停时稍微放大 */
} }
/* 增加点赞和评论数值的可读性 */ /* 增加点赞和评论数值的可读性 */

21
vue.config.js
Unescape View File

@ -5,10 +5,31 @@ module.exports = defineConfig({
port: 8080, port: 8080,
https: false, https: false,
proxy:{ proxy:{
//登录接口
'/auth/login':{ '/auth/login':{
target : 'https://911fb0525ms3.vicp.fun/loveforest/api', target : 'https://911fb0525ms3.vicp.fun/loveforest/api',
changeOrigin : true, 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
}
} }
}, },
transpileDependencies: true transpileDependencies: true

Write Preview
Loading…
Cancel
Save