基於 Laravel6.x 構建的博客應用，支持 Markdown，支持圖片拖拽上傳，基於 RBAC 權限管理系統

基於 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；
• 支持友鏈
• 站點地圖
• RSS 訂閱

運行環境要求

• 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

1. 安裝擴展包依賴

// 先切換到 larablog 項目根目錄
cd larablog

// 執行安裝命令
composer install

1. 生成配置文件

cp .env.example .env

你能夠根據狀況修改 .env 文件裏的內容，如數據庫鏈接、緩存、郵件設置、第三方受權登陸等：

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

1. 生成數據表及生成測試數據

// 須要生成測試數據則執行：
php artisan migrate --seed

// 不須要生成測試數據則執行：
php artisan migrate

1. 生成祕鑰

php artisan key:generate

1. 建立 storage 軟鏈接

php artisan storage:link

1. 賦予 storage 相應權限

// 建議在 Linux 系統中新建一個 www 用戶，並設置該用戶不可登陸系統
useradd -s /sbin/nologin www

// 將項目目錄全部權賦予 www 用戶
chown -Rf www:www larablog

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

1. 配置 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...

• 配置相應的 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

1. 爲 NPM 和 Yarn 配置淘寶鏡像，加速安裝包下載

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

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

1. 使用 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 登陸
suin/php-rss-writer	rss 訂閱生成	生成 rss 訂閱代碼

前端擴展包使用狀況

擴展包	簡介描述	本項目應用場景
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 功能？

1. 郵箱發送配置 （請將如下配置換成你本身的郵箱配置）

若是你是使用的阿里雲 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=番茄燉土豆的我的博客

1. 若是須要支持隊列，請將 .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：受權回調地址，必定要填寫成： <Your domain>/login/github/callback ，好比，我這裏則須要填寫成：http://larablog.test/login/gi...

1. 註冊成功以後，須要在 .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=

1. 擴展其它第三方受權登陸。

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'];

• 第五步：直接訪問 <your domain>/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 中不存在，則以用戶註冊時間替代。

隊列清單

文件路徑	說明	調用時機
appNotificationsArticleReplied.php	通知文章做者有新評論回覆	文章被評論之後 AppObserversPortalArticleReplyObserver@created
appJobsTranslateSlug.php	將文章標題翻譯爲 Slug	文章保存時 AppObserversPortalArticleArticleObserver@saved

代碼規範

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

其餘

代碼中涵蓋了豐富的註釋，若是仍有不清楚之處，能夠給我留言。
若是你以爲還不錯，請幫我點一下 Star，不勝感激 ！❤(❤´艸｀❤)

GitHub 地址
碼雲 地址

License

源代碼基於 MIT 協議發佈。