一款由 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、依赖环境

1. JDK8+
2. MySQL5.7+
3. Minio
4. Maven
5. Node.js18+

复制代码

2、下载源码

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

复制代码

3、项目目录结构

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

复制代码

4、创建数据库 weblog

1. 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 中的数据库地址、用户名、密码配置信息

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

复制代码

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

1. #=================================================================
2. # minio (上传图片需要，需配置成自己的地址)
3. #=================================================================
4. minio:
5.   endpoint: https://img.xxx.com
6.   accessKey: xxx
7.   secretKey: xxx
8.   bucketName: xxx

复制代码

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

1、进入前端目录

1. cd weblog-vue3

复制代码

2、安装依赖

1. npm install

复制代码

3、启动服务

1. npm run dev

复制代码

4、浏览器访问

1. http://localhost:5173

复制代码

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

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

复制代码

最后

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

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

复制代码

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

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

复制代码

我创建了一个开源项目交流群，方便大家在群里交流、讨论开源项目。
但是任何人在群里打任何广告，都会被 T 掉。
如果你对这个交流群感兴趣或者在使用开源项目中遇到问题，可以通过如下方式进群：
关注微信公众号：【Java陈序员】，回复【开源项目交流群】进群，或者通过公众号下方的菜单添加个人微信，并备注【开源项目交流群】，通过后拉你进群。

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

来源：新程序网络收集，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！