社团管理系统

用Spring Boot、Vue.js和MyBatis实现社团管理系统

温馨提示：项目源代码获取方式见文末

摘要

本文探讨了如何使用Spring Boot作为后端框架，Vue.js作为前端框架，以及MyBatis作为数据库持久层框架，构建一个社团管理系统。该系统旨在帮助社团管理员和成员更好地管理和参与社团活动。通过前后端分离的架构设计，本文展示了系统从需求分析、功能设计、数据库设计到实现的详细过程。

引言

随着信息技术的发展，社团管理逐渐从传统的线下方式转向线上系统管理。为了提高管理效率和用户体验，本文选择了Spring Boot作为后端框架，Vue.js作为前端框架，MyBatis作为数据库持久层框架，MySQL作为数据库，构建一个现代化的社团管理系统。该系统主要功能包括用户管理、活动管理、通知公告、成员管理等。

系统设计与实现

技术选型

后端：Spring Boot
- 提供RESTful API接口
- 使用MyBatis与MySQL数据库交互
- 安全性由Spring Security保证
前端：Vue.js
- 组件化开发
- 使用Vue Router实现页面导航
- 使用Axios与后端API进行通信
数据库：MySQL
- 存储用户、活动、公告、成员和签到信息
- 使用MyBatis管理数据库表

功能设计

社团管理系统的主要功能模块包括：

用户管理
- 注册和登录：用户可以注册新账户并登录系统。
- 用户信息管理：用户可以查看和编辑个人信息。
- 用户权限管理：管理员可以分配和修改用户权限。
- 用户密码重置：用户可以请求重置密码。
活动管理
- 活动发布：管理员可以发布新的活动。
- 活动浏览：用户可以浏览和报名参加活动。
- 活动管理：管理员可以编辑和删除活动。
- 活动签到：活动期间，用户可以进行签到。
- 活动反馈：用户可以对参加的活动进行反馈和评分。
通知公告
- 公告发布：管理员可以发布新的公告。
- 公告浏览：用户可以浏览公告。
- 公告管理：管理员可以编辑和删除公告。
成员管理
- 成员列表：管理员可以查看所有成员列表。
- 成员信息管理：管理员可以编辑和删除成员信息。
- 成员加入审批：管理员可以审核新的成员申请。
- 成员活动记录：查看成员参加的历史活动记录。
系统设置
- 权限管理：管理员可以设置用户权限。
- 系统配置：管理员可以配置系统参数。
- 数据备份与恢复：管理员可以执行数据备份与恢复操作。
- 日志管理：系统记录操作日志供管理员查询。

数据库设计

数据库设计是系统实现的基础，确保所有数据实体及其相互关系得到恰当的定义和组织。核心实体包括用户、活动、公告、成员和签到记录。这些实体之间存在复杂的相互关系。

注：以下只展示部分表的设计

用户表（User）

字段名	类型	说明
id	BIGINT	用户ID
username	VARCHAR(50)	用户名
password	VARCHAR(255)	密码
role	VARCHAR(20)	角色
email	VARCHAR(100)	电子邮件
created_at	TIMESTAMP	注册时间

活动表（Event）

字段名	类型	说明
id	BIGINT	活动ID
name	VARCHAR(100)	活动名称
description	TEXT	活动描述
start_time	TIMESTAMP	开始时间
end_time	TIMESTAMP	结束时间
created_by	BIGINT	发布者ID

公告表（Announcement）

字段名	类型	说明
id	BIGINT	公告ID
title	VARCHAR(100)	标题
content	TEXT	内容
published_at	TIMESTAMP	发布时间
published_by	BIGINT	发布者ID

成员表（Member）

字段名	类型	说明
id	BIGINT	成员ID
user_id	BIGINT	用户ID
joined_at	TIMESTAMP	加入时间
role	VARCHAR(20)	角色

签到表（Attendance）

字段名	类型	说明
id	BIGINT	签到ID
event_id	BIGINT	活动ID
user_id	BIGINT	用户ID
sign_in_time	TIMESTAMP	签到时间

环境搭建

注：以下只展示部分代码

后端部分

创建Spring Boot项目
使用Spring Initializr创建一个新的Spring Boot项目，选择以下依赖：Spring Web、MyBatis、Spring Security、MySQL Driver。
配置数据库连接
在application.properties文件中配置数据库连接：

spring.datasource.url=jdbc:mysql://localhost:3306/club_management
spring.datasource.username=root
spring.datasource.password=yourpassword
mybatis.configuration.map-underscore-to-camel-case=true

创建实体类
例如，创建一个User实体类：

public class User {
    private Long id;
    private String username;
    private String password;
    private String role;
    private String email;
    private Timestamp createdAt;
    // Getters and setters
}

创建Mapper接口

@Mapper
public interface UserMapper {
    @Select("SELECT * FROM user WHERE username = #{username}")
    User findByUsername(@Param("username") String username);

    @Insert("INSERT INTO user(username, password, role, email, created_at) VALUES(#{username}, #{password}, #{role}, #{email}, #{createdAt})")
    @Options(useGeneratedKeys=true, keyProperty="id")
    void insertUser(User user);

    @Select("SELECT * FROM user")
    List<User> findAllUsers();
}

创建服务层和控制器

@Service
public class UserService {
    @Autowired
    private UserMapper userMapper;

    public void save(User user) {
        userMapper.insertUser(user);
    }

    public List<User> findAll() {
        return userMapper.findAllUsers();
    }
}

@RestController
@RequestMapping("/api/users")
public class UserController {
    @Autowired
    private UserService userService;

    @PostMapping
    public User createUser(@RequestBody User user) {
        userService.save(user);
        return user;
    }

    @GetMapping
    public List<User> getAllUsers() {
        return userService.findAll();
    }
}

前端部分

创建Vue.js项目
使用Vue CLI创建一个新的Vue项目：

vue create club-management-frontend

安装Axios
在项目目录中安装Axios，用于与后端API进行通信：

npm install axios

设置Vue Router
在src/router/index.js中配置路由：

import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/components/Home';
import Users from '@/components/Users';

Vue.use(Router);

export default new Router({
  routes: [
    { path: '/', component: Home },
    { path: '/users', component: Users }
  ]
});

创建组件
在src/components目录下创建Home.vue和Users.vue组件。

Home.vue:

<template>
  <div>
    <h1>Welcome to Club Management System</h1>
  </div>
</template>

<script>
export default {
  name: 'Home'
};
</script>

<style scoped>
h1 {
  text-align: center;
}
</style>

Users.vue:

<template>
  <div>
    <h1>User List</h1>
    <ul>
      <li v-for="user in users" :key="user.id">{{ user.username }}</li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'Users',
  data() {
    return {
      users: []
    };
  },
  created() {
    axios.get('/api/users')
      .then(response => {
        this.users = response.data;
      })
      .catch(error => {
        console.log(error);
      });
  }
};
</script>

<style scoped>
h1 {
  text-align: center;
}
</style>

配置代理
为了在开发环境中避免跨域问题，可以在vue.config.js中配置代理：

module

.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true
      }
    }
  }
};