Vue로 간단한 채팅 목록을 구현하는 방법

소셜 네트워크와 인스턴트 메시징의 지속적인 인기로 인해 채팅 기능도 다양한 애플리케이션의 필수 기능 중 하나가 되었습니다. 프런트엔드 개발 분야에서는 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;

여기서 두 개의 경로를 만들었습니다. 하나는 "/" 경로 아래의 채팅 목록 페이지이고 다른 하나는 "/chat-room/:id" 경로 아래의 채팅방 페이지입니다. 아래에서는 이러한 구성요소의 구현을 하나씩 설명하겠습니다.

3. 채팅 목록 컴포넌트 생성

프로젝트 루트 디렉터리의 "src/comComponents" 폴더에 "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/comComponents" 폴더에 "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. Test

마지막으로 프로젝트 루트 디렉터리에서 다음 명령을 실행하여 개발 서버를 시작합니다.

npm run serve

브라우저를 열고 "http://localhost:8080"을 방문하면 채팅 목록 페이지를 볼 수 있습니다. 방금 La를 만들었어요!

목록 항목을 클릭하면 새 페이지에서 채팅이 시작됩니다!

6. 요약

이 글에서는 Vue 프레임워크를 사용하여 간단한 채팅 목록을 작성하는 방법을 소개합니다. 우리는 Axios를 사용하여 원격 데이터를 가져와 페이지에 렌더링합니다. 이는 단순한 예일 뿐이지만 Vue에서 라우팅 및 구성 요소를 사용하여 개인화된 채팅 애플리케이션을 구현하는 방법을 보여줍니다. 이 글이 Vue 초보자들에게 도움이 되기를 바랍니다.

위 내용은 Vue로 간단한 채팅 목록을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!