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

登录接口完成，登录成功后会将ID存储到本地，相关函数在token文件夹。聊天接口还有小bug

Browse Source
main
xuan 2 months ago
parent 7137f882d8
commit 3b0ec518a0
5 changed files with 202 additions and 66 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实例
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/',
timeout: 5000, // 请求超时时间
});

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

@ -17,7 +17,8 @@
<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>
</div>
</ChatList>
@ -84,6 +85,9 @@
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(){
@ -92,6 +96,7 @@ export default {
new_msg_nums: 1,
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,6 +184,94 @@ export default {
ChatList
},
methods:{
async save_chat_message(senderId,receiverId,content){
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(){
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,
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?userId1=${UserId}&userId2=${data[i].userId2}`,{
headers:{Authorization : token}
})
}else if(data[i].userId2 == UserId){
tempt_data.id = data[i].userId1
response2 = await axios.get(`/messages/chat?userId1=${UserId}&userId2=${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)
}
}
tempt_data.name = data[i].otherUserNickname
tempt_data.birth = data[i].otherUserBirthday
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.userInfo.name = data[i].myNickname
}
this.userInfo.id = UserId
console.log(this.friendsInfoList,this.userInfo)
}catch(error){
alert('获取好友信息失败',error)
}
},
clickFriendList(item){
let who = item.name
if(this.chatWith != who){
@ -190,13 +285,15 @@ export default {
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++){
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 = ''
},
concernStatusRevise(data){
@ -222,9 +319,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
},

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) {

16
vue.config.js
Unescape View File

@ -5,10 +5,26 @@ module.exports = defineConfig({
port: 8080,
https: false,
proxy:{
//登录接口
'/auth/login':{
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
}
}
},
transpileDependencies: true

Write Preview
Loading…
Cancel
Save