一款基于 Vue + SpringBoot 前后端分离的开源博客系统！

大家好，我是 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/#/

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