基于SpringBoot+Vue的在线考试系统514 功能完善界面漂亮下载即可以运行

前段时间各种各样的事情太忙，优快云博客停止有很长一段时间了。今天为大家分享一个基于SpringBoot+Vue的在线考试系统514.本次介绍的SpringBoot+Vue的在线考试系统,系统开发涉及到SpringBoot技术、数据库技术、UI技术、多线程技术、web开发等、VUE技术，是一个综合性和实战性非常强的的项目。SpringBoot+Vue的在线考试系统分三种用户类型：老师、学生、系统管理员。学生的功能包括：登陆、在线考试、在线练习、查看考试结果、答题情况、个人信息修改等功能；老师的功能包括：考试管理、题库管理、学生成绩管理、考试历史记录查询；系统管理员的功能包括：登陆、考试管理、题目管理、考试历史查询、学生成绩查询。整个项目界面漂亮、功能比较完善、有完整得源码，希望大家可以喜欢。通过实战项目，喜欢上编程，提高编程水平，一起加油。

Ant Design前端框架

Ant Design是一个由阿里巴巴团队开发的，‌基于React的用户界面设计语言和库，‌它提供了一系列高质量的React组件，‌帮助开发者更高效地构建用户界面。‌Ant Design的设计理念是“规范先行，‌设计驱动”，‌旨在为开发者提供一套完整的设计语言和组件库，‌使得开发过程更加高效和规范。

其官网地址为：Ant Design - 一套企业级 UI 设计语言和 React 组件库

系统架构图

本次开发的基于SpringBoot+Vue的在线考试系统采用的开发模式为：Springboot+Ant Design的开发者工具的的架构模式。Spring Boot和Vue.js是两个不同的技术栈，分别用于构建后端和前端应用程序。

Spring Boot是一个用于构建Java应用程序的开发框架，它通过约定大于配置的原则简化了Spring应用程序的创建和开发过程。Spring Boot集成了大量常用的第三方库和工具，使得开发者可以快速地构建健壮、安全和易于维护的应用程序。

Vue.js是一个用于构建用户界面的渐进式JavaScript框架，它提供了一套开发规则，使得开发者可以提高开发效率。Vue.js通过组件化的方式将应用程序分解为可复用的组件，使得应用程序的维护和扩展变得更加容易。

这种架构可以实现前后端分离，前后端可以独立开发和部署，降低了系统的耦合度，提高了开发效率和可维护性。同时，前端和后端可以使用不同的技术和框架，只要遵循相同的API规范即可实现数据的交互和通信。系统的整体架构如下图所示意。

功能模块图

基于springboot+Ant Design考试系统的各个模块的功能如下图所示：

运行效果

系统管理员功能

1 登陆界面

2 用户注册

3 考试卡片

4 问题管理

5 考试管理

老师功能

6 问题管理

7 发布问题

8 考试维护

9 创建考试

学生功能

10 考试卡片

11 在线考试

12 考试结果查看

13 考试详情查看

14 个人信息设置

运行效果


    <a-form
      id="formLogin"
      class="user-layout-login"
      ref="formLogin"
      :form="form"
      @submit="handleSubmit"
    >
      <a-tabs
        :activeKey="customActiveKey"
        :tabBarStyle="{ textAlign: 'center', borderBottom: 'unset' }"
        @change="handleTabClick"
      >
        <a-tab-pane key="tab1" tab="在线考试系统登录">
          <a-form-item>
            <a-input
              size="large"
              type="text"
              placeholder="请输入帐户名/邮箱/手机号"
              v-decorator="[
                'username',
                {rules: [{ required: true, message: '请输入帐户名/邮箱/手机号' }, { validator: handleUsernameOrEmail }], validateTrigger: 'change'}
              ]"
            >
              <a-icon slot="prefix" type="user" :style="{ color: 'rgba(0,0,0,.25)' }"/>
            </a-input>
          </a-form-item>

          <a-form-item>
            <a-input
              size="large"
              type="password"
              autocomplete="false"
              placeholder="请输入密码"
              v-decorator="[
                'password',
                {rules: [{ required: true, message: '请输入密码' }], validateTrigger: 'blur'}
              ]"
            >
              <a-icon slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }"/>
            </a-input>
          </a-form-item>
        </a-tab-pane>
      </a-tabs>

      <a-form-item>
        <a-checkbox v-decorator="['rememberMe']">自动登录</a-checkbox>
        <router-link class="register" :to="{ name: 'register' }" style="float: right;">注册账户</router-link>
      </a-form-item>

      <a-form-item style="margin-top:24px">
        <a-button
          size="large"
          type="primary"
          htmlType="submit"
          class="login-button"
          :loading="state.loginBtn"
          :disabled="state.loginBtn"
        >确定
        </a-button>
      </a-form-item>
    </a-form>