So verwenden Sie Vue, um die Funktion „Freund hinzufügen“ zu implementieren

Mit dem Aufkommen der sozialen Medien ist das Hinzufügen von Freunden zu einem unverzichtbaren Bestandteil der täglichen Interaktion der Menschen geworden. Für Front-End-Entwickler ist die Frage, wie die Funktion zum Hinzufügen von Freunden auf der Seite implementiert werden kann, eine Überlegung wert. In diesem Artikel wird erläutert, wie Sie das Vue-Framework zum Implementieren der Funktion „Freund hinzufügen“ verwenden.

1. Vorausgesetzte Kenntnisse

Bevor wir mit der Einführung der Funktion zum Hinzufügen von Freunden beginnen, müssen wir Folgendes wissen:

1. Ein Projekt mit Vue CLI erstellen;
2. Grundlegende Konzepte und Verwendung von Vue-Komponenten; und untergeordnete Komponenten Methode;
3. Grundlegende Konzepte und Verwendung von Vue Router.
4. 2. Entwerfen Sie die Seite

Beim Entwerfen der Seite zum Hinzufügen von Freunden müssen wir das Layout und die Funktionalität der Seite berücksichtigen. Normalerweise muss die Funktion „Freund hinzufügen“ den folgenden Inhalt enthalten:

Suchfeld: Benutzer können den Namen oder die ID des Freundes eingeben, um zu suchen.

1. Benutzerliste: Zeigt die Benutzerliste basierend auf den Suchergebnissen an
Schaltfläche „Freund hinzufügen“: Benutzer können Freundschaftsanfragen an Benutzer in den Suchergebnissen senden, indem sie auf die Schaltfläche „Freund hinzufügen“ klicken.
3. Basierend auf dem obigen Inhalt können wir das folgende Seitenlayout entwerfen:

<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>

3. Implementieren Sie die Funktion

Nachdem wir das Seitenlayout entworfen haben, müssen wir die Funktion zum Hinzufügen von Freunden implementieren. Das Folgende ist die spezifische Implementierungsmethode:

Benutzerliste abrufen

1. Nachdem der Benutzer das Schlüsselwort in das Suchfeld eingegeben hat, müssen wir über die Schnittstelle eine Anfrage stellen, um die Liste der Benutzer zu erhalten, die die Suchbedingungen erfüllen. In Vue kapseln wir diese Funktion normalerweise in eine Komponente:

<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>

Im obigen Code definieren wir eine Methode namens getUserList, mit der Anforderungen an das Backend gesendet werden, um eine Liste von Benutzern zu erhalten, die die Suchbedingungen erfüllen Mit der gemounteten Funktion rufen wir die Methode getUserList auf, sodass nach dem Laden der Komponente eine Anfrage an das Backend gesendet wird, um die Benutzerliste abzurufen.

Eltern-Kind-Komponenten übergeben Werte

2. In Vue übergeben übergeordnete Komponenten Daten an untergeordnete Komponenten, was durch Requisiten erreicht werden kann. Wir können die vom Benutzer in das Suchfeld eingegebenen Schlüsselwörter über Requisiten an die Unterkomponente übergeben, sodass die Unterkomponente beim Senden einer Anfrage anhand der Suchschlüsselwörter suchen kann.

<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>

Im obigen Code definieren wir ein Datenattribut namens keyword, um die vom Benutzer in das Suchfeld eingegebenen Schlüsselwörter zu speichern. Darüber hinaus haben wir auch eine Komponente namens UserList eingeführt, die Requisiten verwendet, um Schlüsselwörter an die Unterkomponente zu übergeben. Wenn auf die Suchschaltfläche geklickt wird, wird die getUserList-Methode der Unterkomponente aufgerufen, um die Suchfunktion auszulösen.

In der untergeordneten Komponente müssen wir zuerst ein Schlüsselwort mit dem Namen „props“ definieren:

<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>

Im obigen Code definieren wir ein Schlüsselwort mit dem Namen „props“, um den von der übergeordneten Komponente übergebenen Wert zu empfangen. In der getUserList-Methode können wir this.keyword verwenden, um die von der übergeordneten Komponente für die Suche übergebenen Schlüsselwörter abzurufen. Die addFriend-Methode wird verwendet, um Anfragen zum Hinzufügen von Freunden an das Backend zu senden.

Vue Router

3. Bei der Implementierung der Funktion zum Hinzufügen von Freunden müssen wir normalerweise das Seitensprungproblem berücksichtigen, nachdem der Benutzer einen Freund hinzugefügt hat. Um die Seitensprungfunktion besser zu implementieren, müssen wir Vue Router verwenden.

Zunächst müssen Sie beim Erstellen eines Vue-Projekts die Verwendung des Vue-Routers auswählen:

vue create my-project

Wählen Sie bei der Auswahl von Optionen die Option „Funktionen manuell auswählen“ aus, wählen Sie dann „Router“ aus und installieren Sie ihn.

Als nächstes müssen wir nach dem erfolgreichen Hinzufügen von Freunden zur Seite mit den Details zum Hinzufügen von Freunden springen. Diese Funktion kann mit Vue Router implementiert werden:

<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>

Im obigen Code haben wir zunächst die mapState-Funktion von Vuex eingeführt, um Benutzerinformationen über diese Funktion abzurufen. Dann senden wir in der Methode addFriend eine Anfrage an das Backend, um einen Freund hinzuzufügen. Nachdem der Freund erfolgreich hinzugefügt wurde, springen wir mit Vue Router zur Seite mit den Freundesdetails. Beim Springen verwenden wir die Attribute name und params der Route. Das Attribut name stellt den Namen der Seite dar und das Attribut params stellt die übergebenen Parameter dar. Wir können die Route in src/router/index.js definieren:

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

Im obigen Code definieren wir eine Route mit dem Namen „friendDetail“. Das Pfadattribut der Route stellt den Pfad für den Zugriff auf die Seite dar, und das Namensattribut stellt die Route dar . Der Name und die Komponentenattribute geben die der Route entsprechende Komponente an. Die FriendDetail-Komponente ist eine Komponente, die zum Anzeigen von Freundesdetailseiten verwendet wird. In dieser Komponente können Freundesinformationen basierend auf der übergebenen FriendId abgerufen werden.

4. Fazit

In diesem Artikel haben wir vorgestellt, wie man das Vue-Framework verwendet, um die Funktion zum Hinzufügen von Freunden zu implementieren. Durch die Implementierung dieser Funktion können wir nicht nur unsere Front-End-Fähigkeiten erweitern, sondern auch unsere Kommunikations- und Sozialkompetenzen verbessern und durch diese Funktion mehr soziale Beziehungen aufbauen.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Vue, um die Funktion „Freund hinzufügen“ zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!