How to implement a simple chat list with Vue

With the continuous popularity of social networks and instant messaging, the chat function has also become one of the essential functions of various applications. In the field of front-end development, it is a common practice to use the Vue framework to implement chat lists. This article will introduce how to use Vue to implement a simple chat list.

1. Project construction

First, we need to use the Vue scaffolding tool to build a Vue project. Enter the following code into the command line:

vue create chat-app

This will create a Vue project named "chat-app". Next, we need to install some necessary dependencies, including Vue, Vue Router, Axios and Bootstrap. Enter the following code in the command line:

npm install vue vue-router axios bootstrap

2. Create a route

Create a "router.js" file in the "src" folder in the project root directory. The code is as follows:

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;

Here we have created two routes, one is the chat list page under the "/" path, and the other is the chat room page under the "/chat-room/:id" path. We will explain the implementation of these components one by one below.

3. Create a chat list component

Create a "ChatList.vue" file in the "src/components" folder in the project root directory. The code is as follows:

<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 this component, we use Vue's "v-for" directive to traverse the user list obtained from "https://jsonplaceholder.typicode.com/users" and add it to Rendered to the chat list page. When the user clicks on a list item, we trigger a "goToChatRoom" method, which navigates to the corresponding chat room page.

4. Create a chat room component

Create a "ChatRoom.vue" file in the "src/components" folder in the project root directory. The code is as follows:

<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 this component, we obtain the chat objects and message list of the current chat room and render them into the page. We also added a form that allows users to send new messages.

5. Test

Finally, run the following command in the project root directory to start the development server:

npm run serve

Open the browser and visit "http://localhost:8080" , you can see the chat list page we just created!

Click on the list item to start chatting on the new page!

6. Summary

This article introduces how to use the Vue framework to build a simple chat list. We use Axios to get remote data and render it into the page. Although this is just a simple example, it shows how to use routing and components in Vue to implement a personalized chat application. I hope this article can be helpful to Vue beginners.

The above is the detailed content of How to implement a simple chat list with Vue. For more information, please follow other related articles on the PHP Chinese website!