So implementieren Sie eine einfache Chatliste mit Vue

Mit der anhaltenden Popularität von sozialen Netzwerken und Instant Messaging ist die Chat-Funktion auch zu einer der wesentlichen Funktionen verschiedener Anwendungen geworden. Im Bereich der Frontend-Entwicklung ist es gängige Praxis, das Vue-Framework zur Implementierung von Chatlisten zu verwenden. In diesem Artikel wird erläutert, wie Sie mit Vue eine einfache Chat-Liste implementieren.

1. Projektaufbau

Zuerst müssen wir Vue-Gerüstwerkzeuge verwenden, um ein Vue-Projekt zu erstellen. Geben Sie den folgenden Code in die Befehlszeile ein:

vue create chat-app

Dadurch wird ein Vue-Projekt namens „chat-app“ erstellt. Als nächstes müssen wir einige notwendige Abhängigkeiten installieren, darunter Vue, Vue Router, Axios und Bootstrap. Geben Sie den folgenden Code in die Befehlszeile ein:

npm install vue vue-router axios bootstrap

2. Erstellen Sie eine Route

Erstellen Sie eine „router.js“-Datei im Ordner „src“ im Projektstammverzeichnis. Der Code lautet wie folgt:

import Vue from 'vue';
import VueRouter from 'vue-router';
import ChatList from './components/ChatList.vue';
import ChatRoom from './components/ChatRoom.vue';

Vue.use(VueRouter);

const routes = [
  {
    path: '/',
    name: 'ChatList',
    component: ChatList
  },
  {
    path: '/chat-room/:id',
    name: 'ChatRoom',
    component: ChatRoom,
    props: true
  }
];

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
});

export default router;

Hier haben wir zwei Routen erstellt, eine ist die Chat-Listenseite unter dem Pfad „/“ und die andere ist die Chatroom-Seite unter dem Pfad „/chat-room/:id“. Im Folgenden erläutern wir die Implementierung dieser Komponenten einzeln.

3. Erstellen Sie eine Chatlistenkomponente.

Erstellen Sie eine „ChatList.vue“-Datei im Ordner „src/components“ im Projektstammverzeichnis. Der Code lautet wie folgt:

<template>
  <div>
    <h1>聊天列表</h1>
    <ul class="list-group">
      <li v-for="(user, index) in users" :key="index" class="list-group-item" @click="goToChatRoom(user.id)">
        {{ user.name }}
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'ChatList',
  data() {
    return {
      users: []
    };
  },
  created() {
    this.getUsers();
  },
  methods: {
    getUsers() {
      axios.get('https://jsonplaceholder.typicode.com/users').then(response => {
        this.users = response.data;
      });
    },
    goToChatRoom(id) {
      this.$router.push({ name: 'ChatRoom', params: { id } });
    }
  }
};
</script>

In dieser Komponente verwenden wir die „v-for“-Direktive von Vue, um die von „https://jsonplaceholder.typicode.com/users“ erhaltene Benutzerliste zu durchlaufen und sie auf der Chat-Listenseite darzustellen . Wenn der Benutzer auf ein Listenelement klickt, lösen wir eine „goToChatRoom“-Methode aus, die zur entsprechenden Chatroom-Seite navigiert.

4. Erstellen Sie eine Chatroom-Komponente

Erstellen Sie eine „ChatRoom.vue“-Datei im Ordner „src/components“ im Projektstammverzeichnis. Der Code lautet wie folgt:

<template>
  <div>
    <h1>{{ currentChatUser.name }}</h1>
    <ul class="list-group">
      <li v-for="(message, index) in messages" :key="index" class="list-group-item">
        <strong>{{ message.sender }}:</strong> {{ message.content }}
      </li>
    </ul>
    <form @submit.prevent="sendMessage">
      <div class="form-group">
        <input v-model="newMessage" type="text" class="form-control" placeholder="请输入消息内容">
      </div>
      <button type="submit" class="btn btn-primary">发送消息</button>
    </form>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'ChatRoom',
  props: ['id'],
  data() {
    return {
      currentChatUser: {},
      messages: [],
      newMessage: ''
    };
  },
  created() {
    this.getCurrentChatUser();
    this.getMessages();
  },
  methods: {
    getCurrentChatUser() {
      axios.get(`https://jsonplaceholder.typicode.com/users/${this.id}`).then(response => {
        this.currentChatUser = response.data;
      });
    },
    getMessages() {
      axios.get(`https://jsonplaceholder.typicode.com/posts?userId=${this.id}`).then(response => {
        this.messages = response.data.map(message => {
          return { sender: this.currentChatUser.name, content: message.title };
        });
      });
    },
    sendMessage() {
      this.messages.push({ sender: '我', content: this.newMessage });
      this.newMessage = '';
    }
  }
};
</script>

In dieser Komponente erhalten wir die Chat-Objekte und die Nachrichtenliste des aktuellen Chatrooms und rendern sie auf der Seite. Wir haben außerdem ein Formular hinzugefügt, mit dem Benutzer neue Nachrichten senden können.

5. Test

Führen Sie abschließend den folgenden Befehl im Projektstammverzeichnis aus, um den Entwicklungsserver zu starten:

npm run serve

Öffnen Sie den Browser und besuchen Sie „http://localhost:8080“, Sie können die Chat-Listenseite sehen, die wir haben habe gerade La erstellt!

Klicken Sie auf den Listeneintrag, um mit dem Chatten auf der neuen Seite zu beginnen!

6. Zusammenfassung

In diesem Artikel wird erläutert, wie Sie mit dem Vue-Framework eine einfache Chat-Liste erstellen. Wir verwenden Axios, um Remote-Daten abzurufen und auf der Seite zu rendern. Obwohl dies nur ein einfaches Beispiel ist, zeigt es, wie Routing und Komponenten in Vue verwendet werden, um eine personalisierte Chat-Anwendung zu implementieren. Ich hoffe, dass dieser Artikel für Vue-Anfänger hilfreich sein kann.

Das obige ist der detaillierte Inhalt vonSo implementieren Sie eine einfache Chatliste mit Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!