vue 实现批量关注
实现批量关注功能
在Vue中实现批量关注功能通常涉及前端界面交互、API调用和状态管理。以下是实现该功能的关键步骤：
界面设计与交互
创建多选框或选择列表供用户批量选择关注对象
<template>
<div>
<div v-for="item in items" :key="item.id">
<input type="checkbox" v-model="selectedItems" :value="item.id">
{{ item.name }}
</div>
<button @click="batchFollow">批量关注</button>
</div>
</template>数据绑定与状态管理
使用Vue的响应式数据来跟踪选中状态
<script>
export default {
data() {
return {
items: [
{ id: 1, name: '用户A' },
{ id: 2, name: '用户B' }
],
selectedItems: []
}
},
methods: {
async batchFollow() {
if(this.selectedItems.length === 0) return
try {
await this.$api.follow.batchFollow({
targetIds: this.selectedItems
})
this.$message.success('关注成功')
this.selectedItems = []
} catch(error) {
console.error(error)
}
}
}
}
</script>API请求处理
封装批量关注的API请求方法
// api/follow.js
import request from '@/utils/request'
export function batchFollow(data) {
return request({
url: '/follow/batch',
method: 'post',
data
})
}性能优化考虑
对于大量数据的情况，实现分页加载和虚拟滚动
<template>
<div>
<virtual-list :size="50" :remain="10">
<div v-for="item in items" :key="item.id">
<input type="checkbox" v-model="selectedItems" :value="item.id">
{{ item.name }}
</div>
</virtual-list>
</div>
</template>错误处理与用户反馈
添加加载状态和错误提示
methods: {
async batchFollow() {
this.loading = true
try {
await this.$api.follow.batchFollow({
targetIds: this.selectedItems
})
this.$message.success(`成功关注${this.selectedItems.length}个用户`)
} catch {
this.$message.error('关注失败，请重试')
} finally {
this.loading = false
}
}
}后端接口建议
批量关注接口应支持幂等性设计，避免重复关注
// 后端接口示例
router.post('/follow/batch', async (ctx) => {
const { targetIds } = ctx.request.body
const userId = ctx.state.user.id
await FollowModel.bulkCreate(
targetIds.map(targetId => ({
userId,
targetId,
createdAt: new Date()
})), {
ignoreDuplicates: true
}
)
ctx.body = { success: true }
})注意事项
批量操作需要考虑服务器压力，建议限制单次请求的最大数量
watch: {
selectedItems(newVal) {
if(newVal.length > 100) {
this.$message.warning('单次最多选择100个用户')
this.selectedItems = newVal.slice(0, 100)
}
}
}
