基于SpringBoot + Vue 开发的前后端分离博客（附源码）

分手后的思念是犯贱 2023-09-27 09:26 135阅读 0赞

## 一、项目简介 ##

基于SpringBoot + Vue 开发的前后端分离博客，采用SpringSecurity进行权限管理，ElasticSearch全文搜索，支持QQ、微博第三方登录、在线聊天、发布说说等功能。

## 二、在线地址 ##

**项目链接：** [www.talkxj.com][]

**后台链接：** [admin.talkxj.com][]

测试账号：[test@qq.com][test_qq.com]，密码：1234567，可登入后台查看。

**在线接口文档地址：** [https://www.talkxj.com/api/doc.html][https_www.talkxj.com_api_doc.html]

### 三、源码文件目录结构 ###

> 源码下载链接: [https://pan.baidu.com/s/1zBMFcfXB4aIv5wOr6xrujQ?pwd=k2th][https_pan.baidu.com_s_1zBMFcfXB4aIv5wOr6xrujQ_pwd_k2th]
> 
> 提取码: **k2th**

![fab56356ac584f5ab9e222ec46a043b4.png][]

前端项目位于blog-vue下，blog为前台，admin为后台。

后端项目位于blog-springboot下。

SQL文件位于根目录下的blog-mysql8.sql，需要MYSQL8以上版本。

可直接导入该项目于本地，修改后端配置文件中的数据库等连接信息，项目中使用到的关于阿里云功能和第三方授权登录等需要自行开通。

当你克隆项目到本地后可使用邮箱账号：[admin@qq.com][admin_qq.com]，密码：1234567 进行登录，也可自行注册账号并将其修改为admin角色。

本地访问接口文档地址：[http://127.0.0.1:8080/doc.html][http_127.0.0.1_8080_doc.html]

**ps：请先运行后端项目，再启动前端项目，前端项目配置由后端动态加载。**

blog-springboot
    ├── annotation    --  自定义注解
    ├── aspect        --  aop模块
    ├── config        --  配置模块
    ├── constant      --  常量模块
    ├── consumer      --  MQ消费者模块
    ├── controller    --  控制器模块
    ├── dao           --  框架核心模块
    ├── dto           --  dto模块
    ├── enums         --  枚举模块
    ├── exception     --  自定义异常模块
    ├── handler       --  处理器模块（扩展Security过滤器，自定义Security提示信息等）
    ├── service       --  服务模块
    ├── strategy      --  策略模块（用于扩展第三方登录，搜索模式，上传文件模式等策略）
    ├── util          --  工具类模块
    └── vo            --  vo模块

## 四、项目特点 ##

*  前台参考"Hexo"的"Butterfly"设计，美观简洁，响应式体验好。
 *  后台参考"element-admin"设计，侧边栏，历史标签，面包屑自动生成。
 *  采用Markdown编辑器，写法简单。
 *  评论支持表情输入回复等，样式参考Valine。
 *  添加音乐播放器，支持在线搜索歌曲。
 *  前后端分离部署，适应当前潮流。
 *  接入第三方登录，减少注册成本。
 *  支持发布说说，随时分享趣事。
 *  留言采用弹幕墙，更加炫酷。
 *  支持代码高亮和复制，图片预览，深色模式等功能，提升用户体验。
 *  搜索文章支持高亮分词，响应速度快。
 *  新增文章目录、推荐文章等功能，优化用户体验。
 *  新增在线聊天室，支持撤回、语音输入、统计未读数量等功能。
 *  新增aop注解实现日志管理。
 *  支持动态权限修改，采用RBAC模型，前端菜单和后台权限实时更新。
 *  后台管理支持修改背景图片，博客配置等信息，操作简单，支持上传相册。
 *  代码支持多种搜索模式（Elasticsearch或MYSQL），支持多种上传模式（OSS或本地），可支持配置。
 *  代码遵循阿里巴巴开发规范，利于开发者学习。

## 五、技术介绍 ##

**前端：** vue + vuex + vue-router + axios + vuetify + element + echarts

**后端：** SpringBoot + nginx + docker + SpringSecurity + Swagger2 + MyBatisPlus + Mysql + Redis + elasticsearch + RabbitMQ + MaxWell + Websocket

**其他：** 接入QQ，微博第三方登录，接入腾讯云人机验证、websocket

## 六、运行环境 ##

**服务器：** 腾讯云2核4G CentOS7.6

**CDN：** 阿里云全站加速

**对象存储：** 阿里云OSS

这套搭配响应速度非常快，可以做到响应100ms以下。

**最低配置：** 1核2G服务器（关闭ElasticSearch）

## 七、开发环境 ##

<table> 
 <thead> 
  <tr> 
   <th>开发工具</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>IDEA</td> 
   <td>Java开发工具IDE</td> 
  </tr> 
  <tr> 
   <td>VSCode</td> 
   <td>Vue开发工具IDE</td> 
  </tr> 
  <tr> 
   <td>Navicat</td> 
   <td>MySQL远程连接工具</td> 
  </tr> 
  <tr> 
   <td>Another Redis Desktop Manager</td> 
   <td>Redis远程连接工具</td> 
  </tr> 
  <tr> 
   <td>X-shell</td> 
   <td>Linux远程连接工具</td> 
  </tr> 
  <tr> 
   <td>Xftp</td> 
   <td>Linux文件上传工具</td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <thead> 
  <tr> 
   <th>开发环境</th> 
   <th>版本</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>JDK</td> 
   <td>1.8</td> 
  </tr> 
  <tr> 
   <td>MySQL</td> 
   <td>8.0.20</td> 
  </tr> 
  <tr> 
   <td>Redis</td> 
   <td>6.0.5</td> 
  </tr> 
  <tr> 
   <td>Elasticsearch</td> 
   <td>7.9.2</td> 
  </tr> 
  <tr> 
   <td>RabbitMQ</td> 
   <td>3.8.5</td> 
  </tr> 
 </tbody> 
</table>

## 八、项目截图 ##

![e4715a8ff0bc4e06bc8af97c8b2a2521.png][]

![45a8cfc415f546c3adcdba1c0aefea99.jpeg][]

![0eb01b642c2d4f959847e0c482124890.png][]

## ![a43b0e4dc73d4fdfa40dd7ad1961aa9b.png][] ##

## 九、快速开始 ##

#### 项目环境安装 ####

详见文章[Docker安装运行环境][Docker]

#### 项目配置 ####

详见文章[项目配置教程][Link 1]

#### Docker部署项目 ####

详见文章[项目部署教程][Link 2]

## 十、注意事项 ##

*  项目拉下来运行后，可到后台管理页面网站配置处修改博客相关信息.
 *  邮箱配置，第三方授权配置需要自己申请。
 *  ElasticSearch需要自己先创建索引，项目运行环境教程中有介绍。

##  ##

[www.talkxj.com]: https://www.talkxj.com/
[admin.talkxj.com]: https://admin.talkxj.com/
[test_qq.com]: mailto:test@qq.com
[https_www.talkxj.com_api_doc.html]: https://www.talkxj.com/api/doc.html
[https_pan.baidu.com_s_1zBMFcfXB4aIv5wOr6xrujQ_pwd_k2th]: https://pan.baidu.com/s/1zBMFcfXB4aIv5wOr6xrujQ?pwd=k2th
[fab56356ac584f5ab9e222ec46a043b4.png]: https://img-blog.csdnimg.cn/fab56356ac584f5ab9e222ec46a043b4.png
[admin_qq.com]: mailto:admin@qq.com
[http_127.0.0.1_8080_doc.html]: http://127.0.0.1:8080/doc.html
[e4715a8ff0bc4e06bc8af97c8b2a2521.png]: https://img-blog.csdnimg.cn/e4715a8ff0bc4e06bc8af97c8b2a2521.png
[45a8cfc415f546c3adcdba1c0aefea99.jpeg]: https://img-blog.csdnimg.cn/45a8cfc415f546c3adcdba1c0aefea99.jpeg
[0eb01b642c2d4f959847e0c482124890.png]: https://img-blog.csdnimg.cn/0eb01b642c2d4f959847e0c482124890.png
[a43b0e4dc73d4fdfa40dd7ad1961aa9b.png]: https://img-blog.csdnimg.cn/a43b0e4dc73d4fdfa40dd7ad1961aa9b.png
[Docker]: https://www.talkxj.com/articles/2
[Link 1]: https://www.talkxj.com/articles/3
[Link 2]: https://www.talkxj.com/articles/13