1、功能设计

本系统功能设计如下:

按照需求分为教师端和学生端,教师端发布作业,查看自己发布的作业,查看学生名单,添加学生。
学生端查看作业、提交或修改作业。

2、数据库设计

student表:

字段名称 字段类型 字段描述
sid int 学生id,学生的唯一识别码
sName varchar(20) 学生姓名
sPassword varchar(20) 学生账号的密码

Teacher表:

字段名称 字段类型 字段描述
tid int 教师id,教师的唯一识别码
tName varchar(20) 教师姓名
tPassword varchar(20) 教师账号的密码

Homework表:

字段名称 字段类型 字段描述
hid int 作业id,作业的唯一识别码
tid int 教师id,发布该作业的教师
htitle varchar(300) 作业标题
hcontent varchar(300) 作业要求/作业内容
start_time BIGINT 作业开始时间,采用unix时间戳格式
end_time BIGINT 作业结束时间,采用unix时间戳格式

studentHomework表:

字段名称 字段类型 字段描述
id int 学生作业id,本处唯一识别码
sid int 学生id,提交该作业的学生
hid int 作业id
homework_content varchar(300) 学生提交的作业内容
create_time BIGINT 作业创建时间,采用unix时间戳
update_time BIGINT 作业更新时间,采用unix时间戳,默认与创建时间相同

3、后端设计

后端采用springboot整合Mybatis,创建bean、mapper、service、controller四个包,bean中包括studentHomework、Homework、Student和Teacher四个实例。
文件目录如下:

其中在resource中的xml文件放置数据库语句,mapper进行映射,最后由controller中的接口发送给前端,展示在界面上。基本数据库配置等文件则写在yml文件中。关于springboot项目的建立,请自行查阅百度。
在此处需要注意的一点是,前后端分离开发时,接口链接涉及到跨域问题,控制台报错如下图:

解决方法是在controller中加入@CrossOrigin注解,如下图所示:

4、界面展示

本次采用前后端分离开发,前端采用vue框架+element组件,以呈现更好的界面效果。
界面和功能展示如下:

登录注册页:

如图所示,在输入框中输入学号和密码,选择身份,即可进行登录,学生学号和教师工号不互通。注册页则需要填写姓名、学号/工号并输入密码,密码需要输入两次进行验证,注册成功后,会跳出弹出框,提示用户回到登录分页进行登录。

教师首页:

教师登录成功后,会跳转到教师首页,右上角会展现当前的用户名称,鼠标移至该选项上可以选择退出账号。教师可以查看自己发布的作业列表,列表展示作业名称、作业内容、开始和结束时间等,教师可以添加作业、修改作业信息、删除作业和查看作业提交情况。添加作业、修改作业信息、查看作业提交情况都通过弹出框来进行展现。


教师添加作业时,需要填写作业标题、作业内容并选择作业时间范围,该范围会限制学生端的提交。


选择修改作业时,则会自动将目前的作业标题和作业内容填充进输入框,方便教师进行修改。


点击查看提交则会展示学生提交的作业列表,展现学生学号、提交内容、作业创建时间和更新时间。


选择删除作业则会弹出提示,以防误删。

点击菜单栏的添加学生则会跳转到添加学生页面,左侧展现学生列表,右侧则可以进行输入添加学生。被教师添加的学生默认账号密码是123456,添加后,需要刷新更新左侧的学生列表。

学生首页:

学生账号登录后则会进入学生首页,左侧展现已有的作业列表,右侧展现学生自身提交过的作业。如果该作业处于提交时间范围在中,学生可以选择提交,否则会显示作业尚未开始或作业提交已截止。学生可以在右侧的列表中对自身提交的作业进行更新,但如果作业已截止,则不可以进行修改。



作业的提交和修改依然采用弹出框模式,提交作业时,作业的序号、名称和内容将会展示在弹出框中,方便学生确认作业要求。更新作业时则将原答案置入输入框,方便学生进行修改。

由于时间关系,本次系统不设计打分等功能,系统稳定性也有待商榷,本博客和代码仅供参考。

代码地址:
前端地址:https://github.com/ShuheLiu/javaEE–client
后端地址:https://github.com/ShuheLiu/javaEE–server

docker镜像已上传,名称为17301129-final-project。

springboot+Mybatis+vue前后端分离开发:作业管理系统相关推荐

  1. 视频教程-SpringBoot+Security+Vue前后端分离开发权限管理系统-Java

    SpringBoot+Security+Vue前后端分离开发权限管理系统 10多年互联网一线实战经验,现就职于大型知名互联网企业,架构师, 有丰富实战经验和企业面试经验:曾就职于某上市培训机构数年,独 ...

  2. node vue 合并项目_吐血整理最佳实践:SpringBoot整合Vue前后端分离开发

    [toc] 开发环境 IDEA V2018.5 npm v6.4.x vue-cli v2.9.x 创建项目 IDEA > Create New Project > Gradle 2018 ...

  3. SpringBoot+MyBatis+VUE前后端分离

    文章目录 需求分析 1.创建表 2.创建SpringBoot项目 2.1 选择项目类型 2.2 设置组名包名等(根据个人需求更改) 2.3 选择依赖 2.3.1 选择Web依赖 2.3.2 选择MyS ...

  4. Vue+SpringBoot+Mybatis+Mysql前后端分离案例

    Vue+SpringBoot+Mybatis+Mysql前后端分离案例(二) 前端开发 main.js代码如下 import Vue from 'vue' import App from './App ...

  5. SpringBoot + Vue前后端分离开发:全局异常处理及统一结果封装

    SpringBoot + Vue前后端分离开发:全局异常处理及统一结果封装 文章目录 SpringBoot + Vue前后端分离开发:全局异常处理及统一结果封装 前后端分离开发中的异常处理 统一结果封 ...

  6. 基于SSM+SpringBoot+MySQL+Vue前后端分离的博客论坛系统

    项目运行截图 系统首页 技术描述 开发工具: idea/eclipse 数据库: mysql Jar包仓库: Maven 前段框架: vue/ElementUI/echart 后端框架: spring ...

  7. SpringBoot+MyBatisPlus+Vue 前后端分离项目快速搭建【后端篇】【快速生成后端代码、封装结果集、增删改查、模糊查找】【毕设基础框架】

    前后端分离项目快速搭建[后端篇] 数据库准备 后端搭建 1.快速创建个SpringBoot项目 2.引入依赖 3.编写代码快速生成代码 4.运行代码生成器生成代码 5.编写application.pr ...

  8. SpringBoot+MyBatisPlus+Vue 前后端分离项目快速搭建【前端篇】【快速生成后端代码、封装结果集、增删改查、模糊查找】【毕设基础框架】

    前后端分离项目快速搭建[前端篇] 后端篇 前端篇 创建vue项目 安装所需工具 开始编码 1.在根目录下添加vue.config.js文件 2.编写main.js 3.编写App.vue 4.编写ax ...

  9. 【毕业设计-免费】springboot+vue前后端分离-酒店客房管理系统

    前言 [毕业设计-免费]springboot+vue前后端分离-酒店客房管理系统-免费

最新文章

  1. 假设写一段代码引导PC开机这段代码是 ? Here is a tiny quot;OSquot; :-D
  2. webservice 简介 跨编程语言 跨操作系统 远程调用技术
  3. mongodb系列~mongodb慢语句(2)
  4. 雅虎的Web优化最佳实践
  5. 三大新兴力量,引领中国消费新经济丨图媒体
  6. [JSOI2018]潜入行动
  7. 详解模板方法设计模式
  8. css绘画三角形,实现一些图形
  9. Spring AOP介绍
  10. JS中的大括号{}和中括号[]详解
  11. mongodb update ()命令
  12. Python项目开发公用方法--excel生成方法
  13. 【BZOJ4196】[Noi2015]软件包管理器 树链剖分
  14. 【Spring-AOP】底层类AbstractAutoProxyCreator分析
  15. qpsk频谱图matlab,QPSK调制得出的调制信号频谱波形多了一个点频信号
  16. 如何爬取猫眼全部信息(电影信息、演员信息)
  17. webpower携手Google、Paypal举跨境电商互动享会
  18. AvalonDock使用(2)-简单布局设置
  19. 警示灯emark认证需要什么条件?
  20. 什么是WAP?[wap全程认识]

热门文章

  1. Bootstrap实战练习---Web全栈工程师简历模版
  2. 中冠百年|成为有钱人的六个步骤
  3. js正则获取顶级域名
  4. mybatis-plus 实现自动填充时间
  5. 自考计算机大专多久毕业证,最快大专毕业证要多久能拿到?
  6. Git详细教程(五):查看分支、创建分支、合并分支
  7. 已有image文件夹,创建image的标签文件夹(标签为txt形式)
  8. Python计算机视觉编程第二章——局部图像描述子
  9. 真正的文盲:没有文化的文化人系列(3)
  10. 除了1682亿这个数字,天猫双11还有哪些细节值得关注?