Vueを使って友達追加機能を実装する方法

ソーシャルメディアの台頭により、友達の追加は人々の日常的な交流に不可欠な部分になりました。フロントエンド開発者にとって、ページに友達を追加する機能をどのように実装するかは、検討する価値のある問題です。この記事では、Vueフレームワークを使用して友達追加機能を実装する方法を紹介します。

1. 前提知識

友達追加機能の導入を開始する前に、次のことを理解しておく必要があります:

1. Vue CLI を使用してプロジェクトを作成する;
2. Vue コンポーネントの基本概念と使用法;
3. 親コンポーネントと子コンポーネント間で値を渡す方法;
4. Vue Router の基本概念と使用法。

2. ページのデザイン

友達追加ページをデザインするときは、ページのレイアウトと機能を考慮する必要があります。通常、友達追加機能には次の内容を含める必要があります:

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>

3. 関数を実装します

ページ レイアウトを設計した後、次のことを行う必要があります。友達追加機能を実装しました。具体的な実装方法は次のとおりです。

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 という名前のメソッドを定義します。このメソッドは、バックエンドにリクエストを送信して、検索条件に一致する検索語を取得するために使用されます。ユーザー リスト、マウントされた関数で 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 という名前のデータ属性を定義します。さらに、UserList という名前のコンポーネントも導入しました。props を使用してキーワードをサブコンポーネントに渡し、検索ボタンをクリックすると、サブコンポーネントの getUserList メソッドが呼び出されて検索機能がトリガーされます。

子コンポーネントでは、最初にキーワードという名前のプロパティを定義する必要があります:

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

上記のコードでは、親コンポーネントから渡されたプロパティを受け取るキーワードという名前のプロパティを定義します。値に。 getUserList メソッドでは、this.keyword を使用して、検索のために親コンポーネントによって渡されたキーワードを取得できます。addFriend メソッドは、フレンドを追加するリクエストをバックエンドに送信するために使用されます。

3. Vue Router

友達追加機能を実装する場合、通常、ユーザーが友達を追加した後のページジャンプの問題を考慮する必要があります。ページジャンプ機能をより適切に実装するには、Vue Router を使用する必要があります。

まず、Vue プロジェクトを作成するときに、Vue Router を使用することを選択する必要があります:

vue create my-project

オプションを選択するときに、機能を手動で選択し、ルーターを選択してインストールします。

次に、友達の追加に成功したら、友達追加の詳細ページに移動する必要があります。この関数は、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 属性は、ページにアクセスするためのパスを表します。はルートの名前を表し、component 属性はルートに対応するコンポーネントを表します。 FriendDetailコンポーネントは、友達詳細ページを表示するためのコンポーネントであり、渡されたfriendIdを元に友達情報を取得することができます。

4. まとめ

この記事では、Vue フレームワークを使用して友達追加機能を実装する方法を紹介しました。この機能の実装により、フロントエンドスキルを拡張するだけでなく、コミュニケーションスキルやソーシャルスキルを向上させ、この機能を通じてより多くの社会関係を構築することができます。

以上がVueを使って友達追加機能を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。