基于Springboot + Vue3 开发的前后端分离博客

Knight1357
May 12, 2024 Blog, Project

Personal-Blog-Vue 基于 Springboot + Vue 的个人博客

在线地址

测试账号： test@qq.com，密码：123456

本地运行

  1. MySQL版本为8.0.27，npm版本为9.4.0，node版本为v16.18.0
  2. SQL 文件位于根目录下的blog.sql，将其中的数据导入到自己本地数据库中
  3. ES 映射文件位于deploy文件夹下
  4. 修改后端配置文件中的数据库等连接信息，项目中使用到的关于阿里云、腾讯云功能和第三方授权登录等需要自行开通
  5. 一定要将前端shoka-admin和shoka-blog的 utils 下的 token.ts 中的{ domain: domain }给删除，然后再npm install、npm run dev
  6. 项目启动后，使用admin@qq.com管理员账号登录后台，密码为123456

项目特点

  • 前台界面参考 Hexo 的 Shoka 和 Butterfly 设计，页面美观，响应式布局
  • 后台管理基于若依二次开发，含有侧边栏，历史标签，面包屑等
  • 前后端分离，Docker Compose 一键部署
  • 采用 RABC 权限模型，使用 Sa-Token 进行权限管理
  • 支持动态权限修改、动态菜单和路由
  • 说说、友链、相册、留言弹幕墙、音乐播放器、聊天室
  • 支持代码高亮、图片预览、黑夜模式、点赞、取消点赞等功能
  • 发布评论、回复评论、表情包
  • 发送 HTML 邮件评论回复提醒，内容详细
  • 接入第三方登录，减少注册成本
  • 文章搜索支持关键字高亮分词
  • 文章编辑使用 Markdown 编辑器
  • 含有最新评论、文章目录、文章推荐和文章置顶功能
  • 实现日志管理、定时任务管理、在线用户和下线用户
  • 代码支持多种搜索模式（Elasticsearch 或 MYSQL），支持多种文件上传模式（OSS、COS、本地）
  • 采用 Restful 风格的 API，注释完善，代码遵循阿里巴巴开发规范，有利于开发者学习

技术介绍

前端： Vue3 + Pinia + Vue Router + TypeScript + Axios + Element Plus + Naive UI + Echarts + Swiper

后端： SpringBoot + Mysql + Redis + Quartz + Thymeleaf + Nginx + Docker + Sa-Token + Swagger2 + MyBatisPlus + ElasticSearch + RabbitMQ + Canal

运行环境

  • Ubuntu 20.04

开发环境

开发工具说明
IDEAJava 开发工具 IDE
VSCodeVue 开发工具 IDE
NavicatMySQL 远程连接工具
Redis Desktop ManagerRedis 远程连接工具
XshellLinux 远程连接工具
XftpLinux 文件上传工具
开发环境版本
OpenJDK11
MySQL8.0.27
Redis6.2.6
Elasticsearch7.17.3
RabbitMQ3.9.11

项目总结

整个项目花费了大量的心血，开发过程中参考了很多优秀的开源项目，在这里感谢大家的开源项目，收获了很多，希望我的项目能给你带来收获。

鸣谢项目：

Springboot Vue Blog