Vue 3 重构版本介绍

博客前台已使用Vue 3重构,去除Element,自己编写所需功能组件，完成了导航栏、全局提示、通知提醒框、空状态、无限滚动、按钮、头像、回到顶部、评论、音乐播放器、分页器、滑动条、Markdown预览、图片。其中图片样式来自Element,音乐播放器样式来自APlayer.其余的组件样式来自Ant Design of Vue。
本次前台打包后大小从1.3M降到0.9M左右。去除了注册，登录，用户信息功能！采用第三方登录！全站响应式布局，采用更简洁的设计！统一的设计风格，后台现在升级到Vue 3+Element Plus，添加数据统计。
Vue3前端源码：gitee.com/baymaxsjj/by-vue3-blog
Vue3UI组件源码：gitee.com/baymaxsjj/by-vue3-ui
Laravel后端源码：gitee.com/baymaxsjj/by-laravel-blo...

Vue 2 版本介绍

这个项目是我大二疫情期间所写，历时3个月，主要是花费在学习Vue和Laravel，前端经过几次改变，刚开始自己使用Bootstrap编写组件，后来转向使用Element UI,前后端参考天行九歌的开源博客编写，虽然开源但是大部分都是自己编写，只是参考了其中的逻辑，毕竟这是我第一个正式的项目，之前在校学的都是毛皮，只有在实践中才能发现自己的不足，此项目同样适合和我一样刚接触但又没有写过一个像样项目的人群。参考手摸手教你让Laravel开发API更得心应手，我就是从这篇文章安照他的步骤一步一步来搭建Api,从中获得不少知识
网站首页：www.yunmobai.cn/
Vue 2前端源码：gitee.com/baymaxsjj/by-vue-blog
Laravel后端源码：gitee.com/baymaxsjj/by-laravel-blo...
SEO优化：查看我的文章（无需修改Vue源码，采用服务器开小灶，对爬虫的请求由无头浏览器解析后，返回给爬虫） Vue前端总结——SEO优化，目前多个页面被goole收录，百度收录了一个（本来两个，不知道首页收录又没了，现在只有一个友情链接被收录了），但是可以看出页面被正常解析了，页面的标题和内容也正常显示，百度快照也能显示我的首页！如果没经过处理的Vue项目也应该只有一段文字！而不是一个正常页面

此项目使用的第三方图床，并配置多个图床，可自定义选择，也可使用又拍云等

项目介绍

Vue版本：3.0.3（2.6.12），Laravel版本：7.0
完成模块：
前台：首页介绍，文章展示，标签展示，分类展示，文章解析，生成目录，运行demo,模块显示，留言评论，友情链接，（登录，注册，找回密码）Vue 2，第三方登录（QQ,GITEE,GITHUB），
后台：数据统计(Vue 3),发表文章（模块管理，多平台发布(Vue 2)，提交百度收录），文章列表，用户管理，友情链接，项目管理，成长路线，留言管理，网站公告，首页轮播，音乐管理，

前端项目部署

安装依赖

npm install

运行项目

//运行网站前台
npm run serve_home
//运行网站后台
npm run serve_admin

打包

//编译网站前台
npm run build_home 
//编译网站后台
npm run build_admin

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 协议》，转载必须注明作者和本文链接