优化接口，实现分页查询

src/pages/index/ChatPage.vue

@@ -83,7 +83,7 @@
             </div>
 
             <div class="last-message">
-              {{ getLastMessage(contact.contactName) }}
+              {{ contact.content }}
             </div>
           </div>
 
@@ -135,7 +135,7 @@
 
           <div class="chat-user-info">
             <div class="chat-user-name">
-              {{ currentContact.name }}
+              {{ currentContact.contactName }}
             </div>
 
             <div class="chat-user-status">
@@ -224,7 +224,7 @@
 </template>
 
 <script>
-import { getUserInfo, getContactInfo, getContactMessages, sendMessage } from "@/utils/user";
+import { getUserInfo, getContactInfo, getRecentMessages, getContactMessages, sendMessage } from "@/utils/user";
 export default {
   name: "ChatPage",
 
@@ -236,8 +236,9 @@ export default {
       contactList: [],
       // 当前聊天联系人
       currentContact: null,
+      recentChats: [],
       // 聊天消息
-      groupedMessages: {},
+      contactMessages: {},
       // 搜索联系人
       searchText: "",
       // 输入的消息内容
@@ -251,12 +252,12 @@ export default {
     // 搜索联系人
     filteredContacts() {
       if (!this.searchText.trim()) {
-        return this.contactList;
+        return this.recentChats;
       }
 
       const keyword = this.searchText.trim().toLowerCase();
 
-      return this.contactList.filter((contact) =>
+      return this.recentChats.filter((contact) =>
         contact.name.toLowerCase().includes(keyword),
       );
     },
@@ -267,23 +268,28 @@ export default {
         return [];
       }
 
-      return this.groupedMessages[this.currentContact.contactName] || [];
+      return this.contactMessages[this.currentContact.contactName] || [];
     },
   },
 
   created() {
     this.getCurrentUser();
-    this.getContactList();
+    this.getRecentMessageList();
-    this.getMessageList();
   },
 
   methods: {
+    // 切换菜单
+    changeMenu(menu) {
+      this.activeMenu = menu;
+    },
+    // 退出登录
     logout() {
       // 清除 token 和用户信息
       this.$store.commit("SET_TOKEN", "");
       this.$store.commit("SET_USERNAME", "");
       this.$router.push("/login");
     },
+    // 获取当前登录用户信息
     getCurrentUser() {
       // 获取当前登录用户信息
       getUserInfo()
@@ -296,33 +302,59 @@ export default {
           this.$router.push("/login");
         });
     },
-    getMessageList() {
+    // 获取最近消息列表
-      // 获取当前用户的联系人消息列表
+    getRecentMessageList() {
-      getContactMessages()
+      getRecentMessages()
         .then((response) => {
-          const groupedMessages = {};
+          this.recentChats = response.data.recentChats || [];
+          this.selectFirstContact();
+        })
+        .catch((error) => {
+          console.error(error);
+          this.$message.error("获取消息列表失败");
+        });
+    },
+    // 选择联系人
+    selectContact(contact) {
+      this.currentContact = contact;
+      this.getContactMessageList(contact.contactName, 10);
+
+      // 查看联系人后清除未读数量
+      contact.unread = 0;
+
+      this.$nextTick(() => {
+        this.scrollToBottom();
+      });
+    },
+    // 选择最近一个联系人
+    selectFirstContact() {
+      if (!this.currentContact && this.recentChats.length > 0) {
+        this.selectContact(this.recentChats[0]);
+      }
+    },
+    // 获取当前联系人的消息列表
+    getContactMessageList(contactName, limit) {
+      // 获取当前联系人的消息列表
+      getContactMessages({
+          contactName: contactName,
+          limit: limit,
+        })
+        .then((response) => {
+          const contactMessages = {};
           const messages = response.data.messages || [];
           // 把联系人的消息按联系人 id 分组存储
           messages.forEach((item) => {
-            // 这个联系人的名称是和当前用户聊天消息的发送者名称或接收者名称
+            if (!contactMessages[contactName]) {
-            const contactName =
+              contactMessages[contactName] = [];
-              item.senderName === this.currentUser.username
-                ? item.receiverName
-                : item.senderName;
-
-            // 把联系人 id 为属性进行分组，每个联系人id对应一个消息数组，内容有接收消息也有发送消息
-            if (!groupedMessages[contactName]) {
-              groupedMessages[contactName] = [];
             }
-
+            contactMessages[contactName].push({
-            groupedMessages[contactName].push({
               ...item,
               from: item.senderName === this.currentUser.username ? "me" : "other",
               time: item.time || item.createdAt,
             });
           });
-          this.groupedMessages = groupedMessages;
+          this.contactMessages = contactMessages;
-          console.log("groupedMessages", groupedMessages);
+          console.log("contactMessages", contactMessages);
         })
         .catch((error) => {
           console.error(error);
@@ -344,31 +376,9 @@ export default {
           this.$message.error("获取联系人信息失败");
         });
     },
-    changeMenu(menu) {
-      this.activeMenu = menu;
-    },
-    // 选择联系人
-    selectContact(contact) {
-      this.currentContact = contact;
-
-      // 查看联系人后清除未读数量
-      contact.unread = 0;
-
-      this.$nextTick(() => {
-        this.scrollToBottom();
-      });
-    },
-
-    // 选择第一个联系人
-    selectFirstContact() {
-      if (!this.currentContact && this.contactList.length > 0) {
-        this.selectContact(this.contactList[0]);
-      }
-    },
-
     // 获取最后一条消息
     getLastMessage(contactName) {
-      const messageList = this.groupedMessages[contactName];
+      const messageList = this.contactMessages[contactName];
 
       if (!messageList || messageList.length === 0) {
         return "暂无消息";
@@ -385,8 +395,8 @@ export default {
         return;
       }
 
-      if (!this.groupedMessages[this.currentContact.id]) {
+      if (!this.contactMessages[this.currentContact.id]) {
-        this.$set(this.groupedMessages, this.currentContact.id, []);
+        this.$set(this.contactMessages, this.currentContact.id, []);
       }
 
       const newMessage = {
@@ -398,7 +408,7 @@ export default {
       sendMessage(newMessage)
         .then((response) => {
           console.log("发送消息成功", response.data);
-          this.groupedMessages[this.currentContact.contactName].push({
+          this.contactMessages[this.currentContact.contactName].push({
             ...newMessage,
             from: "me",
           });

src/utils/user.js

@@ -34,14 +34,23 @@ export function getContactInfo() {
   })
 }
 
-// 获取用户的联系人消息
+// 获取最近消息列表
-export function getContactMessages() {
+export function getRecentMessages() {
   return request({
-    url: '/messagesInfo',
+    url: '/recentChats',
     method: 'get'
   })
 }
 
+// 获取用户的联系人消息
+export function getContactMessages(data) {
+  return request({
+    url: '/contactMessagesInfo',
+    method: 'post',
+    data
+  })
+}
+
 // 发送消息
 export function sendMessage(data) {
   return request({