소셜 미디어의 등장으로 친구 추가는 사람들의 일상적인 상호 작용에서 없어서는 안 될 부분이 되었습니다. 프런트 엔드 개발자의 경우 페이지에 친구 추가 기능을 구현하는 방법은 생각해 볼 가치가 있는 질문입니다. 이 글에서는 Vue 프레임워크를 사용하여 친구 추가 기능을 구현하는 방법을 소개합니다.
1. 사전 지식
친구 추가 기능을 소개하기 전에 다음 사항을 알아야 합니다.
친구 추가 페이지를 디자인할 때 페이지의 레이아웃과 기능을 고려해야 합니다. 일반적으로 친구 추가 기능에는 다음 내용이 포함되어야 합니다.
검색 상자: 사용자는 검색 상자에 친구의 이름이나 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>
사용자 목록 가져오기
<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>
상위-하위 구성요소는 값을 전달합니다.
<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>
<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
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!