Vueで簡単なチャットリストを実装する方法

ソーシャル ネットワークとインスタント メッセージングの継続的な人気に伴い、チャット機能もさまざまなアプリケーションの重要な機能の 1 つになりました。フロントエンド開発の分野では、Vue フレームワークを使用してチャット リストを実装するのが一般的です。この記事では、Vueを使って簡単なチャットリストを実装する方法を紹介します。

1. プロジェクトの構築

まず、Vue スキャフォールディング ツールを使用して Vue プロジェクトを構築する必要があります。コマンド ラインに次のコードを入力します。

vue create chat-app

これにより、「chat-app」という名前の Vue プロジェクトが作成されます。次に、Vue、Vue Router、Axios、Bootstrap などの必要な依存関係をインストールする必要があります。コマンド ラインに次のコードを入力します。

npm install vue vue-router axios bootstrap

2. ルートの作成

プロジェクト ルート ディレクトリの "src" フォルダーに "router.js" ファイルを作成します。コードは次のとおりです。

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;

ここでは 2 つのルートを作成しました。1 つは「/」パスの下のチャット リスト ページで、もう 1 つは「/chat-room/:」の下のチャット ルーム ページです。 ID」のパス。以下では、これらのコンポーネントの実装について 1 つずつ説明します。

3. チャット リスト コンポーネントの作成

プロジェクト ルート ディレクトリの "src/components" フォルダーに "ChatList.vue" ファイルを作成します。コードは次のとおりです。

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

このコンポーネントでは、Vue の「v-for」ディレクティブを使用して、「https://jsonplaceholder.typicode.com/users」から取得したユーザー リストを走査し、それをチャットリストページにレンダリングされます。ユーザーがリスト項目をクリックすると、「goToChatRoom」メソッドがトリガーされ、対応するチャット ルーム ページに移動します。

4. チャット ルーム コンポーネントの作成

プロジェクト ルート ディレクトリの "src/components" フォルダーに "ChatRoom.vue" ファイルを作成します。コードは次のとおりです。

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

このコンポーネントでは、現在のチャット ルームのチャット オブジェクトとメッセージ リストを取得し、それらをページにレンダリングします。ユーザーが新しいメッセージを送信できるフォームも追加しました。

5. テスト

最後に、プロジェクトのルート ディレクトリで次のコマンドを実行して開発サーバーを起動します:

npm run serve

ブラウザを開いて、「http://localhost」にアクセスします。 :8080」を見ると、先ほど作成したチャット一覧ページが表示されます。

リスト項目をクリックして、新しいページでチャットを開始してください。

6. 概要

この記事では、Vue フレームワークを使用して簡単なチャット リストを作成する方法を紹介します。 Axios を使用してリモート データを取得し、それをページにレンダリングします。これは単なる単純な例ですが、Vue でルーティングとコンポーネントを使用してパーソナライズされたチャット アプリケーションを実装する方法を示しています。この記事が Vue 初心者の方のお役に立てれば幸いです。

以上がVueで簡単なチャットリストを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。