How to Build a Full‑Stack Blog with Spring Boot and Vue 3: A Complete Walkthrough

Project Overview

WeBlog is a full‑stack blog system that separates the backend (Spring Boot) from the frontend (Vue 3). It provides a typical blog workflow: article creation, categorisation, tagging, markdown rendering, and basic site statistics.

Key Features

Frontend

Home page with article list

Category list

Tag management

Article detail view

Search (planned)

Wiki knowledge base (planned)

Comment system (planned)

Backend

Admin login and JWT‑based authentication

Dashboard with ECharts visualisation of PV and article heat‑map

Article, category and tag management

Blog settings and social link configuration

Comment management (planned)

Module Structure

The project is organised as two Maven modules:

weblog-springboot – backend services

weblog-vue3 – frontend UI

Backend sub‑modules:

weblog-module-admin – admin UI and controller layer

weblog-module-common – shared utilities (constants, DTOs, etc.)

weblog-module-jwt – JWT generation, validation and filter configuration

weblog-web – Spring Boot entry point (main class and servlet configuration)

Technology Stack

Backend

JDK 1.8

Spring Boot 2.6.3

Maven 3.6.3

MySQL 5.7

MyBatis‑Plus 3.5.2 (enhanced ORM)

HikariCP 4.0.3 (high‑performance connection pool)

Spring Security 2.6.3

JWT 0.11.2

Lombok 1.8.22

Jackson 2.13.1

Hibernate Validator 6.2.0.Final

Logback 1.2.10

Guava 18.0

p6spy 3.9.1 (SQL monitoring)

MinIO 8.2.1 (object storage for images)

flexmark 0.62.2 (Markdown parsing)

Frontend

Vue 3.2.47

Vite 4.3.9 (build tool)

Element Plus 2.3.3 (UI component library)

vue‑router 4.1.6

vuex 4.0.2

md‑editor‑v3 3.0.1 (Markdown editor component)

WindiCSS 3.5.6 (utility‑first CSS)

axios 1.3.5 (HTTP client)

ECharts 5.4.2 (data visualisation)

Repository and Demo

GitHub: https://github.com/weiwosuoai/WeBlog Gitee: https://gitee.com/AllenJiang/WeBlog Live demo (guest credentials test / test):

http://118.31.41.16:8081/

Screenshots