springboot+vue的前后端分离的校园活动报名系统

1.1 设计目的与意义

校园活动是学生综合素质发展的重要组成部分，通过参与各类校园活动，

学生可以拓宽视野、锻炼能力、培养团队合作精神等。然而，传统的校园活动报名方式存在一些问题，如报名流程繁琐、信息传递不及时等，因此设计和实现一个高效便捷的校园活动报名系统具有重要意义。

该系统是为了提高报名效率:校园活动报名系统能够提供在线报名功能，使学生能够随时随地提交报名申清，避免了传统方式中需要排队或填写纸质表格的繁功过程，节省了时间和精力。简化管理流程，系统可以自动收集和整理学生的报名信息，减少了手工整理数据的工作量，大大简化了活动组织者的管理流程，提高了工作效率。实现信息公开与透明:报名系统能够在活动报名开始后实时展示已报名人数和名单，提供公开和透明的报名信息，使学生和组织者都能随时获取最新的报名情况。便于后续跟进与沟通:系统可以提供学生报名信息的存档功能，方便组织者后续的活动安排、参与确认、通知发布等工作，并够通过系统内部消息或部件进行与学生的沟通。

因此，校园活动报名系统的开发和使用对千高校来说具有重要的意义，可以提高活动的效率和质量，提升学生参与度和体验，促进学生综合素质的全面发展。

1.2 开发平台与运行环境

操作系统：Win10或者Win11；

Web服务器:Tomcat6及其以上版本；

浏览器： Google和Chrome；

数据库：MySQL；

开发平台：java平台；

开发技术：HTML5，CSS，JS,Vue.js，Springboot（SSM）框架；

开发工具：idea，Visual Studio Code。

2.2 用例图

根据需求分析，设计系统用例图如图2-1所示。

图2-1 用例图

3.1 功能模块设计

图3-1 功能模块图 

3.2 数据库设计 

4、功能模块 

登录页面

管理员>面主页面 

管理员>用户管理

 活动管理

用户首页

用户>活动列表页面

用户>我的活动页面

登录页面部分代码 

<template>
    <div class="login-container">
        <el-row>
            <el-col :span="12" :xs="0"></el-col>
            <el-col :span="12" :xs="24">
                <el-form class="login-form" :model="loginForm" ref="loginFormRef" :rules="rules">
                    <h1>Hello</h1>
                    <h2>欢迎来到校园活动报名系统</h2>
                    <el-form-item prop="number">
                        <el-input placeholder="请输入学号" :prefix-icon="User" v-model="loginForm.number" />
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input placeholder="请输入密码" :prefix-icon="Lock" type="password" show-password
                            v-model="loginForm.password" />
                    </el-form-item>
                    <el-form-item>
                        <el-button class="login-btn" type="primary" @click="login" :loading="loading">登录</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
    </div>
</template> 

<script setup>
import { reactive, ref } from "vue"
import { User, Lock } from '@element-plus/icons-vue'
import useUserStore from "@/store/user"
import { useRouter } from "vue-router"
import { ElNotification } from 'element-plus'
import { getTime } from "@/utils/time"

const userStore = useUserStore()
const router = useRouter()

const loginFormRef = ref()
const loginForm = ref({
    number: "",
    password: ""
})
const loading = ref(false)
// 表单校验规则
const rules = reactive({
    number: [{ required: true, min: 5, max: 15, message: '用户名长度为5到12位', trigger: 'change' }],
    password: [{ required: true, min: 6, max: 15, message: '密码长度至少6位', trigger: 'change' },]
})

// 点击登录
const login = async () => {
    await loginFormRef.value.validate()
    // 校验通过才执行下面的
    loading.value = true
    try {
        await userStore.userLogin(loginForm.value)
        // 登录成功
        router.push('/')
        ElNotification({
            message: '登录成功',
            type: 'success',
            title: `Hi,${getTime()}`
        })
        loading.value = false
    } catch (error) {
        ElNotification({
            message: error.message,
            type: 'error',
        })
        loading.value = false
    }
}
</script>

<style lang="scss" scoped>
.login-container {
    width: 100%;
    height: 100vh;
    background: url("@/assets/images/background.jpg") no-repeat;
    background-size: cover;

    .login-form {
        position: relative;
        width: 80%;
        top: 30vh;
        background: url("@/assets/images/login_form.png") no-repeat;
        background-size: cover;
        padding: 40px;
        color: #fff;

        h1 {
            font-size: 40px;
        }

        h2 {
            font-size: 20px;
            margin: 20px 0;
        }

        .login-btn {
            width: 100%;
        }
    }
}
</style>