Student Management System – Frontend and Backend Overview with Vue and SpringBoot

Project Introduction

This is a front‑back separated project that uses Vue for the front end and SpringBoot + Mybatis for the back end.

Project Deployment

Import studentms.sql into a MySQL database.

Run the front‑end with WebStorm by launching student_client .

Run the back‑end with IDEA by launching student_server .

Project Showcase

1. Login page

Screenshot of the login interface.

2. Admin main page

Screenshot of the admin dashboard.

3. Dynamic search box and table display

Screenshot demonstrating dynamic search and data table.

4. Student home page

Screenshot of the student portal homepage.

5. Teacher grade search and edit

Screenshot of the teacher interface for searching and editing grades.

Frontend Section

1. Project Runtime

Node version 6.0 or higher is required due to extensive ES6/7 usage.

2. Technology Stack

Vuex

Vue Router

Axios

Element UI

sessionStorage

3. Project Details

The front end is built with Vue 2.0, fetching data from back‑end APIs to render dynamically; default port is 8080.

Dynamic SQL via Mybatis provides high‑performance search.

Router configures navigation for different user types.

Axios loads back‑end data asynchronously.

Element UI supplies front‑end form validation.

sessionStorage implements login interception.

Both front‑end and back‑end support data pagination.

4. System Functions

Admin role:

CRUD operations for teachers, students, and courses.

Full control over teacher and student business logic.

Teacher role:

View courses taught and enrolled students.

Enter student grades.

Student role:

Course selection and withdrawal.

Grade inquiry.

Backend Section

1. Project Runtime

JDK 1.8 or higher is required.

2. Technology Stack

Spring Boot 2.6.3

Mybatis

Maven

3. Project Details

The back end follows a RESTful style, uses CrossOrigin to solve CORS issues, and employs annotations and XML configuration for dynamic SQL, providing complete data APIs for the front end. Because the Vue project occupies Tomcat's default port 8080, the back‑end runs on port 10086, configurable via YAML and Maven packaging.

4. System Functions

All data interfaces required by the front‑end Ajax requests are implemented using RESTful GET endpoints.

Database Design

Diagram of the relational schema for students, teachers, courses, and related entities.

Project Acquisition

Scan the provided QR code, follow the public account "java1234", and reply with "6677" to receive the download link. Additional contact information and promotional links are included for further Java resources and training courses.