JavaEE 笔记03：基于Vue，SpringBoot的前后端分离的简单作业管理系统

mingh24

已于 2022-05-02 23:13:45 修改

阅读量3.7k

点赞数 10

文章标签： java vue spring boot

于 2020-06-19 22:50:06 首次发布

本文链接：https://blog.csdn.net/Yiang0/article/details/106863440

版权

本文介绍了基于Vue和SpringBoot的前后端分离的作业管理系统，详细阐述了系统的功能，如登录注册、学生和老师的作业管理等。系统采用MD5加密保证密码安全性，并通过Nginx部署到服务器。代码仓库链接在文末提供。

摘要由CSDN通过智能技术生成

基于Vue，SpringBoot的前后端分离的简单作业管理系统

前言

本文主要是对我编写的一个基于Vue和SpringBoot的前后端分离的作业管理系统进行功能展示，以及把系统部署到服务器的步骤的介绍。代码仓库地址见文末。

环境

开发环境

macOS Catalina 10.15.5
Java SE 11.0.5 LTS
MySQL Ver 8.0.19 for osx10.15 on x86_64 (Homebrew)
SpringBoot 2.3.1
npm 6.14.4
Vue @vue/cli 4.3.1

部署环境

Linux内核 4.15.0-88-generic
Ubuntu 18.04.4 LTS
Java SE 11.0.6 LTS
Nginx 1.14.0 (Ubuntu)
MySQL Ver 14.14 Distrib 5.7.30, for Linux (x86_64) using EditLine wrapper

功能展示

登录与注册

在这里插入图片描述

学生

学生首页

在这里插入图片描述

学生查看作业列表

在这里插入图片描述

学生提交作业

在这里插入图片描述

学生查看已提交的作业

在这里插入图片描述

学生编辑已提交的作业

在这里插入图片描述

学生查看老师已点评的作业

在这里插入图片描述

老师

老师查看作业列表

在这里插入图片描述

老师发布作业

在这里插入图片描述

老师编辑已发布的作业

在这里插入图片描述

老师查看已提交的学生作业

在这里插入图片描述

老师点评已提交的学生作业

在这里插入图片描述

数据库表结构

在这里插入图片描述
表结构比较简单，作业相关内容均为简单的文本形式。

SQL源文件位于后端项目的src/main/resources目录下：
在这里插入图片描述
student表和teacher表中存入了几条数据，真实密码均为123456，数据库中存入的是两次加密后的值：

项目结构

后端

在这里插入图片描述
后端项目中：

aspect包用于为后端向前端项目传输失败的信息时添加HTTP错误代码；
config包中则是作为Bean的系统全局的几个配置类；
model包中，bo是用户登录状态的业务对象，constant是通用的常量，entity是对应数据库表的实体类，vo是前后端通信过程中数据的载体；
util包中目前只有MD5的加密实现。

下图则是业务逻辑的调用层次：
在这里插入图片描述
四个层次各有一个基类，它们的子类在实现了基类后，进行相邻层次的调用。对于每个student包和teacher包，其中的五个类分别对应着学生、教师子系统的一个子页面。

前端

在这里插入图片描述
前端项目中：

api包是前端向后端通信的接口；
assets包中是全局的CSS及图片资源；
common包中是前端学生、教师子系统共用的接口；
components包中是页面通用的组件；
views包中，Container.vue装载了components中的两个组件，并通过VueRouter来对student、teacher中具体的内容进行切换。