vue+springboot怎么实现关注功能

实现关注功能的思路可以分为以下几步：

1. 前端页面设计：在用户个人主页或其他相关页面上添加关注按钮，点击按钮触发关注事件。

2. 后端 API 设计：根据前端页面设计，设计后端 API，接收前端传递的参数（如被关注用户的 ID），并在后端进行相应的关注操作。

3. 数据库设计：设计用户关系表，记录用户关注关系。

下面是一个简单的实现步骤：

1. 前端页面设计：

在需要添加关注功能的页面上添加一个关注按钮，点击按钮触发关注事件，代码如下：

<button @click="followUser">关注</button>

2. 后端 API 设计：

在后端编写一个关注 API，接收前端传递的参数（被关注用户的 ID）并进行相应操作，代码如下：

@RestController
@RequestMapping("/api")
public class FollowController {
    // 注入userService
    @Autowired
    private UserService userService;

    // 关注用户
    @PostMapping("/follow")
    public CommonResult followUser(@RequestParam Long userId) {
        User user = userService.getUserById(userId);
        if (user == null) {
            return CommonResult.failed("用户不存在");
        }
        // 添加关注关系
        userService.followUser(userId, getCurrentUserId());
        return CommonResult.success();
    }
}

3. 数据库设计：

在数据库中设计用户关系表，记录用户之间的关注关系。可以设计一个 user_relationship 表，关注关系可以表示为一个二元组 (follower_id, following_id) ，其中 follower_id 表示关注者的 ID，following_id 表示被关注者的 ID。表结构如下：

CREATE TABLE `user_relationship` (
  `id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '主键ID',
  `follower_id` bigint(20) NOT NULL COMMENT '关注者ID',
  `following_id` bigint(20) NOT NULL COMMENT '被关注者ID',
  `create_time` datetime NOT NULL COMMENT '创建时间',
  PRIMARY KEY (`id`),
  UNIQUE KEY `uk_follower_following` (`follower_id`,`following_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='用户关系表';

在 UserService 中编写 followUser 方法，实现添加关注关系的操作：

@Service
public class UserServiceImpl implements UserService {
    // 注入UserRelationshipMapper
    @Autowired
    private UserRelationshipMapper userRelationshipMapper;

    @Override
    public void followUser(Long followerId, Long followingId) {
        UserRelationship relationship = new UserRelationship();
        relationship.setFollowerId(followerId);
        relationship.setFollowingId(followingId);
        relationship.setCreateTime(new Date());
        userRelationshipMapper.insert(relationship);
    }
}

这样就完成了关注功能的实现。