基于SpringBoot + vue3的前后端分离博客

在线体验 | 技术介绍 | 项目特点 | 目录结构 | 运行环境 | 开发环境 | 项目截图 | 部署教程 | 开发总结 | 待开发功能

在线体验

首页链接： https://codeape.cn

后台链接： https://admin.codeape.cn

测试账号：test@qq.com

测试密码：test123

可登录后台查看。

技术介绍

后端

• SpringBoot
• SpringSecurity
• Redis
• RabbitMQ
• Mariadb
• MybatisPlus
• JWT
• sensitive-word
• anji-plus
• knife4j（Swagger3）
• WebSocket

前端

前台

• vue3
• vue-router
• pinia
• vite
• axios
• windicss
• md-editor-v3
• icon-park/vue-next
• @kyvg/vue3-notification
• sockjs-client

后台

• vue3
• vue-router
• pinia
• vite
• axios
• naive-ui
• windicss
• echarts
• md-editor-v3
• @icon-park/vue-next

其他

• 第三方QQ登录

部署

• Docker
• nginx

开发工具

IDEA、WebStorm、HeidiSQL、RDM、XShell、Xftp

项目特点

• 前台采用的是拟态风格，支持黑白主题切换。
• 后台用的是Naive UI，有暗黑及亮白两种主题，支持全局设置修改界面样式。
• 文章编辑采用Markdown，语法简洁。
• 评论加入了动态表情包，体验更加有趣。
• 图片懒加载显示，避免网路不畅导致图片加载时空白。
• 留言采用贴纸效果，可选择留言主题。
• 前后端分离部署。
• 用户申请友链，后台可控，用户可修改。
• 动态修改文章预览样式。
• 支持QQ登录和邮箱绑定，绑定后可互相登录。
• 支持发表说说，分享日常生活。
• 采用JWT进行用户授权，降低服务器查询数据库的次数。
• 支持搜索结果高亮。
• 上传图片（oss或本地）。
• 基于RBAC模型，动态修改用户权限，根据权限限制操作。
• AOP注解实现日志管理。
• 后台可修改轮播背景图片，博客配置等信息。
• 后端多模块设计，方便后期升级维护。
• 日志拆分记录，快速定位问题。
• 支持https配置
• 即时聊天室

目录结构

├─blog-api  # 接口模块，对外提供接口
│  └─src
│      ├─main
│      │  ├─java
│      │  │  └─cn
│      │  │      └─apecode
│      │  │          ├─aspect      # AOP
│      │  │          └─controller  # 控制层
├─blog-auth  # 登录认证模块
│  └─src
│      └─main
│          ├─java
│          │  └─cn
│          │      └─apecode
│          │          └─auth
│          │              ├─filter   # 过滤器
│          │              └─handler  # 处理器
├─blog-common  # 公共模块
│  └─src
│      └─main
│          ├─java
│          │  └─cn
│          │      └─apecode
│          │          └─common
│          │              ├─annotation   # 自定义注解
│          │              ├─constant     # 常量
│          │              ├─enums        # 枚举
│          │              ├─exception    # 自定义全局异常
│          │              └─utils        # 工具类
├─blog-config  # 配置模块
│  └─src
│      └─main
│          ├─java
│          │  └─cn
│          │      └─apecode
│          │          ├─config    # 配置类
│          │          └─handler   # 处理器
│          └─resources
│              └─META-INF
│                  └─services
├─blog-mail  # 邮件模块
│  └─src
│      └─main
│          ├─java
│          │  └─cn
│          │      └─apecode
│          │          └─mail
│          │              └─consumer    # MQ消费模块
├─blog-pojo  # 实体模块
│  └─src
│      └─main
│          ├─java
│          │  └─cn
│          │      └─apecode
│          │          ├─dto       # DTO
│          │          ├─entity    # 实体类
│          │          └─vo        # VO
└─blog-service  # 服务模块
│   └─src
│        └─main
│            ├─java
│            │  └─cn
│            │      └─apecode
│            │          ├─dto         # DTO
│            │          ├─handler     # 处理器
│            │          ├─mapper      # mapper
│            │          ├─schedule    # 定时
│            │          ├─service     # 服务层
│            │          │  └─impl     # 服务层实现类
│            │          ├─strategy    # 策略模式（登录、上传）
│            │          └─utils       # 工具类
│            └─resources
│                └─mapper             # CURD
└─blog-websocket
    └─src
        └─main
            ├─java
            │  └─cn
            │      └─apecode
            │          └─websocket
            │              ├─config
            │              ├─controller
            │              ├─enums
            │              ├─handler
            │              ├─pojo
            │              ├─service
            │              │  └─impl
            │              └─utils
            └─resources

运行环境

名称	说明
服务器	腾讯云2核4G
CDN	阿里云全站加速
对象存储	阿里oss

开发环境

开发环境	版本
JDK	1.8
Mariadb	10.6.8
Redis	6.2.7
RabbitMQ	3.9.18

项目截图

部署教程

博客部署教程：https://codeape.cn/article/da02991d5130234a

开发总结

此项目开发时间约半年，因为是边学边写，还要上课，过程中也学习了很多大佬的开发思路及方法，用的都是比较新的技术点。

待开发功能

• 音乐播放器

• 右键菜单功能