社团管理系统

用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管理数据库表

功能设计

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

1. 用户管理

   • 注册和登录：用户可以注册新账户并登录系统。
   • 用户信息管理：用户可以查看和编辑个人信息。
   • 用户权限管理：管理员可以分配和修改用户权限。
   • 用户密码重置：用户可以请求重置密码。

2. 活动管理

   • 活动发布：管理员可以发布新的活动。
   • 活动浏览：用户可以浏览和报名参加活动。
   • 活动管理：管理员可以编辑和删除活动。
   • 活动签到：活动期间，用户可以进行签到。
   • 活动反馈：用户可以对参加的活动进行反馈和评分。

3. 通知公告

   • 公告发布：管理员可以发布新的公告。
   • 公告浏览：用户可以浏览公告。
   • 公告管理：管理员可以编辑和删除公告。

4. 成员管理

   • 成员列表：管理员可以查看所有成员列表。
   • 成员信息管理：管理员可以编辑和删除成员信息。
   • 成员加入审批：管理员可以审核新的成员申请。
   • 成员活动记录：查看成员参加的历史活动记录。

5. 系统设置

   • 权限管理：管理员可以设置用户权限。
   • 系统配置：管理员可以配置系统参数。
   • 数据备份与恢复：管理员可以执行数据备份与恢复操作。
   • 日志管理：系统记录操作日志供管理员查询。

数据库设计

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

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

用户表（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	签到时间

环境搭建

注：以下只展示部分代码

后端部分

1. 创建Spring Boot项目
   使用Spring Initializr创建一个新的Spring Boot项目，选择以下依赖：Spring Web、MyBatis、Spring Security、MySQL Driver。

2. 配置数据库连接
   在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

3. 创建实体类
   例如，创建一个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
}

4. 创建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();
}

5. 创建服务层和控制器

@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();
    }
}

前端部分

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

vue create club-management-frontend

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

npm install axios

3. 设置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 }
  ]
});

4. 创建组件
   在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>

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

module

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

项目运行

1. 启动Spring Boot后端服务：

mvn spring-boot:run

2. 启动Vue.js前端服务：

npm run serve

在浏览器中打开http://localhost:8080，即可看到社团管理系统的首页。

总结

通过Spring Boot、Vue.js和MyBatis的结合，我们实现了一个功能丰富的社团管理系统。这种前后端分离的架构不仅提高了开发效率，还使得应用具有良好的扩展性和维护性。你可以根据实际需求进一步扩展和优化该系统，如添加更多功能、增强安全性和优化性能。

通过这种方式，我们不仅能提高社团管理的效率，还能为用户提供更好的体验。未来的工作将包括性能优化、功能扩展以及用户反馈的集成，以使系统更加完善和实用。

源码获取方式

扫一扫备注"源码"、或者加：numshiqi

注：扫一扫也可获取其他更多项目源码