基于springboot vue 大学生竞赛管理系统设计与实现
博主介绍：专注于Java vue .net php phython 小程序 等诸多技术领域和毕业项目实战、企业信息化系统建设，从业十五余年开发设计教学工作
☆☆☆ 精彩专栏推荐订阅☆☆☆☆☆不然下次找不到哟
我的博客空间发布了1000+毕设题目 方便大家学习使用
感兴趣的可以先收藏起来，还有大家在毕设选题，项目以及论文编写等相关问题都可以给我留言咨询，希望帮助更多的人
3系统分析
3.1可行性分析
通过对本大学生竞赛管理系统实行的目的初步调查和分析，提出可行性方案并对其一一进行论证。我们在这里主要从技术可行性、经济可行性、操作可行性等方面进行分析。
3.1.1技术可行性
本大学生竞赛管理系统采用SSM框架，JAVA作为开发语言，是基于WEB平台的B/S架构系统。
（1）Java提供了稳定的性能、优秀的升级性、更快速的开发、更简便的管理、全新的语言以及服务。整个系统帮用户做了大部分不重要的琐碎的工作。
（2）基于B/S模式的系统的开发已发展日趋成熟。
（3）众所周知，Java是面向对象的开发语言。程序开发员可以在Eclipse平台上面方便的使用一些已知的解决方案。
因此，大学生竞赛管理系统在开发技术上具有很高可行性，且开发人员掌握了一定的开发技术，所以此系统的开发技术具有可行性。
3.1.2经济可行性
本大学生竞赛管理系统采用的软件都是开源的，这样能够削减很多的精力和资源，降低开发成本。同时对计算机的配置要求也极低，即使是淘汰下来的计算机也能够满足需要，因此，本系统在经济上是完全具有可行性的，所以在经济上是十分可行的。
3.1.3操作可行性
本大学生竞赛管理系统的界面简单易操作，用户只要平时有在用过电脑，都能进行访问和操作。本系统具有易操作、易管理、交互性好的特点，在操作上是非常简单的，因此在操作上具有很高的可行性。
综上所述，此系统开发目标已明确，在技术、经济和操作方面都具有很高的可行性，并且投入少、功能完善、管理方便，因此系统的开发是完全可行的。
3.2系统性能分析
3.2.1 系统安全性
此大学生竞赛管理系统要严格控制管理权限，具体要求如下：
（1）要想对大学生竞赛管理系统进行管理，首先要依靠用户名和密码在系统中登陆，无权限的用户不可以通过任何方式登录系统和对系统的任何信息和数据进行查看，这样可以保证系统的安全可靠性和准确性。
（2）在具体实现中对不同的权限进行设定，不同权限的用户在系统中登陆后，不可以越级操作。
3.2.2 数据完整性
（1）所有记录信息要保持全面，信息记录内容不可以是空。
（2）各种数据间相互联系要保持正确。
（3）相同数据在不同记录中要保持一致。
目前，界面设计已经成为对软件质量进行评价的一条关键指标，一个好的用户界面可以使用户使用系统的信心和兴趣增加，从而使工作效率提高，JSP技术是将JAVA语言作为脚本语言的，JSP网页给整个服务器端的JAVA库单元提供了一个接口用来服务HTTP的应用程序。创建动态页面比较方便。客户界面是指软件系统与用户交互的接口，往往涵盖输出、输入、人机对话的界面格式等。
1.输出设计
输出是由电脑对输入的基本信息进行解决，生成高质量的有效信息，并使之具有一定的格式，提供给管理者使用，这是输出设计的主要责任和目标。
系统开发的过程与实施过程相反，并不是从输入设计到输出设计，而是从输出设计到输入设计。这是由于输出表格与使用者直接相联系，设计的目的应当是确保使用者可以很方便的使用输出表格，并且可以将各部门的有用信息及时的反映出来。输出设计的准绳是既要整体琢磨不同管理层的所有需要，又要简洁，不要提供给用户不需要的信息。
2.输入设计
输入数据的收集和录入是比较麻烦的，需要非常多的人力和一定设备，而且经常出错。一旦输入系统的数据不正确，那么处理后的输出就会扩大这些错误，因此输入的数据的准确性对整个系统的性能起着决定性意义。
输入设计有以下几点原则：
1）输入量应尽量保持在能够满足处理要求的最低限度。输入量越少，错误率就会越少，数据的准备时间也越少。
2）应尽可能的使输入的准备以及输入的过程进行时比较方便，这样使错误的发生率降低。
3）应尽量早检查输入数据（尽量接近原数据发生点）,以便使错误更正比较及时。
4）输入数据尽早地记录成其处理所需的形式，以防止数据由一种介质转移到另一种介质时需要转录而可能发生的错误。
3.4系统流程和逻辑
图3-3登录流程图
图3-4修改密码流程图
4系统概要设计
4.1概述
本系统采用B/S结构(Browser/Server,浏览器/服务器结构)和基于Web服务两种模式，是一个适用于Internet环境下的模型结构。只要用户能连上Internet,便可以在任何时间、任何地点使用。系统工作原理图如图4-1所示：
图4-1系统工作原理图
4.2系统结构
本系统是基于B/S架构的网站系统，设计的功能结构图如下图所示：
图4-2功能结构图
4.3.数据库设计
4.3.1数据库实体
概念设计的目标是设计出反映某个组织部门信息需求的数据库系统概念模式，数据库系统的概念模式独立于数据库系统的逻辑结构、独立于数据库管理系统（DBMS）、独立于计算机系统。
概念模式的设计方法是在需求分析的基础上，用概念数据模型（例如E-R模型）表示数据及数据之间的相互联系，设计出反映学生信息需求和处理需求的数据库系统概念模式。概念设计的目标是准确描述应用领域的信息模式，支持用户的各种应用，这样既容易转换为数据库系统逻辑模式，又容易为用户理解。数据库系统概念模式是面向现实世界的数据模型，不能直接用于数据库系统的实现。在此阶段，用户可以参与和评价数据库系统的设计，从而有利于保证数据库系统的设计与用户的需求相吻合。在概念模式的设计中，E-R模型法是最常见的设计方法。本系统的E-R图如下图所示：
图4.12 管理员信息实体属性图
（2）学生信息实体属性图如图4.13所示：
图4.13 学生信息实体属性图
（3）班级类型信息实体属性图如图4.14所示：
图4.14 班级类型信息实体属性图
4.3.2数据库设计表
大学生竞赛管理系统需要后台数据库，下面介绍数据库中的各个表的详细信息：
表4.1 班级类型
| 字段 | 类型 | 空 | 默认 | 注释 |
| id (主键) | bigint(20) | 否 | 主键 | |
| addtime | timestamp | 否 | CURRENT_TIMESTAMP | 创建时间 |
| leixing | varchar(200) | 是 | NULL | 类型 |
表4.2 教师
| 字段 | 类型 | 空 | 默认 | 注释 |
| id (主键) | bigint(20) | 否 | 主键 | |
| addtime | timestamp | 否 | CURRENT_TIMESTAMP | 创建时间 |
| gonghao | varchar(200) | 否 | 工号 | |
| mima | varchar(200) | 否 | 密码 | |
| jiaoshixingming | varchar(200) | 否 | 教师姓名 | |
| xingbie | varchar(200) | 是 | NULL | 性别 |
| xueyuanmingcheng | varchar(200) | 是 | NULL | 学院名称 |
| zhicheng | varchar(200) | 是 | NULL | 职称 |
| shouji | varchar(200) | 是 | NULL | 手机 |
| youxiang | varchar(200) | 是 | NULL | 邮箱 |
| zhaopian | varchar(200) | 是 | NULL | 照片 |
表4.3 竞赛报名
| 字段 | 类型 | 空 | 默认 | 注释 |
| id (主键) | bigint(20) | 否 | 主键 | |
| addtime | timestamp | 否 | CURRENT_TIMESTAMP | 创建时间 |
| gonghao | varchar(200) | 是 | NULL | 工号 |
| jiaoshixingming | varchar(200) | 是 | NULL | 教师姓名 |
| jingsaimingcheng | varchar(200) | 是 | NULL | 竞赛名称 |
| jingsaileixing | varchar(200) | 是 | NULL | 竞赛类型 |
| cansaileixing | varchar(200) | 是 | NULL | 参赛类型 |
| cansairenyuan | varchar(200) | 是 | NULL | 参赛人员 |
| cansaizuopin | varchar(200) | 是 | NULL | 参赛作品 |
| cansaixuanyan | longtext | 是 | NULL | 参赛宣言 |
| shenqingriqi | date | 是 | NULL | 申请日期 |
| xuehao | varchar(200) | 是 | NULL | 学号 |
| xueshengxingming | varchar(200) | 是 | NULL | 学生姓名 |
| sfsh | varchar(200) | 是 | 否 | 是否审核 |
| shhf | longtext | 是 | NULL | 审核回复 |
| ispay | varchar(200) | 是 | 未支付 | 是否支付 |
表4.4 竞赛信息
| 字段 | 类型 | 空 | 默认 | 注释 |
| id (主键) | bigint(20) | 否 | 主键 | |
| addtime | timestamp | 否 | CURRENT_TIMESTAMP | 创建时间 |
| jingsaimingcheng | varchar(200) | 是 | NULL | 竞赛名称 |
| jingsaileixing | varchar(200) | 是 | NULL | 竞赛类型 |
| jingsaididian | varchar(200) | 是 | NULL | 竞赛地点 |
| jingsaiguize | longtext | 是 | NULL | 竞赛规则 |
| jingsaijiangli | longtext | 是 | NULL | 竞赛奖励 |
| jingsaishijian | datetime | 是 | NULL | 竞赛时间 |
| moshi | varchar(200) | 是 | NULL | 模式 |
| fengmiantupian | varchar(200) | 是 | NULL | 封面图片 |
| gonghao | varchar(200) | 是 | NULL | 工号 |
| jiaoshixingming | varchar(200) | 是 | NULL | 教师姓名 |
表4.5 管理员表
| 字段 | 类型 | 空 | 默认 | 注释 |
| id (主键) | bigint(20) | 否 | 主键 | |
| username | varchar(100) | 否 | 用户名 | |
| password | varchar(100) | 否 | 密码 | |
| role | varchar(100) | 是 | 管理员 | 角色 |
| addtime | timestamp | 否 | CURRENT_TIMESTAMP | 新增时间 |
表4.6 学生
| 字段 | 类型 | 空 | 默认 | 注释 |
| id (主键) | bigint(20) | 否 | 主键 | |
| addtime | timestamp | 否 | CURRENT_TIMESTAMP | 创建时间 |
| xuehao | varchar(200) | 否 | 学号 | |
| mima | varchar(200) | 否 | 密码 | |
| xueshengxingming | varchar(200) | 否 | 学生姓名 | |
| xingbie | varchar(200) | 是 | NULL | 性别 |
| xueyuanmingcheng | varchar(200) | 是 | NULL | 学院名称 |
| banji | varchar(200) | 是 | NULL | 班级 |
| shouji | varchar(200) | 是 | NULL | 手机 |
| youxiang | varchar(200) | 是 | NULL | 邮箱 |
| zhaopian | varchar(200) | 是 | NULL | 照片 |
表4. 7作品打分
| 字段 | 类型 | 空 | 默认 | 注释 |
| id (主键) | bigint(20) | 否 | 主键 | |
| addtime | timestamp | 否 | CURRENT_TIMESTAMP | 创建时间 |
| xuehao | varchar(200) | 是 | NULL | 学号 |
| xueshengxingming | varchar(200) | 是 | NULL | 学生姓名 |
| jingsaimingcheng | varchar(200) | 是 | NULL | 竞赛名称 |
| jingsaileixing | varchar(200) | 是 | NULL | 竞赛类型 |
| zuopinpingfen | int(11) | 是 | NULL | 作品评分 |
| pingjianeirong | longtext | 是 | NULL | 评价内容 |
| pingjiashijian | date | 是 | NULL | 评价时间 |
| gonghao | varchar(200) | 是 | NULL | 工号 |
| jiaoshixingming | varchar(200) | 是 | NULL | 教师姓名 |
5系统详细实现
5.1 管理员模块的实现
5.1.1 学生信息管理
大学生竞赛管理系统的系统管理员可以管理用户，可以对学生信息修改删除以及查询操作。具体界面的展示如图5.1所示。
图5.1 学生信息管理界面
后端代码
@IgnoreAuth
@RequestMapping("/register")
public R register(@RequestBody XueshengEntity xuesheng){
//ValidatorUtils.validateEntity(xuesheng);
XueshengEntity user = xueshengService.selectOne(new EntityWrapper<XueshengEntity>().eq("xuehao", xuesheng.getXuehao()));
if(user!=null) {
return R.error("注册用户已存在");
}
Long uId = new Date().getTime();
xuesheng.setId(uId);
xueshengService.insert(xuesheng);
return R.ok();
}
/**
* 退出
*/
@RequestMapping("/logout")
public R logout(HttpServletRequest request) {
request.getSession().invalidate();
return R.ok("退出成功");
}
/**
* 获取用户的session用户信息
*/
@RequestMapping("/session")
public R getCurrUser(HttpServletRequest request){
Long id = (Long)request.getSession().getAttribute("userId");
XueshengEntity user = xueshengService.selectById(id);
return R.ok().put("data", user);
}
/**
* 密码重置
*/
@IgnoreAuth
@RequestMapping(value = "/resetPass")
public R resetPass(String username, HttpServletRequest request){
XueshengEntity user = xueshengService.selectOne(new EntityWrapper<XueshengEntity>().eq("xuehao", username));
if(user==null) {
return R.error("账号不存在");
}
user.setMima("123456");
xueshengService.updateById(user);
return R.ok("密码已重置为：123456");
}
/**
* 后端列表
*/
@RequestMapping("/page")
public R page(@RequestParam Map<String, Object> params,XueshengEntity xuesheng,
HttpServletRequest request){
EntityWrapper<XueshengEntity> ew = new EntityWrapper<XueshengEntity>();
PageUtils page = xueshengService.queryPage(params, MPUtil.sort(MPUtil.between(MPUtil.likeOrEq(ew, xuesheng), params), params));
return R.ok().put("data", page);
}
/**
* 前端列表
*/
@RequestMapping("/list")
public R list(@RequestParam Map<String, Object> params,XueshengEntity xuesheng,
HttpServletRequest request){
EntityWrapper<XueshengEntity> ew = new EntityWrapper<XueshengEntity>();
PageUtils page = xueshengService.queryPage(params, MPUtil.sort(MPUtil.between(MPUtil.likeOrEq(ew, xuesheng), params), params));
return R.ok().put("data", page);
}
/**
* 列表
*/
@RequestMapping("/lists")
public R list( XueshengEntity xuesheng){
EntityWrapper<XueshengEntity> ew = new EntityWrapper<XueshengEntity>();
ew.allEq(MPUtil.allEQMapPre( xuesheng, "xuesheng"));
return R.ok().put("data", xueshengService.selectListView(ew));
}
/**
* 查询
*/
@RequestMapping("/query")
public R query(XueshengEntity xuesheng){
EntityWrapper< XueshengEntity> ew = new EntityWrapper< XueshengEntity>();
ew.allEq(MPUtil.allEQMapPre( xuesheng, "xuesheng"));
XueshengView xueshengView = xueshengService.selectView(ew);
return R.ok("查询学生成功").put("data", xueshengView);
}
/**
* 后端详情
*/
@RequestMapping("/info/{id}")
public R info(@PathVariable("id") Long id){
XueshengEntity xuesheng = xueshengService.selectById(id);
return R.ok().put("data", xuesheng);
}
/**
* 前端详情
*/
@RequestMapping("/detail/{id}")
public R detail(@PathVariable("id") Long id){
XueshengEntity xuesheng = xueshengService.selectById(id);
return R.ok().put("data", xuesheng);
}
/**
* 后端保存
*/
@RequestMapping("/save")
public R save(@RequestBody XueshengEntity xuesheng, HttpServletRequest request){
xuesheng.setId(new Date().getTime()+new Double(Math.floor(Math.random()*1000)).longValue());
//ValidatorUtils.validateEntity(xuesheng);
XueshengEntity user = xueshengService.selectOne(new EntityWrapper<XueshengEntity>().eq("xuehao", xuesheng.getXuehao()));
if(user!=null) {
return R.error("用户已存在");
}
xuesheng.setId(new Date().getTime());
xueshengService.insert(xuesheng);
return R.ok();
}
前端代码
<template>
<div class="addEdit-block">
<el-form
class="detail-form-content"
ref="ruleForm"
:model="ruleForm"
:rules="rules"
label-width="80px"
:style="{backgroundColor:addEditForm.addEditBoxColor}"
>
<el-row>
<el-col :span="12">
<el-form-item class="input" v-if="type!='info'" label="学号" prop="xuehao">
<el-input v-model="ruleForm.xuehao"
placeholder="学号" clearable :readonly="ro.xuehao"></el-input>
</el-form-item>
<div v-else>
<el-form-item class="input" label="学号" prop="xuehao">
<el-input v-model="ruleForm.xuehao"
placeholder="学号" readonly></el-input>
</el-form-item>
</div>
</el-col>
<el-col :span="12">
<el-form-item class="input" v-if="type!='info'" label="密码" prop="mima">
<el-input v-model="ruleForm.mima"
placeholder="密码" clearable :readonly="ro.mima"></el-input>
</el-form-item>
<div v-else>
<el-form-item class="input" label="密码" prop="mima">
<el-input v-model="ruleForm.mima"
placeholder="密码" readonly></el-input>
</el-form-item>
</div>
</el-col>
<el-col :span="12">
<el-form-item class="input" v-if="type!='info'" label="学生姓名" prop="xueshengxingming">
<el-input v-model="ruleForm.xueshengxingming"
placeholder="学生姓名" clearable :readonly="ro.xueshengxingming"></el-input>
</el-form-item>
<div v-else>
<el-form-item class="input" label="学生姓名" prop="xueshengxingming">
<el-input v-model="ruleForm.xueshengxingming"
placeholder="学生姓名" readonly></el-input>
</el-form-item>
</div>
</el-col>
<el-col :span="12">
<el-form-item class="select" v-if="type!='info'" label="性别" prop="xingbie">
<el-select v-model="ruleForm.xingbie" placeholder="请选择性别">
<el-option
v-for="(item,index) in xingbieOptions"
v-bind:key="index"
:label="item"
:value="item">
</el-option>
</el-select>
</el-form-item>
<div v-else>
<el-form-item class="input" label="性别" prop="xingbie">
<el-input v-model="ruleForm.xingbie"
placeholder="性别" readonly></el-input>
</el-form-item>
</div>
</el-col>
<el-col :span="12">
<el-form-item class="input" v-if="type!='info'" label="学院名称" prop="xueyuanmingcheng">
<el-input v-model="ruleForm.xueyuanmingcheng"
placeholder="学院名称" clearable :readonly="ro.xueyuanmingcheng"></el-input>
</el-form-item>
<div v-else>
<el-form-item class="input" label="学院名称" prop="xueyuanmingcheng">
<el-input v-model="ruleForm.xueyuanmingcheng"
placeholder="学院名称" readonly></el-input>
</el-form-item>
</div>
</el-col>
<el-col :span="12">
<el-form-item class="select" v-if="type!='info'" label="班级" prop="banji">
<el-select v-model="ruleForm.banji" placeholder="请选择班级">
<el-option
v-for="(item,index) in banjiOptions"
v-bind:key="index"
:label="item"
:value="item">
</el-option>
</el-select>
</el-form-item>
<div v-else>
<el-form-item class="input" label="班级" prop="banji">
<el-input v-model="ruleForm.banji"
placeholder="班级" readonly></el-input>
</el-form-item>
</div>
</el-col>
<el-col :span="12">
<el-form-item class="input" v-if="type!='info'" label="手机" prop="shouji">
<el-input v-model="ruleForm.shouji"
placeholder="手机" clearable :readonly="ro.shouji"></el-input>
</el-form-item>
<div v-else>
<el-form-item class="input" label="手机" prop="shouji">
<el-input v-model="ruleForm.shouji"
placeholder="手机" readonly></el-input>
</el-form-item>
</div>
</el-col>
<el-col :span="12">
<el-form-item class="input" v-if="type!='info'" label="邮箱" prop="youxiang">
<el-input v-model="ruleForm.youxiang"
placeholder="邮箱" clearable :readonly="ro.youxiang"></el-input>
</el-form-item>
<div v-else>
<el-form-item class="input" label="邮箱" prop="youxiang">
<el-input v-model="ruleForm.youxiang"
placeholder="邮箱" readonly></el-input>
</el-form-item>
</div>
</el-col>
<el-col :span="24">
<el-form-item class="upload" v-if="type!='info' && !ro.zhaopian" label="照片" prop="zhaopian">
<file-upload
tip="点击上传照片"
action="file/upload"
:limit="3"
:multiple="true"
:fileUrls="ruleForm.zhaopian?ruleForm.zhaopian:''"
@change="zhaopianUploadChange"
></file-upload>
</el-form-item>
<div v-else>
<el-form-item v-if="ruleForm.zhaopian" label="照片" prop="zhaopian">
<img style="margin-right:20px;" v-bind:key="index" v-for="(item,index) in ruleForm.zhaopian.split(',')" :src="item" width="100" height="100">
</el-form-item>
</div>
</el-col>
</el-row>
<el-form-item class="btn">
<el-button v-if="type!='info'" type="primary" class="btn-success" @click="onSubmit">提交</el-button>
<el-button v-if="type!='info'" class="btn-close" @click="back()">取消</el-button>
<el-button v-if="type=='info'" class="btn-close" @click="back()">返回</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
// 数字，邮件，手机，url，身份证校验
import { isNumber,isIntNumer,isEmail,isPhone, isMobile,isURL,checkIdCard } from "@/utils/validate";
export default {
data() {
let self = this
var validateIdCard = (rule, value, callback) => {
if(!value){
callback();
} else if (!checkIdCard(value)) {
callback(new Error("请输入正确的身份证号码"));
} else {
callback();
}
};
var validateUrl = (rule, value, callback) => {
if(!value){
callback();
} else if (!isURL(value)) {
callback(new Error("请输入正确的URL地址"));
} else {
callback();
}
};
var validateMobile = (rule, value, callback) => {
if(!value){
callback();
} else if (!isMobile(value)) {
callback(new Error("请输入正确的手机号码"));
} else {
callback();
}
};
var validatePhone = (rule, value, callback) => {
if(!value){
callback();
} else if (!isPhone(value)) {
callback(new Error("请输入正确的电话号码"));
} else {
callback();
}
};
var validateEmail = (rule, value, callback) => {
if(!value){
callback();
} else if (!isEmail(value)) {
callback(new Error("请输入正确的邮箱地址"));
} else {
callback();
}
};
var validateNumber = (rule, value, callback) => {
if(!value){
callback();
} else if (!isNumber(value)) {
callback(new Error("请输入数字"));
} else {
callback();
}
};
var validateIntNumber = (rule, value, callback) => {
if(!value){
callback();
} else if (!isIntNumer(value)) {
callback(new Error("请输入整数"));
} else {
callback();
}
};
return {
addEditForm: {"btnSaveFontColor":"rgba(34, 32, 32, 1)","selectFontSize":"14px","btnCancelBorderColor":"#DCDFE6","inputBorderRadius":"16px","inputFontSize":"14px","textareaBgColor":"rgba(207, 199, 199, 0.13)","btnSaveFontSize":"14px","textareaBorderRadius":"16px","uploadBgColor":"rgba(207, 199, 199, 0.13)","textareaBorderStyle":"solid","btnCancelWidth":"88px","textareaHeight":"120px","dateBgColor":"rgba(207, 199, 199, 0.13)","btnSaveBorderRadius":"16px","uploadLableFontSize":"14px","textareaBorderWidth":"1px","inputLableColor":"#606266","addEditBoxColor":"rgba(238, 221, 221, 0.32)","dateIconFontSize":"14px","btnSaveBgColor":"#409EFF","uploadIconFontColor":"#8c939d","textareaBorderColor":"#DCDFE6","btnCancelBgColor":"rgba(84, 244, 185, 1)","selectLableColor":"#606266","btnSaveBorderStyle":"solid","dateBorderWidth":"1px","dateLableFontSize":"14px","dateBorderRadius":"16px","btnCancelBorderStyle":"solid","selectLableFontSize":"14px","selectBorderStyle":"solid","selectIconFontColor":"#C0C4CC","btnCancelHeight":"44px","inputHeight":"40px","btnCancelFontColor":"rgba(23, 23, 24, 1)","dateBorderColor":"#DCDFE6","dateIconFontColor":"#C0C4CC","uploadBorderStyle":"solid","dateBorderStyle":"solid","dateLableColor":"#606266","dateFontSize":"14px","inputBorderWidth":"1px","uploadIconFontSize":"28px","selectHeight":"40px","inputFontColor":"rgba(25, 26, 27, 1)","uploadHeight":"148px","textareaLableColor":"#606266","textareaLableFontSize":"14px","btnCancelFontSize":"14px","inputBorderStyle":"solid","btnCancelBorderRadius":"16px","inputBgColor":"rgba(207, 199, 199, 0.13)","inputLableFontSize":"14px","uploadLableColor":"#606266","uploadBorderRadius":"16px","btnSaveHeight":"44px","selectBgColor":"rgba(207, 199, 199, 0.13)","btnSaveWidth":"88px","selectIconFontSize":"14px","dateHeight":"40px","selectBorderColor":"#DCDFE6","inputBorderColor":"#DCDFE6","uploadBorderColor":"#DCDFE6","textareaFontColor":"rgba(25, 26, 27, 1)","selectBorderWidth":"1px","dateFontColor":"rgba(255, 69, 0, 0.66)","btnCancelBorderWidth":"1px","uploadBorderWidth":"1px","textareaFontSize":"14px","selectBorderRadius":"16px","selectFontColor":"rgba(25, 26, 27, 1)","btnSaveBorderColor":"#409EFF","btnSaveBorderWidth":"1px"},
id: '',
type: '',
ro:{
xuehao : false,
mima : false,
xueshengxingming : false,
xingbie : false,
xueyuanmingcheng : false,
banji : false,
shouji : false,
youxiang : false,
zhaopian : false,
},
ruleForm: {
xuehao: '',
mima: '',
xueshengxingming: '',
xingbie: '',
xueyuanmingcheng: '',
banji: '',
shouji: '',
youxiang: '',
zhaopian: '',
},
xingbieOptions: [],
banjiOptions: [],
rules: {
xuehao: [
{ required: true, message: '学号不能为空', trigger: 'blur' },
],
mima: [
{ required: true, message: '密码不能为空', trigger: 'blur' },
],
xueshengxingming: [
{ required: true, message: '学生姓名不能为空', trigger: 'blur' },
],
xingbie: [
],
xueyuanmingcheng: [
],
banji: [
],
shouji: [
{ validator: validateMobile, trigger: 'blur' },
],
youxiang: [
{ validator: validateEmail, trigger: 'blur' },
],
zhaopian: [
],
}
};
},
props: ["parent"],
computed: {
},
created() {
this.addEditStyleChange()
this.addEditUploadStyleChange()
},
methods: {
// 下载
download(file){
window.open(`${file}`)
},
// 初始化
init(id,type) {
if (id) {
this.id = id;
this.type = type;
}
if(this.type=='info'||this.type=='else'){
this.info(id);
}else if(this.type=='cross'){
var obj = this.$storage.getObj('crossObj');
for (var o in obj){
if(o=='xuehao'){
this.ruleForm.xuehao = obj[o];
this.ro.xuehao = true;
continue;
}
if(o=='mima'){
this.ruleForm.mima = obj[o];
this.ro.mima = true;
continue;
}
if(o=='xueshengxingming'){
this.ruleForm.xueshengxingming = obj[o];
this.ro.xueshengxingming = true;
continue;
}
if(o=='xingbie'){
this.ruleForm.xingbie = obj[o];
this.ro.xingbie = true;
continue;
}
if(o=='xueyuanmingcheng'){
this.ruleForm.xueyuanmingcheng = obj[o];
this.ro.xueyuanmingcheng = true;
continue;
}
if(o=='banji'){
this.ruleForm.banji = obj[o];
this.ro.banji = true;
continue;
}
if(o=='shouji'){
this.ruleForm.shouji = obj[o];
this.ro.shouji = true;
continue;
}
if(o=='youxiang'){
this.ruleForm.youxiang = obj[o];
this.ro.youxiang = true;
continue;
}
if(o=='zhaopian'){
this.ruleForm.zhaopian = obj[o];
this.ro.zhaopian = true;
continue;
}
}
}
// 获取用户信息
this.$http({
url: `${this.$storage.get('sessionTable')}/session`,
method: "get"
}).then(({ data }) => {
if (data && data.code === 0) {
var json = data.data;
} else {
this.$message.error(data.msg);
}
});
this.xingbieOptions = "男,女".split(',')
this.$http({
url: `option/banjileixing/leixing`,
method: "get"
}).then(({ data }) => {
if (data && data.code === 0) {
this.banjiOptions = data.data;
} else {
this.$message.error(data.msg);
}
});
},
// 多级联动参数
info(id) {
this.$http({
url: `xuesheng/info/${id}`,
method: "get"
}).then(({ data }) => {
if (data && data.code === 0) {
this.ruleForm = data.data;
//解决前台上传图片后台不显示的问题
let reg=new RegExp('../../../upload','g')//g代表全部
} else {
this.$message.error(data.msg);
}
});
},
// 提交
onSubmit() {
// ${column.compare}
// ${column.compare}
// ${column.compare}
// ${column.compare}
// ${column.compare}
// ${column.compare}
// ${column.compare}
// ${column.compare}
// ${column.compare}
this.$refs["ruleForm"].validate(valid => {
if (valid) {
this.$http({
url: `xuesheng/${!this.ruleForm.id ? "save" : "update"}`,
method: "post",
data: this.ruleForm
}).then(({ data }) => {
if (data && data.code === 0) {
this.$message({
message: "操作成功",
type: "success",
duration: 1500,
onClose: () => {
this.parent.showFlag = true;
this.parent.addOrUpdateFlag = false;
this.parent.xueshengCrossAddOrUpdateFlag = false;
this.parent.search();
this.parent.contentStyleChange();
}
});
} else {
this.$message.error(data.msg);
}
});
}
});
},
// 获取uuid
getUUID () {
return new Date().getTime();
},
// 返回
back() {
this.parent.showFlag = true;
this.parent.addOrUpdateFlag = false;
this.parent.xueshengCrossAddOrUpdateFlag = false;
this.parent.contentStyleChange();
},
zhaopianUploadChange(fileUrls) {
this.ruleForm.zhaopian = fileUrls;
this.addEditUploadStyleChange()
},
addEditStyleChange() {
this.$nextTick(()=>{
// input
document.querySelectorAll('.addEdit-block .input .el-input__inner').forEach(el=>{
el.style.height = this.addEditForm.inputHeight
el.style.color = this.addEditForm.inputFontColor
el.style.fontSize = this.addEditForm.inputFontSize
el.style.borderWidth = this.addEditForm.inputBorderWidth
el.style.borderStyle = this.addEditForm.inputBorderStyle
el.style.borderColor = this.addEditForm.inputBorderColor
el.style.borderRadius = this.addEditForm.inputBorderRadius
el.style.backgroundColor = this.addEditForm.inputBgColor
})
document.querySelectorAll('.addEdit-block .input .el-form-item__label').forEach(el=>{
el.style.lineHeight = this.addEditForm.inputHeight
el.style.color = this.addEditForm.inputLableColor
el.style.fontSize = this.addEditForm.inputLableFontSize
})
// select
document.querySelectorAll('.addEdit-block .select .el-input__inner').forEach(el=>{
el.style.height = this.addEditForm.selectHeight
el.style.color = this.addEditForm.selectFontColor
el.style.fontSize = this.addEditForm.selectFontSize
el.style.borderWidth = this.addEditForm.selectBorderWidth
el.style.borderStyle = this.addEditForm.selectBorderStyle
el.style.borderColor = this.addEditForm.selectBorderColor
el.style.borderRadius = this.addEditForm.selectBorderRadius
el.style.backgroundColor = this.addEditForm.selectBgColor
})
document.querySelectorAll('.addEdit-block .select .el-form-item__label').forEach(el=>{
el.style.lineHeight = this.addEditForm.selectHeight
el.style.color = this.addEditForm.selectLableColor
el.style.fontSize = this.addEditForm.selectLableFontSize
})
document.querySelectorAll('.addEdit-block .select .el-select__caret').forEach(el=>{
el.style.color = this.addEditForm.selectIconFontColor
el.style.fontSize = this.addEditForm.selectIconFontSize
})
// date
document.querySelectorAll('.addEdit-block .date .el-input__inner').forEach(el=>{
el.style.height = this.addEditForm.dateHeight
el.style.color = this.addEditForm.dateFontColor
el.style.fontSize = this.addEditForm.dateFontSize
el.style.borderWidth = this.addEditForm.dateBorderWidth
el.style.borderStyle = this.addEditForm.dateBorderStyle
el.style.borderColor = this.addEditForm.dateBorderColor
el.style.borderRadius = this.addEditForm.dateBorderRadius
el.style.backgroundColor = this.addEditForm.dateBgColor
})
document.querySelectorAll('.addEdit-block .date .el-form-item__label').forEach(el=>{
el.style.lineHeight = this.addEditForm.dateHeight
el.style.color = this.addEditForm.dateLableColor
el.style.fontSize = this.addEditForm.dateLableFontSize
})
document.querySelectorAll('.addEdit-block .date .el-input__icon').forEach(el=>{
el.style.color = this.addEditForm.dateIconFontColor
el.style.fontSize = this.addEditForm.dateIconFontSize
el.style.lineHeight = this.addEditForm.dateHeight
})
// upload
let iconLineHeight = parseInt(this.addEditForm.uploadHeight) - parseInt(this.addEditForm.uploadBorderWidth) * 2 + 'px'
document.querySelectorAll('.addEdit-block .upload .el-upload--picture-card').forEach(el=>{
el.style.width = this.addEditForm.uploadHeight
el.style.height = this.addEditForm.uploadHeight
el.style.borderWidth = this.addEditForm.uploadBorderWidth
el.style.borderStyle = this.addEditForm.uploadBorderStyle
el.style.borderColor = this.addEditForm.uploadBorderColor
el.style.borderRadius = this.addEditForm.uploadBorderRadius
el.style.backgroundColor = this.addEditForm.uploadBgColor
})
document.querySelectorAll('.addEdit-block .upload .el-form-item__label').forEach(el=>{
el.style.lineHeight = this.addEditForm.uploadHeight
el.style.color = this.addEditForm.uploadLableColor
el.style.fontSize = this.addEditForm.uploadLableFontSize
})
document.querySelectorAll('.addEdit-block .upload .el-icon-plus').forEach(el=>{
el.style.color = this.addEditForm.uploadIconFontColor
el.style.fontSize = this.addEditForm.uploadIconFontSize
el.style.lineHeight = iconLineHeight
el.style.display = 'block'
})
// 多文本输入框
document.querySelectorAll('.addEdit-block .textarea .el-textarea__inner').forEach(el=>{
el.style.height = this.addEditForm.textareaHeight
el.style.color = this.addEditForm.textareaFontColor
el.style.fontSize = this.addEditForm.textareaFontSize
el.style.borderWidth = this.addEditForm.textareaBorderWidth
el.style.borderStyle = this.addEditForm.textareaBorderStyle
el.style.borderColor = this.addEditForm.textareaBorderColor
el.style.borderRadius = this.addEditForm.textareaBorderRadius
el.style.backgroundColor = this.addEditForm.textareaBgColor
})
document.querySelectorAll('.addEdit-block .textarea .el-form-item__label').forEach(el=>{
// el.style.lineHeight = this.addEditForm.textareaHeight
el.style.color = this.addEditForm.textareaLableColor
el.style.fontSize = this.addEditForm.textareaLableFontSize
})
// 保存
document.querySelectorAll('.addEdit-block .btn .btn-success').forEach(el=>{
el.style.width = this.addEditForm.btnSaveWidth
el.style.height = this.addEditForm.btnSaveHeight
el.style.color = this.addEditForm.btnSaveFontColor
el.style.fontSize = this.addEditForm.btnSaveFontSize
el.style.borderWidth = this.addEditForm.btnSaveBorderWidth
el.style.borderStyle = this.addEditForm.btnSaveBorderStyle
el.style.borderColor = this.addEditForm.btnSaveBorderColor
el.style.borderRadius = this.addEditForm.btnSaveBorderRadius
el.style.backgroundColor = this.addEditForm.btnSaveBgColor
})
// 返回
document.querySelectorAll('.addEdit-block .btn .btn-close').forEach(el=>{
el.style.width = this.addEditForm.btnCancelWidth
el.style.height = this.addEditForm.btnCancelHeight
el.style.color = this.addEditForm.btnCancelFontColor
el.style.fontSize = this.addEditForm.btnCancelFontSize
el.style.borderWidth = this.addEditForm.btnCancelBorderWidth
el.style.borderStyle = this.addEditForm.btnCancelBorderStyle
el.style.borderColor = this.addEditForm.btnCancelBorderColor
el.style.borderRadius = this.addEditForm.btnCancelBorderRadius
el.style.backgroundColor = this.addEditForm.btnCancelBgColor
})
})
},
addEditUploadStyleChange() {
this.$nextTick(()=>{
document.querySelectorAll('.addEdit-block .upload .el-upload-list--picture-card .el-upload-list__item').forEach(el=>{
el.style.width = this.addEditForm.uploadHeight
el.style.height = this.addEditForm.uploadHeight
el.style.borderWidth = this.addEditForm.uploadBorderWidth
el.style.borderStyle = this.addEditForm.uploadBorderStyle
el.style.borderColor = this.addEditForm.uploadBorderColor
el.style.borderRadius = this.addEditForm.uploadBorderRadius
el.style.backgroundColor = this.addEditForm.uploadBgColor
})
})
},
}
};
</script>
<style lang="scss">
.editor{
height: 500px;
& /deep/ .ql-container {
height: 310px;
}
}
.amap-wrapper {
width: 100%;
height: 500px;
}
.search-box {
position: absolute;
}
.addEdit-block {
margin: -10px;
}
.detail-form-content {
padding: 12px;
}
.btn .el-button {
padding: 0;
}
</style>
5.1.2 教师信息管理
系统管理员可以查看对教师信息进行添加，修改，删除以及查询操作。具体界面如图5.2所示。
图5.2 教师信息管理界面
5.2 教师模块的实现
5.2.1 竞赛报名审核
教师可以对学生的竞赛报名进行审核操作。界面如下图所示：
图5.3 竞赛报名审核界面
5.2.2 竞赛信息管理
教师可以对竞赛信息进行添加修改删除操作。界面如下图所示：
图5.4 竞赛信息管理界面
5.3 学生模块的实现
5.3.1 竞赛信息管理
学生可以在竞赛信息管理里面进行报名操作。界面如下图所示：
图5.5 竞赛信息界面
5.3.2 竞赛报名管理
学生报名可以在竞赛报名里面查看自己的报名情况。界面如下图所示：
图5.6 竞赛报名界面
大家点赞、收藏、关注、评论啦 其他的定制服务 下方联系卡片↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ 或者私信作者
原文地址：https://blog.csdn.net/qq_41221322/article/details/142511620
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！