一、技术简介

本网站使用了前后端分离的开发技术，是基于SpringBoot + VUE的在线英语考试系统，支持选择题、填空题、判断题、多选题。系统包含三种角色（管理员、老师、考生），实现的功能包含在线考试、查看答题情况、管理试卷、管理题库、管理用户等。

前端技术栈：

VUE(构建用户界面的渐进式框架)
VUEX(状态管理)
Vue-router(动态路由)
Js-cookie(保存信息)
Axios(页面请求)

后端技术栈：

SpringBoot(Web框架)
SpringSecurity(基于URL的访问控制)
Mybatis(基于Java的持久层框架)
MySQL8.0数据库
Jwt, Token校验

二、功能简介

2.1 登录功能

网站设置了登录功能，用户在登录网站后需要输入用户名和密码，系统根据用户名来检测登录用户的身份，识别出其为管理员或老师或考生，根据其身份来提供不同的功能。

2.2 考试列表

此功能三种身份都可以使用，用户可以查看系统目前已经发布的考试，并且提供了搜索功能来查找考试。选择某一考试后，考生需要在规定时间内完成考试，超时则自动提交，提交完成后会显示考试分数并生成相应的考试记录。

2.3 考试记录

此功能三种身份都可以使用，用户可以查看自己账号已经完成的考试的基本信息，比如序号、考生姓名、考试名字、分数、是否通过、考试时间、所花时间等，系统同样提供了搜索考试记录的功能，也可以详细地查看某次考试的具体内容，例如查看本次考试的所有题目、答案、作答记录等。

2.4 题库管理

此功能仅老师和管理员可以使用，用户可以查看系统所有类型的题目，包括选择题、填空题、判断题和多选题。每一种类的题目，用户都可以查看其详细的内容，例如题目内容、题目答案、题目解析、创建时间、题目难度等。此外，系统还设置了搜索题目的功能，并且可以手动添加题目、导入导出题目、下载导入模板等。

2.5 试卷管理

此功能仅老师和管理员可以使用，用户可以查询系统中已有的考试信息，并且可以导出考试信息为本地文档，也可以发布考试，发布之后所有用户都可以作答此试卷。系统同样提供了搜索功能，可以搜索已有的考试信息，并可以根据题库随机地生成一套试卷，或手动生成一套试卷。

2.6 用户管理

此功能仅管理员可以使用，管理员可以查看系统中所有的老师、考生的基本信息，并且可以编辑、删除用户，可以限制用户登录，被限制的用户无法登录系统。系统同样提供了搜索功能，管理员可以搜索已存在的用户，同时可以创建新的用户。

三、网站效果截图

3.1 登录界面

3.2 系统主页

3.3 考试列表

3.4 考试信息

3.5 开始考试

3.6 考试记录

3.7 试卷管理

3.8 用户管理

四、云服务器部署

项目已发布在阿里云服务器上，可以通过外网访问，网址是：点击跳转。打开网页之后，可以选择以下三种身份登录系统。（服务器配置较低且同时运行多个项目，初次进入加载时间可能较长）

身份	账号	密码
管理员	admin	123456
老师	sam	123456
考生	tom	123456

五、项目源代码

5.1 百度网盘

点击跳转，提取码：BigG

5.2 Gitee

点击跳转

注：本文是博主Web前端技术课程设计的总结，不支持任何商用，转载请注明出处！如果你也对Java语言开发大型项目的学习有一定的兴趣和理解，欢迎随时找博主交流~

Web前端技术课程设计——技术栈【SpringBoot+Vue+MySQL+MyBatis】的在线英语考试系统相关推荐

基于Springboot vue前后端分离在线培训考试系统源码
# 云帆培训考试系统管理账号:admin/admin 学员账号:person/person # 介绍一款多角色在线培训考试系统,系统集成了用户管理.角色管理.部门管理.题库管理.试题管理.试题导入 ...
Springboot+vue实现前后端分离智能化考试系统
作者主页:编程指南针作者简介:Java领域优质创作者.CSDN博客专家 .掘金特邀作者.多年架构师设计经验.腾讯课堂常驻讲师主要内容:Java项目.毕业设计.简历模板.学习资料.面试题库.技术互助 ...
web前端网页课程设计大作业 html+css+javascript天津旅游(11页) dw静态旅游网页设计实例企业网站制作
商城+前后端分离+课程设计+大作业 Springboot+vue+swagger+好看的安卓界面
这里写目录标题一.绪论二.需求分析 2.2商户与顾客间通讯服务 2.3 完整的购物流程 2.4 后台管理 2.5 交流社区 2.6 附加功能 2.7 部署在云服务器上三.总体设计 3.1系统结构 ...
计算机微机原理与接口技术课程设计课题,微机原理与接口技术课程设计报告
<微机原理与接口技术课程设计报告>由会员分享,可在线阅读,更多相关<微机原理与接口技术课程设计报告(12页珍藏版)>请在人人文库网上搜索. 1.微机原理与接口技术课程设计设计题 ...
Web前端开发如何提高技术水平！
作为一个Web的前端工程师,怎样开始学习呢?在学习了HTML和css之后,我们应该做些什么呢?Web前端开发入门后,又该如何提高自己的前端开发技术?如为自学,根据个人学习消化能力确定每日学习数量,以下 ...
定位技术课程设计-微信小程序校园导游系统
定位技术课程设计课程设计教学目的课程设计要求课程设计题目原题目拓展内容需求分析原理分析微信小程序API定位原理WIFI指纹定位原理路径规划算法调研详细设计总述主页面介绍学校简介页面介绍导引页面概述导引 ...
【汇编】微机原理与接口技术课程设计
本文是微机原理与接口技术课程设计完整的程序和实验报告开源在我的Github上: https://github.com/zstar1003/XDU_Homework/tree/main/%E5%BE% ...
Web前端开发工程师必备技术列表
WEB标准,Web前端开发工程师必备技术列表想要打造并拥有一流的Web产品开发团队,在团队成员基础能力上一定要下功夫.对于Web前端产品开发来说,仅仅掌握Web1.0时代简单的"网页套接& ...

Web前端技术课程设计——技术栈【SpringBoot+Vue+MySQL+MyBatis】的在线英语考试系统