vue+springboot组队功能代码

由于组队功能较为复杂，需要前后端联合开发，以下是一个基本的前端和后端的示例代码。

前端代码：

<template>
  <div>
    <h2>组队列表</h2>
    <ul>
      <li v-for="team in teams" :key="team.id">
        {{team.name}} - {{team.members.length}}人
        <button v-if="!isJoined(team)" @click="joinTeam(team)">加入</button>
        <button v-else @click="leaveTeam(team)">离开</button>
      </li>
    </ul>
    <h2>我的队伍</h2>
    <p v-if="!myTeam">未加入任何队伍</p>
    <ul v-if="myTeam">
      <li>{{myTeam.name}} - {{myTeam.members.length}}人</li>
      <li v-for="member in myTeam.members" :key="member.id">{{member.name}}</li>
      <button @click="leaveTeam(myTeam)">离开队伍</button>
    </ul>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      teams: [],
      myTeam: null,
      user: {
        id: 1,
        name: '张三'
      }
    }
  },
  mounted() {
    this.loadTeams()
    this.loadMyTeam()
  },
  methods: {
    loadTeams() {
      axios.get('/api/teams').then(response => {
        this.teams = response.data
      })
    },
    loadMyTeam() {
      axios.get(`/api/users/${this.user.id}/team`).then(response => {
        this.myTeam = response.data
      })
    },
    isJoined(team) {
      return this.myTeam && this.myTeam.id === team.id
    },
    joinTeam(team) {
      axios.post(`/api/teams/${team.id}/members`, {
        id: this.user.id,
        name: this.user.name
      }).then(() => {
        this.loadTeams()
        this.loadMyTeam()
      })
    },
    leaveTeam(team) {
      axios.delete(`/api/teams/${team.id}/members/${this.user.id}`).then(() => {
        this.loadTeams()
        this.loadMyTeam()
      })
    }
  }
}
</script>

后端代码：

@RestController
@RequestMapping("/api")
public class TeamController {
    @Autowired
    private TeamRepository teamRepository;
    
    @Autowired
    private UserRepository userRepository;
    
    @GetMapping("/teams")
    public List<Team> getTeams() {
        return teamRepository.findAll();
    }
    
    @GetMapping("/users/{userId}/team")
    public Team getUserTeam(@PathVariable Long userId) {
        Optional<User> user = userRepository.findById(userId);
        if (user.isPresent()) {
            return user.get().getTeam();
        } else {
            throw new NotFoundException("User not found");
        }
    }
    
    @PostMapping("/teams/{teamId}/members")
    public void joinTeam(@PathVariable Long teamId, @RequestBody User user) {
        Optional<Team> team = teamRepository.findById(teamId);
        if (team.isPresent()) {
            team.get().getMembers().add(user);
            teamRepository.save(team.get());
        } else {
            throw new NotFoundException("Team not found");
        }
    }
    
    @DeleteMapping("/teams/{teamId}/members/{userId}")
    public void leaveTeam(@PathVariable Long teamId, @PathVariable Long userId) {
        Optional<Team> team = teamRepository.findById(teamId);
        if (team.isPresent()) {
            Optional<User> user = team.get().getMembers().stream().filter(m -> m.getId().equals(userId)).findFirst();
            if (user.isPresent()) {
                team.get().getMembers().remove(user.get());
                teamRepository.save(team.get());
            } else {
                throw new NotFoundException("User not found in team");
            }
        } else {
            throw new NotFoundException("Team not found");
        }
    }
}

@Entity
public class Team {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    
    private String name;
    
    @OneToMany(cascade = CascadeType.ALL)
    private List<User> members = new ArrayList<>();
    
    // getters and setters
}

@Entity
public class User {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    
    private String name;
    
    @ManyToOne
    private Team team;
    
    // getters and setters
}

@Repository
public interface TeamRepository extends JpaRepository<Team, Long> {}

@Repository
public interface UserRepository extends JpaRepository<User, Long> {}

需要注意的是，以上代码仅为示例，实际项目中需要根据具体需求进行修改和优化。