Building a Spring Boot 4 + Vue 3 Student Archive System in 20 Minutes with Cursor AI

1. Overview

The author demonstrates that Cursor AI combined with Claude can generate a complete Spring Boot 4 + Vue 3 student archive management system in roughly 20 minutes, showcasing AI‑assisted rapid development.

2. System Purpose

The application serves as a digital archive for university daily management, supporting three roles—administrator, teacher, and student. It stores department and major structures, class assignments, student personal and family information, academic records, awards, punishments, and internship experiences, while centralising notices for consistent publishing.

3. Architecture

The project follows a front‑end/back‑end separation pattern. Source code is organised into server/ (Spring Boot back end), client/ (Vue front end), and server/sql/ (database initialization scripts).

4. Backend Stack

Implemented with Java 17 and Spring Boot 4. Persistence uses MyBatis with XML mappers; pagination is handled by PageHelper. Security relies on Spring Security configured for a stateless JWT approach—authentication tokens are issued on login and validated by a custom JWT interceptor. The database is MySQL 8, with the schema named db_student_archive and tables prefixed by t_ (e.g., t_user, t_student). Uploaded files are stored on the server file system (e.g., D:/uploads) and referenced in the database by relative paths, exposed via the /uploads/** static mapping.

5. Frontend Stack

The front end uses Vue 3 for component‑based UI, Vite for development and bundling, Vue Router for navigation, Pinia for state management (login status and user info), Element Plus for ready‑made form and table components, and ECharts for statistical dashboards. All HTTP requests go through an Axios wrapper that automatically adds the JWT Authorization header, parses business response codes, and redirects to the login page on a 401 response.

6. Development Convenience

During local development the Vite dev server proxies /api and /uploads to the Spring Boot service on port 8080, eliminating CORS issues and hard‑coded back‑end URLs. The same proxy configuration can be transferred to Nginx or a gateway for production.

7. Authentication Flow

Users log in with a username and password. Upon successful authentication the back end issues a JWT, which the front end stores and includes in the Authorization: Bearer … header of subsequent protected requests. Spring Security disables CSRF and enforces a stateless session; the custom JWT interceptor protects all /api/** endpoints except /api/login. Front‑end routing also checks meta.roles to prevent role‑incompatible pages, but final authorization is always enforced server‑side.

8. Backend Layering

Requests pass through three layers: Controller (HTTP handling, parameter binding, validation, unified response), Service (business logic, multiple DB operations), and Mapper (SQL execution and result mapping). A global exception handler converts uncaught exceptions into JSON error responses. PageHelper injects pagination semantics before queries, keeping controller code clean.

9. Data Flow

The core t_student table stores basic student information; related tables (family, education, awards, internships) reference it via foreign keys. Administrators and teachers manage these records through the back‑end, while students view their own aggregated profile and published notices. File uploads are saved to the file system, with only the relative path stored in the database; the front end accesses files through the /uploads static mapping.

10. Statistics

Statistical charts (gender distribution, college counts, recent additions, award/punishment breakdown) are rendered with ECharts. Data is provided by StatController and its service layer, which perform aggregation queries optimized for read‑heavy, chart‑friendly workloads.

11. Visual Diagrams