springboot+Mybatis+vue前后端分离开发:作业管理系统
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前后端分离开发:作业管理系统相关推荐
- 视频教程-SpringBoot+Security+Vue前后端分离开发权限管理系统-Java
SpringBoot+Security+Vue前后端分离开发权限管理系统 10多年互联网一线实战经验,现就职于大型知名互联网企业,架构师, 有丰富实战经验和企业面试经验:曾就职于某上市培训机构数年,独 ...
- node vue 合并项目_吐血整理最佳实践:SpringBoot整合Vue前后端分离开发
[toc] 开发环境 IDEA V2018.5 npm v6.4.x vue-cli v2.9.x 创建项目 IDEA > Create New Project > Gradle 2018 ...
- SpringBoot+MyBatis+VUE前后端分离
文章目录 需求分析 1.创建表 2.创建SpringBoot项目 2.1 选择项目类型 2.2 设置组名包名等(根据个人需求更改) 2.3 选择依赖 2.3.1 选择Web依赖 2.3.2 选择MyS ...
- Vue+SpringBoot+Mybatis+Mysql前后端分离案例
Vue+SpringBoot+Mybatis+Mysql前后端分离案例(二) 前端开发 main.js代码如下 import Vue from 'vue' import App from './App ...
- SpringBoot + Vue前后端分离开发:全局异常处理及统一结果封装
SpringBoot + Vue前后端分离开发:全局异常处理及统一结果封装 文章目录 SpringBoot + Vue前后端分离开发:全局异常处理及统一结果封装 前后端分离开发中的异常处理 统一结果封 ...
- 基于SSM+SpringBoot+MySQL+Vue前后端分离的博客论坛系统
项目运行截图 系统首页 技术描述 开发工具: idea/eclipse 数据库: mysql Jar包仓库: Maven 前段框架: vue/ElementUI/echart 后端框架: spring ...
- SpringBoot+MyBatisPlus+Vue 前后端分离项目快速搭建【后端篇】【快速生成后端代码、封装结果集、增删改查、模糊查找】【毕设基础框架】
前后端分离项目快速搭建[后端篇] 数据库准备 后端搭建 1.快速创建个SpringBoot项目 2.引入依赖 3.编写代码快速生成代码 4.运行代码生成器生成代码 5.编写application.pr ...
- SpringBoot+MyBatisPlus+Vue 前后端分离项目快速搭建【前端篇】【快速生成后端代码、封装结果集、增删改查、模糊查找】【毕设基础框架】
前后端分离项目快速搭建[前端篇] 后端篇 前端篇 创建vue项目 安装所需工具 开始编码 1.在根目录下添加vue.config.js文件 2.编写main.js 3.编写App.vue 4.编写ax ...
- 【毕业设计-免费】springboot+vue前后端分离-酒店客房管理系统
前言 [毕业设计-免费]springboot+vue前后端分离-酒店客房管理系统-免费
最新文章
- 假设写一段代码引导PC开机这段代码是 ? Here is a tiny quot;OSquot; :-D
- webservice 简介 跨编程语言 跨操作系统 远程调用技术
- mongodb系列~mongodb慢语句(2)
- 雅虎的Web优化最佳实践
- 三大新兴力量,引领中国消费新经济丨图媒体
- [JSOI2018]潜入行动
- 详解模板方法设计模式
- css绘画三角形,实现一些图形
- Spring AOP介绍
- JS中的大括号{}和中括号[]详解
- mongodb update ()命令
- Python项目开发公用方法--excel生成方法
- 【BZOJ4196】[Noi2015]软件包管理器 树链剖分
- 【Spring-AOP】底层类AbstractAutoProxyCreator分析
- qpsk频谱图matlab,QPSK调制得出的调制信号频谱波形多了一个点频信号
- 如何爬取猫眼全部信息(电影信息、演员信息)
- webpower携手Google、Paypal举跨境电商互动享会
- AvalonDock使用(2)-简单布局设置
- 警示灯emark认证需要什么条件?
- 什么是WAP?[wap全程认识]