一款基于 Vue + SpringBoot 前后端分离的开源博客系统！
shiyi-blog —— 拾壹博客，一款基于 Vue + SpringBoot 前后端分离的博客系统，文件支持本地和七牛云存储，集成 QQ、微信等第三方登录，并实现即时通讯聊天室功能。
大家好，我是 Java陈序员。
今天，给大家介绍一款基于 Vue + SpringBoot 前后端分离的开源博客系统！
关注微信公众号：【Java陈序员】，获取开源项目分享、AI副业分享、超200本经典计算机电子书籍等。
项目介绍
shiyi-blog —— 拾壹博客，一款基于 Vue + SpringBoot 前后端分离的博客系统，文件支持本地和七牛云存储，集成 QQ、微信等第三方登录，并实现即时通讯聊天室功能。
功能特色：
- 前后端分离模式开发，使用最新的前后端开发技术实现
- 采用 Markdown 编辑器，支持代码高亮和复制、图片预览、深色模式等功能
- 文章支持审核、评论、点赞、留言等功能
- 接入第三方登录，支持 QQ、微信、微博、Github、Gitee 登录
- 提供后台管理、PC Web 端和 Uniapp 移动端
- 后台管理提供强大的配置功能，网站信息、友情链接、评论打赏、公告等支持个性化配置
- 使用 Netty + Websocket 技术实现博客群聊和单聊功能
技术栈：
- 前端：Vue3.0 + Element-Plus
- 后端：SpringBoot + Sa-Token + MyBatisPlus + MySQL + Redis + ElasticSearch
- 其他：接入 QQ、微博、码云、微信公众号等第三方登录，接入七牛云对象存储
功能截图
后台管理
- 首页
- 文章管理
- 标签管理
- 分类管理
- 网站设置
- 评论管理
- 留言管理
PC 客户端
- 登录
- 首页
- 文章详情
-
文章评论
-
留言板
- 个人中心
- 消息中心
- 聊天室
移动端
- 首页
- 文章
- 消息
- 个人中心
本地开发
环境准备
1、开发环境
- Node.js
- JDK 1.8
- MySQL
- Redis
- Elasticsearch(可选)
2、克隆代码
git clone https://gitee.com/quequnlong/shiyi-blog.git
3、目录结构
shiyi-blog
├──blog -- 后台服务
│ ├── shiyi-admin -- 后台管理系统的controller模块
│ ├── shiyi-common -- 通用模块
│ ├── shiyi-generate -- 代码生成模块
│ ├── shiyi-quartz -- 定时任务模块
│ ├── shiyi-server -- 博客启动类模块
│ └── shiyi-web -- 门户接口模块
├──blog-admin -- 后台管理
├──blog-web -- PC 客户端
└──uniapp-blog -- Uniapp 移动端
服务端
1、将整个项目以 Maven 工程的形式导入到 IDEA 中
2、创建数据库 blog
CREATE DATABASE `blog` DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_bin;
3、在数据库 blog 中执行 shiyi-blog/blog.sql 脚本，初始化数据库数据
4、修改 shiyi-blog/blog/shiyi-common/src/main/resources/application.yml 配置文件中的 MySQL、Redis、ElasticSearch(可选，默认不启用)的连接信息
5、运行主启动类 shiyi-blog/blog/shiyi-server/src/main/java/com/shiyi/Application.java 启动服务
6、服务启动成功后，浏览器访问如下地址查阅 API 文档
http://localhost:8800/shiyi/doc.html
API 文档访问的默认用户名密码：admin/queql.
后台管理端
## 进入后台管理
cd blog-admin
## 安装依赖
pnpm install
## 运行服务
pnpm run dev
## 浏览器访问
http://localhost:3000
注意：默认后台的登录用户名密码：admin/123456.
如用户名密码错误，可通过后台服务 AesEncryptUtil 类中的主函数重新生成密码，并更新到数据表 b_user 表中的用户密码。
public class AesEncryptUtil {
final static String key = "shiyi2022";
/**
* 校验内容是否一致
*/
public static boolean validate(String target, String target1) {
return target.equalsIgnoreCase(aesEncrypt(target1));
}
/**
* AES加密
*
* @param password：密码
* @return
*/
public static String aesEncrypt(String password){
return SaSecureUtil.aesEncrypt(key, password);
}
public static void main(String[] args) {
System.out.println(aesEncrypt("123456"));
}
}
PC 客户端
## 进入 PC 客户端
cd blog-web
## 安装依赖
pnpm install
## 运行服务
pnpm run dev
## 浏览器访问
http://localhost:8000
移动端
1、将 uniapp-blog 目录导入到 HBuilderX 中
2、修改 request.js 中的后台服务地址
export default function request(options) {
//后端接口地址
const baseUrl = 'http://localhost:8800/shiyi';
}
3、点击 HBuilderX 顶部菜单栏中的运行
shiyi-blog 作为一款开源的博客系统，可以说功能齐全，采用最新的开发模式和技术栈完整地实现了一套博客系统，是一个十分优秀的开源博客系统！
项目地址：https://gitee.com/quequnlong/shiyi-blog
最后
推荐的开源项目已经收录到 GitHub 项目，欢迎 Star：
https://github.com/chenyl8848/great-open-source-project
或者访问网站，进行在线浏览：
https://chencoding.top:8090/#/
大家的点赞、收藏和评论都是对作者的支持，如文章对你有帮助还请点赞转发支持下，谢谢！
