当前位置：首页 > news >正文

[免费]SpringBoot+Vue校园社团管理系统(优质版)【论文+源码+SQL脚本】

news 来源：原创 2025/6/20 1:42:18

大家好，我是java1234_小锋老师，看到一个不错的SpringBoot+Vue校园社团管理系统(优质版)，分享下哈。

项目视频演示

【免费】SpringBoot+Vue校园社团管理系统(优质版) Java毕业设计_哔哩哔哩_bilibili

项目介绍

随着信息技术的迅速发展，校园管理系统的数字化和智能化成为高校信息化建设的重要组成部分。校园社团管理作为高校管理的一项重要内容，传统的手工操作和信息记录方式已无法满足现代化、高效化的管理需求。为了提升校园社团管理的效率和透明度，本文提出了一种基于SpringBoot和Vue的校园社团管理系统。该系统以SpringBoot框架为后端开发基础，采用Vue框架作为前端展示层，通过前后端分离的架构模式，提供了一个高效、便捷、功能完备的社团管理平台。

本系统主要实现了社团信息管理、会员管理、活动管理、财务管理等功能，支持社团管理员、社团成员以及学校管理者的不同权限操作。系统通过前端界面展现社团活动、成员信息、财务收支等数据，便于各类用户实时查看和操作，提升了管理效率与透明度。后台采用SpringBoot提供RESTful API接口，使用MySQL数据库存储数据，确保了数据的安全性和一致性。前端使用Vue.js构建响应式用户界面，增强了用户体验，支持PC端和移动端自适应显示。

本文通过对系统的设计与实现过程进行详细分析，展示了SpringBoot和Vue技术栈在校园社团管理中的应用效果。系统经过测试，能够有效处理大规模数据，并且响应速度

系统展示

部分代码

package com.rabbiter.association.controller;import com.rabbiter.association.service.UsersService;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;import com.rabbiter.association.utils.DateUtils;
import com.rabbiter.association.utils.IDUtils;
import com.rabbiter.association.msg.R;
import com.rabbiter.association.msg.PageData;import com.rabbiter.association.entity.Users;/*** 系统请求响应控制器* 系统用户*/
@Controller
@RequestMapping("/users")
public class UsersController extends BaseController {protected static final Logger Log = LoggerFactory.getLogger(UsersController.class);@Autowiredprivate UsersService usersService;@RequestMapping("")public String index() {return "pages/Users";}@GetMapping("/info")@ResponseBodypublic R getInfo(String id) {Log.info("查找指定系统用户，ID：{}", id);Users users = usersService.getOne(id);return R.successData(users);}@GetMapping("/page")@ResponseBodypublic R getPageInfos(Long pageIndex, Long pageSize,Users users) {Log.info("分页查找系统用户，当前页码：{}，"+ "每页数据量：{}, 模糊查询，附加参数：{}", pageIndex,pageSize, users);PageData page = usersService.getPageInfo(pageIndex, pageSize, users);return R.successData(page);}@PostMapping("/add")@ResponseBodypublic R addInfo(Users users) {if(usersService.getUserByUserName(users.getUserName()) == null){users.setId(IDUtils.makeIDByCurrent());users.setCreateTime(DateUtils.getNowDate());Log.info("添加系统用户，传入参数：{}", users);usersService.add(users);return R.success();}else{return R.warn("用户账号已存在，请重新输入");}}@PostMapping("/upd")@ResponseBodypublic R updInfo(Users users) {Log.info("修改系统用户，传入参数：{}", users);usersService.update(users);return R.success();}@PostMapping("/del")@ResponseBodypublic R delInfo(String id) {if(usersService.isRemove(id)){Log.info("删除系统用户, ID:{}", id);Users users = usersService.getOne(id);usersService.delete(users);return R.success();}else{return R.warn("用户存在关联社团，无法移除");}}
}

<template><div class="login-container"><div class="login-body"><div class="login-title">社团管理系统</div><div class="login-form"><el-form :model="loginForm" :rules="rules" ref="loginForm"><el-form-item prop="userName"><el-input type="text" v-model="loginForm.userName" suffix-icon="iconfont icon-r-user1"placeholder="请输入您的账号"></el-input></el-form-item><el-form-item prop="passWord"><el-input type="password" v-model="loginForm.passWord" suffix-icon="iconfont icon-r-lock"placeholder="请输入您的密码"></el-input></el-form-item><el-form-item><el-button style="margin-top: 15px;width: 100%;background-color: #6495ed;" @click="submitForm('loginForm')" type="primary"><b style="font-size: 22px;"> 用户登录</b></el-button><br /><el-button style="width: 100%; margin-top: 5px" @click="showAddWin()" :underline="false"type="info"><b style="font-size: 22px;"> 注册新账号</b></el-button></el-form-item></el-form></div></div><el-dialog title="用户注册" width="700px" :modal="false" :visible.sync="showAddFlag"><el-form label-width="90px" :model="usersForm"><el-row :gutter="15"><el-col :span="12"><el-form-item label="用户账号"><el-input v-model="usersForm.userName" placeholder="请输入用户账号…" autocomplete="off"></el-input></el-form-item></el-col><el-col :span="12"><el-form-item label="用户密码"><el-input v-model="usersForm.passWord" type="password" placeholder="请输入用户密码…"autocomplete="off"></el-input></el-form-item></el-col></el-row><el-row :gutter="15"><el-col :span="12"><el-form-item label="用户姓名"><el-input v-model="usersForm.name" placeholder="请输入用户姓名…" autocomplete="off"></el-input></el-form-item></el-col><el-col :span="12"><el-form-item label="用户年龄"><el-input v-model="usersForm.age" placeholder="请输入用户年龄…" autocomplete="off"></el-input></el-form-item></el-col></el-row><el-row :gutter="15"><el-col :span="12"><el-form-item label="用户性别"><el-radio-group v-model="usersForm.gender"><el-radio label="男"></el-radio><el-radio label="女"></el-radio></el-radio-group></el-form-item></el-col><el-col :span="12"><el-form-item label="联系电话"><el-input v-model="usersForm.phone" placeholder="请输入联系电话…" autocomplete="off"></el-input></el-form-item></el-col></el-row><el-form-item label="联系地址"><el-input rows="4" type="textarea" v-model="usersForm.address" placeholder="请输入联系地址…"autocomplete="off"></el-input></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button @click="showAddFlag = false" style="font-size: 18px"> 取 消</el-button><el-button type="primary" @click="addInfo()" style="font-size: 18px"> 确 定</el-button></div></el-dialog></div>
</template><style>
.login-container {position: fixed;top: 0;left: 0;width: 100%;overflow-y: auto;height: 100%;background: url("../assets/back.jpg") center top / cover no-repeat;/* background-color: #b0c4de; *//* background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.4' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E"); */
}.login-win {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 550px;height: 300px;padding: 15px;border-radius: 5px;background-size: cover;
}.login-body {padding: 30px 40px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);background-color: white;border-radius: 20px;border: 2px solid #6495ed;opacity: 0.9;
}.login-title {text-align: center;font-size: 30px;font-weight: bold;color: #6495ed;margin-bottom: 35px;
}
</style><script>
import initMenu from "../utils/menus.js";
import { login, addUsers } from "../api/index.js";
export default {data() {return {showAddFlag: false,usersForm: {id: "",userName: "",passWord: "",name: "",gender: "",age: "",phone: "",address: "",type: 2,status: 1,},loginForm: {userName: "",passWord: "",},rules: {userName: [{required: true,message: "用户账号必须输入",trigger: "blur",},],passWord: [{required: true,message: "用户密码必须输入",trigger: "blur",},],},};},methods: {showAddWin() {this.showAddFlag = true;},submitForm(formName) {this.$refs[formName].validate((valid) => {if (valid) {login(this.loginForm).then((res) => {this.$store.commit("setToken", res.data);sessionStorage.setItem("token", res.data);initMenu(this.$router, this.$store);this.$router.push("/index");})} else {return false;}});},addInfo() {if (this.usersForm.userName.trim() == '') {this.$message({message: "请填写账号",type: "warning",});return;}if (this.usersForm.passWord.trim() == '') {this.$message({message: "请填写密码",type: "warning",});return;}if (this.usersForm.name.trim() == '') {this.$message({message: "请填写姓名",type: "warning",});return;}if (this.usersForm.age.trim() == '') {this.$message({message: "请填写年龄",type: "warning",});return;}if (this.usersForm.gender.trim() == '') {this.$message({message: "请选择性别",type: "warning",});return;}if (this.usersForm.phone.trim() == '') {this.$message({message: "请填写手机号码",type: "warning",});return;}if (this.usersForm.address.trim() == '') {this.$message({message: "请填写地址",type: "warning",});return;}addUsers(this.usersForm).then((resp) => {if (resp.code == 0) {this.$confirm("注册成功, 立即登陆?", "提示", {confirmButtonText: "确定",cancelButtonText: "取消",type: "warning",}).then(() => {login({userName: this.usersForm.userName,passWord: this.usersForm.passWord,}).then((res) => {this.$store.commit("setToken", res.data);sessionStorage.setItem("token", res.data);initMenu(this.$router, this.$store);this.$router.push("/index");});});} else {this.$message({message: resp.msg,type: "warning",});}});},},mounted() {}
};
</script>

源码代码

链接：https://pan.baidu.com/s/1Y3BK4DYkgHQzOd8rbnoPbQ
提取码：1234

项目视频演示

项目介绍

系统展示

部分代码

源码代码

相关文章：