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

一游开心 發表於 2025-5-26 09:19:00

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

大家好，我是 <code>Java陈序员</code>。
今天，给大家介绍一款开源的前后端分离博客系统。
<blockquote>
关注微信公众号：【Java陈序员】，获取开源项目分享、AI副业分享、超200本经典计算机电子书籍等。
</blockquote>
<h2 id="项目介绍">项目介绍</h2>
<code>WeBlog</code>—— 一款由 SpringBoot + Vue 3.2 + Vite 4.3 开发的前后端分离博客，可作为 Java 毕业设计项目！
功能特色：
<ul>
<li>提供博客前台和后台管理，前台界面精美，后台功能齐全</li>
<li>支持 Markdown 格式编辑、预览、发布博客文章</li>
<li>支持文章分类、文章标签，方便精准定位所需博客文章</li>
<li>支持博客个人基本信息的设置，提供社交主页的跳转</li>
<li>支持仪表盘数据统计，Echarts 文章发布热图统计、PV 访问量统计等</li>
</ul>
技术栈：
<ul>
<li>后端：SpringBoot、Mybatis Plus、MySQL、Minio 等</li>
<li>前端：Vue 3.2 + Vite + Element Plus</li>
</ul>
<h2 id="功能截图">功能截图</h2>
<h3 id="博客前台">博客前台</h3>
<ul>
<li>博客首页</li>
</ul>
<img src="https://create-center.oss-cn-shenzhen.aliyuncs.com/WeBlog/img-20250525000044.png">
<ul>
<li>博客详情页</li>
</ul>
<img src="https://create-center.oss-cn-shenzhen.aliyuncs.com/WeBlog/img-20250525000106.png">
<ul>
<li>博客分类页</li>
</ul>
<img src="https://create-center.oss-cn-shenzhen.aliyuncs.com/WeBlog/img-20250525000144.png">
<ul>
<li>博客标签页</li>
</ul>
<img src="https://create-center.oss-cn-shenzhen.aliyuncs.com/WeBlog/img-20250525000214.png">
<ul>
<li>博客归档页</li>
</ul>
<img src="https://create-center.oss-cn-shenzhen.aliyuncs.com/WeBlog/img-20250525000228.png">
<h3 id="后台管理">后台管理</h3>
<ul>
<li>仪表盘</li>
</ul>
<img src="https://create-center.oss-cn-shenzhen.aliyuncs.com/WeBlog/img-20250525000247.png">
<ul>
<li>文章管理</li>
</ul>
<img src="https://create-center.oss-cn-shenzhen.aliyuncs.com/WeBlog/img-20250525000258.png">
<ul>
<li>文章编辑</li>
</ul>
<img src="https://create-center.oss-cn-shenzhen.aliyuncs.com/WeBlog/img-20250525000314.png">
<ul>
<li>分类管理</li>
</ul>
<img src="https://create-center.oss-cn-shenzhen.aliyuncs.com/WeBlog/img-20250525000323.png">
<ul>
<li>标签管理</li>
</ul>
<img src="https://create-center.oss-cn-shenzhen.aliyuncs.com/WeBlog/img-20250525000333.png">
<ul>
<li>博客设置</li>
</ul>
<img src="https://create-center.oss-cn-shenzhen.aliyuncs.com/WeBlog/img-20250525000341.png">
<h2 id="快速上手">快速上手</h2>
<h3 id="环境准备">环境准备</h3>
1、依赖环境
<pre><code class="language-bash">JDK8+
MySQL5.7+
Minio
Maven
Node.js18+
</code></pre>
2、下载源码
<pre><code class="language-bash">git clone https://github.com/weiwosuoai/WeBlog.git
</code></pre>
3、项目目录结构
<pre><code class="language-bash">├── weblog-springboot 后端项目
│   ├── weblog-module-admin 博客后台管理模块
│   ├── weblog-module-common 通用模块
│   ├── weblog-module-jwt JWT 认证、授权模块
│   └── weblog-web 博客前台（启动入口）
├── weblog-vue3 前端项目
└── sql 数据库初始化脚本（包括表结构以及相关初始化数据）
</code></pre>
4、创建数据库 <code>weblog</code>
<pre><code class="language-bash">CREATE DATABASE `weblog` DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;
</code></pre>
5、在数据库 <code>weblog</code> 中执行初始化 <code>/sql</code> 目录下的 <code>schema.sql</code>（先）、<code>data.sql</code>（后）脚本文件
<h3 id="启动后端">启动后端</h3>
1、将 <code>weblog-springboot</code> 整个目录以 Maven 工程的形式导入到 IDEA 中
2、修改配置文件 <code>weblog-springboot/weblog-web/src/main/resources/application-dev.yaml</code> 中的数据库地址、用户名、密码配置信息
<pre><code class="language-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
</code></pre>
3、修改配置文件 <code>weblog-springboot/weblog-web/src/main/resources/application.yaml</code> 中的 Minio 配置信息（用于图片存储）
<pre><code class="language-yaml">#=================================================================
# minio (上传图片需要，需配置成自己的地址)
#=================================================================
minio:
endpoint: https://img.xxx.com
accessKey: xxx
secretKey: xxx
bucketName: xxx
</code></pre>
4、运行主启动类 <code>com.quanxiaoha.weblog.web.WeblogWebApplication</code> 启动服务
<h3 id="启动前端">启动前端</h3>
1、进入前端目录
<pre><code class="language-bash">cd weblog-vue3
</code></pre>
2、安装依赖
<pre><code class="language-bash">npm install
</code></pre>
3、启动服务
<pre><code class="language-bash">npm run dev
</code></pre>
4、浏览器访问
<pre><code class="language-bash">http://localhost:5173
</code></pre>
<ul>
<li>管理员登录账号/密码: <code>admin/admin</code></li>
<li>游客登录账号/密码: <code>test/test</code></li>
</ul>
<pre><code>项目地址：https://github.com/weiwosuoai/WeBlog
</code></pre>
<h2 id="最后">最后</h2>
推荐的开源项目已经收录到 <code>GitHub</code> 项目，欢迎 <code>Star</code>：
<pre><code>https://github.com/chenyl8848/great-open-source-project
</code></pre>
或者访问网站，进行在线浏览：
<pre><code>https://chencoding.top:8090/#/
</code></pre>
<img src="https://chen-coding.oss-cn-shenzhen.aliyuncs.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20240629100336.png">
我创建了一个开源项目交流群，方便大家在群里交流、讨论开源项目。
但是任何人在群里打任何广告，都会被 T 掉。
如果你对这个交流群感兴趣或者在使用开源项目中遇到问题，可以通过如下方式进群：
关注微信公众号：【Java陈序员】，回复【开源项目交流群】进群，或者通过公众号下方的菜单添加个人微信，并备注【开源项目交流群】，通过后拉你进群。
<blockquote>
大家的点赞、收藏和评论都是对作者的支持，如文章对你有帮助还请点赞转发支持下，谢谢！
</blockquote>
<hr> 
来源：https://www.cnblogs.com/codechen8848/p/18894897

頁: [1]

琼殿技术论坛's Archiver

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