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

最新推荐文章于 2024-07-24 14:58:19 发布

Java程序员-张凯

最新推荐文章于 2024-07-24 14:58:19 发布

阅读量4.3k

点赞数 9

文章标签： vue.js 前端 javascript spring boot java

本文链接：https://blog.csdn.net/qq_41701956/article/details/127583434

版权

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

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

一、主要功能

1、前端

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

2、后端

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

二、基本环境

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、后端启动步骤

创建数据库
导入项目
配置yaml
启动成功

温馨提示：

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