vue 实现批量关注
Vue 实现批量关注功能
批量关注功能通常需要前端与后端的配合完成。以下是一个基于 Vue 的实现方案：
数据准备与展示
创建包含用户列表的数据结构，每个用户对象包含关注状态
data() {
return {
users: [
{ id: 1, name: '用户A', isFollowing: false },
{ id: 2, name: '用户B', isFollowing: true },
// 更多用户...
],
selectedUsers: []
}
}模板渲染
使用 v-for 渲染用户列表，添加复选框和关注状态
<div v-for="user in users" :key="user.id">
<input
type="checkbox"
v-model="selectedUsers"
:value="user.id"
>
<span>{{ user.name }}</span>
<button @click="toggleFollow(user)">
{{ user.isFollowing ? '取消关注' : '关注' }}
</button>
</div>
<button @click="batchFollow">批量关注选中用户</button>单个关注/取消关注
实现单个用户关注状态切换
methods: {
toggleFollow(user) {
user.isFollowing = !user.isFollowing
// 调用API更新后端状态
axios.post(`/api/follow/${user.id}`, {
follow: user.isFollowing
})
}
}批量关注实现
处理选中用户的批量关注操作
batchFollow() {
const selectedIds = this.selectedUsers
if (selectedIds.length === 0) {
alert('请至少选择一个用户')
return
}
// 批量更新前端状态
this.users.forEach(user => {
if (selectedIds.includes(user.id)) {
user.isFollowing = true
}
})
// 调用批量关注API
axios.post('/api/follow/batch', {
user_ids: selectedIds
}).then(() => {
this.selectedUsers = []
})
}优化建议
添加加载状态提升用户体验
data() {
return {
loading: false
}
}
// 在方法中添加加载状态
batchFollow() {
this.loading = true
axios.post('/api/follow/batch', {
user_ids: this.selectedUsers
}).finally(() => {
this.loading = false
})
}后端API建议
后端应提供两个接口：
- 单个关注接口
POST /api/follow/{user_id} - 批量关注接口
POST /api/follow/batch
批量接口应支持接收用户ID数组，并返回操作结果
注意事项
- 添加适当的错误处理
- 考虑分页加载用户列表时的批量操作
- 对于大量用户，建议实现全选/反选功能
- 关注操作可能需要权限验证
