Rumah >hujung hadapan web >Soal Jawab bahagian hadapan >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:
<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:
<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.
<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.
vue create my-projectApabila 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 routerDalam 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. KesimpulanDalam 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!