How to Build a Vue‑ElementUI HR Management System with Spring Boot

Technology Stack

Frontend

Vue, Axios, ElementUI, Vue‑Router, Vuex, ECharts

Backend

Spring Boot, JWT, MyBatis‑Plus, MySQL, Hutool

System Design

Business Cases

Super administrators have access to all menus and can perform management operations, while regular employees can only view and edit personal information, change passwords, and request leave. Administrators can assign roles to employees to modify their permissions.

Functional Structure

The system consists of four modules: system management & permission management, salary management, and attendance management. System management handles daily administrative tasks, permission management controls employee access, salary management deals with social insurance and housing fund data, and attendance management records and statistics employee clock‑in data.

System Demonstration

Home Page

The home page shows the logged‑in employee’s basic information, monthly attendance data, and today’s late, early‑leave, or absent status.

Leave

Employees can submit leave requests, view past records, and withdraw pending applications. Administrators can approve or reject leave, and approved leave periods are marked as “vacation” in attendance.

Social Insurance

The social‑insurance module displays employee insurance information and allows adjustments.

Salary Management

Shows each employee’s monthly salary and attendance penalties, with an option to export salary reports.

Attendance Management

Supports batch import/export of attendance data and allows querying and editing of attendance status. The import template follows a specific format; the system evaluates attendance based on company rules such as weekend days, approved leave, missing punch times, and combinations of late/early‑leave.

If the attendance date falls on a weekend, the status defaults to vacation.

If the date matches an approved leave, the status is vacation.

If any of the four punch times is missing, the status is absent.

If both late and early‑leave occur, the status is absent.

If only late, the status is late.

If only early‑leave, the status is early‑leave.

Otherwise, the status is normal.

Project Setup

Configuration

Frontend

# Modify the port number; it must match the port in application.yml
VUE_APP_PORT = 8888

Backend

# Backend server port
server:
  port: 8888

# Data source driver (use com.mysql.cj.jdbc.Driver for newer MySQL)
driver-class-name: com.mysql.cj.jdbc.Driver

# File upload path
files:
  upload:
    path: E:/project/idea/hrm/file/

Startup Steps

1. Create the database and execute the provided SQL script.

2. Clone the repository locally.

# Install dependencies
npm install

# Start the front‑end
npm run serve

3. Start the back‑end project.

4. After successful startup, open http://localhost:8080/login and log in with username admin and password 123 .