一款由 SpringBoot + Vue 开发的前后端分离博客！

大家好，我是 Java陈序员。

今天，给大家介绍一款开源的前后端分离博客系统。

关注微信公众号：【Java陈序员】，获取开源项目分享、AI副业分享、超200本经典计算机电子书籍等。

项目介绍

WeBlog —— 一款由 SpringBoot + Vue 3.2 + Vite 4.3 开发的前后端分离博客，可作为 Java 毕业设计项目！

功能特色：

• 提供博客前台和后台管理，前台界面精美，后台功能齐全
• 支持 Markdown 格式编辑、预览、发布博客文章
• 支持文章分类、文章标签，方便精准定位所需博客文章
• 支持博客个人基本信息的设置，提供社交主页的跳转
• 支持仪表盘数据统计，Echarts 文章发布热图统计、PV 访问量统计等

技术栈：

• 后端：SpringBoot、Mybatis Plus、MySQL、Minio 等
• 前端：Vue 3.2 + Vite + Element Plus

功能截图

博客前台

• 博客首页

• 博客详情页

• 博客分类页

• 博客标签页

• 博客归档页

后台管理

• 仪表盘

• 文章管理

• 文章编辑

• 分类管理

• 标签管理

• 博客设置

快速上手

环境准备

1、依赖环境

JDK8+
MySQL5.7+
Minio
Maven
Node.js18+

2、下载源码

git clone https://github.com/weiwosuoai/WeBlog.git

3、项目目录结构

├── weblog-springboot           后端项目
│   ├── weblog-module-admin     博客后台管理模块
│   ├── weblog-module-common    通用模块
│   ├── weblog-module-jwt       JWT 认证、授权模块
│   └── weblog-web              博客前台（启动入口）
├── weblog-vue3                 前端项目
└── sql                         数据库初始化脚本（包括表结构以及相关初始化数据）

4、创建数据库 weblog

CREATE DATABASE `weblog` DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;

5、在数据库 weblog 中执行初始化 /sql 目录下的 schema.sql（先）、data.sql（后） 脚本文件

启动后端

1、将 weblog-springboot 整个目录以 Maven 工程的形式导入到 IDEA 中

2、修改配置文件 weblog-springboot/weblog-web/src/main/resources/application-dev.yaml 中的数据库地址、用户名、密码配置信息

spring:
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://127.0.0.1:3306/weblog?useUnicode=true&characterEncoding=UTF-8&autoReconnect=true&useSSL=false&zeroDateTimeBehavior=convertToNull
    username: root
    password: 123456

3、修改配置文件 weblog-springboot/weblog-web/src/main/resources/application.yaml 中的 Minio 配置信息（用于图片存储）

#=================================================================
# minio (上传图片需要，需配置成自己的地址)
#=================================================================
minio:
  endpoint: https://img.xxx.com
  accessKey: xxx
  secretKey: xxx
  bucketName: xxx

4、运行主启动类 com.quanxiaoha.weblog.web.WeblogWebApplication 启动服务

启动前端

1、进入前端目录

cd weblog-vue3

2、安装依赖

npm install

3、启动服务

npm run dev

4、浏览器访问

http://localhost:5173

• 管理员登录账号/密码: admin/admin
• 游客登录账号/密码: test/test

项目地址：https://github.com/weiwosuoai/WeBlog

最后

推荐的开源项目已经收录到 GitHub 项目，欢迎 Star：

https://github.com/chenyl8848/great-open-source-project

或者访问网站，进行在线浏览：

https://chencoding.top:8090/#/

我创建了一个开源项目交流群，方便大家在群里交流、讨论开源项目。

但是任何人在群里打任何广告，都会被 T 掉。

如果你对这个交流群感兴趣或者在使用开源项目中遇到问题，可以通过如下方式进群：

关注微信公众号：【Java陈序员】，回复【开源项目交流群】进群，或者通过公众号下方的菜单添加个人微信，并备注【开源项目交流群】，通过后拉你进群。

大家的点赞、收藏和评论都是对作者的支持，如文章对你有帮助还请点赞转发支持下，谢谢！

---