vue 实现批量关注
实现批量关注功能
在Vue中实现批量关注功能通常涉及前端界面交互、后端API调用以及状态管理。以下是关键实现步骤：
界面设计
使用v-model绑定选中的用户ID数组，结合v-for渲染用户列表：
<template>
<div>
<div v-for="user in userList" :key="user.id">
<input
type="checkbox"
v-model="selectedUsers"
:value="user.id"
>
{{ user.name }}
</div>
<button @click="batchFollow">批量关注</button>
</div>
</template>数据绑定
在data中初始化选中数组和用户列表：
data() {
return {
selectedUsers: [],
userList: [
{ id: 1, name: '用户A' },
{ id: 2, name: '用户B' }
]
}
}批量请求处理
创建批量关注方法，通常需要调用后端API：
methods: {
async batchFollow() {
if (this.selectedUsers.length === 0) return
try {
const res = await axios.post('/api/follow/batch', {
userIds: this.selectedUsers
})
console.log('关注成功', res.data)
this.selectedUsers = [] // 清空选中
} catch (error) {
console.error('关注失败', error)
}
}
}性能优化
对于大量用户的情况，建议添加分页加载和防抖处理：
import { debounce } from 'lodash'
methods: {
batchFollow: debounce(function() {
// 原有逻辑
}, 500)
}状态反馈
添加加载状态和结果提示：
data() {
return {
isLoading: false,
message: ''
}
}
methods: {
async batchFollow() {
this.isLoading = true
try {
// API调用
this.message = '关注成功'
} finally {
this.isLoading = false
}
}
}后端接口建议
后端API应接收用户ID数组，处理批量关注逻辑：
POST /api/follow/batch
请求体: { userIds: [1, 2, 3] }实现时需考虑前后端协同，前端负责收集用户选择，后端处理实际关注逻辑。根据具体需求，可能还需要添加全选功能、关注结果实时反馈等增强体验的设计。
