做过博客的人大概都经历过这种纠结：用 WordPress 吧，PHP 环境配得头大；用静态站点吧，连个评论系统都得自己接；想从零写一个吧，光后台管理那一堆权限和用户体系就够喝一壶了。

更尴尬的是，好不容易搭起来了，发现编辑器不好用、移动端没适配、SEO 一塌糊涂——最后博客没写几篇，折腾的时间倒比写文章还长。

想搭博客但从零开发太费劲，后台权限/用户/日志一堆基础功能要写

编辑器不顺手，Markdown 和富文本来回切换折腾

只有 PC 端，手机上看体验拉垮

博客做出来了但 SEO 不行，搜索引擎根本不收录

今天聊的这个项目，思路很直接：拿若依（RuoYi-Vue）这个成熟的后台框架当底座，往上叠博客业务。后台管理不用从零造轮子，专注写内容就行。

项目名叫 Blog（仓库名 ruo-yi-vue-blog），基于 RuoYi-Vue 前后端分离架构，后端 Spring Boot + MyBatis，前端 Vue + Element UI，MIT 协议开源。PC 端、移动端、小程序、SEO 版本一应俱全，算是把博客该有的端都覆盖了。

博客前台首页，文章列表、分类导航一应俱全

核心特性

应用场景分析

个人技术博客

用户开发者、技术写作者

痛点 想要一个带后台管理的博客，但不想从零搭建用户体系和权限系统；需要 Markdown 写技术文章，偶尔也发点非技术内容

方案 若依底座直接搞定后台管理，CherryMarkdown 写技术文，Quill/Tinymce 写生活随笔，标签分类把技术文章和随笔分开

效果 半天搭好博客框架，集中精力写内容而不是造轮子

团队/公司知识库

用户小团队、初创公司

痛点 需要一个内部知识共享平台，要求有权限管理（不是谁都能发文章），同时要支持多人协作

方案 若依的 RBAC 权限体系天然支持角色区分（管理员/编辑/普通读者），文章分类做部门分区，评论系统做内部讨论

效果 不用单独买协作平台，搭一套博客系统把知识沉淀和团队沟通都覆盖了

毕业设计 / 课程作业

用户计算机专业学生

痛点 毕设要做个”XX系统”，但时间紧、基础功能（登录/权限/日志）自己写来不及；答辩老师看重功能完整度

方案 以此项目为蓝本二次开发，若依底座自带的功能（用户/角色/菜单/日志/监控/代码生成）在答辩时都是加分项，博客业务逻辑容易理解和扩展

效果 功能完整度碾压同学，技术栈（Spring Boot + Vue + MyBatis）也是面试常见组合

功能模块说明

博客前台：阅读体验优先

首页展示文章列表，支持按分类和标签筛选。点进去是文章详情页，底部有评论区。另外还有独立的随笔页面——类似朋友圈，发点短内容、灵感碎片，不用每次都正儿八经写长文。

前台首页，文章列表按时间线排列，侧边有分类和标签导航

文章详情页，排版干净，底部评论区可以直接互动

随笔模块：碎片化表达

不是所有想法都值得写一篇两千字的长文。随笔模块就是干这个的——写一段话，配一张图，发布出去，像发微博一样轻量。

随笔列表，短内容也能有存在感

留言板：读者和作者的对话

独立于文章评论的留言功能，读者可以随便留言，博主可以统一回复。有点像早期互联网的”留言本”，但界面现代化了不少。

留言板页面，读者随时可以和博主互动

后台管理：若依的那套，全都在

登录后台，首先是仪表盘，显示访问统计和系统概况。然后是博客业务区：文章管理、随笔管理、分类管理、标签管理、评论管理、留言管理、文件管理——内容运营需要的都有了。

再加上若依原生的用户管理、角色管理、菜单管理、操作日志、定时任务、代码生成、系统监控……这是一个完整的企业级后台，不只是一个”能发文章的后台”。

后台仪表盘，访问统计和系统信息一目了然

文章管理列表，支持搜索、筛选、批量操作

三种编辑器：各有所长

写技术文章用 CherryMarkdown，代码高亮、公式、流程图都支持，程序员的最爱。写普通内容用 Quill 或 Tinymce，所见即所得，排版直观。不同场景切换不同的编辑器，不用在一个不顺手的编辑器里硬撑。

CherryMarkdown 编辑器，代码高亮和公式渲染都没问题

多端生态：PC 只是起点

这个项目不只是 PC 端一个仓库。作者搞了一整套多端方案：

多端项目一览

PC 端（后台 + 前台）：ruo-yi-vue-blog — RuoYi-Vue 架构

SEO 版本：ruo-yi-vue-blog-nuxt — Nuxt 服务端渲染，搜索引擎友好

新版移动端 / 小程序：photo-graphy-uniapp — 支持 APP、小程序、H5

旧版移动端：ruo-yi-vue-blog-uniapp — UniApp 跨端方案

SEO 版本特别值得说一句：Vue 单页应用的天生短板就是搜索引擎爬不到内容。作者单独用 Nuxt 重构了一版，服务端渲染直接输出 HTML，收录问题从根上解决。有 SEO 需求的，直接用 Nuxt 版本就行。

技术架构

后端基于 Spring Boot 2.2.x，持久层用 MyBatis 3.5.x + Druid 1.2.x 连接池，安全框架是 Spring Security 5.2.x。前端 Vue 2.6.x + Element UI 2.15.x + Axios，经典的前后端分离组合。

Spring Boot 2.2MyBatis 3.5Spring Security 5.2Druid 1.2Vue 2.6Element UI 2.15CherryMarkdownQuillTinymceUniAppNuxt

运行环境要求不高：JDK 1.8+、MySQL 5.7+、Maven 3.0+、Node 12+，基本上任何一台云服务器都能跑起来。

快速上手

部署步骤不复杂，照着来就行：

# 1. 克隆项目git clone https://gitee.com/Ning310975876/ruo-yi-vue-blog.git# 2. 导入数据库（项目根目录的 SQL 文件）# 3. 修改后端配置（数据库连接、端口等）# 4. 启动后端项目# 5. 启动前端cd ruoyi-ui npm install –registry=https://registry.npmmirror.com npm run dev

启动完成后访问 http://localhost:80 就能看到前台页面了。后台管理入口在同一个项目里，登录即可使用。

建议先在本地跑通再上服务器。MySQL 字符集选 utf8mb4，否则表情符号和特殊字符会存不进去。

项目链接

Gitee 仓库：https://gitee.com/Ning310975876/ruo-yi-vue-blog

SEO 版本：https://gitee.com/Ning310975876/ruo-yi-vue-blog-nuxt

新版移动端：https://gitee.com/Ning310975876/photo-graphy-uniapp

旧版移动端：https://gitee.com/Ning310975876/ruo-yi-vue-blog-uniapp

开源协议：MIT

若依框架本身有详细的官方文档（doc.ruoyi.vip），部署和二次开发遇到问题可以先查文档。博客业务部分的项目文档地址在 README 中也有列出。

适合谁用

免责声明

1. 本文分享的开源项目均来源于公开代码托管平台（Gitee / GitHub），项目版权归原作者所有；

2. 本号仅做技术分享与推荐，不对项目的商业可用性、安全性、稳定性做任何担保；

3. 使用开源项目时，请务必遵守项目自身的开源协议（如 MIT、Apache 2.0 等），并注意协议对商用、修改、分发等行为的约束；

4. 因使用或部署开源项目所导致的任何直接或间接损失，本号不承担任何责任；

5. 如发现项目存在侵权、违规等问题，请联系本号，我们将及时删除相关内容。

有偿技术服务声明

本号在分享开源资源的同时，亦提供后台有偿技术指导服务，具体包括但不限于：

项目部署：协助完成环境配置、依赖安装、调试运行及常见错误排查；

建站咨询：提供网站搭建、域名配置、服务器选型、安全设置等建议与操作指导；

需求评估：根据您的业务场景，评估技术可行性、预估工作量及成本，并给出合理方案。

上述服务为自愿选择，不影响您免费使用本文所分享的开源资源。