Vue를 사용하여 친구 추가 기능을 구현하는 방법

소셜 미디어의 등장으로 친구 추가는 사람들의 일상적인 상호 작용에서 없어서는 안 될 부분이 되었습니다. 프런트 엔드 개발자의 경우 페이지에 친구 추가 기능을 구현하는 방법은 생각해 볼 가치가 있는 질문입니다. 이 글에서는 Vue 프레임워크를 사용하여 친구 추가 기능을 구현하는 방법을 소개합니다.

1. 사전 지식

친구 추가 기능을 소개하기 전에 다음 사항을 알아야 합니다.

1. Vue CLI를 사용하여 프로젝트 만들기
2. Vue 구성 요소의 기본 개념 및 사용법; 상위 및 하위 구성 요소 간 방법
3. Vue Router의 기본 개념 및 사용법.
4. 2. 페이지 디자인

친구 추가 페이지를 디자인할 때 페이지의 레이아웃과 기능을 고려해야 합니다. 일반적으로 친구 추가 기능에는 다음 내용이 포함되어야 합니다.

검색 상자: 사용자는 검색 상자에 친구의 이름이나 ID를 입력하여 검색할 수 있습니다.

1. 사용자 목록: 검색 결과를 기반으로 사용자 목록을 표시합니다.
친구 추가 버튼: 사용자는 친구 추가 버튼을 클릭하여 검색 결과에 있는 사용자에게 친구 요청을 보낼 수 있습니다.
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를 통해 하위 컴포넌트에 전달하여 하위 컴포넌트가 요청을 보낼 때 검색 키워드를 기반으로 검색할 수 있도록 합니다.

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

위 코드에서는 사용자가 검색창에 입력한 키워드를 저장하기 위해 키워드라는 데이터 속성을 정의합니다. 또한, UserList라는 컴포넌트도 도입했는데, props를 사용하여 하위 컴포넌트에 키워드를 전달하고, 검색 버튼을 클릭하면 하위 컴포넌트의 getUserList 메서드가 호출되어 검색 기능이 실행됩니다.

하위 컴포넌트에서 먼저 키워드라는 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>

위 코드에서는 상위 컴포넌트가 전달한 값을 받기 위해 키워드라는 props를 정의합니다. getUserList 메소드에서 this.keyword를 사용하여 검색을 위해 상위 구성요소가 전달한 키워드를 가져올 수 있습니다. addFriend 메소드는 친구 추가 요청을 백엔드에 보내는 데 사용됩니다.

Vue Router

3. 친구 추가 기능을 구현할 때 일반적으로 사용자가 친구를 추가한 후 페이지 점프 문제를 고려해야 합니다. 페이지 점프 기능을 더 잘 구현하려면 Vue Router를 사용해야 합니다.

먼저 Vue 프로젝트를 생성할 때 Vue 라우터를 사용하도록 선택해야 합니다.

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 속성은 페이지에 액세스하는 경로를 나타내고 name 속성은 경로를 나타냅니다. 이름 및 구성 요소 속성은 경로에 해당하는 구성 요소를 나타냅니다. FriendDetail 컴포넌트는 친구 세부 정보 페이지를 표시하는 데 사용되는 컴포넌트입니다. 이 컴포넌트에서는 전달된 friendId를 기반으로 친구 정보를 얻을 수 있습니다.

4. 결론

이번 글에서는 Vue 프레임워크를 사용하여 친구 추가 기능을 구현하는 방법을 소개했습니다. 이 기능의 구현을 통해 우리는 프론트 엔드 기술을 확장할 수 있을 뿐만 아니라 의사소통 및 사회적 기술을 향상하고 이 기능을 통해 더 많은 사회적 관계를 구축할 수 있습니다.

위 내용은 Vue를 사용하여 친구 추가 기능을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!