如何使用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實作新增好友功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！