Spring Boot + Vue Online Exam System: Features, Architecture, and Deployment Guide

We recommend a robust online exam system built with Spring Boot (backend) and Vue (frontend) that follows a front‑back separation architecture. The source code is available at GitHub .

0x01: Feature Overview

The system supports single‑choice, multiple‑choice, and true/false questions and defines three user roles: student, teacher, and admin.

Student: participate in exams and view my exams.

Teacher: all student permissions plus create/edit questions and exams.

Admin: all teacher permissions plus user management.

0x02: Software Architecture

Front‑back separation with componentized front end for easy extension.

Backend uses Spring Boot, JPA, Swagger2, and JWT for authentication, returning data according to user permissions.

Frontend uses Vue and Ant Design, with many reusable components.

0x03: Development, Setup, and Deployment

① Clone the repository:

git clone https://github.com/19920625lsg/java-thread.git

② Create the database:

Create an exam database and import the SQL file located at spring-boot-online-exam/doc/sql/exam.sql.

③ Import the backend code and modify the configuration file

spring-boot-online-exam/backend/exam/src/main/resources/application.yml

to set the database connection.

Configuration screenshot:

Start the backend by running the main class com.huawei.l00379880.exam.ExamApplication. com.huawei.l00379880.exam.ExamApplication Backend start screenshot:

④ Start the frontend:

Navigate to spring-boot-online-exam/frontend/exam/, install dependencies with npm install, and launch the development server with npm run serve.

npm install

npm run serve

0x04: Query Results

System users: admin, teacher, student (password: admin123).

Login page

Home page

Exam list page