蘑菇博客

蘑菇博客，一个基于微服务架构的前后端分离博客系统

项目介绍 | 站点演示 | 项目特点 | 技术架构 | 项目目录 | 项目文档 | 快速开始 | 视频教程| 项目截图 | 更新记录 | 笔记仓库

前言

陌溪 是一个从三本院校一路摸滚翻爬上来的程序员。目前就职于 字节跳动的Data广告部门，是字节跳动全线产品的商业变现研发团队。这两天创建了一个 微信公众号【陌溪教你学编程】，未来将会在公众号上持续性的输出很多原创小知识以及学习资源，欢迎各位小伙伴关注我，和我一起共同学习，同时我也希望各位小伙伴能够给蘑菇博客项目多多 Star支持，您的点赞就是我维护的动力！

微信公众号【陌溪教你学编程】	微信群【陌溪教你学编程】

项目已有较详细的 项目搭建文档 ，同时包括了 Windows、Linux 以及 Docker 环境下蘑菇博客的搭建。在使用过程中遇到问题时，首先认真阅读项目搭建文档 ，同时 FAQ文档 还收集了小伙伴咨询的问题，可以提前阅读~

【提问前】可以先 百度 或者 Google 进行解决，有的问题通过搜索引擎很快就能得到解决

【提问前】可以首先看看 issue 或者 FAQ文档，可能你的问题别人也遇到过

【提问前】可以提前阅读 如何向开源社区提问题

【提问】推荐使用 Gitee issue 进行提问，因为issue解决后能够保留解决记录，帮助其它小伙伴避坑。其次可以使用 QQ群 或者 微信群  进行提问。群里提问注意提问的时间，把遇到问题的详细过程都描述清楚，最好配上图文信息，这样能有利于更高效的解决问题。

后期维护

项目后台目前有 Eureka 版本和 Nacos 版本，其中 Eureka 版本使用的是 SpringCloud 一些组件，Nacos 版本使用的是 SpringCloudAlibaba 的一些组件，例如 Nacos、Sentinel 等

• Eureka 版本请切换至 Eureka 分支（已停止维护，将不再进行新功能的开发）
• Nacos 版本请切换至 Nacos 分支（作为以后长期维护的分支）
• master 分支为主分支，是基于 Nacos 分支的稳定版本

项目介绍

蘑菇博客( MoguBlog )，一个基于微服务架构的前后端分离博客系统。Web 端使用 Vue + ElementUi , 移动端使用 uniapp 和 ColorUI。后端使用 SpringCloud + SpringBoot + Mybatis-plus进行开发，使用 Jwt + SpringSecurity 做登录验证和权限校验，使用 ElasticSearch 和 Solr 作为全文检索服务，使用 Github Actions完成博客的持续集成，使用 ElasticStack 收集博客日志，文件支持上传本地、七牛云 和 Minio.

• 蘑菇博客大部分功能是我个人进行开发的，因能力有限，其中很多技术都是一边学习一边使用的，可以说蘑菇博客也是一个我用来熟悉技术的项目，所以很多地方可能考虑不周，故有能改正的地方，还请各位老哥能够指出~
• 现在挺多是SSM或者SSH的博客管理系统，想用 SpringBoot + SpringCloud + Vue 的微服务架构进行尝试项目的构建，里面很多功能可能只是为了满足自己的学习需求而引入的，大家可以根据自己服务器配置来选择启动的服务，因此本博客也是一个非常好的 SpringBoot、SpringCloud以及 Vue 技术的入门学习项目。
• 原来做过 Vue + ElementUi 做过管理系统，所以现在打算做一套自己的、基于当前最新技术栈、前后端分离的微服务博客系统。
• 蘑菇博客中的一些文章，很多都来自我平时的学习笔记，目前托管在另一个仓库：LearningNotes，里面涵盖了 JVM、JUC、Java，Spring，SpringCloud，计算机网络，操作系统，数据结构，Vue、Linux 等 ，感兴趣的小伙伴可以跳转该仓库 Star支持 一下

站点演示

首先特别感谢阿里云提供的 学生“在家实践” 计划，免费提供的 6 个月的 2核4G1M 的服务器，所以就刚好以此用来做蘑菇博客的演示站点，同时我也在搭建的时候，顺便录制了一套视频：利用阿里云免费服务器搭建个人博客 ，感兴趣的小伙伴可以参考视频一起完成部署~

【演示前端】：http://demoweb.moguit.cn/

【演示后端】：http://demoadmin.moguit.cn/

【演示账号】：mogu2018 mogu2018【演示环境开放全部查询权限和部分操作权限】

【小程序】蘑菇博客的移动端版本，可以扫码体验（代码在Nacos分支下的uniapp_mogu_web文件夹）

QQ小程序	微信小程序

项目中初始用户和密码

• 后台登录：用户：admin，密码：mogu2018
• 前台登录：用户：mogu2018，密码：mogu2018
• Mysql：用户：root，密码：mogu2018
• Redis：密码：mogu2018
• 远程SSH初始密码：用户：root，密码：mogu2018
• RabbitMQ管理页面： 用户：admin，密码：mogu2018
• Nacos管理页面： 用户：nacos，密码：nacos
• Sentinel管理页面： 用户：sentinel，密码：sentinel
• 蘑菇博客监控页面：用户：user，密码：password123
• Druid初始密码： 用户：admin，密码：123456

运行配置

蘑菇博客使用了一些监控的 SpringCloud 组件，但是并不一定都需要部署，必须启动的服务包含

nacos，nginx，rabbitmq， redis，mysql，mogu-gateway，mogu-sms，mogu-picture， mogu-web, mogu-admin

其它的服务都可以不启动，也不影正常使用，可以根据自身服务器配置来启动

最低配置：1核2G 【需开启虚拟内存】

推荐配置：2核4G 【双十二特惠】

【阿里云】云服务器双12狂欢特惠，1核2G 5M轻量级应用服务器114元/年【博主使用】 点我传送

【腾讯云】云产品限时秒杀，爆款1核2G云服务器，首年99元（老用户重新用微信QQ注册即可） 点我进入

项目特点

• 友好的代码结构及注释，便于阅读及二次开发
• 实现前后端分离，通过 Json 进行数据交互，前端再也不用关注后端技术
• 页面交互使用 Vue2.x，极大的提高了开发效率。
• 引入Swagger 文档支持，方便编写 API 接口文档。
• 引入RabbitMQ 消息队列，用于邮件发送、更新 Redis 和 Solr
• 引入JustAuth 第三方登录开源库，支持 Gitee、Github 账号登录。
• 引入ElasticSearch 和 Solr 作为全文检索服务，并支持可插拔配置
• 引入Github Actions 工作流，完成蘑菇博客的持续集成、持续部署。
• 引入七牛云对象存储，同时支持本地文件存储
• 引入 RBAC 权限管理设计，灵活的权限控制，按钮级别的细粒度权限控制，满足绝大部分的权限需求
• 引入 Zipkin 链路追踪，聚合各业务系统调用延迟数据，可以一眼看出延迟高的服务
• 采用自定义参数校验注解，轻松实现后端参数校验
• 采用 AOP + 自定义注解 + Redis 实现限制IP接口访问次数
• 采用自研的评论模块，实现评论邮件通知
• 采用 Nacos 作为服务发现和配置中心，轻松完成项目的配置的维护
• 采用 Sentinel 流量控制框架，通过配置再也不怕网站被爆破
• 采用uniapp 和ColorUi 完成蘑菇博客的移动端门户页面搭建
• 支持多种文本编辑器，Markdown 编辑器(Vditor)和富文本编辑器(CKEditor)随心切换
• 采用 ElasticStack【ElasticSearch + Beats + Kibana + Logstash】搭建蘑菇博客日志收集
• 采用 Docker Compose 完成容器编排，Portainer 实现容器可视化，支持一键部署线上环境

项目文档

文档地址：http://moxi159753.gitee.io/mogu_blog_doc

备用文档地址：http://doc.moguit.cn

项目地址

目前项目托管在 Gitee 和 Github 平台上中，欢迎大家 Star 和 Fork 支持~

• Gitee地址：https://gitee.com/moxi159753/mogu_blog_v2
• Github地址：https://github.com/moxi624/mogu_blog_v2

项目目录

• MoguBlog 是一款基于最新技术开发的多人在线、简洁的博客系统。
• mogu_admin: 提供admin端API接口服务；
• mogu_web：提供web端API接口服务；
• mogu_eureka： 服务发现和注册【注: Nacos分支没有该目录，用Nacos作为服务发现组件】
• mogu_picture： 图片服务，用于图片上传和下载；
• mogu_sms：消息服务，用于更新ElasticSearch、Solr索引、邮件和短信发送
• mogu_monitor：监控服务，集成SpringBootAdmin用于管理和监控SpringBoot应用程序
• mogu_spider：爬虫服务（目前还未完善）
• mogu_gateway：网关服务（目前还未完善）
• mogu_zipkin：链路追踪服务，目前使用java -jar的方式启动
• mogu_search：搜索服务，ElasticSearch和Solr作为全文检索工具，支持可插拔配置，默认使用SQL搜索
• mogu_commons：公共模块，主要用于存放Entity实体类、Feign远程调用接口、以及公共config配置
• mogu_utils: 是常用工具类；
• mogu_xo: 是存放 VO、Service，Dao层的
• mogu_base: 是一些Base基类
• doc: 是蘑菇博客的一些文档和数据库文件
• vue_mogu_admin：VUE的后台管理页面
• vue_mogu_web：VUE的门户网站
• uniapp_mogu_web：基于uniapp 和 colorUi 的蘑菇博客移动端门户页面（Nacos分支）
• nuxt_mogu_web：Nuxt的门户网站，主要用于支持SEO搜索引擎优化（目前还未完善）

技术选型

系统架构图

蘑菇博客系统架构图，使用 Processon 在线绘制

后端技术

前端技术

快速开始

[推荐] Windows+VMware一键搭建蘑菇博客本地开发环境

参考 Windows+VMware一键搭建蘑菇博客本地开发环境，快速在 Windows 平台搭建蘑菇博客开发环境，将中间件安装在 VMware 中。

Windows环境下搭建蘑菇博客

参考 window环境下配置蘑菇博客环境，能够在 Windows下搭建蘑菇博客的开发环境，同时将所有组件安装在Windows 环境中

[推荐] DockerCompose一键部署蘑菇博客(Nacos版)

参考 DockerCompose一键部署蘑菇博客(Nacos版) ，在 Linux 服务器中，一键完成蘑菇博客项目的部署

Docker搭建蘑菇博客

参考 使用Docker快速搭建蘑菇博客(Eureka分支)，快速在Linux服务器中搭建好博客运行环境，通过发布 Jar 包的方式完成部署

参考 使用Docker快速搭建蘑菇博客(Nacos分支)，快速在Linux服务器中搭建好博客运行环境，通过发布 Jar 包的方式完成部署

蘑菇博客部署到云服务器

【推荐】参考IDEA发布蘑菇博客Docker镜像到云服务器(适用于DockerCompose部署)，在你修改Nacos分支博客源码后，将重新制作镜像部署到云服务器，然后通过DockerCompose进行启动。

参考蘑菇博客如何部署到阿里云服务器(Eureka分支)，在你修改Eureka分支博客源码后将项目打包部署到云服务器

参考蘑菇博客如何部署到阿里云服务器(Nacos分支)，在你修改Nacos分支博客源码后将项目打包部署到云服务器

使用Github Actions完成蘑菇博客持续集成

参考 使用Github Action完成蘑菇博客持续集成 ，在你提交一个 push 请求后，通过 Github Actions 能够完成蘑菇博客自动化 编译、打包、部署等操作。

切换搜索模式

参考蘑菇博客切换搜索模式，完成蘑菇博客的搜索引擎切换，目前支持 Solr、ElasticSearch、SQL 的方式

配置七牛云对象存储

参考蘑菇博客切换七牛云存储，配置文件的七牛云对象存储，及本地文件存储

使用Zipkin搭建蘑菇博客链路追踪

参考使用Zipkin搭建蘑菇博客链路追踪，通过聚合各业务系统调用延迟数据，达到链路调用监控跟踪，快速定位其中延迟高的服务

使用Nacos搭建蘑菇博客服务注册和配置中心

参考蘑菇博客Nacos部署指南，搭建蘑菇博客的服务注册和配置中心

使用Sentinel搭建蘑菇博客流量控制

参考蘑菇博客Sentinel安装指南，Sentinel 被称为分布式系统的流量防卫兵，相当于Hystrix

蘑菇博客小程序发布

参考蘑菇博客QQ小程序发布指南，完成蘑菇博客 uniapp 移动端的启动和发布

蘑菇博客扩展新的功能和页面

参考蘑菇博客如何扩展新的功能和页面，在蘑菇博客现有架构基础上，开发自己需要的页面。

使用ELK搭建蘑菇博客日志收集

参考搭建蘑菇博客日志收集，使用 Docker 快速搭建 ELK 环境用于蘑菇博客日志收集

环境搭建

开发工具

开发环境

致谢

蘑菇博客起初参考了很多开源项目的解决方案，开源不易，感谢分享

• 感谢 jetbrains 提供的开源License

• 感谢杨青小姐姐的博客模板：http://www.yangqq.com/

• 感谢PanJiaChen的Vue后台管理模板：vue-element-admin

• Vue项目搭建参考这篇博客：https://segmentfault.com/a/1190000009506097

• 感谢苞米豆提供的 Mybatis-plus框架：http://mp.baomidou.com/

• 感谢yadong.zhang提供的第三方登录开源库：https://gitee.com/yadong.zhang/JustAuth

• 感谢 bihell 的 Dice 博客项目：https://github.com/bihell/Dice

• 感谢 pppercyWang 提供的Emoji表情评论组件：vue-emoji-comment

• 感谢 若依 提供的 RuoYi 项目：https://gitee.com/y_project/RuoYi

• 感谢 yaowei9363 提供的 Vue侧目录组件： vue-side-catalog

• 感谢 奇文社区 提供的 奇文网盘 项目：https://gitee.com/qiwen-cloud/qiwen-file

• 感谢 weilanwl 提供的 ColorUI：https://github.com/weilanwl/ColorUI

关注&交流

为了方便小伙伴们沟通交流，我创建了QQ群 (加群备注：蘑菇博客) ，目前项目还存在很多不足之处，欢迎各位老哥进群进行技术交流，为了防止广告进入，希望加群的时候能添加备注，谢谢~

QQ群（备注：蘑菇博客）【群满】	QQ群（备注：蘑菇博客）【推荐】

未来计划

• [x] 集成Github Actions，完成蘑菇博客持续集成服务
• [x] 门户网站增加登录页面
• [x] 支持第三方登录
• [x] 集成ElasticSearch和Solr
• [x] 将图片存储在七牛云中
• [x] 写一个评论模块，用于替换搜狐畅言
• [x] 按钮级别的细粒度权限控制
• [x] 增加评论表情
• [x] 增加数据字典管理
• [x] 前端增加用户个人中心
• [x] 增加一个FAQ常见问题文档
• [x] 集成表单构建页面，来源于RuoYi
• [x] 增加博客详情页目录导航，来源于vue-side-catalog
• [x] 资源管理页面集成网盘管理
• [x] 新建Nacos分支，用于替换Eureka作为服务发现组件和配置中心
• [x] 使用Sentinel做服务限流和熔断
• [x] 增加蘑菇博客小程序项目 uniapp_mogu_web，基于ColorUI 和 Uniapp
• [x] 富文本编辑器和Markdown编辑器任意切换
• [x] 使用ELK搭建蘑菇博客日志收集功能
• [x] 使用Minio 搭建对象存储服务
• [x] 使用DockerCompose完成 博客一键部署
• [x] 使用Portainer对Docker镜像可视化管理
• [x] 适配门户页面的移动端布局
• [ ] 增加K8S部署蘑菇博客教程
• [ ] 增加大屏数据展示页面
• [ ] 增加定时任务模块
• [ ] 完善网盘管理
• [ ] 增加更新记录
• [ ] 完善爬虫模块
• [ ] 完善网关模块
• [ ] 使用Freemark页面静态化技术对博客详情页静态化
• [ ] 解决Nuxt_mogu_web中存在的问题，使博客能被搜索引擎收录
• [ ] 让原创文章能够同步到多平台，如：CSDN，掘金，博客园等
• [ ] 增加博客迁移功能，让其它平台的博客，如：CSDN、博客园，WordPress能够同步到蘑菇博客中

贡献代码

开源项目离不开大家的支持，如果您有好的想法，遇到一些 BUG 并修复了，以及 蘑菇博客文档 上有错误的地方订正过来了，欢迎小伙伴们提交 Pull Request 参与开源贡献

1. fork 本项目到自己的 repo
2. 把 fork 过去的项目也就是你仓库中的项目 clone 到你的本地
3. 修改代码
4. commit 后 push 到自己的库
5. 发起PR（ pull request） 请求，提交到 Nacos 分支
6. 等待作者合并

赞赏

服务器和域名等服务的购买和续费都会产生一定的费用，为了维持项目的正常运作，如果觉得本项目对您有帮助的话，欢迎朋友能够给予一些支持，陌溪将用于提升服务器配置，感谢小伙伴们的支持（ ps: 小伙伴赞赏的时候可以备注一下下~）

微信	支付宝

视频教程

特别感谢 俺是程序狮 在B站上给蘑菇博客录制的视频教程，课程讲的非常细致，手把手带着开发博客系统，感兴趣的小伙伴可以去学习和支持一下~，注意：视频教程基于 Eureka 分支，仅供参考，搭建以文档为主 ！

• 项目介绍
• 结构介绍与本地Nginx本地图片服务器启动
• mysql脚本准备
• 后台服务启动
• RabbitMQ启动
• 前端项目启动
• 后台管理系统的前端工程结构介绍
• 后台管理系统登录页
• 后台管理系统登录页2
• 登录页请求处理
• 前端发起登录认证
• vuerouter路由配置
• 侧边栏菜单的实现
• 汉堡菜单实现
• 面包屑导航
• 导航条右侧菜单
• 仪表盘首页(上)
• 仪表盘首页(中)
• TagsView组件
• Maven工程介绍
• 如何搭建Eureka Server
• .....

移动端截图

目前移动端版本的代码已经开源至Nacos分支，如果想体验的小伙伴可以移动至Nacos分支

网站截图

Admin端
Web端