# 基于SpringBoot + Vue开发的个人博客 **Repository Path**: lcz2000/personal-blog ## Basic Information - **Project Name**: 基于SpringBoot + Vue开发的个人博客 - **Description**: 基于SpringBoot + Vue 开发的前后端分离个人博客 - **Primary Language**: Java - **License**: Apache-2.0 - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2023-06-27 - **Last Updated**: 2024-04-24 ## Categories & Tags **Categories**: Uncategorized **Tags**: Java, Vue, SpringBoot, Redis ## README # 个人博客 ## 介绍

基于SpringBoot + Vue开发的个人博客。

## 技术介绍 - **前端：** Vue + vue-router + vuex + axios + vuetify + element + echarts - 前台框架：vuetify - 后台框架：element - **后端：** SpringBoot + SpringSecurity + MySQL + MybatisPlus + Redis + RabbitMQ + Elasticsearch + MaxWell + Swagger2 + Docker + Nginx - **其他：** 七牛云OSS对象存储+SM.MS图床+fastDFS存储 ## 开发环境 | 开发工具 | 说明 | |-----------------------|-------------| | Intellij IDEA | Java开发工具IDE | | VS Code | Vue开发工具IDE | | Navicat | MySQL远程连接工具 | | Redis Desktop Manager | Redis远程连接工具 | | Xshell | Linux远程连接工具 | | Xftp | Linux文件上传工具 | | 环境依赖 | 版本 | |---------------|----------| | JDK | 1.8 | | Maven | 3.6.3 | | MySQL | 8.0.26 | | Redis | 6.0.16 | | RabbitMQ | 3.8.23 | | Elasticsearch | 7.9.2 | | Vue-cli | 4.5.13 | | npm | 12.22.12 | ## 目录结构 1. 前端项目位于blog-vue目录下 - blog为前台项目 - blog-admin为后台项目 2. 后端项目位于blog-springboot目录下 3. SQL文件位于根目录下 - 注：MySQL版本需要 8.0 以上 4. 接口文档地址： - 启动后端项目访问：[http://127.0.0.1:8080/swagger-ui.html](http://127.0.0.1:8080/swagger-ui.html) 5. 拉取项目的注意事项： - 需要修改后端项目的 `application.yml` 配置文件中的信息为自己本机的信息 - OSS对象存储功能需要自行开启 - 后台可以登录管理员账号 admin@qq.com，密码：123456，进行修改数据。 ``` blog |--blog-springboot | └--lcz_blog // 后端应用 | | |--java // 应用 | | | |--common // 公共模块 | | | | |--annotation // 自定义注解 | | | | |--aspect // aop模块 | | | | |--constant // 常量模块 | | | | |--consumer // MQ消费者模块 | | | | |--enums // 枚举模块 | | | | |--exception // 自定义异常 | | | | └--handler // 处理器模块 | | | |--config // 配置模块 | | | |--controller // 控制器模块 | | | |--mapper // 数据访问模块 | | | |--pojo // POJO模块 | | | | |--dto // 数据传输对象 | | | | |--entity // 数据对象 | | | | └--vo // 展示对象 | | | |--service // 业务逻辑模块 | | | └--util // 工具类模块 | | └--resource // 资源 | | | |--mapper // 数据访问映射文件 | | | └--application.yml // 配置文件 └--blog-vue // 前端应用 | |--blog | | |--public // 静态资源，打包时不会被压缩 | | └--src // 应用 | | | |--api // api接口 | | | |--assets // 静态资源，打包时会被压缩 | | | |--components // 组件 | | | |--plugins // 插件 | | | |--request // 请求 | | | |--router // 路由 | | | |--store // 状态管理 | | | |--views // 页面 | | | |--App.vue // 主组件 | | | └--main.js // 入口js文件 | | └--vue.config.js // 配置文件 | └--blog-admin | | |--public // 静态资源，打包时不会被压缩 | | └--src // 应用 | | | |--assets // 静态资源，打包时会被压缩 | | | |--components // 组件 | | | |--layout // 组件 | | | |--router // 路由 | | | |--store // 状态管理 | | | |--views // 页面 | | | |--App.vue // 主组件 | | | └--main.js // 入口js文件 | | └--vue.config.js // 配置文件 └--images // 图片文件 ``` ## 项目特色 1. 前台参考"Hexo"的"Butterfly"设计，美观简洁，响应式体验好。 2. 后台参考"element-admin"设计，侧边栏，历史标签，面包屑自动生成。 3. 文章采用Markdown编辑器，写法简单。 4. 评论支持表情输入回复等，样式参考Valine。 5. 前后端分离部署，适应当前潮流。 6. 留言采用弹幕墙，更加炫酷。 7. 支持代码高亮和复制，图片预览等功能，提升用户体验。 8. 搜索文章支持高亮分词，响应速度快。 9. 自动生成文章目录、提供推荐文章等功能，优化用户体验。 10. 使用aop注解实现日志管理。 11. 支持动态权限修改，采用RBAC模型，前端菜单和后台权限实时更新。 12. 后台管理支持修改背景图片，博客配置等信息，操作简单。 13. 代码遵循阿里巴巴开发规范，利于开发者学习。 ## 运行环境 - **推荐配置：** - **服务器：** 腾讯云2核4G 带宽8M CentOS 7.6 - **对象存储：** 七牛云OSS - **最低配置：** - **服务器：** 1核2G服务器（关闭 Elasticsearch） ## 快速开始 ### 项目环境 #### 安装 Docker： - 卸载旧版本 ```shell yum remove docker docker-client docker-client-latest docker-common \ docker-latest docker-latest-logrotate docker-logrotate docker-engine ``` - 需要的安装包 ```shell yum install -y yum-utils device-mapper-persistent-data lvm2 ``` - 设置镜像的仓库 ```shell yum-config-manager --add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo ``` - 更新yum软件包索引 ```shell yum makecache fast ``` - 安装docker ```shell yum install docker-ce docker-ce-cli containerd.io ``` - 启动docker ```shell systemctl start docker ``` - 使用docker version查看是否安装成功 ```shell docker version ``` #### 安装 MySQL - 拉取 MySQL 镜像 ```shell docker pull mysql ``` - 启动 MySQL 容器 ```shell docker run --name mysql --restart=always -p 3306:3306 -e MYSQL_ROOT_PASSWORD=密码 -d mysql ``` #### 安装 Redis - 拉取 Redis 镜像 ```shell docker pull redis ``` - 启动 Redis 容器 ```shell docker run --name redis --restart=always -p 6379:6379 -d redis --requirepass "密码" ``` #### 安装 RabbitMQ - 拉取 RabbitMQ 镜像 ```shell docker pull rabbitmq:management ``` - 启动 RabbitMQ 容器 ```shell docker run --name rabbitmq --restart=always -p 15672:15672 -p 5672:5672 -d rabbitmq:management ``` 默认账号密码是：guest guest #### 安装 Elasticsearch 注意：如果需要使用 elasticsearch-head 或者 Kibana 等工具，需要网络一致 - 首先，创建一个网络 ```shell docker network create 网络名 ``` - 然后在启动容器的时候，在容器名之前加上 --network 刚刚创建的网络名，例如 ```shell docker run --name elasticsearch --restart=always -p 9200:9200 -p 9100:9100 -d -e "discovery.type=single-node" --network 网络名 elasticsearch:7.9.2 ``` - 进入容器 ```shell docker exec -it elasticsearch /bin/bash ``` - 下载ik分词器 ```shell elasticsearch-plugin install https://github.com/medcl/elasticsearch-analysis-ik/releases/download/v7.9.2/elasticsearch-analysis-ik-7.9.2.zip ``` - 重启容器 ```shell docker restart elasticsearch ``` - 安装完成使用 Postman 工具新建索引这个是put请求 // elasticsearch索引需要手动创建 ![输入图片说明](image/1.png) ```put { "mappings": { "properties": { "id": { "type": "integer" }, "articleTitle": { "type": "text", "analyzer": "ik_max_word" }, "articleContent": { "type": "text", "analyzer": "ik_max_word" }, "isDelete": { "type": "integer" }, "status": { "type": "integer" } } } } ``` - 查看索引结构：如下图所示，即创建成功！ ![输入图片说明](image/2.png) #### 安装 Maxwell（同步文章数据到Elasticsearch） - 拉取 Maxwell 镜像 ```shell docker pull zendesk/maxwell ``` - 启动 Maxwell 容器 ```shell docker run --name maxwell --restart=always -d zendesk/maxwell bin/maxwell --user='guest' --password='guest' --host='8.130.118.110' \ --producer=rabbitmq --rabbitmq_user='guest' --rabbitmq_pass='guest' --rabbitmq_host='8.130.118.110' --rabbitmq_port='5672' \ --rabbitmq_exchange='maxwell' --rabbitmq_exchange_type='fanout' \ --filter='exclude: *.*, include: blog.tb_article.article_title = *, include: blog.tb_article.article_content = *' ``` ### 项目配置 #### 配置 application.yml - 配置连接数据库、消息队列、搜索引擎的ip和账号密码 #### 修改常量： - 进入后端项目 -> 进入 common/constant 目录，打开 CommonConst.java 文件，修改默认头像的地址 ![输入图片说明](image/3.png) #### 获取QQ邮箱授权码 - 打开QQ邮箱官网，点击设置 -> 账户 -> 翻到如图所示，开通 IMAP/SMTP 服务，根据步骤，获取授权码，保存 ![输入图片说明](image/4.png) - 配置 application.yml 的邮箱属性，username是邮箱号，password是授权码 ![输入图片说明](image/5.png) #### 配置腾讯云滑块验证 - 打开腾讯云官网 -> 搜索并进入验证码首页 -> 新建验证 ![输入图片说明](image/6.png) - 新建完成 -> 查看详情 -> 基础配置，复制 CaptchaAppId - 打开前端的两个项目，进入assets/js目录，打开 config.js ，添加腾讯云滑块验证配置信息;官网手册：腾讯云验证码 ![输入图片说明](image/7.png) - 进入public目录，打开 index.html ，添加下面这句话 #### 自定义配置 ##### 搜索模式 - 搜索模式可选择 MySQL 或 Elasticsearch ![输入图片说明](image/8.png) ##### 配置七牛云OSS信息 - 注册 -> 登录 -> 密钥管理 -> 复制 AccessKey 和 SecretKey ![输入图片说明](image/9.png) - 进入七牛云 -> 对象存储 -> 空间管理 -> 新建空间 ![输入图片说明](image/10.png) - 进入空间 -> 空间概览 -> 复制空间名和域名注意：没有域名可以先用七牛云分配的，但是只有30天，30天后回收，到时需要配置自己的域名 - 配置 application.yml 的七牛云属性（bucket是空间名称） ![输入图片说明](image/11.png) ## 注意事项 - 项目拉取之后，后端配置文件需要修改为自己的本地或服务器ip，账号密码也需要修改 - 邮箱配置需要自己申请 - Elasticsearch需要先创建索引 - 七牛云对象存储也需要自己申请，也可以使用上传到本地 ## 项目截图 ### 前台 ![输入图片说明](image/12.png) ![输入图片说明](image/13.png) ![输入图片说明](image/14.png) ![输入图片说明](image/15.png) ![输入图片说明](image/16.png) ### 后台 ![输入图片说明](image/17.png) ![输入图片说明](image/18.png) ![输入图片说明](image/19.png) [返回顶部](#个人博客)