Comment utiliser Vue pour implémenter la fonction Ajouter un ami-Questions et réponses frontales-php.cn

Avec l'essor des médias sociaux, l'ajout d'amis est devenu un élément indispensable des interactions quotidiennes des gens. Pour les développeurs front-end, comment implémenter la fonction d'ajout d'amis sur la page est une question qui mérite réflexion. Cet article expliquera comment utiliser le framework Vue pour implémenter la fonction d'ajout d'un ami.

1. Connaissances préalables

Avant de commencer à introduire la fonction d'ajout d'amis, nous devons connaître les éléments suivants :

Créer un projet à l'aide de Vue CLI
Concepts de base et utilisation des composants Vue ; et les composants enfants Méthode ;
Concepts de base et utilisation de Vue Router.
2. Concevoir la page

Lors de la conception de la page pour ajouter des amis, nous devons prendre en compte la mise en page et les fonctionnalités de la page. Habituellement, la fonction d'ajout d'un ami doit inclure le contenu suivant :

Zone de recherche : les utilisateurs peuvent saisir le nom ou l'identifiant de l'ami dans la zone de recherche pour effectuer une recherche ;

Liste des utilisateurs : afficher la liste des utilisateurs en fonction des résultats de la recherche ;
Sur la base du contenu ci-dessus, nous pouvons concevoir la mise en page suivante :

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

Copier après la connexion

3. Implémenter la fonction

Après avoir conçu la mise en page, nous devons implémenter la fonction d'ajout d'amis. Voici la méthode de mise en œuvre spécifique :

Obtenir la liste des utilisateurs

Une fois que l'utilisateur a saisi le mot-clé dans le champ de recherche, nous devons demander via l'interface d'obtenir la liste des utilisateurs qui répondent aux conditions de recherche. Dans Vue, nous encapsulons généralement cette fonction dans un composant :

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

Copier après la connexion

Dans le code ci-dessus, nous définissons une méthode nommée getUserList, qui est utilisée pour envoyer des requêtes au backend pour obtenir une liste d'utilisateurs qui répondent aux conditions de recherche. fonction montée, nous appelons la méthode getUserList, de sorte qu'une fois le composant chargé, une requête soit envoyée au backend pour obtenir la liste des utilisateurs.

Les composants parent-enfant transmettent des valeurs

Dans Vue, les composants parents transmettent des données aux composants enfants, ce qui peut être obtenu via des accessoires. Nous pouvons transmettre les mots-clés saisis par l'utilisateur dans le champ de recherche au sous-composant via des accessoires, afin que le sous-composant puisse effectuer une recherche en fonction des mots-clés de recherche lors de l'envoi d'une demande.

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

Copier après la connexion

Dans le code ci-dessus, nous définissons un attribut de données nommé mot-clé pour stocker les mots-clés saisis par l'utilisateur dans le champ de recherche. De plus, nous avons également introduit un composant nommé UserList, utilisant des accessoires pour transmettre des mots-clés au sous-composant, et lorsque vous cliquez sur le bouton de recherche, la méthode getUserList du sous-composant est appelée pour déclencher la fonction de recherche.

Dans le composant enfant, nous devons d'abord définir un props nommé mot-clé :

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

Copier après la connexion

Dans le code ci-dessus, nous définissons un props nommé mot-clé pour recevoir la valeur transmise par le composant parent. Dans la méthode getUserList, nous pouvons utiliser this.keyword pour obtenir les mots-clés transmis par le composant parent pour la recherche. La méthode addFriend est utilisée pour envoyer des requêtes au backend pour ajouter des amis.

Vue Router

Lors de la mise en œuvre de la fonction d'ajout d'amis, nous devons généralement prendre en compte le problème de saut de page après que l'utilisateur a ajouté un ami. Afin de mieux implémenter la fonction de saut de page, nous devons utiliser Vue Router.

Tout d'abord, lors de la création d'un projet Vue, vous devez choisir d'utiliser Vue Router :

vue create my-project

Copier après la connexion

Lors de la sélection des options, sélectionnez Sélectionner manuellement les fonctionnalités, puis sélectionnez Routeur et installez-le.

Ensuite, après avoir ajouté des amis avec succès, nous devons accéder à la page de détails sur l'ajout d'un ami. Cette fonction peut être implémentée à l'aide de 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>

Copier après la connexion

Dans le code ci-dessus, nous avons d'abord introduit la fonction mapState de Vuex pour obtenir des informations sur l'utilisateur via cette fonction. Ensuite, dans la méthode addFriend, nous envoyons une demande au backend pour ajouter un ami. Une fois l'ami ajouté avec succès, nous utilisons Vue Router pour accéder à la page de détails de l'ami. Lors du saut, nous utilisons les attributs name et params de la route. L'attribut name représente le nom de la page et l'attribut params représente les paramètres passés. Nous pouvons définir la route dans 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

Copier après la connexion

Dans le code ci-dessus, nous définissons une route nomméefriendDetail L'attribut path de la route représente le chemin pour accéder à la page, et l'attribut name représente la route. . Le nom et les attributs du composant indiquent le composant correspondant à l'itinéraire. Le composant FriendDetail est un composant utilisé pour afficher les pages de détails des amis. Dans ce composant, les informations sur les amis peuvent être obtenues en fonction de l'id d'ami transmis.

4. Conclusion

Dans cet article, nous avons présenté comment utiliser le framework Vue pour implémenter la fonction d'ajout d'amis. Grâce à la mise en œuvre de cette fonction, nous pouvons non seulement développer nos compétences frontales, mais également améliorer nos compétences en communication et sociales et établir davantage de relations sociales grâce à cette fonction.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!