ToB企服应用市场:ToB评测及商务社交产业平台

标题: 一款基于 Vue + SpringBoot 前后端分离的开源博客体系！ [打印本页]

---

作者: 星球的眼睛    时间: 2024-12-23 08:16
标题: 一款基于 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、克隆代码

1. git clone https://gitee.com/quequnlong/shiyi-blog.git

复制代码

3、目次结构

1. shiyi-blog
2. ├──blog                 -- 后台服务
3. │  ├── shiyi-admin         --  后台管理系统的controller模块
4. │  ├── shiyi-common        --  通用模块
5. │  ├── shiyi-generate      --  代码生成模块
6. │  ├── shiyi-quartz        --  定时任务模块
7. │  ├── shiyi-server        --  博客启动类模块
8. │  └── shiyi-web           --  门户接口模块
9. ├──blog-admin          -- 后台管理
10. ├──blog-web            -- PC 客户端
11. └──uniapp-blog         -- Uniapp 移动端

复制代码

服务端

1、将整个项目以 Maven 工程的形式导入到 IDEA 中
2、创建数据库 blog

1. 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 文档

1. http://localhost:8800/shiyi/doc.html

复制代码

API 文档访问的默认用户名暗码：admin/queql.
后台管理端

1. ## 进入后台管理
2. cd blog-admin
4. ## 安装依赖
5. pnpm install
7. ## 运行服务
8. pnpm run dev
10. ## 浏览器访问
11. http://localhost:3000

复制代码

留意：默认后台的登录用户名暗码：admin/123456.
如用户名暗码错误，可通过后台服务 AesEncryptUtil 类中的主函数重新天生暗码，并更新到数据表 b_user 表中的用户暗码。

1. public class AesEncryptUtil {
3.     final static String key = "shiyi2022";
4.     /**
5.      * 校验内容是否一致
6.      */
7.     public static boolean validate(String target, String target1) {
8.         return target.equalsIgnoreCase(aesEncrypt(target1));
9.     }
11.     /**
12.      * AES加密
13.      *
14.      * @param password：密码
15.      * @return
16.      */
17.     public static String aesEncrypt(String password){
18.         return SaSecureUtil.aesEncrypt(key, password);
19.     }
21.     public static void main(String[] args) {
22.         System.out.println(aesEncrypt("123456"));
23.     }
24. }

复制代码

PC 客户端

1. ## 进入 PC 客户端
2. cd blog-web
4. ## 安装依赖
5. pnpm install
7. ## 运行服务
8. pnpm run dev
10. ## 浏览器访问
11. http://localhost:8000

复制代码

移动端

1、将 uniapp-blog 目次导入到 HBuilderX 中
2、修改 request.js 中的后台服务地点

1. export default function request(options) {
2.         //后端接口地址
3.         const baseUrl = 'http://localhost:8800/shiyi';
4. }

复制代码

3、点击 HBuilderX 顶部菜单栏中的运行
shiyi-blog 作为一款开源的博客体系，可以说功能齐全，采用最新的开发模式和技术栈完备地实现了一套博客体系，是一个十分优秀的开源博客体系！

1. 项目地址：https://gitee.com/quequnlong/shiyi-blog

复制代码

最后

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

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

复制代码

大概访问网站，举行在线欣赏：

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

复制代码

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

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)

Powered by Discuz! X3.4