Comment implémenter une simple liste de discussion avec Vue

Avec la popularité continue des réseaux sociaux et de la messagerie instantanée, la fonction de chat est également devenue l'une des fonctions essentielles de diverses applications. Dans le domaine du développement front-end, il est courant d'utiliser le framework Vue pour implémenter des listes de discussion. Cet article explique comment utiliser Vue pour implémenter une simple liste de discussion.

1. Construction du projet

Tout d'abord, nous devons utiliser les outils d'échafaudage Vue pour construire un projet Vue. Entrez le code suivant dans la ligne de commande :

vue create chat-app

Cela créera un projet Vue appelé "chat-app". Ensuite, nous devons installer certaines dépendances nécessaires, notamment Vue, Vue Router, Axios et Bootstrap. Entrez le code suivant dans la ligne de commande :

npm install vue vue-router axios bootstrap

2. Créez une route

Créez un fichier "router.js" dans le dossier "src" du répertoire racine du projet. Le code est le suivant :

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;

Ici, nous avons créé deux itinéraires, l'un est la page de liste de discussion sous le chemin "/", et l'autre est la page de salle de discussion sous le chemin "/chat-room/:id". Nous expliquerons la mise en œuvre de ces composants un par un ci-dessous.

3. Créez un composant de liste de discussion

Créez un fichier "ChatList.vue" dans le dossier "src/components" du répertoire racine du projet. Le code est le suivant :

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

Dans ce composant, nous utilisons la directive « v-for » de Vue pour parcourir la liste d'utilisateurs obtenue à partir de « https://jsonplaceholder.typicode.com/users » et la restituer sur la page de liste de discussion. . Lorsque l'utilisateur clique sur un élément de la liste, nous déclenchons une méthode "goToChatRoom", qui accède à la page de la salle de discussion correspondante.

4. Créez un composant de salle de discussion

Créez un fichier "ChatRoom.vue" dans le dossier "src/components" du répertoire racine du projet. Le code est le suivant :

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

Dans ce composant, nous obtenons les objets de discussion et la liste des messages de la salle de discussion actuelle et les restituons dans la page. Nous avons également ajouté un formulaire qui permet aux utilisateurs d'envoyer de nouveaux messages.

5. Test

Enfin, exécutez la commande suivante dans le répertoire racine du projet pour démarrer le serveur de développement :

npm run serve

Ouvrez le navigateur et visitez "http://localhost:8080", vous pouvez voir la page de liste de discussion que nous vient de créer La!

Cliquez sur l'élément de la liste pour commencer à discuter sur la nouvelle page !

6. Résumé

Cet article explique comment utiliser le framework Vue pour créer une liste de discussion simple. Nous utilisons Axios pour obtenir des données distantes et les restituer dans la page. Bien qu'il ne s'agisse que d'un exemple simple, il montre comment utiliser le routage et les composants dans Vue pour implémenter une application de chat personnalisée. J'espère que cet article pourra être utile aux débutants de Vue.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!