基于 Laravel6.x 構(gòu)建的博客應(yīng)用，支持 Markdown，支持圖片拖拽上傳，基于 RBAC 權(quán)限管理系統(tǒng)

首頁

超過十余年行業(yè)經(jīng)驗，技術(shù)領(lǐng)先，服務(wù)至上的經(jīng)營模式，全靠網(wǎng)絡(luò)和口碑獲得客戶，為自己降低成本，也就是為客戶降低成本。到目前業(yè)務(wù)范圍包括了：網(wǎng)站設(shè)計、成都網(wǎng)站設(shè)計，成都網(wǎng)站推廣，成都網(wǎng)站優(yōu)化，整體網(wǎng)絡(luò)托管，小程序定制開發(fā)，微信開發(fā)，成都app開發(fā)，同時也可以讓客戶的網(wǎng)站和網(wǎng)絡(luò)營銷和我們一樣獲得訂單和生意！

基于 RBAC 的權(quán)限管理后臺，Dashboard 頁面統(tǒng)計了用戶總數(shù)、文章發(fā)布總數(shù)、評論率、評論總數(shù)、文章支持按天、按月、按年統(tǒng)計、支持按分類、按標(biāo)簽統(tǒng)計……

登錄頁面

注冊頁面

支持 GitHub 授權(quán)登錄

支持郵箱重置密碼

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

Markdown 編輯器：支持拖拽粘貼上傳圖片、預(yù)覽、全屏、分屏預(yù)覽

項目概述

• 項目名稱：larablog
• 項目簡介：基于 laravel6.x 開發(fā)的博客項目
• 訪問地址：https://www.drling.xin/

功能如下

• 用戶認(rèn)證 —— 注冊、登錄、退出；
• 個人中心 —— 用戶個人中心，編輯資料；
• 用戶授權(quán) —— 作者才能刪除自己的內(nèi)容；
• 上傳圖片 —— 修改頭像和編輯文章時上傳圖片；
• 表單驗證 —— 使用表單驗證類；
• 重置密碼 —— 通過郵箱找回密碼
• 文章支持分類、多標(biāo)簽；
• 編輯文章支持 markdown 編輯器 、html 編輯器；
• markdown 編輯器支持拖拽上傳圖片、語法高亮、預(yù)覽、全屏、分屏實時預(yù)覽；
• 文章發(fā)布時自動 Slug 翻譯，支持使用隊列方式以提高響應(yīng)；
• 站點『活躍用戶』計算，一小時計算一次；
• 多角色權(quán)限管理 —— 允許站長，管理員權(quán)限的存在；
• 后臺管理 —— 基于 RBAC 后臺數(shù)據(jù)模型管理；
• 郵件通知 —— 發(fā)送新回復(fù)郵件通知，隊列發(fā)送郵件；
• 站內(nèi)通知 —— 文章有新回復(fù)；
• 自定義 Artisan 命令行 —— 自定義活躍用戶計算命令；
• 自定義 Trait —— 活躍用戶的業(yè)務(wù)邏輯實現(xiàn)；
• 自定義中間件 —— 記錄用戶的最后登錄時間；
• XSS 安全防御；
• 第三方授權(quán)登錄，目前支持 GitHub，兼容 Facebook，Twitter，LinkedIn，Google，GitHub，GitLab 和 Bitbucket 的身份驗證；
• 支持自定義 meta title、description、keywords；
• 支持友鏈

運行環(huán)境要求

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

開發(fā)環(huán)境部署和安裝

本項目代碼使用 PHP 框架 laravel6.x 開發(fā)，本地開發(fā)環(huán)境使用 Laravel Homestead。

基礎(chǔ)安裝

1. 克隆源代碼

克隆 larablog 源代碼到本地：

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

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

2. 安裝擴展包依賴

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

// 執(zhí)行安裝命令
composer install

3. 生成配置文件

cp .env.example .env

你可以根據(jù)情況修改 .env 文件里的內(nèi)容，如數(shù)據(jù)庫連接、緩存、郵件設(shè)置、第三方授權(quán)登錄等：

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

4. 生成數(shù)據(jù)表及生成測試數(shù)據(jù)

// 需要生成測試數(shù)據(jù)則執(zhí)行：
php artisan migrate --seed

// 不需要生成測試數(shù)據(jù)則執(zhí)行：
php artisan migrate

5. 生成秘鑰

php artisan key:generate

6. 創(chuàng)建 storage 軟連接

php artisan storage:link

7. 賦予 storage 相應(yīng)權(quán)限

// 建議在 Linux 系統(tǒng)中新建一個 www 用戶，并設(shè)置該用戶不可登錄系統(tǒng)
useradd -s /sbin/nologin www

// 將項目目錄所有權(quán)賦予 www 用戶
chown -Rf www:www larablog

// 給 storage 目錄賦權(quán)限
chmod -Rf 0755 larablog/storage/

6. 配置 hosts 文件 （如果直接想部署在線上環(huán)境，則跳過此步驟）

如果開發(fā)環(huán)境沒有采用 Laravel Homestead 則 ip 映射以你實際為主，一般為 127.0.0.1。我這里使用的 Laravel Homestead 虛擬機的 ip 地址為：192.168.10.10

// Linux 或 MacOS 環(huán)境

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

// Windows 環(huán)境
需要打開 C:/Windows/System32/Drivers/etc/hosts  文件，然后新增一行

192.168.10.10 larablog.test

前端安裝

1. 安裝 npm 和 yarn

CentOS / Fedora / RHEL 環(huán)境下

文檔地址：https://yarn.bootcss.com/docs/install/#centos-stable

• 配置相應(yīng)的 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 -

• 之后執(zhí)行以下任意一條命令，就可以了

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

Windows 環(huán)境下

• 安裝 node.js

直接去官網(wǎng) 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

• 監(jiān)控 resources 文件夾下的資源文件是否有發(fā)生改變。在 watch-poll 命令運行的情況下，一旦資源文件發(fā)生變化，Webpack 會自動重新編譯。

npm run watch-poll

// 如果遇到報錯，嘗試先執(zhí)行以下命令更新 npm 到最新版本，之后再次執(zhí)行監(jiān)控命令
npm install -g npm

• 編譯前端內(nèi)容

// 運行所有 Mix 任務(wù)...
npm run dev

// 運行所有 Mix 任務(wù)并縮小輸出..
npm run production

訪問入口

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

管理員賬號密碼如下：

username: 1414818093@qq.com
password: 123456

默認(rèn)網(wǎng)站第一位用戶為站長角色，第二位用戶為管理員角色。如果填充了測試數(shù)據(jù)，則默認(rèn)所有用戶的密碼為：123456

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

后端擴展包使用情況

擴展包	簡介描述	本項目應(yīng)用場景
laravel/ui	laravel 6.x UI 腳手架	前端頁面框架
barryvdh/laravel-ide-helper	能讓你的 IDE (PHPStorm, Sublime) 實現(xiàn)自動補全、代碼智能提示和代碼跟蹤等功能	代碼補全和智能提示
barryvdh/laravel-debugbar	頁面調(diào)試工具欄 (對 phpdebugbar 的封裝)	開發(fā)環(huán)境中的 DEBUG
overtrue/laravel-lang	支持 52 個國家的語言包	翻譯 Laravel 自帶模板
mews/captcha	圖片驗證碼	注冊頁面圖片驗證碼
intervention/image	圖片處理功能庫	用于圖片裁剪
summerblue/laravel-active	方便設(shè)置 active 類	文章排序添加 active 類
mews/purifier	用戶提交的 Html 白名單過濾	文章內(nèi)容的 Html 安全過濾，防止 XSS ***
guzzlehttp/guzzle	HTTP 請求套件	請求百度翻譯 API，翻譯文章標(biāo)題，做 SEO 優(yōu)化
overtrue/pinyin	基于 CC-CEDICT 詞典的中文轉(zhuǎn)拼音工具	翻譯文章標(biāo)題的備用方案
predis/predis	Redis 官方首推的 PHP 客戶端開發(fā)包	緩存驅(qū)動 Redis 基礎(chǔ)擴展包
laravel/horizon	隊列監(jiān)控	隊列監(jiān)控命令與頁面控制臺 /horizon
spatie/laravel-permission	角色權(quán)限管理	角色和權(quán)限控制
viacreative/sudo-su	用戶切換	調(diào)試環(huán)境中快速切換登錄賬號
erusev/parsedown	markdown 轉(zhuǎn)換 html 工具	文章模塊解析 markdown 語法
thephpleague/html-to-markdown	html 轉(zhuǎn)換成 markdown 工具	文章編輯采用 markdown 編輯器時
laravel/socialite	laravel 官方推薦社會化登錄	Github 登錄

前端擴展包使用情況

擴展包	簡介描述	本項目應(yīng)用場景
yarn add @fortawesome/fontawesome-free	Font Awesome 提供了可縮放的矢量圖標(biāo)	字體圖標(biāo)庫
npm i startbootstrap-sb-admin-2	界面簡潔美觀的皮膚	cms 后臺模板
npm install simplemde	markdown 編輯器	文章編輯器
npm install highlight.js	語法高亮工具	markdown 編輯器代碼語法高亮
npm install inline-attachment	文本框拖動上傳圖片工具	markdown 文本框圖片拖動上傳
multiselect.js	多選下拉框	文章多選標(biāo)簽
chartjs	圖表插件	后臺管理界面圖表

郵箱認(rèn)證

• 開發(fā)環(huán)境時將 .ENV 文件設(shè)置為如下所示，將郵箱認(rèn)證郵件發(fā)送至當(dāng)前日志中，以便調(diào)試

  MAIL_DRIVER=log

• 生產(chǎn)環(huán)境時，建議將 .ENV 文件中相關(guān)郵件設(shè)置為自己所需配置，以下為默認(rèn)配置

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

翻譯隊列

• 修改 .ENV 文件設(shè)置為

# 如果是開發(fā)環(huán)境的話，就把隊列驅(qū)動改回 sync 同步模式，也就是說不使用任何隊列，實時執(zhí)行：
QUEUE_CONNECTION=redis
REDIS_CLIENT=predis

• 啟動隊列系統(tǒng)，隊列在啟動完成后會進入監(jiān)聽狀態(tài)

php artisan queue:listen

或者使用

php artisan horizon

文章標(biāo)題翻譯

使用了百度翻譯 api，請將 .ENV中的百度 api 相關(guān)信息換成你自己的開發(fā)者信息

如果不采用百度翻譯翻譯文章標(biāo)題的話，那么不用配置 .ENV 文件中以下配置項

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

并且也不需要更改

QUEUE_CONNECTION=redis

默認(rèn)保持為

QUEUE_CONNECTION=sync

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

郵件通知

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

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

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

2. 郵箱發(fā)送配置 （請將以下配置換成你自己的郵箱配置）

如果你是使用的阿里云 ECS，那么一定要注意，阿里云的 ECS 默認(rèn)禁用了 25 端口，需要單獨申請解封25端口，點我解封阿里云 ECS 25端口，如果你不知道如何解封，請查看 解封步驟。當(dāng)然替代方案，你可以采用 465 端口，如果你打算采用 465 端口，那么需要將以下配置中的 MAIL_PORT 修改為 465,并且也需要將加密類型 MAIL_ENCRYPTION 修改為 ssl 即可，這里我才用的是 qq 郵箱，可能其他的郵箱服務(wù)有差異，視情況而定吧。

# 使用支持 ESMTP 的 SMTP 服務(wù)器發(fā)送郵件
MAIL_DRIVER=smtp
# QQ 郵箱的 SMTP 服務(wù)器地址，必須為此值
MAIL_HOST=smtp.qq.com
# QQ 郵箱的 SMTP 服務(wù)器端口，必須為此值
MAIL_PORT=25
# 請將此值換為你的 QQ + @qq.com
MAIL_USERNAME=xxxxxxxxxxxxxx@qq.com
# 密碼是我們第一步拿到的授權(quán)碼
MAIL_PASSWORD=xxxxxxxxx
# 加密類型，選項 null 表示不使用任何加密，其他選項還有 ssl，這里我們使用 tls 即可，如果出現(xiàn)報錯的話，多半是因為這個 smtp 主機不支持 TLS，那么只需要將此項設(shè)置為 null 即可。
MAIL_ENCRYPTION=tls
# 此值必須同 MAIL_USERNAME 一致
MAIL_FROM_ADDRESS=xxxxxxxxxxxxxx@qq.com
# 用來作為郵件的發(fā)送者名稱
MAIL_FROM_NAME=番茄燉土豆的個人博客

3. 如果需要支持隊列，請將 .ENV 配置文件中，設(shè)置成

QUEUE_CONNECTION=redis

用戶切換調(diào)試

默認(rèn)只在調(diào)試模式 .ENV 文件中

APP_DEBUG=true

時啟用，且 config/sudosu.php 文件中

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

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

第三方授權(quán)登錄

目前項目中只支持 github 授權(quán)登錄，因為只申請了 GitHub 的 OAuth application，如果你也需要使用 GitHub 作為第三方授權(quán)登錄，那么需要按照以下步驟進行：

1. 在 GitHub 上注冊一個 OAuth application

• Application name：你可以填寫你自己的應(yīng)用名稱，比如：myWebBlog
• Homepage URL：首頁連接地址需要添加你自己的，比如：http://larablog.test
• Application description：應(yīng)用描述可以隨便填寫，比如：自己的博客
• Authorization callback URL：授權(quán)回調(diào)地址，一定要填寫成： /login/github/callback ，比如，我這里則需要填寫成：http://larablog.test/login/github/callback

2. 注冊成功之后，需要在 .ENV 配置文件中填寫申請成功的 Client ID 和 Client Secret。填寫好之后，直接訪問 http://larablog.test/login/github 即可支持 GitHub 第三方授權(quán)登錄，如果不設(shè)置 .ENV 配置文件，則登錄、注冊頁面不會顯示 GitHub 第三方授權(quán)登錄入口。

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

3. 擴展其它第三方授權(quán)登錄。

   Socialite 目前支持 Facebook，Twitter，LinkedIn，Google，GitHub，GitLab 和 Bitbucket 的身份驗證。本項目已經(jīng)對以上支持的第三方登錄做了兼容性處理，如果我們需要支持以上除 GitHub 以外的應(yīng)用（因為目前已經(jīng)設(shè)置好了 GitHub 相關(guān)的配置），那么我們只需要按照以下的步驟配置即可。這里以 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 客戶端授權(quán) ID
    'client_secret' => env('GOOGLE_CLIENT_SECRET'),  // google 客戶端授權(quán)密鑰
    'redirect' => '/login/google/callback',  // 授權(quán)回調(diào)鏈接 如果 redirect 配置項包含的是相對路徑，系統(tǒng)會自動將其轉(zhuǎn)化為完整 URL
],

• 第四步：將第三方服務(wù)添加到 app/Models/Auth/User.php => $allowedProviders 數(shù)組中

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

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

自定義 Artisan 命令

命令	說明	Cron
php artisan larablog:calculate-active-user	生成活躍用戶	一個小時運行一次
php artisan larablog:sync-user-actived-at	從 Redis 中同步最后登錄時間到數(shù)據(jù)庫中	每天早上 0 點準(zhǔn)時

計劃任務(wù)

當(dāng)前計劃任務(wù)主要是計算主頁右側(cè) 「活躍用戶」

artisan 命令為：

php artisan larablog:calculate-active-user

和同步 「用戶最后活躍時間」 到數(shù)據(jù)庫

artisan 命令為：

php artisan larablog:sync-user-actived-at

并且已經(jīng)在 調(diào)度器 中設(shè)置好了相關(guān)代碼。（調(diào)度器在 app/Console/Kernel.php 文件的 schedule 方法中定義）

使用 Linux 系統(tǒng)的 Cron 計劃任務(wù)需執(zhí)行

export EDITOR=vi && crontab -e

然后填入以下內(nèi)容（注意將項目根目錄換成你自己的）
這里我的項目根目錄為：/home/vagrant/Code/larablog

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

如果不設(shè)定計劃任務(wù)的話，直接執(zhí)行以上 Artisan 命令的話會是如下情況：
「活躍用戶」將每 65 分鐘重新生成一次，設(shè)定計劃任務(wù)的話，默認(rèn)一個小時重新生成一次。
「用戶最后活躍時間」將不會同步到數(shù)據(jù)庫中，將會直接從 Redis 中獲取，如果 Redis 中不存在，則以用戶注冊時間替代。

隊列清單

文件路徑	說明	調(diào)用時機
app\Notifications\ArticleReplied.php	通知文章作者有新評論回復(fù)	文章被評論以后 App\Observers\Portal\Article\ReplyObserver@created
app\Jobs\TranslateSlug.php	將文章標(biāo)題翻譯為 Slug	文章保存時 App\Observers\Portal\Article\ArticleObserver@saved

代碼規(guī)范

遵循 PSR-2 編碼風(fēng)格規(guī)范
遵循 PSR-12 編碼規(guī)范擴充

其他

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

GitHub 地址
碼云 地址

License

源代碼基于 MIT 協(xié)議發(fā)布。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)cdcxhl.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

網(wǎng)站題目：基于Laravel6.x構(gòu)建的博客應(yīng)用，支持Markd-創(chuàng)新互聯(lián)
轉(zhuǎn)載注明：http://weahome.cn/article/djjsde.html