Build a Full‑Stack HR Management System with SpringBoot & Vue – Step‑by‑Step Guide

For newcomers to the workplace, the HR department often feels mysterious; this article introduces a front‑back separated HR management system called “微人事”, built with SpringBoot and Vue, showcasing typical enterprise technologies such as Redis and RabbitMQ.

Project Technology Stack

Backend

Spring Boot

Spring Security

MyBatis

MySQL

Redis

RabbitMQ

Spring Cache

WebSocket

Frontend

Vue

ElementUI

axios

vue-router

Vuex

WebSocket

vue-cli4

Quick Deployment Guide

Clone the project locally.

Use Flyway‑managed database scripts; create an empty MySQL database named vhr and adjust application.properties accordingly.

Configure local Redis and RabbitMQ instances in application.properties (modify both mailserver and vhrserver settings for RabbitMQ).

Open the vhr project in IntelliJ IDEA and start the mailserver module.

Run the vhr-web module of vhrserver.

After these steps the backend starts; access the frontend at http://localhost:8081/index.html. For further development, navigate to the vuehr directory and run:

# Install dependencies
npm install

# Start the project on localhost:8080
npm run serve

When ready to release, run npm run build to generate a dist folder, then copy static and index.html into resources/static/ of the Spring Boot project.

The project has attracted over 22 K stars on GitHub, and the author provides video tutorials to help developers avoid common pitfalls.