Vue+Laravel 個人部落格

baymaxsjj發表於2020-10-31
VueLaravel

專案演示

個人部落格原文地址

這個專案是我大二疫情期間所寫，歷時3個月，主要是花費在學習Vue和Laravel，前端經過幾次改變，剛開始自己使用Bootstrap編寫元件，後來轉向使用Element UI,前後端參考天行九歌的開源部落格編寫，雖然開源但是大部分都是自己編寫，只是參考了其中的邏輯，畢竟這是我第一個正式的專案，之前在校學的都是毛皮，只有在實踐中才能發現自己的不足，此專案同樣適合和我一樣剛接觸但又沒有寫過一個像樣專案的人群。參考手摸手教你讓Laravel開發API更得心應手，我就是從這篇文章安照他的步驟一步一步來搭建Api,從中獲得不少知識
網站首頁：www.yunmobai.cn/
網站前端原始碼：gitee.com/baymaxsjj/by-vue-blog
網站後端原始碼：gitee.com/baymaxsjj/by-laravel-blo...
SEO優化：檢視我的文章 Vue前端總結——SEO優化，目前多個頁面被goole收錄，百度收錄了一個（本來兩個，不知道首頁收錄又沒了，現在只有一個友情連結被收錄了），但是可以看出頁面被正常解析了，頁面的標題和內容也正常顯示

ZV3sOmGs0C.png!large mdCGyQVJDa.png!large

此專案使用的第三方圖床，並配置多個圖床，可自定義選擇，也可使用又拍雲等

T4ko0JlmK6.png!large QoYpGwHoiX.png!large UJlKqMprpS.png!large
6OBxrBujfP.png!large vSjtQDSr90.png!large m1nYf1BbU0.png!large

專案介紹

Vue版本：2.6.12，Laravel版本：7.0
完成模組：
前臺：首頁介紹，文章展示，標籤展示，分類展示，文章解析，生成目錄，執行demo,模組顯示，留言評論，友情連結，登入，註冊，找回密碼，第三方登入（QQ,GITEE,GITHUB），
後臺：發表文章（模組管理，多平臺釋出，提交百度收錄），文章列表，使用者管理，友情連結，專案管理，成長路線，留言管理，網站公告，首頁輪播，音樂管理，

前端專案部署

安裝依賴

npm install

執行專案

npm run serve

打包

npm run build

vue cli配置參考

See Configuration Reference.

前後臺分開打包

在package.json中配置

 "scripts": {
        "serve_home": "vue-cli-service serve --home",
        "build_home": "vue-cli-service build --home",
        "serve_admin": "vue-cli-service serve --admin",
        "build_admin": "vue-cli-service build --admin "
    },

在vue.config.js配置

//開發生產環境判斷：true為生產環境
const IS_PROD = process.env.NODE_ENV === 'production';
//獲取在package.json 編譯或執行獲取自定義的配置名稱
let appName = process.argv.slice(0)[3].replace('--', '');
//編譯輸出名稱
let outputPath = appName === 'home' ? 'home' : 'admin'

多頁面配置，

    // 由於部分外掛，導致ie下空白
    transpileDependencies: ['vue-savedata', 'vue-baberrage'],
    //執行目錄：開發環境：都在根目錄。生產環境，前臺在根目錄，後臺在子目錄下執行
    publicPath: IS_PROD ? outputPath == 'home' ? '/' : '../' + outputPath + '/' : '/',
    // 輸出目錄，
    outputDir: '../' + outputPath,
    //多頁面配置
    pages: {
        //此處因為要前後臺分開打包，所以要註釋
        // about: {
        //     entry: 'src/pages/admin/main.js',
        //     template: 'public/admin.html',
        //     filename: 'admin.html',
        //     chunks: ['chunk-vendors', 'chunk-common', 'about'],
        //     title: 'BAYMAX後臺管理'
        // },
        index: {
            entry: 'src/pages/' + appName + '/main.js',
            template: `public/${appName}.html`,
            filename: 'index.html',
            chunks: ["chunk-vendors", "chunk-common", "index", 'runtime~index'],
            title: appName === 'home' ? '雲墨白的部落格-Start with Hello World' : 'BAYMAX後臺管理'
        }
    },

反向代理配置

由於專案使用到第三方的介面需要反向代理

  devServer: {
        sockHost: "localhost",
        disableHostCheck: true,
        port: 8080, // 埠號
        host: "0.0.0.0",
        https: false, // https:{type:Boolean}
        open: true, //配置自動啟動瀏覽器
        proxy: {
            //後臺介面
            "/apis": {
                // target: "http://127.0.0.1:80/api/v1", // 需要請求的地址
                target: process.env.VUE_APP_API_URL, // 需要請求的地址
                changeOrigin: true, // 是否跨域
                pathRewrite: {
                    "^/apis": "" // 替換target中的請求地址，也就是說，在請求的時候，url用'/proxy'代替'http://ip.taobao.com'
                }
            },
             //音樂介面
            "/music": {
                target: "https://music.liuzhijin.cn", // 需要請求的地址
                // target: process.env.VUE_APP_URL,   // 需要請求的地址
                changeOrigin: true, // 是否跨域
                pathRewrite: {
                    "^/music": "" // 替換target中的請求地址，也就是說，在請求的時候，url用'/proxy'代替'http://ip.taobao.com'
                }
            },
             //每日英語介面
            "/english": {
                target: "http://sentence.iciba.com", // 需要請求的地址
                // target: process.env.VUE_APP_URL,   // 需要請求的地址
                changeOrigin: true, // 是否跨域
                pathRewrite: {
                    "^/english": "" // 替換target中的請求地址，也就是說，在請求的時候，url用'/proxy'代替'http://ip.taobao.com'
                }
            },
            "/loimg": {
                target: "https://pc-store.lenovomm.cn/wallpapercontent/wallpaper/classify/tag_wallpapers", // 需要請求的地址
                // target: process.env.VUE_APP_URL,   // 需要請求的地址
                changeOrigin: true, // 是否跨域
                pathRewrite: {
                    "^/loimg": "" // 替換target中的請求地址，也就是說，在請求的時候，url用'/proxy'代替'http://ip.taobao.com'
                }
            }
        }
    },

nginx配置

location /apis {        
      proxy_pass 自己後端域名;
    }
    location /vendor/sitemap/styles/xml.xsl {        
      proxy_pass https://api.yunmobai.cn/vendor/sitemap/styles/xml.xsl;
    }
    location /music {
      proxy_pass https://music.liuzhijin.cn/;
    }
    location /english {
      proxy_pass http://sentence.iciba.com/;
    }

自動化指令碼

echo 同步遠端倉庫
git pull
echo 編譯主頁
npm run build_home
echo 刪除原始檔
rm -r ../js ../css ../img ../fonts
echo 拷貝主頁
cp -rf ../home/. ../
echo 刪除編譯檔案
rm -r ../home ../admin.html
echo 完成

後端專案部署

專案配置

# 安裝依賴
composer install 
# 生成key
php artisan key:generate
# 生成jwt-key
php artisan jwt:secret
# 生成資料庫表（由於後來修改表結構比較大，就沒有去修改資料庫遷移，可以直接將database/blog.sql匯入資料庫即可）
php artisan migrate
# 填充資料
php artisan db:seed
# 啟動服務
php artisan serve
# .env 上線配置，注意上線要修改，不然所有報錯將會在使用者端顯示，低版本Laravel 還可能會洩漏.evn配置檔案中重要資訊
APP_ENV=local 改成 APP_ENV=production
APP_DEBUG=true 改成 APP_DEBUG=false

第三方登入

此專案目前支援QQ,Gitee,GitHub登入，可以擴充套件，第三方登入包，下載安裝如下配置！Gitee和GitHub直接到個人賬號設定裡開啟就可以直接使用，如要申請QQ 登入，需要到QQ互聯註冊開發者，注意多次申請失敗（身份證稽核失敗情況）直接找線上客服，快速稽核通過，我就是搞了5，6此沒搞好，直接找到客服，十來分鐘就稽核通過了！

# 下載對應包，socialiteproviders/第三方登入名
composer require socialiteproviders/qq

# 新增事件監聽器 App/Providers/EventServiceProvider
protected $listen = [
    \SocialiteProviders\Manager\SocialiteWasCalled::class => [
        # 注意：官方有錯誤是QqExtendSocialite，不是QQ，這裡我按官方給的搞半天沒搞好，結果參看原檔案，才發現是Qq
        'SocialiteProviders\\QQ\\QqExtendSocialite@handle',
    ],
];

# configure config/services.php
'qq' => [
    'client_id' => env('QQ_CLIENT_ID'),
    'client_secret' => env('QQ_CLIENT_SECRET'),
    'redirect' => env('QQ_REDIRECT_URI'),
]
# .env 中配置
QQ_CLIENT_ID=App ID
QQ_CLIENT_SECRET=App Key
QQ_REDIRECT_URI=回撥地址
……
#其它包類似，把QQ改成對應名
# start building 
return Socialite::driver('qq')->redirect();

擴充套件第三方登入

由於此專案是動態路由，所以只需按照上方新增第三方登入包後，就可以直接使用。使用的動態路由根據第三方登入名為引數

//第三方登入請求地址
//party 動態引數，是第三方登入名。如：https://域名/login/qq/redirece 
Route::get('/login/{party}/redirect','UserController@redirectToProvider');
//第三方登入回撥地址
Route::get('/login/{party}/callback','UserController@handleProviderCallback');
//以下是控制器配置
 /**
    * 將使用者重定向到party認證頁面
    *
    * @return Response
    */
    public function redirectToProvider($party)
    {
        // dd($party);
        return Socialite::driver($party)->redirect();
    }
    /**
    * 從party獲取使用者資訊.
    *回撥地址
    * @return Response
    */
    public function handleProviderCallback($party)
    {
        $partyUser= Socialite::driver($party)->stateless()->user();
    }

安裝jwt

使用 JWT 對使用者身份驗證,

composer require tymon/jwt-auth
# 修改 config/app.php
'providers' => [
    ...
    Tymon\JWTAuth\Providers\LaravelServiceProvider::class,
]
# 釋出配置檔案
php artisan vendor:publish --provider="Tymon\JWTAuth\Providers\LaravelServiceProvider"
# 生成key
php artisan jwt:secret

安裝郵箱模板

#安裝郵件模版
composer require qoraiche/laravel-mail-editor
# 釋出配置檔案
php artisan vendor:publish --provider="qoraiche\mailEclipse\mailEclipseServiceProvider"
php artisan migrate
# 訪問地址
http://localhost:8080/maileclipse
# 修改模板  /resources/views
編寫郵箱模板，可以使用markdown語法也可使用html
# 修改內建模板樣式 /resources/viewsvendor
在該資料夾下修改對於的模組樣式及佈局
# .env
MAIL_MAILER=smtp
MAIL_HOST=smtp.qq.com
MAIL_PORT=465
MAIL_USERNAME=郵箱號
MAIL_PASSWORD=郵箱碼
MAIL_ENCRYPTION=ssl
MAIL_FROM_ADDRESS=郵箱號
MAIL_FROM_NAME=傳送者名

用於對文章瀏覽量統計！

composer require awssat/laravel-visits
# 新增配置檔案
php artisan vendor:publish --provider="awssat\Visits\VisitsServiceProvider"
# 修改.env檔案
CACHE_DRIVER=file 改成 CACHE_DRIVER=array
# 需要安裝redis，可以在寶塔皮膚中安裝啟動，修改密碼
#php 需要安裝redis 擴充套件，可在寶塔皮膚，php 擴充套件中安裝
#.env 配置 
REDIS_CLIENT=predis
REDIS_HOST=127.0.0.1
REDIS_PASSWORD=# redis 密碼
REDIS_PORT=6379

常用命令

# 新增模型 -m 生成資料庫遷移
php artisan make:model Models/Article -m
# 新增控制器
php artisan make:controller Api/ArticleController
# 新增驗證
php artisan make:request ArticleRequest
# 清除配置資訊快取
php artisan config:cache
php artisan config:clear
# 路由快取
php artisan route:cache
php artisan route:clear
# 資料填充
# 生成User模型的工廠
php artisan make:factory UserFactory --model=Models/User
# 生成User的資料填充
php artisan make:seeder UsersTableSeeder
# 資料填充
php artisan db:seed
# 填充指定模型
php artisan db:seed --class=UsersTableSeeder
# 重新生成資料庫表並填充資料
php artisan migrate:refresh --seed
# 進入資料填充測試
php artisan tinker

.env 模板

APP_NAME= 雲墨白
APP_ENV=# local/production
APP_KEY=#  key
APP_DEBUG=# true/false
APP_URL=http://localhost

LOG_CHANNEL=stack

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=# 資料庫名
DB_USERNAME=# 資料庫密碼
DB_PASSWORD=

BROADCAST_DRIVER=log
CACHE_DRIVER=array
QUEUE_CONNECTION=sync
SESSION_DRIVER=file
SESSION_LIFETIME=120

REDIS_HOST=127.0.0.1
REDIS_PASSWORD=null
REDIS_PORT=6379

MAIL_MAILER=smtp
MAIL_HOST=smtp.qq.com
MAIL_PORT=465
MAIL_USERNAME=# 郵箱名
MAIL_PASSWORD=# 郵箱密碼，qq郵箱需到郵箱賬戶設定了開啟POP3/SMTP服務 
MAIL_ENCRYPTION=ssl
MAIL_FROM_ADDRESS=# 郵箱
MAIL_FROM_NAME=# 傳送名

AWS_ACCESS_KEY_ID=
AWS_SECRET_ACCESS_KEY=
AWS_DEFAULT_REGION=us-east-1
AWS_BUCKET=

PUSHER_APP_ID=
PUSHER_APP_KEY=
PUSHER_APP_SECRET=
PUSHER_APP_CLUSTER=mt1

MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"

REDIS_CLIENT=predis
REDIS_HOST=127.0.0.1
REDIS_PASSWORD=# redis 密碼
REDIS_PORT=6379

GITEE_CLIENT_ID=# App ID
GITEE_CLIENT_SECRET=# App Key
GITEE_REDIRECT_URI=# App 回撥地址

GITHUB_CLIENT_ID=
GITHUB_CLIENT_SECRET=
GITHUB_REDIRECT_URI=

QQ_CLIENT_ID=
QQ_CLIENT_SECRET=
QQ_REDIRECT_URI=

UPYUN_PROJECT_NAME =# 又拍雲儲存名稱
UPYUN_OPERATOR_NAME =# 又拍雲賬號
UPYUN_OPERATOR_PASSWORD =# 又拍雲密碼
UPYUN_CNAME =# 又拍雲域名

JWT_SECRET=# jwt key
本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章