怎么使用Vue實現添加好友功能

這篇文章主要介紹了怎么使用Vue實現添加好友功能的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇怎么使用Vue實現添加好友功能文章都會有所收獲，下面我們一起來看看吧。

一、前置知識

在開始介紹添加好友功能之前，我們需要了解以下內容：

1. 使用Vue CLI創建項目；

2. Vue組件的基本概念和使用方法；

3. 父子組件傳值的方法；

4. Vue Router的基本概念和使用方法。

二、設計頁面

在設計添加好友的頁面時，我們需要考慮頁面的布局和功能。通常，添加好友功能需要包含以下內容：

1. 搜索框：用戶可以在搜索框中輸入好友的名字或者ID，進行搜索；

2. 用戶列表：根據搜索結果顯示用戶列表；

3. 添加好友按鈕：用戶可以通過點擊添加好友按鈕，向搜索結果中的用戶發送好友請求。

根據以上內容，我們可以設計以下頁面布局：

<template>
  <div class="friend-add">
    <!-- 搜索框部分 -->
    <div class="search-bar">
      <input type="text" placeholder="請輸入好友名字或ID" v-model="keyword">
      <button @click="search">搜索</button>
    </div>
    <!-- 用戶列表部分 -->
    <div class="user-list">
      <ul>
        <li v-for="(user, index) in userList" :key="index">
          {{ user.name }}
          <button @click="addFriend(user)">添加好友</button>
        </li>
      </ul>
    </div>
  </div>
</template>

三、實現功能

在設計好頁面布局之后，我們需要實現添加好友的功能。以下是具體的實現方法：

1. 獲取用戶列表

用戶在搜索框中輸入關鍵詞之后，我們需要通過接口請求，獲取到符合搜索條件的用戶列表。在Vue中，我們通常將這個功能封裝到一個組件中：

<template>
  <div class="user-list">
    <ul>
      <li v-for="(user, index) in userList" :key="index">{{ user.name }}</li>
    </ul>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        userList: []
      }
    },
    methods: {
      getUserList() {
        // TODO: 發送接口請求，獲取用戶列表
        this.userList = [
          { name: '張三', id: 1 },
          { name: '李四', id: 2 },
          { name: '王五', id: 3 },
        ]
      }
    },
    mounted() {
      this.getUserList()
    }
  }
</script>

在上述代碼中，我們定義了一個名為getUserList的方法，用于向后端發送請求，獲取符合搜索條件的用戶列表，在mounted函數中，我們調用了getUserList方法，使得組件加載完成之后就會向后端發送請求獲取用戶列表。

2. 父子組件傳值

在Vue中，父組件向子組件傳遞數據，可以通過props實現。我們可以將搜索框中用戶輸入的關鍵詞通過props傳遞給子組件，以便子組件在發送請求時能夠根據搜索的關鍵詞進行搜索。

<template>
  <div class="friend-add">
    <div class="search-bar">
      <!-- 在搜索框中添加v-model指令，將輸入框中的值與父組件的keyword進行雙向綁定 -->
      <input type="text" placeholder="請輸入好友名字或ID" v-model="keyword">
      <button @click="search">搜索</button>
    </div>
    <user-list :keyword="keyword"></user-list>
  </div>
</template>

<script>
  import UserList from './UserList'
  
  export default {
    components: {
      UserList
    },
    data() {
      return {
        keyword: ''
      }
    },
    methods: {
      search() {
        // 點擊搜索按鈕時觸發該函數，這里的search功能可以自行實現
        this.$refs.userList.getUserList()
      }
    }
  }
</script>

在上述代碼中，我們定義了一個名為keyword的data屬性，用于存儲搜索框中用戶輸入的關鍵詞。另外，我們還引入了名為UserList的組件，使用props將keyword傳遞給子組件，在點擊搜索按鈕時調用子組件的getUserList方法，觸發搜索功能。

在子組件中，我們需要先定義一個名為keyword的props：

<template>
  <div class="user-list">
    <ul>
      <li v-for="(user, index) in userList" :key="index">
        {{ user.name }}
        <button @click="addFriend(user)">添加好友</button>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    props: {
      keyword: String
    },
    data() {
      return {
        userList: []
      }
    },
    methods: {
      getUserList() {
        // TODO：根據this.keyword向后端發送請求，獲取用戶列表
      },
      addFriend(user) {
        // TODO：向后端發送請求，添加好友
      }
    }
  }
</script>

在上述代碼中，我們定義了一個名為keyword的props，用于接收父組件傳遞過來的值。getUserList方法中，我們可以使用this.keyword獲取到父組件傳遞過來的關鍵詞進行搜索，addFriend方法用于向后端發送請求，添加好友。

3. Vue Router

在實現添加好友功能時，我們通常需要考慮到用戶在添加好友之后，頁面的跳轉問題。為了更好的實現頁面跳轉的功能，我們需要使用Vue Router。

首先，在創建Vue項目時，需要選擇使用Vue Router：

vue create my-project

在選擇Options時，選中Manually select features，然后選擇Router，安裝即可。

接著，在添加好友成功之后，我們需要跳轉到添加好友詳情頁。這個功能可以使用Vue Router實現：

<template>
  <div>
    <!-- 用戶列表部分 -->
    <div class="user-list">
      <ul>
        <li v-for="(user, index) in userList" :key="index">
          {{ user.name }}
          <button @click="addFriend(user)">添加好友</button>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  import { mapState } from 'vuex'
  
  export default {
    data() {
      return {
        userList: []
      }
    },
    computed: {
      ...mapState(['userInfo'])
    },
    methods: {
      async addFriend(user) {
        // 向后端發送請求，添加好友
        await this.$http.post('/add-friend', {id: user.id})
        
        // 添加好友成功之后，跳轉到好友詳情頁面
        this.$router.push({ name: 'friendDetail', params: { friendId: user.id } })
      }
    }
  }
</script>

在上述代碼中，我們首先引入了Vuex的mapState函數，通過該函數獲取用戶信息。接著，在addFriend方法中，我們向后端發送請求，添加好友，在添加好友成功之后，借助Vue Router實現跳轉到好友詳情頁面。在跳轉時，我們使用了路由的name和params屬性，name屬性表示頁面的名稱，params屬性表示傳遞的參數。我們可以在src/router/index.js中定義該路由：

import Vue from 'vue'
import VueRouter from 'vue-router'
import FriendDetail from '@/views/FriendDetail.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/friend-detail/:friendId',
    name: 'friendDetail',
    component: FriendDetail
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

在上述代碼中，我們定義了一個名為friendDetail的路由，該路由的path屬性表示訪問該頁面的路徑，name屬性表示路由的名稱，component屬性表示該路由所對應的組件。FriendDetail組件是用于展示好友詳情頁的組件，可以在該組件中根據傳遞過來的friendId獲取好友信息。

關于“怎么使用Vue實現添加好友功能”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“怎么使用Vue實現添加好友功能”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。