|
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、功能模块
登录页面
管理员>面主页面
管理员>用户管理
 活动管理
用户首页
用户>活动列表页面
用户>我的活动页面
登录页面部分代码
Hello
欢迎来到校园活动报名系统
登录
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
}
}
.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%;
}
}
}
|