隨著社群媒體的興起，加入好友已經成為了人們日常交往中不可或缺的一部分。而對於前端開發者來說，如何在頁面中實作新增好友功能，是一個值得思考的問題。本文將介紹如何使用Vue框架實作新增好友功能。
一、前置知識
在開始介紹新增好友功能之前，我們需要先了解以下內容：
- 使用Vue CLI建立專案；
- Vue元件的基本概念和使用方法；
- 父子元件傳值的方法；
- Vue Router的基本概念和使用方法。
二、設計頁面
在設計新增好友的頁面時，我們需要考慮頁面的佈局和功能。通常，新增好友功能需要包含以下內容：
- 搜尋框：使用者可以在搜尋框中輸入好友的名字或ID，進行搜尋；
- 使用者清單：根據搜尋結果顯示使用者清單；
- 新增好友按鈕：使用者可以透過點擊新增好友按鈕，向搜尋結果中的使用者傳送好友請求。
根據上述內容，我們可以設計以下頁面佈局：
<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>登入後複製
三、實作功能
在設計好頁面佈局之後，我們需要實作新增好友的功能。以下是具體的實作方法：
- 取得使用者清單
使用者在搜尋框中輸入關鍵字之後，我們需要透過介面請求，取得到符合搜尋條件的使用者列表。在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方法，使得元件載入完成之後就會向後端發送請求取得使用者列表。
- 父子元件傳值
在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方法用於向後端發送請求，添加好友。
- 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中文網其他相關文章！
