Yeliheng-Blog說明在GitHub上同步更新，地址:https://github.com/yeliheng/yeliheng-blog

歡迎Star，Issue，Pull requests以及任何對本項目的貢獻。開發(fā)不易，感謝支持！

系統(tǒng)介紹

這個開源倉庫是Yeliheng的技術小站的前后端實現。Yeliheng-Blog是一個基于SpringBoot + Vue3開發(fā)的前后端分離的完整博客系統(tǒng)。它并不僅僅是一個簡單的博客系統(tǒng)，更是一個后臺權限管理系統(tǒng)，通過模塊化使其具有高拓展性，可拓展成任何您想要的管理系統(tǒng)，例如文章系統(tǒng)，OA辦公系統(tǒng)，倉庫管理系統(tǒng)等...

特性

• 輕量化系統(tǒng)，無外部框架的重度依賴

• 良好的可拓展性

• 響應式前端網頁，完全適配移動端以及不同分辨率設備

• 基于RBAC模型的權限管理系統(tǒng)

• 優(yōu)質的用戶體驗

  ...

在線地址

后臺演示功能暫未完成，目前僅開放前臺展示，后臺系統(tǒng)可自行搭建體驗。點擊查看搭建教程

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

后臺搭建教程：點擊查看搭建教程

功能詳解

后臺

目前已有功能

• 文章管理：實現文章的增刪改查，以及文章分類、標簽，隱私性的設置。

• 用戶管理：用戶登錄、注冊以及管理員對用戶的增刪改查操作。

• 角色管理：對角色系統(tǒng)的增刪改查以及為用戶分配多個角色。

• 權限管理：可為不同角色分配所需的不同權限。

• 菜單管理：為角色分配菜單權限，以及前端菜單的動態(tài)路由處理。

• 站點統(tǒng)計：目前僅實現對文章字數，閱讀時長及字數的統(tǒng)計，后續(xù)將以模塊化形式實現站點的完整統(tǒng)計功能。

正在開發(fā)中的功能

• 對菜單的動態(tài)增加以及修改，自定義菜單類型（如：放置外鏈或多媒體類型等功能）

• 評論管理模塊

• 完整的站點統(tǒng)計模塊

• 定時備份模塊的開發(fā)

• API接口文檔

前臺

目前已有功能

• 基于Markdown和Github風格的文章查看器

• 按照分類索引文章

• 按照標簽索引文章

• 基于Three.js實現的Header

• 站點信息的顯示

• 關于頁面

正在開發(fā)的功能

• 評論模塊

• 日夜間模式的切換

• 站點統(tǒng)計模塊

工程結構

yeliheng-blog
├── blog-common    --  后端系統(tǒng)通用模塊（封裝各種工具類、公共常量、異常類等）
├── blog-framework --  后端系統(tǒng)框架層（封裝框架相關工具，如權限工具，框架配置文件，安全相關類）
├── blog-system    --  博客系統(tǒng)核心業(yè)務層（服務，數據庫訪問）
├── blog-web       --  博客系統(tǒng)API控制器（controller）
└── blog-vue       --  博客系統(tǒng)前端模塊（Vue3）
    ├── admin   --  博客系統(tǒng)前端后臺模塊
    └── blog    --  博客系統(tǒng)前端前臺模塊

模塊圖

技術棧

搭建教程

開發(fā)環(huán)境

在開始之前，請確認您的開發(fā)環(huán)境，盡量與此處保持一致，以免出現意料之外的問題。

后端

前端

快速開始

后端

1、搭建如上表格所示的開發(fā)環(huán)境并確保所有環(huán)境處于正常運行狀態(tài)。（具體過程此處不做贅述，可自行查閱相關資料）

2、克隆本項目

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

3、導入idea或其他IDE，等待Maven導入所有的包。（此過程可能需要一些時間，部分國外倉庫加載較慢，建議使用國內鏡像源，具體步驟可自行在搜索引擎上查看）

4、在blog-web包的resource目錄下新建配置文件，文件名為：application-dev.yml，并將application-example.yml中的內容復制到剛剛創(chuàng)建的application-dev.yml中，并將datasource中的數據源修改為自己的數據庫信息。

5、導入數據庫

將項目sql文件夾中的yeliheng-blog.sql文件導入到數據庫中。

6、準備完成，開始運行項目！

當您看到如下提示，代表項目已成功運行。

成功

前端

1、進入本項目中的blog-vue文件夾中，前端分為admin和blog兩個模塊，此處以admin模塊為例進行說明。

2、我們首先進入admin文件夾，在admin文件夾中新建文件：.env.development，并將 .env.example 中的內容復制到剛剛創(chuàng)建的 .env.development中，并將VUE_APP_BASE_API地址修改為后端地址。若您沒有改動后端地址則無需更改。

3、執(zhí)行如下指令安裝所需依賴：

npm install

4、等待上述指令執(zhí)行完成后，執(zhí)行以下指令：

npm run serve

5、項目成功運行，開始訪問吧！

管理員賬號：admin

管理員密碼: admin123

blog模塊的安裝方法與上述過程完全相同

項目截圖

首頁

文章

后臺

權限管理