一、前言
快速发展的社会中,人们的生活水平都在提高,生活节奏也在逐渐加快。为了节省时间和提高工作效率,越来越多的人选择利用互联网进行线上打理各种事务,然后线上管理系统也就相继涌现。与此同时,人们开始接受方便的生活方式。他们不仅希望页面简单大方,还希望操作方便,可以快速锁定他们需要的线上管理方式。基于这种情况,我们需要这样一个界面简单大方、功能齐全的系统来解决用户问题,满足用户需求。
课题主要分为三大模块:即管理员模块和学生、教师模块,主要功能包括:学生、教师、作业信息、学习模块、教学评价、学习情况等;
二、开发环境
开发语言:Java
框架:springboot
JDK版本:JDK1.8
服务器:tomcat7
数据库:mysql 5.7(一定要5.7版本)
数据库工具:Navicat11
开发软件:eclipse/myeclipse/idea
Maven包:Maven3.3.9
浏览器:谷歌浏览器
三、系统功能设计
前台页面:若进入本网站,需要注册自己的账号和密码,输入正确的账号和密码,学生才可以成功登录到学生作业管理系统主页面,进入学生作业管理页面后,学生可以在搜索栏中查询自己所需的作业信息等,在个人中心学生可以修改自己的个人详细信息。
后台管理员页面:主要是管理员登录本网站。管理员输入管理员账号密码后,校验无误后方可进入后台管理主界面,对用户使用的权限管理等管理以及对网站信息进行管理。
学生作业管理系统分为三个部分,即管理员和学生、教师。该系统是根据用户的实际需求开发的,贴近生活。从管理员处获得的指定账号和密码可用于进入系统和使用相关的系统应用程序。管理员拥有最大的权限,其次是教师,最后是学生。管理员一般负责整个系统的运行维护和总体协调。
四、系统数据库设计
概念设计是将整体分为在地面上表达出来的单个个体。E-R图形象的连接了实体模型和概念模型。因此,E-R图需要根据数据库表和表字段进行合理设计,表达的概念知识点用图形描述,可以直观地让相应人员清楚,并分解整个E-R图。我们通常表达不清晰没有概念的东西。但是通过E-R之间的联系,E-R模型法是对这种模糊概念的事务最简单、最常用的设计方法。
五、系统效果
六、核心代码
<template>
<div class="home-preview" :style='{"width":"100%","margin":"20px 0 0","flexWrap":"wrap","justifyContent":"space-between","display":"flex"}'>
<div class="lists" :style='{"border":"0px solid #dfdfdf","padding":"20px 0px 20px 0px","boxShadow":"0px 0px 0px #eee","margin":"0px","overflow":"hidden","borderRadius":"0px","background":"none","width":"100%","position":"relative","height":"auto","order":"8"}'>
<div v-if="true" class="idea" :style='{"padding":"0px","margin":"0 auto","flexWrap":"wrap","background":"none","display":"flex","width":"1200px","justifyContent":"space-between"}'>
<div class="box1" :style='{"width":"1200px","position":"absolute","top":"74px","background":"#08b344","height":"1px"}'></div>
<div class="box2" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
<div class="box3" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
<div class="box4" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
<div class="box5" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
<div class="box6" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
<div class="box7" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
<div class="box8" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
<div class="box9" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
<div class="box10" :style='{"width":"20%","background":"#fff","display":"none","height":"80px"}'></div>
</div>
<div class="title" :style='{"padding":"0","margin":"40px auto","textAlign":"left","background":"none","width":"1200px","lineHeight":"1","position":"relative"}'>
<span :style='{"padding":"8px 50px 8px 20px ","fontSize":"30px","color":"#fff","textShadow":"0px 0px 0px #eee","background":"linear-gradient(135deg, rgba(17,112,210,1) 0%, rgba(8,179,68,1) 100%)","fontWeight":"bold"}'>学习模块展示</span>
</div>
<!-- 样式五 -->
<div class="list list5 index-pv1">
<div id="lists-five-swiperxueximokuai" class="swiper-container lists-five-swiper" :style='{"width":"1200px","padding":"50px 10px","margin":"0 auto","background":""}'>
<div class="swiper-wrapper">
<div :style='{"border":"0","cursor":"pointer","fontSize":"0","position":"relative","borderRadius":"4px","background":"#fff"}' class="swiper-slide" v-for="(item,index) in xueximokuaiList" :key="index" @click="toDetail('xueximokuaiDetail', item)">
<img :style='{"border":"0","width":"220px","borderRadius":"12%","height":"220px"}' v-if="preHttp(item.tupian)" :src="item.tupian.split(',')[0]" alt="" />
<img :style='{"border":"0","width":"220px","borderRadius":"12%","height":"220px"}' v-else :src="baseUrl + (item.tupian?item.tupian.split(',')[0]:'')" alt="" />
</div>
</div>
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
</div>
<div @click="moreBtn('xueximokuai')" :style='{"border":"0px solid #ccc","cursor":"pointer","boxShadow":"0px 0px 0px #ddd5c6,inset 0px 0px 0px 0px #ffa100","margin":"20px auto 20px","borderRadius":"0px","textAlign":"center","background":"url(http://codegen.caihongy.cn/20221118/85c87f82844444f2b945ecfffbbad360.png) repeat-x","display":"block","width":"1200px","lineHeight":"44px"}'>
<span :style='{"padding":"0 0 0 10px","borderColor":"#ccc","margin":"0","color":"#333","background":"#eee","borderWidth":"1px 0 1px 1px","display":"inline-block","width":"100px","fontSize":"16px","lineHeight":"44px","borderStyle":"solid","height":"44px"}'>查看更多</span>
<i v-if="true" :style='{"padding":"0 20px 0 0","borderColor":"#ccc","margin":"0 0 0 -10px","color":"#333","borderWidth":"1px 1px 1px 0px","background":"#eee","display":"inline-block","width":"40px","fontSize":"16px","lineHeight":"44px","borderStyle":"solid","height":"44px"}' class="el-icon-d-arrow-right"></i>
</div>
</div>
</div>
</template>
<script>
export default {
//数据集合
data() {
return {
baseUrl: '',
newsList: [],
xueximokuaiList: [],
}
},
created() {
this.baseUrl = this.$config.baseUrl;
this.getList();
},
//方法集合
methods: {
preHttp(str) {
return str && str.substr(0,4)=='http';
},
getList() {
let autoSortUrl = "";
this.$http.get('xueximokuai/list', {params: {
page: 1,
limit: 12,
}}).then(res => {
if (res.data.code == 0) {
this.xueximokuaiList = res.data.data.list;
// 商品列表样式五
this.$nextTick(() => {
new Swiper('#lists-five-swiperxueximokuai', {
loop: true,
speed: 500,
slidesPerView: Number(5),
spaceBetween: Number(10),
autoplay: {"delay":3000,"disableOnInteraction":false},
centeredSlides: true,
watchSlidesProgress: true,
on: {
setTranslate: function() {
var slides = this.slides
for (var i = 0; i < slides.length; i++) {
var slide = slides.eq(i)
var progress = slides[i].progress
// slide.html(progress.toFixed(2)); //看清楚progress是怎么变化的
slide.css({
'opacity': '',
'background': ''
});
slide.transform(''); //清除样式
slide.transform('scale(' + (1.5 - Math.abs(progress) / 4) + ')');
}
},
setTransition: function(transition) {
for (var i = 0; i < this.slides.length; i++) {
var slide = this.slides.eq(i)
slide.transition(transition);
}
},
},
navigation: {"nextEl":".swiper-button-next","prevEl":".swiper-button-prev"},
});
})
}
});
},
toDetail(path, item) {
this.$router.push({path: '/index/' + path, query: {detailObj: JSON.stringify(item)}});
},
moreBtn(path) {
this.$router.push({path: '/index/' + path});
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.home-preview {
.recommend {
.list3 .swiper-button-prev {
left: 10px;
right: auto;
}
.list3 .swiper-button-prev::after {
color: rgb(64, 158, 255);
}
.list3 .swiper-button-next {
left: auto;
right: 10px;
}
.list3 .swiper-button-next::after {
color: rgb(64, 158, 255);
}
.list5 .swiper-button-prev {
left: 10px;
right: auto;
}
.list5 .swiper-button-prev::after {
color: rgb(64, 158, 255);
}
.list5 .swiper-button-next {
left: auto;
right: 10px;
}
.list5 .swiper-button-next::after {
color: rgb(64, 158, 255);
}
.list5 {
.swiper-slide-prev {
position: relative;
z-index: 3;
}
.swiper-slide-next {
position: relative;
z-index: 3;
}
.swiper-slide-active {
position: relative;
z-index: 5;
}
}
.index-pv1 .animation-box {
transform: rotate(0deg) scale(1) skew(0deg, 0deg) translate3d(0px, 0px, 0px);
z-index: initial;
}
.index-pv1 .animation-box:hover {
-webkit-perspective: 1000px;
perspective: 1000px;
transition: 0.3s;
z-index: 1;
}
.index-pv1 .animation-box img {
transform: rotate(0deg) scale(1) skew(0deg, 0deg) translate3d(0px, 0px, 0px);
}
.index-pv1 .animation-box img:hover {
filter: brightness(1.1);
transform: rotate(0deg);
-webkit-perspective: 1000px;
perspective: 1000px;
opacity: 0.75;
transition: all 0.3s ease-in-out 0s;
}
}
.news {
.list3 .swiper-button-prev {
left: 10px;
right: auto;
}
.list3 .swiper-button-prev::after {
color: rgb(64, 158, 255);
}
.list3 .swiper-button-next {
left: auto;
right: 10px;
}
.list3 .swiper-button-next::after {
color: rgb(64, 158, 255);
}
.list6 .swiper-button-prev {
left: 10px;
right: auto;
}
.list6 .swiper-button-prev::after {
color: rgb(64, 158, 255);
}
.list6 .swiper-button-next {
left: auto;
right: 10px;
}
.list6 .swiper-button-next::after {
color: rgb(64, 158, 255);
}
.index-pv1 .animation-box {
transform: rotate(0deg) scale(1) skew(0deg, 0deg) translate3d(0px, 0px, 0px);
z-index: initial;
}
.index-pv1 .animation-box:hover {
-webkit-perspective: 1000px;
perspective: 1000px;
transition: 0.3s;
z-index: 1;
}
.index-pv1 .animation-box img {
transform: rotate(0deg) scale(1) skew(0deg, 0deg) translate3d(0px, 0px, 0px);
}
.index-pv1 .animation-box img:hover {
filter: brightness(1.1);
-webkit-perspective: 1000px;
perspective: 1000px;
transition: all 0.3s ease-in-out 0s;
}
}
.lists {
.list3 .swiper-button-prev {
left: 10px;
right: auto;
}
.list3 .swiper-button-prev::after {
color: #08b344;
}
.list3 .swiper-button-next {
left: auto;
right: 10px;
}
.list3 .swiper-button-next::after {
color: #08b344;
}
.list5 .swiper-button-prev {
left: 10px;
right: auto;
}
.list5 .swiper-button-prev::after {
color: rgb(64, 158, 255);
}
.list5 .swiper-button-next {
left: auto;
right: 10px;
}
.list5 .swiper-button-next::after {
color: rgb(64, 158, 255);
}
.list5 {
.swiper-slide-prev {
position: relative;
z-index: 3;
}
.swiper-slide-next {
position: relative;
z-index: 3;
}
.swiper-slide-active {
position: relative;
z-index: 5;
}
}
.index-pv1 .animation-box {
transform: rotate(0deg) scale(1) skew(0deg, 0deg) translate3d(0px, 0px, 0px);
z-index: initial;
}
.index-pv1 .animation-box:hover {
-webkit-perspective: 1000px;
perspective: 1000px;
transition: 0.3s;
z-index: 1;
}
.index-pv1 .animation-box img {
transform: rotate(0deg) scale(1) skew(0deg, 0deg) translate3d(0px, 0px, 0px);
}
.index-pv1 .animation-box img:hover {
-webkit-perspective: 1000px;
perspective: 1000px;
opacity: 0.75;
transition: all 0.3s ease-in-out 0s;
}
}
}
</style>
package com.controller;
import java.io.File;
import java.io.FileNotFoundException;
import java.io.IOException;
import java.util.Arrays;
import java.util.Date;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import java.util.Random;
import java.util.UUID;
import org.apache.commons.io.FileUtils;
import org.apache.commons.lang3.StringUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.HttpHeaders;
import org.springframework.http.HttpStatus;
import org.springframework.http.MediaType;
import org.springframework.http.ResponseEntity;
import org.springframework.util.ResourceUtils;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;
import com.annotation.IgnoreAuth;
import com.baomidou.mybatisplus.mapper.EntityWrapper;
import com.entity.ConfigEntity;
import com.entity.EIException;
import com.service.ConfigService;
import com.utils.R;
/**
* 上传文件映射表
*/
@RestController
@RequestMapping("file")
@SuppressWarnings({"unchecked","rawtypes"})
public class FileController{
@Autowired
private ConfigService configService;
/**
* 上传文件
*/
@RequestMapping("/upload")
@IgnoreAuth
public R upload(@RequestParam("file") MultipartFile file,String type) throws Exception {
if (file.isEmpty()) {
throw new EIException("上传文件不能为空");
}
String fileExt = file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf(".")+1);
File path = new File(ResourceUtils.getURL("classpath:static").getPath());
if(!path.exists()) {
path = new File("");
}
File upload = new File(path.getAbsolutePath(),"/upload/");
if(!upload.exists()) {
upload.mkdirs();
}
String fileName = new Date().getTime()+"."+fileExt;
File dest = new File(upload.getAbsolutePath()+"/"+fileName);
file.transferTo(dest);
/**
* 如果使用idea或者eclipse重启项目,发现之前上传的图片或者文件丢失,将下面一行代码注释打开
* 请将以下的"D:\\springbootq33sd\\src\\main\\resources\\static\\upload"替换成你本地项目的upload路径,
* 并且项目路径不能存在中文、空格等特殊字符
*/
// FileUtils.copyFile(dest, new File("D:\\springbootq33sd\\src\\main\\resources\\static\\upload"+"/"+fileName)); /**修改了路径以后请将该行最前面的//注释去掉**/
if(StringUtils.isNotBlank(type) && type.equals("1")) {
ConfigEntity configEntity = configService.selectOne(new EntityWrapper<ConfigEntity>().eq("name", "faceFile"));
if(configEntity==null) {
configEntity = new ConfigEntity();
configEntity.setName("faceFile");
configEntity.setValue(fileName);
} else {
configEntity.setValue(fileName);
}
configService.insertOrUpdate(configEntity);
}
return R.ok().put("file", fileName);
}
/**
* 下载文件
*/
@IgnoreAuth
@RequestMapping("/download")
public ResponseEntity<byte[]> download(@RequestParam String fileName) {
try {
File path = new File(ResourceUtils.getURL("classpath:static").getPath());
if(!path.exists()) {
path = new File("");
}
File upload = new File(path.getAbsolutePath(),"/upload/");
if(!upload.exists()) {
upload.mkdirs();
}
File file = new File(upload.getAbsolutePath()+"/"+fileName);
if(file.exists()){
/*if(!fileService.canRead(file, SessionManager.getSessionUser())){
getResponse().sendError(403);
}*/
HttpHeaders headers = new HttpHeaders();
headers.setContentType(MediaType.APPLICATION_OCTET_STREAM);
headers.setContentDispositionFormData("attachment", fileName);
return new ResponseEntity<byte[]>(FileUtils.readFileToByteArray(file),headers, HttpStatus.CREATED);
}
} catch (IOException e) {
e.printStackTrace();
}
return new ResponseEntity<byte[]>(HttpStatus.INTERNAL_SERVER_ERROR);
}
}