> Yeliheng-Blog文档在GitHub、Yeliheng的技术小站上同步更新，开源仓库地址: https://github.com/yeliheng/yeliheng-blog
>
> 欢迎Star，Issue，Pull requests以及任何对本项目的贡献。开发不易，感谢支持！

系统介绍

这个开源仓库是Yeliheng的技术小站的前后端实现。Yeliheng-Blog是一个基于SpringBoot + Vue3开发的前后端分离的完整博客系统。它并不仅仅是一个简单的博客系统，更是一个后台权限管理系统，通过模块化使其具有高拓展性，可拓展成任何您想要的管理系统，例如文章系统，OA办公系统，仓库管理系统等...

 特性

- 轻量化系统，无外部框架的重度依赖

- 良好的可拓展性

- 响应式前端网页，完全适配移动端以及不同分辨率设备

- 基于RBAC模型的权限管理系统

- 优质的用户体验

  ...

 在线地址

后台演示功能暂未完成，目前仅开放前台展示，后台系统可自行搭建体验。

前台演示地址: https://www.yeliheng.com

功能详解

 后台

 目前已有功能

- 文章管理：实现文章的增删改查，以及文章分类、标签，隐私性的设置。
- 用户管理：用户登录、注册以及管理员对用户的增删改查操作。
- 角色管理：对角色系统的增删改查以及为用户分配多个角色。
- 权限管理：可为不同角色分配所需的不同权限，支持菜单权限，资源权限，按钮权限。
- 菜单管理：为角色分配菜单权限，以及前端菜单的动态路由处理，支持放置外链。
- 字典管理：对前端需要进行切换的状态字典进行动态管理。
- 站点统计：目前仅实现对文章字数，阅读时长及字数的统计，后续将以模块化形式实现站点的完整统计功能。
- 数据库监控：基于Druid的数据库可视化监控。

 正在开发中的功能

- 评论管理模块

- 完整的站点统计模块

- 定时备份模块的开发

- API接口文档

---

 前台

 目前已有功能

- 基于Markdown和Github风格的文章查看器

- 按照分类索引文章

- 按照标签索引文章

- 基于Three.js实现的Header

- 站点信息的显示

- 关于页面

 正在开发的功能

- 评论模块

- 日夜间模式的切换

- 站点统计模块

---

工程结构

`
yeliheng-blog
├── blog-common    --  后端系统通用模块（封装各种工具类、公共常量、异常类等）
├── blog-framework --  后端系统框架层（封装框架相关工具，如权限工具，框架配置文件，安全相关类）
├── blog-system    --  博客系统核心业务层（服务，数据库访问）
├── blog-web       --  博客系统API控制器（controller）
└── blog-vue       --  博客系统前端模块（Vue3）
    ├── admin   --  博客系统前端后台模块
    └── blog    --  博客系统前端前台模块
`

!模块图

技术栈

| 技术                 | 说明                |
| -------------------- | ------------------- |
| SpringBoot           | 容器+框架           |
| SpringSecurity       | 认证/权限框架       |
| MyBatis              | ORM框架             |
| RabbitMQ             | 消息队列            |
| Redis                | 分布式缓存          |
| Nginx                | 静态资源服务器      |
| Docker               | 应用容器引擎        |
| Jenkins              | 自动化部署工具      |
| Druid                | 数据库连接池        |
| OSS                  | 对象存储            |
| JWT                  | JWT登录支持         |
| PageHelper           | MyBatis物理分页插件 |
| Swagger-UI           | 文档生成工具        |
| Hibernator-Validator | 验证框架            |
| Vue3                 | 渐进式js框架        |
| Sass                 | css扩展语言         |
| Element-UI           | 饿了么UI库          |
| Markdown-it          | markdown解析工具    |

搭建教程

 开发环境

在开始之前，请确认您的开发环境，尽量与此处保持一致，以免出现意料之外的问题。

 后端

| 开发环境 | 版本   |
| -------- | ------ |
| JDK      | 1.8  |
| JRE      | 1.8  |
| MySQL    | 5.7  |
| Redis    | 6.x  |

 前端

| 开发环境 | 版本     |
| -------- | -------- |
| Vue      |  3     |
| Node.js  | 14.x |
| npm      | 6.x  |

 快速开始

 后端

1、搭建如上表格所示的开发环境并确保所有环境处于正常运行状态。（具体过程此处不做赘述，可自行查阅相关资料）

2、克隆本项目

`
git clone https://github.com/yeliheng/yeliheng-blog.git
`

3、导入idea或其他IDE，等待Maven导入所有的包。（此过程可能需要一些时间，部分国外仓库加载较慢，建议使用国内镜像源，具体步骤可自行在搜索引擎上查看）

4、在blog-web包的resource目录下新建配置文件，文件名为：application-dev.yml，并将application-example.yml中的内容复制到刚刚创建的application-dev.yml中，并将datasource中的数据源修改为自己的数据库信息。

5、导入数据库

将项目sql文件夹中的所有.sql文件导入到数据库中。

6、准备完成，开始运行项目！

当您看到如下提示，代表项目已成功运行。

!成功

 前端

1、进入本项目中的blog-vue文件夹中，前端分为admin和blog两个模块，此处以admin模块为例进行说明。

2、我们首先进入admin文件夹，在admin文件夹中新建文件：.env.development（重要！），并将 .env.example 中的内容复制到刚刚创建的 .env.development中，并将VUE_APP_BASE_API地址修改为后端地址。若您没有改动后端地址则无需更改。

3、执行如下指令安装所需依赖：

`
npm install
`

4、等待上述指令执行完成后，执行以下指令：

`
npm run serve
`

5、项目成功运行，开始访问吧！

管理员账号：admin

管理员密码: admin123

blog模块的安装方法与上述过程完全相同

项目截图

!首页

!文章

!后台

!权限管理

Yeliheng-Blog已开源，欢迎二次开发！本篇文章将详细介绍本站系统以及搭建教程。

标签：开源

Yeliheng的技术小站正式开源！