基於 Laravel6.x 構建的部落格應用，支援 Markdown,支援 RBAC 許可權管理

首頁

基於 RBAC 的許可權管理後臺，Dashboard 頁面統計了使用者總數、文章釋出總數、評論率、評論總數、文章支援按天、按月、按年統計、支援按分類、按標籤統計……

登入頁面

註冊頁面

支援 GitHub 授權登入

支援郵箱重置密碼

同時相容 HTML 編輯器和 Markdown 編輯器

Markdown 編輯器：支援拖拽貼上上傳圖片、預覽、全屏、分屏預覽

專案概述

• 專案名稱：larablog
• 專案簡介：基於 laravel6.x 開發的部落格專案
• 訪問地址：https://www.drling.xin/

功能如下

• 使用者認證 —— 註冊、登入、退出；
• 個人中心 —— 使用者個人中心，編輯資料；
• 使用者授權 —— 作者才能刪除自己的內容；
• 上傳圖片 —— 修改頭像和編輯文章時上傳圖片；
• 表單驗證 —— 使用表單驗證類；
• 重置密碼 —— 通過郵箱找回密碼
• 文章支援分類、多標籤；
• 編輯文章支援 markdown 編輯器 、html 編輯器；
• markdown 編輯器支援拖拽上傳圖片、語法高亮、預覽、全屏、分屏實時預覽；
• 文章釋出時自動 Slug 翻譯，支援使用佇列方式以提高響應；
• 站點『活躍使用者』計算，一小時計算一次；
• 多角色許可權管理 —— 允許站長，管理員許可權的存在；
• 後臺管理 —— 基於 RBAC 後臺資料模型管理；
• 郵件通知 —— 傳送新回覆郵件通知，佇列傳送郵件；
• 站內通知 —— 文章有新回覆；
• 自定義 Artisan 命令列 —— 自定義活躍使用者計算命令；
• 自定義 Trait —— 活躍使用者的業務邏輯實現；
• 自定義中介軟體 —— 記錄使用者的最後登入時間；
• XSS 安全防禦；
• 第三方授權登入，目前支援 GitHub，相容 Facebook，Twitter，LinkedIn，Google，GitHub，GitLab 和 Bitbucket 的身份驗證；
• 支援自定義 meta title、description、keywords；
• 支援友鏈

執行環境要求

• Nginx 1.8+
• PHP 7.0+
• Mysql 5.7+
• Redis 3.0+

開發環境部署和安裝

本專案程式碼使用 PHP 框架 laravel6.x 開發，本地開發環境使用 Laravel Homestead。

基礎安裝

1. 克隆原始碼

克隆 larablog 原始碼到本地：

// gitee
git clone git@gitee.com:pudongping/larablog.git

// GitHub
git clone git@github.com:pudongping/larablog.git

2. 安裝擴充套件包依賴

// 先切換到 larablog 專案根目錄
cd larablog

// 執行安裝命令
composer install

3. 生成配置檔案

cp .env.example .env

你可以根據情況修改 .env 檔案裡的內容，如資料庫連線、快取、郵件設定、第三方授權登入等：

DB_HOST=localhost
DB_DATABASE=larablog
DB_USERNAME=homestead
DB_PASSWORD=secret

4. 生成資料表及生成測試資料

// 需要生成測試資料則執行：
php artisan migrate --seed

// 不需要生成測試資料則執行：
php artisan migrate

5. 生成祕鑰

php artisan key:generate

6. 建立 storage 軟連線

php artisan storage:link

7. 賦予 storage 相應許可權

// 建議在 Linux 系統中新建一個 www 使用者，並設定該使用者不可登入系統
useradd -s /sbin/nologin www

// 將專案目錄所有權賦予 www 使用者
chown -Rf www:www larablog

// 給 storage 目錄賦許可權
chmod -Rf 0755 larablog/storage/

6. 配置 hosts 檔案 （如果直接想部署線上上環境，則跳過此步驟）

如果開發環境沒有采用 Laravel Homestead 則 ip 對映以你實際為主，一般為 127.0.0.1。我這裡使用的 Laravel Homestead 虛擬機器的 ip 地址為：192.168.10.10

// Linux 或 MacOS 環境

echo "192.168.10.10   larablog.test" | sudo tee -a /etc/hosts

// Windows 環境
需要開啟 C:/Windows/System32/Drivers/etc/hosts  檔案，然後新增一行

192.168.10.10 larablog.test

前端安裝

1. 安裝 npm 和 yarn

CentOS / Fedora / RHEL 環境下

文件地址：https://yarn.bootcss.com/docs/install/#cen...

• 配置相應的 yum 源

curl --silent --location https://dl.yarnpkg.com/rpm/yarn.repo | sudo tee /etc/yum.repos.d/yarn.repo

curl --silent --location https://rpm.nodesource.com/setup_8.x | sudo bash -

• 之後執行以下任意一條命令，就可以了

sudo yum install yarn
## OR ##
sudo dnf install yarn

Windows 環境下

• 安裝 node.js

直接去官網 https://nodejs.org/en 下載安裝最新版本。

• 安裝 Yarn

請安裝最新版本的 Yarn —— http://yarnpkg.cn/zh-Hans/docs/install

2. 為 NPM 和 Yarn 配置淘寶映象，加速安裝包下載

npm config set registry=https://registry.npm.taobao.org

yarn config set registry https://registry.npm.taobao.org

3. 使用 Yarn 安裝前端依賴包

yarn install

或者

npm install

• 監控 resources 資料夾下的資原始檔是否有發生改變。在 watch-poll 命令執行的情況下，一旦資原始檔發生變化，Webpack 會自動重新編譯。

npm run watch-poll

// 如果遇到報錯，嘗試先執行以下命令更新 npm 到最新版本，之後再次執行監控命令
npm install -g npm

• 編譯前端內容

// 執行所有 Mix 任務...
npm run dev

// 執行所有 Mix 任務並縮小輸出..
npm run production

訪問入口

• 首頁地址： http://larablog.test
• 後臺管理：http://larablog.test/admin

管理員賬號密碼如下：

username: 1414818093@qq.com
password: 123456

預設網站第一位使用者為站長角色，第二位使用者為管理員角色。如果填充了測試資料，則預設所有使用者的密碼為：123456

==至此，安裝完成^_^。enjoy yourself……==

後端擴充套件包使用情況

擴充套件包	簡介描述	本專案應用場景
laravel/ui	laravel 6.x UI 腳手架	前端頁面框架
barryvdh/laravel-ide-helper	能讓你的 IDE (PHPStorm, Sublime) 實現自動補全、程式碼智慧提示和程式碼跟蹤等功能	程式碼補全和智慧提示
barryvdh/laravel-debugbar	頁面除錯工具欄 (對 phpdebugbar 的封裝)	開發環境中的 DEBUG
overtrue/laravel-lang	支援 52 個國家的語言包	翻譯 Laravel 自帶模板
mews/captcha	圖片驗證碼	註冊頁面圖片驗證碼
intervention/image	圖片處理功能庫	用於圖片裁剪
summerblue/laravel-active	方便設定 active 類	文章排序新增 active 類
mews/purifier	使用者提交的 Html 白名單過濾	文章內容的 Html 安全過濾，防止 XSS 攻擊
guzzlehttp/guzzle	HTTP 請求套件	請求百度翻譯 API，翻譯文章標題，做 SEO 優化
overtrue/pinyin	基於 CC-CEDICT 詞典的中文轉拼音工具	翻譯文章標題的備用方案
predis/predis	Redis 官方首推的 PHP 客戶端開發包	快取驅動 Redis 基礎擴充套件包
laravel/horizon	佇列監控	佇列監控命令與頁面控制檯 /horizon
spatie/laravel-permission	角色許可權管理	角色和許可權控制
viacreative/sudo-su	使用者切換	除錯環境中快速切換登入賬號
erusev/parsedown	markdown 轉換 html 工具	文章模組解析 markdown 語法
thephpleague/html-to-markdown	html 轉換成 markdown 工具	文章編輯採用 markdown 編輯器時
laravel/socialite	laravel 官方推薦社會化登入	Github 登入

前端擴充套件包使用情況

擴充套件包	簡介描述	本專案應用場景
yarn add @fortawesome/fontawesome-free	Font Awesome 提供了可縮放的向量圖示	字型圖示庫
npm i startbootstrap-sb-admin-2	介面簡潔美觀的皮膚	cms 後臺模板
npm install simplemde	markdown 編輯器	文章編輯器
npm install highlight.js	語法高亮工具	markdown 編輯器程式碼語法高亮
npm install inline-attachment	文字框拖動上傳圖片工具	markdown 文字框圖片拖動上傳
multiselect.js	多選下拉框	文章多選標籤
chartjs	圖表外掛	後臺管理介面圖表

郵箱認證

• 開發環境時將 .ENV 檔案設定為如下所示，將郵箱認證郵件傳送至當前日誌中，以便除錯

  MAIL_DRIVER=log

• 生產環境時，建議將 .ENV 檔案中相關郵件設定為自己所需配置，以下為預設配置

  MAIL_DRIVER=smtp
  MAIL_HOST=smtp.mailtrap.io
  MAIL_PORT=2525
  MAIL_USERNAME=null
  MAIL_PASSWORD=null
  MAIL_ENCRYPTION=null

翻譯佇列

• 修改 .ENV 檔案設定為

# 如果是開發環境的話，就把佇列驅動改回 sync 同步模式，也就是說不使用任何佇列，實時執行：
QUEUE_CONNECTION=redis
REDIS_CLIENT=predis

• 啟動佇列系統，佇列在啟動完成後會進入監聽狀態

php artisan queue:listen

或者使用

php artisan horizon

文章標題翻譯

使用了百度翻譯 api，請將 .ENV中的百度 api 相關資訊換成你自己的開發者資訊

如果不採用百度翻譯翻譯文章標題的話，那麼不用配置 .ENV 檔案中以下配置項

# 百度翻譯 APP ID
BAIDU_TRANSLATE_APPID=
# 百度翻譯金鑰 KEY
BAIDU_TRANSLATE_KEY=

並且也不需要更改

QUEUE_CONNECTION=redis

預設保持為

QUEUE_CONNECTION=sync

這樣將會每發一篇文章時，將文章標題直接翻譯成拼音達到 slug 的效果。

郵件通知

如果不想要，發表文章評論時有郵件通知，可以不用配置，直接忽略，功能上沒有任何影響

1. 需要先開啟 QQ 郵箱的 SMTP 支援

如何開啟 POP3/SMTP/IMAP 功能？

2. 郵箱傳送配置 （請將以下配置換成你自己的郵箱配置）

如果你是使用的阿里雲 ECS，那麼一定要注意，阿里雲的 ECS 預設禁用了 25 埠，需要單獨申請解封25埠，點我解封阿里雲 ECS 25埠，如果你不知道如何解封，請檢視 解封步驟。當然替代方案，你可以採用 465 埠，如果你打算採用 465 埠，那麼需要將以下配置中的 MAIL_PORT 修改為 465,並且也需要將加密型別 MAIL_ENCRYPTION 修改為 ssl 即可，這裡我才用的是 qq 郵箱，可能其他的郵箱服務有差異，視情況而定吧。

# 使用支援 ESMTP 的 SMTP 伺服器傳送郵件
MAIL_DRIVER=smtp
# QQ 郵箱的 SMTP 伺服器地址，必須為此值
MAIL_HOST=smtp.qq.com
# QQ 郵箱的 SMTP 伺服器埠，必須為此值
MAIL_PORT=25
# 請將此值換為你的 QQ + @qq.com
MAIL_USERNAME=xxxxxxxxxxxxxx@qq.com
# 密碼是我們第一步拿到的授權碼
MAIL_PASSWORD=xxxxxxxxx
# 加密型別，選項 null 表示不使用任何加密，其他選項還有 ssl，這裡我們使用 tls 即可，如果出現報錯的話，多半是因為這個 smtp 主機不支援 TLS，那麼只需要將此項設定為 null 即可。
MAIL_ENCRYPTION=tls
# 此值必須同 MAIL_USERNAME 一致
MAIL_FROM_ADDRESS=xxxxxxxxxxxxxx@qq.com
# 用來作為郵件的傳送者名稱
MAIL_FROM_NAME=番茄燉土豆的個人部落格

3. 如果需要支援佇列，請將 .ENV 配置檔案中，設定成

QUEUE_CONNECTION=redis

使用者切換除錯

預設只在除錯模式 .ENV 檔案中

APP_DEBUG=true

時啟用，且 config/sudosu.php 檔案中

// 允許使用的頂級域名
'allowed_tlds' => ['dev', 'local', 'test'],

頂級域名（Top Level Domain）加入你域名的頂級域名

第三方授權登入

目前專案中只支援 github 授權登入，因為只申請了 GitHub 的 OAuth application，如果你也需要使用 GitHub 作為第三方授權登入，那麼需要按照以下步驟進行：

1. 在 GitHub 上註冊一個 OAuth application

• Application name：你可以填寫你自己的應用名稱，比如：myWebBlog
• Homepage URL：首頁連線地址需要新增你自己的，比如：http://larablog.test
• Application description：應用描述可以隨便填寫，比如：自己的部落格
• Authorization callback URL：授權回撥地址，一定要填寫成： /login/github/callback ，比如，我這裡則需要填寫成：http://larablog.test/login/github/callback

2. 註冊成功之後，需要在 .ENV 配置檔案中填寫申請成功的 Client ID 和 Client Secret。填寫好之後，直接訪問 http://larablog.test/login/github 即可支援 GitHub 第三方授權登入，如果不設定 .ENV 配置檔案，則登入、註冊頁面不會顯示 GitHub 第三方授權登入入口。

# Github Client ID
GITHUB_CLIENT_ID=
# Github Client Secret
GITHUB_CLIENT_SECRET=

3. 擴充套件其它第三方授權登入。

   Socialite 目前支援 Facebook，Twitter，LinkedIn，Google，GitHub，GitLab 和 Bitbucket 的身份驗證。本專案已經對以上支援的第三方登入做了相容性處理，如果我們需要支援以上除 GitHub 以外的應用（因為目前已經設定好了 GitHub 相關的配置），那麼我們只需要按照以下的步驟配置即可。這裡以 Google 為例子。

• 第一步：申請 google 的 Client ID 和 Client Secret。
• 第二步：將申請的 Client ID 和 Client Secret 填寫入 .ENV 配置檔案中

GOOGLE_CLIENT_ID="your google client id"
GOOGLE_CLIENT_SECRET="your google client secret"

• 第三步：配置 app/services.php

'google' => [
    'client_id' => env('GOOGLE_CLIENT_ID'),  // google 客戶端授權 ID
    'client_secret' => env('GOOGLE_CLIENT_SECRET'),  // google 客戶端授權金鑰
    'redirect' => '/login/google/callback',  // 授權回撥連結 如果 redirect 配置項包含的是相對路徑，系統會自動將其轉化為完整 URL
],

• 第四步：將第三方服務新增到 app/Models/Auth/User.php => $allowedProviders 陣列中

public static $allowedProviders = ['github', 'google'];

• 第五步：直接訪問 /login/google 即可

自定義 Artisan 命令

命令	說明	Cron
php artisan larablog:calculate-active-user	生成活躍使用者	一個小時執行一次
php artisan larablog:sync-user-actived-at	從 Redis 中同步最後登入時間到資料庫中	每天早上 0 點準時

計劃任務

當前計劃任務主要是計算主頁右側 「活躍使用者」

artisan 命令為：

php artisan larablog:calculate-active-user

和同步 「使用者最後活躍時間」 到資料庫

artisan 命令為：

php artisan larablog:sync-user-actived-at

並且已經在 排程器 中設定好了相關程式碼。（排程器在 app/Console/Kernel.php 檔案的 schedule 方法中定義）

使用 Linux 系統的 Cron 計劃任務需執行

export EDITOR=vi && crontab -e

然後填入以下內容（注意將專案根目錄換成你自己的）
這裡我的專案根目錄為：/home/vagrant/Code/larablog

* * * * * php /home/vagrant/Code/larablog/artisan schedule:run >> /dev/null 2>&1

如果不設定計劃任務的話，直接執行以上 Artisan 命令的話會是如下情況：
「活躍使用者」將每 65 分鐘重新生成一次，設定計劃任務的話，預設一個小時重新生成一次。
「使用者最後活躍時間」將不會同步到資料庫中，將會直接從 Redis 中獲取，如果 Redis 中不存在，則以使用者註冊時間替代。

佇列清單

檔案路徑	說明	呼叫時機
app\Notifications\ArticleReplied.php	通知文章作者有新評論回覆	文章被評論以後 App\Observers\Portal\Article\ReplyObserver@created
app\Jobs\TranslateSlug.php	將文章標題翻譯為 Slug	文章儲存時 App\Observers\Portal\Article\ArticleObserver@saved

程式碼規範

遵循 PSR-2 編碼風格規範
遵循 PSR-12 編碼規範擴充

其他

程式碼中涵蓋了豐富的註釋，如果仍有不清楚之處，可以給我留言。
如果你覺得還不錯，請幫我點一下 Star，不勝感激 ！❤(❤´艸｀❤)

GitHub 地址
碼雲 地址

License

原始碼基於 MIT 協議釋出。