Spring Boot校园社团管理系统动态功能实现技术求助

一、后端（Spring Boot）实现 #

1. 用户角色区分与注册 #

• 在User实体类中添加role字段，推荐用枚举类型定义USER、ADMIN，避免非法值：

  public enum Role {
      USER, ADMIN
  }
  

• 注册接口接收role参数并存入数据库，同时在SecurityConfig中配置角色权限拦截：

  @Override
  protected void configure(HttpSecurity http) throws Exception {
      http.authorizeRequests()
          .antMatchers("/api/clubs/create").hasRole("ADMIN")
          .antMatchers("/api/users/upgrade").hasRole("ADMIN")
          .anyRequest().authenticated();
  }
  

2. 社团实体与CRUD接口 #

• 创建Club实体类，包含字段：id、name、leaderName、leaderSocialLink、leaderPhotoUrl、viceLeaderName、viceLeaderSocialLink、viceLeaderPhotoUrl、motto、vision、clubPhotoUrl、createTime；
• 编写ClubRepository继承JpaRepository，实现基础增删改查；
• 开发创建社团的POST接口/api/clubs/create，用MultipartFile处理照片上传，将文件存储到服务器静态目录或OSS后，把访问URL存入数据库；
• 提供查询所有社团的GET接口/api/clubs/all，以及编辑社团的PUT接口/api/clubs/{id}。

3. 用户-社团关联与角色升级 #

• 创建UserClub中间实体，记录用户ID与社团ID，实现多对多关联；
• 编写加入社团的POST接口/api/clubs/{id}/join，登录用户调用时添加关联记录；
• 实现角色升级的PUT接口/api/users/{id}/upgrade，仅ADMIN可调用，修改目标用户的role字段为ADMIN。

二、前端（HTML/CSS/JS）实现 #

1. 注册表单角色选择 #

• 在注册表单中添加单选框组件：

  <div class="role-select">
      <label>角色：</label>
      <input type="radio" name="role" value="USER" checked>普通用户
      <input type="radio" name="role" value="ADMIN">管理员
  </div>
  

• 提交表单时将role参数一同传给后端注册接口。

2. 管理员专属创建社团表单 #

• 通过JS判断登录用户角色，仅ADMIN显示创建入口：

  const currentUser = JSON.parse(localStorage.getItem('currentUser'));
  if (currentUser?.role === 'ADMIN') {
      document.getElementById('create-club-section').style.display = 'block';
  }
  

• 表单包含所有必填字段，用文件上传控件处理照片：

  <input type="file" name="clubPhoto" accept="image/*" required>
  

• 用FormData提交带文件的表单，调用后端创建接口：

  document.getElementById('create-club-form').addEventListener('submit', async (e) => {
      e.preventDefault();
      const formData = new FormData(e.target);
      const res = await fetch('/api/clubs/create', {
          method: 'POST',
          body: formData,
          credentials: 'include'
      });
      if (res.ok) {
          loadClubs();
          e.target.reset();
      }
  });
  

3. 社团卡片实时展示 #

• 编写loadClubs()函数，拉取社团数据并动态生成卡片：

  async function loadClubs() {
      const res = await fetch('/api/clubs/all');
      const clubs = await res.json();
      const container = document.getElementById('clubs-container');
      container.innerHTML = '';
      clubs.forEach(club => {
          const card = document.createElement('div');
          card.className = 'club-card';
          card.innerHTML = `
              <img src="${club.clubPhotoUrl}" alt="${club.name}">
              <h3>${club.name}</h3>
              <p class="motto">${club.motto}</p>
              <div class="leader">社长：<a href="${club.leaderSocialLink}">${club.leaderName}</a></div>
              <button onclick="joinClub(${club.id})">加入社团</button>
          `;
          container.appendChild(card);
      });
  }
  

• 在welcome.html和index.html的页面加载事件中调用loadClubs()，创建社团成功后再次调用实现实时更新。

4. 登录后社团加入功能 #

• 用户登录成功后，将用户信息存入localStorage；
• 实现加入社团的函数：

  async function joinClub(clubId) {
      const res = await fetch(`/api/clubs/${clubId}/join`, {
          method: 'POST',
          credentials: 'include'
      });
      if (res.ok) {
          alert('加入成功');
      }
  }
  

5. 角色升级功能 #

• 仅ADMIN用户可见角色升级入口，输入用户ID后调用升级接口：

  async function upgradeUser(userId) {
      const res = await fetch(`/api/users/${userId}/upgrade`, {
          method: 'PUT',
          credentials: 'include'
      });
      if (res.ok) {
          alert('角色升级完成');
      }
  }
  

三、关键注意事项 #

• 跨域配置：若前后端分离，在Spring Boot中添加CORS配置，允许前端域名访问；
• 文件存储：确保服务器静态目录可写，或对接OSS服务生成可访问的图片URL；
• 权限校验：后端接口必须校验用户角色，禁止前端绕过权限调用敏感接口；
• 事务控制：用户加入社团、角色升级等操作需添加事务注解，保证数据一致性。

内容的提问来源于stack exchange，提问作者Neon