Cara menggunakan Vue untuk melaksanakan fungsi tambah rakan

Dengan peningkatan media sosial, menambah rakan telah menjadi bahagian penting dalam interaksi harian orang ramai. Untuk pembangun bahagian hadapan, cara melaksanakan fungsi menambah rakan pada halaman adalah soalan yang patut difikirkan. Artikel ini akan memperkenalkan cara menggunakan rangka kerja Vue untuk melaksanakan fungsi tambah rakan.

1. Pengetahuan prasyarat

Sebelum kita mula memperkenalkan fungsi menambah rakan, kita perlu mengetahui perkara berikut:

1. Buat projek menggunakan Vue CLI; >
Konsep asas dan penggunaan komponen Vue;
2. Kaedah untuk menghantar nilai antara komponen induk dan anak;
3. Konsep asas dan penggunaan Penghala Vue.

2. Reka bentuk halaman

Apabila mereka bentuk halaman untuk menambah rakan, kita perlu mempertimbangkan reka letak dan kefungsian halaman. Biasanya, fungsi menambah rakan perlu memasukkan kandungan berikut:

Kotak carian: pengguna boleh memasukkan nama atau ID rakan dalam kotak carian untuk mencari
1. Senarai pengguna: berdasarkan pada hasil carian Paparkan senarai pengguna;
2. Butang tambah rakan: Pengguna boleh mengklik butang Tambah rakan untuk menghantar permintaan rakan kepada pengguna dalam hasil carian.

Berdasarkan kandungan di atas, kami boleh mereka bentuk susun atur halaman berikut:

<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. Melaksanakan fungsi

Selepas mereka bentuk susun atur halaman, kami perlu melaksanakan fungsi penambahan Rakan. Berikut ialah kaedah pelaksanaan khusus:

Dapatkan senarai pengguna

Selepas pengguna memasukkan kata kunci dalam kotak carian, kami perlu meminta melalui antara muka untuk mendapatkan senarai pengguna yang memenuhi syarat carian. Dalam Vue, kami biasanya merangkum fungsi ini ke dalam komponen:

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

Dalam kod di atas, kami mentakrifkan kaedah bernama getUserList untuk menghantar permintaan ke bahagian belakang untuk mendapatkan hasil yang sepadan dengan carian Senarai pengguna bersyarat , dalam fungsi yang dipasang, kami memanggil kaedah getUserList, supaya selepas komponen dimuatkan, permintaan akan dihantar ke bahagian belakang untuk mendapatkan senarai pengguna.

Komponen ibu bapa-anak lulus nilai

Dalam Vue, komponen induk menghantar data kepada komponen anak, yang boleh dicapai melalui prop. Kami boleh menghantar kata kunci yang dimasukkan oleh pengguna dalam kotak carian kepada subkomponen melalui prop, supaya subkomponen boleh mencari berdasarkan kata kunci carian semasa menghantar permintaan.

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

Dalam kod di atas, kami mentakrifkan atribut data bernama kata kunci untuk menyimpan kata kunci yang dimasukkan oleh pengguna dalam kotak carian. Selain itu, kami juga memperkenalkan komponen bernama UserList, menggunakan prop untuk menghantar kata kunci kepada subkomponen, dan apabila butang carian diklik, kaedah getUserList subkomponen dipanggil untuk mencetuskan fungsi carian.

Dalam komponen anak, kita perlu terlebih dahulu mentakrifkan prop bernama kata kunci:

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

Dalam kod di atas, kami mentakrifkan prop bernama kata kunci untuk menerima induk Nilai yang diluluskan oleh komponen. Dalam kaedah getUserList, kita boleh menggunakan this.keyword untuk mendapatkan kata kunci yang diluluskan oleh komponen induk untuk carian Kaedah addFriend digunakan untuk menghantar permintaan ke bahagian belakang untuk menambah rakan.

Penghala Vue

Apabila melaksanakan fungsi tambah rakan, biasanya kita perlu mempertimbangkan masalah lompat halaman selepas pengguna menambah rakan. Untuk melaksanakan fungsi lompat halaman dengan lebih baik, kita perlu menggunakan Penghala Vue.

Pertama sekali, apabila mencipta projek Vue, anda perlu memilih untuk menggunakan Penghala Vue:

vue create my-project

Apabila memilih Pilihan, pilih Pilih ciri secara manual, kemudian pilih Penghala, dan pasangkannya .

Seterusnya, selepas berjaya menambah rakan, kita perlu melompat ke halaman butiran tambah rakan. Fungsi ini boleh dilaksanakan menggunakan Penghala Vue:

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

Dalam kod di atas, kami mula-mula memperkenalkan fungsi mapState Vuex untuk mendapatkan maklumat pengguna melalui fungsi ini. Kemudian, dalam kaedah addFriend, kami menghantar permintaan ke bahagian belakang untuk menambah rakan Selepas rakan itu berjaya ditambahkan, kami menggunakan Penghala Vue untuk melompat ke halaman butiran rakan. Apabila melompat, kami menggunakan nama dan atribut params bagi laluan Nama atribut mewakili nama halaman, dan atribut params mewakili parameter yang diluluskan. Kami boleh mentakrifkan laluan ini dalam 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

Dalam kod di atas, kami mentakrifkan laluan bernama friendDetail, dan atribut laluan laluan mewakili laluan untuk mengakses halaman. , atribut nama menunjukkan nama laluan, dan atribut komponen menunjukkan komponen yang sepadan dengan laluan. Komponen FriendDetail ialah komponen yang digunakan untuk memaparkan halaman butiran rakan Dalam komponen ini, maklumat rakan boleh diperoleh berdasarkan friendId yang diluluskan.

4. Kesimpulan

Dalam artikel ini, kami memperkenalkan cara menggunakan rangka kerja Vue untuk melaksanakan fungsi menambah rakan. Melalui pelaksanaan fungsi ini, kami bukan sahaja dapat mengembangkan kemahiran front-end kami, tetapi juga meningkatkan kemahiran komunikasi dan sosial kami dan mewujudkan lebih banyak hubungan sosial melalui fungsi ini.

Atas ialah kandungan terperinci Cara menggunakan Vue untuk melaksanakan fungsi tambah rakan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!