如何用Vue实现一个简单的聊天列表-前端问答-PHP中文网

如何用Vue实现一个简单的聊天列表

PHPz

发布： 2023-04-13 10:46:46

原创

1996人浏览过

随着社交网络和即时通讯的不断普及，聊天功能也成为各种应用必不可少的功能之一。在前端开发领域中，使用vue框架实现聊天列表是一种常见做法。本文将介绍如何使用vue来实现一个简单的聊天列表。

一、项目搭建

首先，我们需要使用Vue脚手架工具来搭建一个Vue项目。在命令行中输入以下代码：

vue create chat-app

登录后复制

这将创建一个名为“chat-app”的Vue项目。接下来，我们需要安装一些必要的依赖，包括Vue、Vue Router、Axios 和 Bootstrap。在命令行中输入以下代码：

npm install vue vue-router axios bootstrap

登录后复制

二、创建路由

立即学习“前端免费学习笔记（深入）”；

在项目根目录下的“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”路径下的聊天室页面。我们将在下文中逐个解释这些组件的实现。

三、创建聊天列表组件

在项目根目录下的“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”方法，该方法导航到对应的聊天室页面。

表单大师AI

一款基于自然语言处理技术的智能在线表单创建工具，可以帮助用户快速、高效地生成各类专业表单。

查看详情

四、创建聊天室组件

在项目根目录下的“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>

登录后复制

在这个组件中，我们获取了当前聊天室的聊天对象和消息列表，并将其渲染到页面中。我们还添加了一个表单，允许用户发送新的消息。

五、测试

最后，在项目根目录下运行以下命令启动开发服务器：