聊天数据分页加载

src/pages/index/ChatPage.vue

@@ -69,7 +69,8 @@
           class="contact-item"
           :class="{
             active:
-              currentContact && currentContact.contactName === contact.contactName,
+              currentContact &&
+              currentContact.contactName === contact.contactName,
           }"
           @click="selectContact(contact)"
         >
@@ -83,7 +84,7 @@
             </div>
 
             <div class="last-message">
-              {{ getLastMessage(contact.contactName) }}
+              {{ contact.content }}
             </div>
           </div>
 
@@ -135,7 +136,7 @@
 
           <div class="chat-user-info">
             <div class="chat-user-name">
-              {{ currentContact.name }}
+              {{ currentContact.contactName }}
             </div>
 
             <div class="chat-user-status">
@@ -148,10 +149,11 @@
         <div
           ref="messageList"
           class="message-list"
-          :class="activeMenu === 'messages' ? 'active' : ''"
+          :class="activeMenu === 'settings' ? '' : 'active'"
+          @scroll="handleMessageScroll"
         >
           <div
-            v-for="message in currentMessages"
+            v-for="message in contactMessages"
             :key="message.id"
             class="message-row"
             :class="{
@@ -184,14 +186,6 @@
           </div>
         </div>
 
-        <div
-          ref="messageList"
-          class="message-list"
-          :class="activeMenu === 'contacts' ? 'empty' : ''"
-        >
-          <div class="empty-content">💬</div>
-        </div>
-
         <!-- 输入消息区域 -->
         <div v-if="activeMenu === 'messages'" class="input-panel">
           <div class="toolbar">
@@ -224,7 +218,13 @@
 </template>
 
 <script>
-import { getUserInfo, getContactInfo, getContactMessages, sendMessage } from "@/utils/user";
+import {
+  getUserInfo,
+  getContactInfo,
+  getRecentMessages,
+  getContactMessages,
+  sendMessage,
+} from "@/utils/api";
 export default {
   name: "ChatPage",
 
@@ -236,8 +236,10 @@ export default {
       contactList: [],
       // 当前聊天联系人
       currentContact: null,
+      // 最近聊天列表
+      recentChats: [],
       // 聊天消息
-      groupedMessages: {},
+      contactMessages: [],
       // 搜索联系人
       searchText: "",
       // 输入的消息内容
@@ -251,39 +253,41 @@ export default {
     // 搜索联系人
     filteredContacts() {
       if (!this.searchText.trim()) {
-        return this.contactList;
+        return this.recentChats;
       }
 
       const keyword = this.searchText.trim().toLowerCase();
 
-      return this.contactList.filter((contact) =>
-        contact.name.toLowerCase().includes(keyword),
+      return this.recentChats.filter((contact) =>
+        contact.contactName.toLowerCase().includes(keyword)
       );
     },
-
-    // 当前联系人对应的消息
-    currentMessages() {
-      if (!this.currentContact) {
-        return [];
-      }
-
-      return this.groupedMessages[this.currentContact.contactName] || [];
-    },
   },
 
   created() {
     this.getCurrentUser();
-    this.getContactList();
-    this.getMessageList();
+    this.getRecentMessageList();
   },
 
   methods: {
+    // 切换菜单
+    changeMenu(menu) {
+      this.activeMenu = menu;
+      this.currentContact = null;
+      if (menu === "contacts") {
+        this.getContactList();
+      }
+    },
+
+    // 退出登录
     logout() {
       // 清除 token 和用户信息
       this.$store.commit("SET_TOKEN", "");
       this.$store.commit("SET_USERNAME", "");
       this.$router.push("/login");
     },
+
+    // 获取当前登录用户信息
     getCurrentUser() {
       // 获取当前登录用户信息
       getUserInfo()
@@ -296,60 +300,24 @@ export default {
           this.$router.push("/login");
         });
     },
-    getMessageList() {
-      // 获取当前用户的联系人消息列表
-      getContactMessages()
+
+    // 获取最近消息列表
+    getRecentMessageList() {
+      getRecentMessages()
         .then((response) => {
-          const groupedMessages = {};
-          const messages = response.data.messages || [];
-          // 把联系人的消息按联系人 id 分组存储
-          messages.forEach((item) => {
-            // 这个联系人的名称是和当前用户聊天消息的发送者名称或接收者名称
-            const contactName =
-              item.senderName === this.currentUser.username
-                ? item.receiverName
-                : item.senderName;
-
-            // 把联系人 id 为属性进行分组，每个联系人id对应一个消息数组，内容有接收消息也有发送消息
-            if (!groupedMessages[contactName]) {
-              groupedMessages[contactName] = [];
-            }
-
-            groupedMessages[contactName].push({
-              ...item,
-              from: item.senderName === this.currentUser.username ? "me" : "other",
-              time: item.time || item.createdAt,
-            });
-          });
-          this.groupedMessages = groupedMessages;
-          console.log("groupedMessages", groupedMessages);
+          this.recentChats = response.data.recentChats || [];
+          this.selectFirstContact();
         })
         .catch((error) => {
           console.error(error);
           this.$message.error("获取消息列表失败");
         });
     },
-    getContactList() {
-      getContactInfo()
-        .then((response) => {
-          this.contactList = response.data.contacts.map((contact) => ({
-            ...contact,
-            unread: contact.unread || 0,
-          }));
-          console.log("contactList", this.contactList);
-          this.selectFirstContact();
-        })
-        .catch((error) => {
-          console.error(error);
-          this.$message.error("获取联系人信息失败");
-        });
-    },
-    changeMenu(menu) {
-      this.activeMenu = menu;
-    },
+
     // 选择联系人
     selectContact(contact) {
       this.currentContact = contact;
+      this.getContactMessageList(contact.contactName, 10, 0);
 
       // 查看联系人后清除未读数量
       contact.unread = 0;
@@ -359,16 +327,60 @@ export default {
       });
     },
 
-    // 选择第一个联系人
+    // 选择最近一个联系人
     selectFirstContact() {
-      if (!this.currentContact && this.contactList.length > 0) {
-        this.selectContact(this.contactList[0]);
+      if (!this.currentContact && this.recentChats.length > 0) {
+        this.selectContact(this.recentChats[0]);
       }
     },
 
+    // 获取当前联系人的消息列表
+    getContactMessageList(contactName, limit, offset) {
+      // 获取当前联系人的消息列表
+      getContactMessages({
+        contactName: contactName,
+        limit: limit,
+        offset: offset
+      })
+        .then((response) => {
+          const contactMessages = [];
+          const messages = response.data.messages || [];
+          messages.forEach((item) => {
+            contactMessages.push({
+              ...item,
+              from:
+                item.senderName === this.currentUser.username ? "me" : "other",
+              time: item.time || item.createdAt,
+            });
+          });
+          // 将新获取的消息放到现有消息的最前面，用于按时间顺序倒序展示
+          this.contactMessages = contactMessages.reverse().concat(this.contactMessages);
+          console.log("contactMessages", contactMessages);
+        })
+        .catch((error) => {
+          console.error(error);
+          this.$message.error("获取消息列表失败");
+        });
+    },
+
+    // 获取联系人列表
+    getContactList() {
+      getContactInfo()
+        .then((response) => {
+          this.contactList = response.data.contacts.map((contact) => ({
+            ...contact,
+            unread: contact.unread || 0,
+          }));
+        })
+        .catch((error) => {
+          console.error(error);
+          this.$message.error("获取联系人信息失败");
+        });
+    },
+
     // 获取最后一条消息
     getLastMessage(contactName) {
-      const messageList = this.groupedMessages[contactName];
+      const messageList = this.contactMessages[contactName];
 
       if (!messageList || messageList.length === 0) {
         return "暂无消息";
@@ -385,8 +397,8 @@ export default {
         return;
       }
 
-      if (!this.groupedMessages[this.currentContact.id]) {
-        this.$set(this.groupedMessages, this.currentContact.id, []);
+      if (!this.contactMessages[this.currentContact.contactName]) {
+        this.$set(this.contactMessages, this.currentContact.contactName, []);
       }
 
       const newMessage = {
@@ -398,10 +410,32 @@ 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",
           });
+
+          // 更新最近消息列表
+          const contactName = this.currentContact.contactName;
+          const index = this.recentChats.findIndex(
+            (item) => item.contactName === contactName
+          );
+
+          if (index !== -1) { //找到这条数据，修改内容并移除后添加到数组最前面
+            const chat = this.recentChats[index];
+
+            chat.content = content;
+            chat.createdAt = newMessage.createdAt;
+
+            this.recentChats.splice(index, 1);
+            this.recentChats.unshift(chat);
+          } else { // 没有找到这条数据，直接添加到数组最前面
+            this.recentChats.unshift({
+              contactName: contactName,
+              content: content,
+              createdAt: newMessage.createdAt,
+            });
+          }
         })
         .catch((error) => {
           console.error(error);
@@ -424,6 +458,20 @@ export default {
         messageList.scrollTop = messageList.scrollHeight;
       }
     },
+
+    // 处理聊天框滚动事件
+    handleMessageScroll() {
+      const el = this.$refs.messageList;
+      // 滚动到顶部
+      if (el.scrollTop === 0) {
+        console.log("滚动到顶部，加载更多消息");
+
+        this.getContactMessageList(this.currentContact.contactName, 10, this.contactMessages.length);
+
+        // 滚动条往下移动 500px，利于继续往上滚动
+        el.scrollTop = 500;
+      }
+    }
   },
 };
 </script>

src/pages/login/LoginPage.vue

@@ -36,7 +36,7 @@
 </template>
 
 <script>
-import { login } from "@/utils/user";
+import { login } from "@/utils/api";
 export default {
   name: "LoginPage",
   data() {

src/pages/login/RegisterPage.vue

@@ -44,7 +44,7 @@
 </template>
 
 <script>
-import { register } from "@/utils/user";
+import { register } from "@/utils/api";
 export default {
   name: "RegisterPage",
   data() {

src/utils/api.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({