基于 Laravel6.x 構(gòu)建的博客應(yīng)用，支持 Markd

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

首頁(yè)

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

登錄頁(yè)面

注冊(cè)頁(yè)面

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

支持郵箱重置密碼

同時(shí)兼容 HTML 編輯器和 Markdown 編輯器

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

項(xiàng)目概述

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

功能如下

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

運(yùn)行環(huán)境要求

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

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

本項(xiàng)目代碼使用 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. 安裝擴(kuò)展包依賴

// 先切換到 larablog 項(xiàng)目根目錄
cd larablog

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

3. 生成配置文件

cp .env.example .env

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

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

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

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

// 不需要生成測(cè)試數(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)中新建一個(gè) www 用戶，并設(shè)置該用戶不可登錄系統(tǒng)
useradd -s /sbin/nologin www

// 將項(xiàng)目目錄所有權(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 映射以你實(shí)際為主，一般為 127.0.0.1。我這里使用的 Laravel Homestead 虛擬機(jī)的 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

請(qǐng)安裝最新版本的 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 命令運(yùn)行的情況下，一旦資源文件發(fā)生變化，Webpack 會(huì)自動(dòng)重新編譯。

npm run watch-poll

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

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

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

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

訪問入口

• 首頁(yè)地址： http://larablog.test
• 后臺(tái)管理：http://larablog.test/admin

管理員賬號(hào)密碼如下：

username: 1414818093@qq.com
password: 123456

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

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

后端擴(kuò)展包使用情況

前端擴(kuò)展包使用情況

郵箱認(rèn)證

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

  MAIL_DRIVER=log

• 生產(chǎn)環(huán)境時(shí)，建議將 .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

翻譯隊(duì)列

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

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

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

php artisan queue:listen

或者使用

php artisan horizon

文章標(biāo)題翻譯

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

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

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

并且也不需要更改

QUEUE_CONNECTION=redis

默認(rèn)保持為

QUEUE_CONNECTION=sync

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

郵件通知

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

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

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

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

如果你是使用的阿里云 ECS，那么一定要注意，阿里云的 ECS 默認(rèn)禁用了 25 端口，需要單獨(dú)申請(qǐng)解封25端口，點(diǎn)我解封阿里云 ECS 25端口，如果你不知道如何解封，請(qǐng)查看 解封步驟。當(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
# 請(qǐng)將此值換為你的 QQ + @qq.com
MAIL_USERNAME=xxxxxxxxxxxxxx@qq.com
# 密碼是我們第一步拿到的授權(quán)碼
MAIL_PASSWORD=xxxxxxxxx
# 加密類型，選項(xiàng) null 表示不使用任何加密，其他選項(xiàng)還有 ssl，這里我們使用 tls 即可，如果出現(xiàn)報(bào)錯(cuò)的話，多半是因?yàn)檫@個(gè) smtp 主機(jī)不支持 TLS，那么只需要將此項(xiàng)設(shè)置為 null 即可。
MAIL_ENCRYPTION=tls
# 此值必須同 MAIL_USERNAME 一致
MAIL_FROM_ADDRESS=xxxxxxxxxxxxxx@qq.com
# 用來作為郵件的發(fā)送者名稱
MAIL_FROM_NAME=番茄燉土豆的個(gè)人博客

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

QUEUE_CONNECTION=redis

用戶切換調(diào)試

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

APP_DEBUG=true

時(shí)啟用，且 config/sudosu.php 文件中

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

頂級(jí)域名（Top Level Domain）加入你域名的頂級(jí)域名

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

目前項(xiàng)目中只支持 github 授權(quán)登錄，因?yàn)橹簧暾?qǐng)了 GitHub 的 OAuth application，如果你也需要使用 GitHub 作為第三方授權(quán)登錄，那么需要按照以下步驟進(jìn)行：

1. 在 GitHub 上注冊(cè)一個(gè) OAuth application

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

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

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

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

   Socialite 目前支持 Facebook，Twitter，LinkedIn，Google，GitHub，GitLab 和 Bitbucket 的身份驗(yàn)證。本項(xiàng)目已經(jīng)對(duì)以上支持的第三方登錄做了兼容性處理，如果我們需要支持以上除 GitHub 以外的應(yīng)用（因?yàn)槟壳耙呀?jīng)設(shè)置好了 GitHub 相關(guān)的配置），那么我們只需要按照以下的步驟配置即可。這里以 Google 為例子。

• 第一步：申請(qǐng) google 的 Client ID 和 Client Secret。
• 第二步：將申請(qǐng)的 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 配置項(xiàng)包含的是相對(duì)路徑，系統(tǒng)會(huì)自動(dòng)將其轉(zhuǎn)化為完整 URL
],

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

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

• 第五步：直接訪問 <your domain>/login/google 即可

自定義 Artisan 命令

計(jì)劃任務(wù)

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

artisan 命令為：

php artisan larablog:calculate-active-user

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

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 計(jì)劃任務(wù)需執(zhí)行

export EDITOR=vi && crontab -e

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

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

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

隊(duì)列清單

代碼規(guī)范

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

其他

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

GitHub 地址
碼云 地址

License

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