界面如下：

注册页：

在store加入index.js:

import Vue from 'vue'; import Vuex from 'vuex'; import config from '@/config/config.js'; Vue.use(Vuex); export default new Vuex.Store({ 	state: { 		token: uni.getStorageSync('token') || '', // 从本地存储中获取 token 		user: null, // 用户信息 		friends: [], // 好友列表 		groups: [], 		lastMessages: {}, // 新增状态，用于存储最后一条消息 		hasMoreFriends: true // 新增状态用于跟踪是否有更多好友 	}, 	mutations: { 		SET_TOKEN(state, token) { 			state.token = token; 			uni.setStorageSync('token', token); // 保存到本地存储 		}, 		CLEAR_TOKEN(state) { 			state.token = ''; 			uni.removeStorageSync('token'); // 从本地存储中删除 		}, 		SET_USER(state, user) { 			state.user = user; 		}, 		SET_FRIENDS(state, { 			friends, 			hasMoreFriends 		}) { 			state.friends = friends; 			state.hasMoreFriends = hasMoreFriends; 		}, 		SET_GROUPS(state, groups) { 			state.groups = groups; 		},  		SET_LAST_MESSAGE(state, { 			id, 			message 		}) { 			Vue.set(state.lastMessages, id, message); // 动态设置最后一条消息 		} 	}, 	actions: { 		async fetchGroups({ 			commit 		}) { 			const token = uni.getStorageSync('token'); 			const [error, response] = await uni.request({ 				url: `${config.apiBaseUrl}/groups`, 				method: 'GET', 				header: { 					'Authorization': `Bearer ${token}` 				} 			}); 			if (!error && response.data.code == 0) { 				commit('SET_GROUPS', response.data.data); 			} 			logoutpub(response, commit); 		}, 		async createGroup({ 			state 		}, { 			name, 			description, 			avatar_url 		}) { 			try { 				const token = uni.getStorageSync('token'); 				const [error, response] = await uni.request({ 					url: `${config.apiBaseUrl}/groups`, 					method: 'POST', 					header: { 						'Authorization': `Bearer ${token}`, 						'Content-Type': 'application/json' 					}, 					data: { 						name, 						description, 						avatar_url 					} 				}); 				logoutpub(response, commit); 				return response.data; 			} catch (error) { 				throw error; 			} 		}, 		async login({ 			commit 		}, { 			username, 			password 		}) { 			try { 				const [error, response] = await uni.request({ 					url: `${config.apiBaseUrl}/login`, 					method: 'POST', 					data: { 						username, 						password 					} 				}); 				if (error) { 					throw new Error(`Request failed with error: ${error}`); 				} 				response.data = response.data.data; 				if (response.data.token) { 					commit('SET_TOKEN', response.data.token); 					uni.redirectTo({ 						url: '/pages/index/friends' 					}); 				} else { 					throw new Error('Invalid credentials'); 				} 			} catch (error) { 				console.error('Login error:', error); 				throw error; 			} 		}, 		async fetchUser({ 			commit 		}) { 			const token = uni.getStorageSync('token'); 			if (!token) return;  			try { 				const [error, response] = await uni.request({ 					url: `${config.apiBaseUrl}/user`, 					method: 'GET', 					header: { 						'Authorization': `Bearer ${token}` 					} 				}); 				logoutpub(response, commit);  				if (error) { 					throw new Error(`Request failed with error: ${error}`); 				}  				if (response.statusCode === 200) { 					const userData = response.data.data || response.data; 					commit('SET_USER', userData); 				} else { 					throw new Error('Failed to fetch user data'); 				} 			} catch (error) { 				console.error('Failed to fetch user:', error); 			} 		}, 		async fetchFriends({ 			commit 		}, { 			page = 1, 			perPage = 20 		}) { 			const token = uni.getStorageSync('token'); 			if (!token) return; 			try { 				const [error, response] = await uni.request({ 					url: `${config.apiBaseUrl}/friends`, 					method: 'GET', 					header: { 						'Authorization': `Bearer ${token}` 					}, 					data: { 						page, 						perPage 					} 				}); 				 				console.log("friends",response) 				 				logoutpub(response, commit); 				if (error) { 					throw new Error(`Request failed with error: ${error}`); 				} 				if (response.data) { 					commit('SET_FRIENDS', { 						friends: response.data.data, 						hasMoreFriends: response.data.hasMoreFriends 					}); 				} 			} catch (error) { 				console.error(error); 			} 		}, 		async handleNewMessage({ 			commit 		}, { 			id, 			message 		}) { 			try { 				// 假设这是接收消息的逻辑 				commit('SET_LAST_MESSAGE', { 					id, 					message 				}); 			} catch (error) { 				console.error('Failed to handle new message:', error); 			} 		}, 		logout({ 			commit 		}) { 			commit('CLEAR_TOKEN'); 			commit('SET_USER', null); 			commit('SET_FRIENDS', { 				friends: [], 				hasMoreFriends: true 			}); 			uni.redirectTo({ 				url: '/pages/index/login' // 跳转到登录页面 			}); 		} 	} });  // Helper function for handling token expiration function logoutpub(response, commit) { 	if (response.data && response.data.code === -1 && response.data.message === 'expire') { 		commit('CLEAR_TOKEN'); 		commit('SET_USER', null); 		commit('SET_FRIENDS', { 			friends: [], 			hasMoreFriends: true 		}); 		uni.redirectTo({ 			url: '/pages/index/login' // 跳转到登录页面 		}); 	} } 

在config创建config.js:

const config = {   apiBaseUrl: 'http://localhost:3000' }; export default config; 

用户登陆后进入到friends页。

界面代码为：