This issue introduces you to a front-end and back-end separation system based on SpringBoot and Vue. The code is written in a very standardized way and has learning and reference significance.
1. Business introduction
As the name suggests, the examination system has a question maker and a question maker. The same is true for this system. The role of the question maker is called the teacher, and the role of the question maker is called the student. Different accounts can be granted different roles.
This system is divided into the following modules:
1.Exam card
The test card can be understood as a test paper, which is a collection of test questions. When we log in as a student, we can see the test card and my test
Click on any test card to start answering questions After answering the questions, you can click Submit to jump to my exam page
2. Problem management
Question management can be understood as a question bank where questions can be asked. This module requires the role of a teacher to be seen. We can log in with a teacher’s account. Click New to create a new question Click Next to continue to improve the question type: question type, classification, difficulty Set options: Click Finish to see the question added Click on details to view question information:
3.Exam management
Examination management can manage test cards, which can be understood as a place to create test papers Select scores and questions: Click Finish to create a Zhang test paper:
4.My exam
You can view the exams you have taken and the details of your answers Click to view the start details to see the details of your answer sheet and your answers
2. Technical introduction
1. Technology stack
Backend: SpringBoo2.x +JPA
Database: MYSQL5.x OR MYSQL8.x,
前端: VUE + ElementUI
2. Code introduction
Project structure
image.png
Three Quick Start
1. Environment preparation
MYSQL 5.7
JDK1.8
Maven 3
IDEA
Node 16+
The above environment needs to be prepared and set up locally before proceeding with the following steps.
Database configuration: Database initialization statement: under the doc folder
Create database and initialize: Open navicat to create database: exam. (Note that the default database connection account and password are root) Copy the SQL statement to Mysql visualization tools such as navicat, and execute it to see the table structure and initialization data:
Step4: Start the backend project
Idea runs the back-end project. If you see the following information, it means the operation is successful. Open ithttp://127.0.0.1:9527/swagger-ui.html to see the API document of the project a>
At this point, the candidate project deployment is completed.
4. Front-end deployment
Open the terminal and enter the front-end project directory:
image.png
Step1: Install npm dependencies
After entering the directory through the terminal, install npm dependencies: npm install
Step2: Start the front-end project
When npm run serve sees the following information, it means the deployment is successful.
If you encounter an error: Error: error:0308010C:digital envelope routines::unsupported You can check your node version to see if it is higher than 17. You can refer to the blog here to solve the problem: https://blog.csdn.net/m0_65933139/ article/details/130690790
Click on any link to jump to the browser and open it.
image.png
Log in:
Student: student admin123
Teacher: teacher admin123
Follow the ITSource official account! Get more learning resources!
Paid secondary development, customization, and one-on-one explanation are available. If interested, please contact WeChat: itguangit
This article is published by mdnice Multiple platforms
Click on any test card to start answering questions
After answering the questions, you can click Submit to jump to my exam page
Click New to create a new question
Click Next to continue to improve the question type: question type, classification, difficulty
Set options:
Click Finish to see the question added
Click on details to view question information:
Select scores and questions:
Click Finish to create a Zhang test paper:
Click to view the start details to see the details of your answer sheet and your answers
Open it
