项目介绍

基于 SpringBoot2.7 和 Vue2.5 的一个博客系统，除此之外还使用了jwt、redis、rabbitmq等技术。博客为博主提供了需要的常见功能，包括文章发布、浏览、评论、以及对评论追评等功能，是一个比较完善的博客前台系统。

博客界面简单美观，页面样式可见下方界面展示部分。

技术选型

前端技术栈

• Vue：页面视图渲染。
• VueRouter：页面路由。
• Vuex：状态管理。
• Axios：Http请求处理。
• element-ui：页面模板。

后端技术栈

• SpringBoot：后端项目脚手架
• Maven：依赖管理
• SSM (Spring + SpringMvc + MybatisPlus)：
• Jwt：分布式信息认证(token)
• 七牛云服务：文件上传
• Alibaba Druid：MySQL数据源

其他

• Redis：缓存中间件
• Rabbitmq：异步解耦
• MySQL：关系型数据库

项目搭建

构建前后端的前提需要您的本地有以下的环境：

• jdk 8
• node 16.3.0
• maven 3.8.4
• mysql 8
• redis 7.0
• rabbitmq 3.10.1
• idea 2021(推荐)

以上是搭建本项目所需要的环境以及版本，除了jdk必须要8以上外，其他的版本未必必须要一致，但是如果出现项目搭建出现问题，可以考虑一下是否为版本问题。idea是我使用的集成环境，如果有其他集成环境也可以，不过下面根据 idea 进行搭建的演示，所以也推荐使用 idea。

前端项目搭建

获取到源码之后，终端 /web-ui/blog-app 目录，依次运行下方命令，即可启动项目：

$ npm install
$ npm run dev

如果成功启动，那么控制台应该会输出如下内容：

Your application is running here: http://localhost:8050

我们访问上面的地址就可以看到前端的效果，但是我们现在后端没有搭建，所以无法获取到任何数据。

后端项目搭建

推荐使用 idea 打开后端项目，idea 能更加智能的帮助你解决一些构建问题，下面也以 idea 作为演示。

第一步：下载依赖

在 idea 中打开 /web-server/blog-parent 目录，打开后应该类似于如下的界面，我们点击如图位置下载依赖。

如果本地 maven 配置没问题，应该能正常下载依赖，控制台显示 BUILD SUCCESS 表示下载成功。

第二步：创建数据库

在 /sql 目录中，有本项目中使用的所有数据表的 SQL 文件，在您的 MySQL 中执行该文件中的所有 SQL 语句，即可创建对应的数据库，创建好后应该有如下数据表。

第三步：redis配置

其实 redis 没有什么要配置的，你只要确保你的主机可以访问到 redis 即可，如果无法访问 redis，可以检查redis的配置文件中 protected-mode 是否设置为 no ，并且注释 bind 行，运行所有主机可以访问，只要确保你的主机能够访问 redis 即可。

第四步：rabbitmq 中创建项目使用的 vhost

这一步是可选的，将配置文件中的 rabbitmq 修改之后，如果您本地有合适的 vhost，可以更改成对应的 vhost，或者使用下面步骤，创建对应的 vhost 使用

$ rabbitmqctl add_vhost /blog
$ rabbitmqctl set_permissions -p "/blog" guest ".*" ".*" ".*"

第六步：搭建七牛云存储空间

首先注册七牛云的账号，就不进行演示了，然后点击如图所示的对象存储 Kodo中。

选择新建空间

输入对应的空间信息后，点击确认，完成空间的创建

创建好之后，我们还需要绑定域名，当然，七牛云为我们提供了30天使用的测试域名，如果大家只是为了学习使用，30天可能已经足够了，如果需要更久可以自行去购买域名并绑定域名即可。

当然，这个时候这个空间外界还不能访问，所以为了博客项目能够正常使用，我们需要修改为公开空间。

修改完成后，我们点击文件管理部分，可以尝试上传一个图片，如果上传的图片外界可以访问，说明搭建成功。

但是为了我们程序能够上传文件，我们还需要创建密钥，点击如图密钥管理部分

进入之后，如果你没有密钥则创建一个密钥，并且请记录这个密钥，在后面步骤中会使用到

第五步：编辑配置文件

在 blog-api 模块的 resouces 目录中，应该有对应的配置文件，我们需要修改 application-dev.yml 中的：

• MySQL 地址
• Redis 地址
• RabbitMQ 的地址，如果 vhost 和上面的不同，还需要修改 vhost 和用户名密码。
• 七牛云地址、密钥等

第六步：启动后端项目

确保以上内容都没有问题后，就可以启动项目了，启动类位于 blog-api 模块下的 BlogApplication 类中，右键点击 main 方法选择 Run 即可。

如果一切顺利，那么项目应该可以正常启动，将会监听本机的8181端口。

这时回到前端项目中，应该可以正常获取到数据了。

项目结构

此处仅介绍前后端的项目结构，对于具体的代码并不进行剖析，有兴趣的可以在查看对应的模块代码，基本上都有较详细的注释。

前端项目结构

前端项目中主要针对 src 目录下的结构进行讲解：

• api ：对应后端的 api 接口，都是一些异步方法，通过调用 axios 异步向后端发起请求。
• assets ：一些前端需要用到的资源，比如图标、css样式等。
• components ：前端项目的组件库。
• request ：对 axios 和 token 的一些配置。
• router ：页面路由的配置。
• store ：全局状态管理的配置。
• utils ：一些通用的工具类。
• views ：主要的页面，页面中可能会包含 components 包下的组件，并通过路由定位到我们最终的页面中。

后端项目结构

后端项目主要分为了五个模块，各自的功能如下：

• blog-api ：一些供前端调用的 api 接口，还有一些拦截器、配置类等。
• blog-common ：各个模块可能用到的公共部分内容，主要是一些工具类，通用注解等。
• blog-domain ：各个模块可能用到的域对象，比如pojo对象、vo对象等。
• blog-mapper ：操作数据库的持久层接口，基于 MyBatisPlus 实现。
• blog-service ：处理业务的业务层代码，api 调用业务层的代码处理业务

其实还有一个 blog-admin 模块，原定是作为博客项目的后台的，但是并没有很完善，大家可以忽略这个模块。

博客功能

本博客主要完成了一个博主可能用到的一些常规功能，所以并没有一些高级功能，下面对本博客的一些功能进行简单介绍。

• 进入博客后，初始使用游客身份进行浏览，游客无法写文章以及评论等功能，如果需要享受这些功能需要登录或者注册。

• 注册后的博主可以点击写文章按钮发布文章，发布后的文章会默认按照新旧顺序排列。

• 点击主页的文章，进入文章的详情页，可以看到这篇文章的具体内容，以及文章的评论信息。

• 登录用户可以对文章进行评论，进行对评论进行追评。

• 每篇文章都属于一个分类，并且可以含有多个标签；一个分类或标签下也可以有多个文章。

• 主页中会展示最热的标签和文章，以便大家查看。

• 点击文章分类，可以看到所有文章的分类，并且我们也可以添加删除分类，

• 点击标签，可以看到文章所有的标签，并且我们也可以添加删除标签。

• 分类/标签的添加和删除功能，只有登录用户才能使用。

• 分类和标签对所有用户同时生效。

• 点击某个分类或者标签，可以查看到该分类/标签下的所有文章。

• 对于不同时间的文章，系统会自动进行文章归档，方便博主查找。

• 个人中心中进行个人信息、密码的修改。

• 个人中心可以看到历史发布的文章以及评论，并且支持跳转到对于的文章中。

• 个人头像左部输入框，提供文章搜索的功能。

• …

除此之外还有一些功能，就不一一列举了，有兴趣可以部署项目后查看。

界面展示

主页

登录

正文

文章分类&标签

文章归档

个人中心

写文章

完整代码下载地址：基于SpringBoot + vue 的博客系统