基于 Vue 和 SpringBoot 实现的博客系统（附源码）

今天给大家分享一个基于 Vue 和 SpringBoot 实现的博客系统！

源码在文章结尾处，大家自行下载即可，我设置的免积分下载！

一、主要功能

1、前端

1. 后台管理系统采用Vue开发。
2. 文章模块，支持文章内容、分类、标签对文章进行快速搜索，并且文本编辑支持Markdown。
3. 首页模块，支持侧边栏模块、最新文章以及最热文章展示。
4. 悠闲娱乐模块，支持听歌、相册等。
5. 在线算法模块，可进行在线刷题以及题型分享功能等。
6. 评论模块，所有文章都可进行评论，以及评论的邮件提醒。
7. 实现留言板和友链展示，以及图库(给爱摄影的小伙伴们)。
8. 集成了动态诗歌，生活不能没有诗意。
9. 还有...

2、后端

1. 后端是采用Spring boot实现。
2. 拥有 Restful 风格的 Api，并且后台接口采用优美代码写法。
3. 拥有图床功能，并且实现获取随机图片(当你在编写文章忘记赋予图片时,会给你温馨的添上)。
4. 拥有发送QQ邮箱功能，给你的爱人每天定时发送彩虹屁哈哈哈。
5. 拥有获取随机诗词功能，生活不能没有诗意。
6. 拥有评论功能，当然后端功能是实现的哦，不过我最终改为了插件～
7. 集成QQ登录以及支付宝支付功能，不过感觉后来用不上，代码就留在那了。
8. 支持Redis缓存(基于注解实现，代码值得一看哈，说不定就因此涨薪了)。
9. 还有...

二、基本环境

windows环境需求

后端

JDK = 1.8
MySQL >= 5.7
Maven >= 3.0
Redis >= 6.0
IntelliJ IDEA
Xshell
MySQL图形化操作工具

前端

Node.js
VsCode 前端工具
VUE

温馨提示: 该前端选项是可选，若不整合vue，可直接跳过前端(基于vue的后台管理系统，是我以前玩的出勤异常项目，目前还未完全替换本项目的后台管理，主要是本项目的后台太丑了! 我也不知道当时大一的我是怎么想的)

必选，后台已经完美整合vue~

• JDK = 1.8

  在官方网站上下载1.8版本中的最新版，下载完成后安装即可。

  下载地址：Java Downloads | Oracle

  #环境变量配置(现在默认会自动配置好)
  略
  
  #打开CMD命令行工具，检查是否配置成功
  java -version
  

• Maven >= 3.0

  从Maven官方网站上下载最新版的压缩包。

  下载地址：Maven – Download Apache Maven

  #环境变量配置
  略
  
  #打开CMD命令行工具，检查是否配置成功
  mvn -v
  

• Mysql >= 5.7(最新版即可)

  安装教程：MySQL 安装 | 菜鸟教程

  下载地址：MySQL :: Download MySQL Community Server

  访问Mysql的可视化数据库开发工具： Navicat Premium 工具的安装教程可自行百度搜索。

• Redis

  下载地址：Download | Redis

  安装教程：解压，配置(密码，默认无密码)

  #快捷启动命令.bat
  redis-server.exe redis.windows.conf
  pause

• IntelliJ IDEA

  安装教程：最新IntelliJ IDEA2022.1详细安装与配置使用教程(亲测有效,持续更新)_MY小炜的博客-CSDN博客_idea最新版安装与配置详解

• Xshell

  安装教程：Xshell7、Xftp7、Xlpd7-下载与安装教程(亲测可用)_MY小炜的博客-CSDN博客_xftp7安装包

• VSCode

  下载地址：Visual Studio Code - Code Editing. Redefined

• Node.js

  安装教程：Node.js 安装配置 | 菜鸟教程

三、运行

1、后端启动步骤

1. 创建数据库
2. 导入项目
3. 配置yaml
4. 启动成功

温馨提示：

1.sql文件已提供，只需执行即可。myblog.sql

2.将项目导入idea(本项目使用的工具是idea，如果你用的ecplise一样可以使用，毕竟百度无所不能)

3.启动之前记得修改连接数据库的配置

4.若控制台打印出访问路径，即OK

2、前端启动步骤（可选）

#打开windows命令行窗口，进入项目目录
cd 路径/topicUI

#强烈建议不要用直接使用 cnpm 安装，会有各种诡异的 bug，可以通过重新指定 registry 来解决 npm 安装速度慢的问题。
npm install --registry=https://registry.npm.taobao.org

#启动项目
npm run dev

打开浏览器，输入：http://localhost:81

若能正确展示登录页面，并能成功登录，菜单及页面展示正常，则表明项目启动成功

四、服务器部署

Linux部署肯定是先基于win操作的前提下获取jar以及dist，再进行操作的，若没有云服务器，here-下载VMware

1、Linux环境需求

docker
docker-compose
nginx

• docker

  安装教程：Docker入门实战看这篇就够了(最新详细以及踩过的坑)_MY小炜的博客-CSDN博客_docker入门与实战

• nginx

  下载地址：Index of /download/

2、部署步骤

1.分别将前后端项目打包(jar、dist)

2.将dist丢到nginx里，并配置nginx

3.修改Dockerfile以及docker-compose.yml文件（文件已提供）

4.执行docker build -t myblog:1.0 .

5.docker images 查看镜像是否生成

6.docker-compose up (查看是否启动成功，成功后可后台启动 -d)

7.查看并登录

五、源码下载

源码下载链接：https://download.csdn.net/download/qq_41701956/86843548

基于Vue和SpringBoot的博客系统源码.zip-Java文档类资源-CSDN下载基于vue和SpringBoot的博客系统，不仅仅是一个文章分享项目，还有听歌、相册、烟花模拟器、动更多下载资源、学习资料请访问CSDN下载频道.https://download.csdn.net/download/qq_41701956/86843548